I am working on a code pen and am having an issue where initially my main element would be exactly to the right of my nav bar (on the left side with height = 100%), but not it is overlapped by the nav bar, even though I added a margin-left earlier wide enough to allow the main to be seen. Here is the CSS code:
html,
body {
min-width: 290px;
color: hsla(214, 100%, 39%, 1);
font-family: "Germania One", Helvetica, sans-serif;
font-size: 17px;
line-height: 1.25;
background-color: hsla(239, 60%, 40%, 0.49);
}
h1 {
color: black;
}
code {
background-color: hsla(179, 8%, 40%, 0.49);
border-radius: 3px;
color: white;
display: block;
text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
padding: 10px;
margin: 15px;
}
#navbar {
z-index: 1;
position: fixed;
background-color: hsla(246, 81%, 24%, 1);
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: hsla(264, 80%, 39%, 1);
}
header {
color: white;
font-size: 30px;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#navbar a {
color: white;
text-decoration: none;
cursor: pointer;
}
#navbar ul {
list-style: none;
height: 88%;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
border: 1px solid;
border-bottom-width: 0px;
padding: 8px;
padding-left: 45px;
position: relative;
left: -50px;
width: 100%;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
#main-doc header {
text-align: left;
margin: 0px;
}
section article {
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 10px 0px 0px 10px;
}
#Boulder-img {
width: 80%;
}
#Sherpas-img {
width: 90%;
}
@media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
code {
overflow-x: scroll;
}
#navbar {
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
#main-doc section {
color: black;
/* padding-top: 240px; */
}
}
@media only screen and (max-width: 400px) {
#navbar {
font-size: .75em;
}
#navbar ul {
height: 222px;
}
}
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
Introduction paragraph
<code>
insert example code here
</code>
It looks like I will have to do 5 of these code elements in the project. In order to display the symbol "<", I have to type
&+l+t
using those characters above without the plus signs. ">" is made by using the following in the same way:
&+g+t
I don't know how to display those characters together without it automatically displaying as those carrot symbols. I will ask on StackOverFlow (coding website/forum).
I could do a documentation page describing what I already know and will use to make this page but I can't be bothered :p.
So I posted my question on StackOverFlow, perhaps I will update in this section (sorry if it is long) if I get an answer. I've gotten the idea to use the code elements to do small features within the page to explain how I made certain parts of it. I also
read through the prompt completely (glanced over it), and it seems that that was the only road bump. Thanks and enjoy.
:)
Early life paragraph
first photo header
![]()
header for story
story paragraph
![]()
To code in the photos above, I used the img element. The coding goes as follows:
<img src="linkofimagegoeshere" alt="descriptionincasephotofails" id="goodtohaveidtoalterappearancewithCSS">
first move paragraph
I later moved to a small town in blank for high school
Some Technical Documentation
So it turns out that you can display the code of how to code in a carrot symbol inside of a coding element without having what you type turn into a carrot itself. Sorry if that made no sense, this is hard to describe unless it is seen visually. Here is
the code that you can enter in order to show &+l+t and &+g+t without them turning into carrots (basically ampersand has it's own sort of reference code).
<code> turns into <code>
In order to prevent &+l+t (etc.) to turn into a carrot, the ampersand code is &+amp;+lt or gt. Please don't send me further down this rabbithole. I don't want to learn how to display that one without the plus signs.
If it appears that some of my CSS code matches that of the example, it is that I am following along with the code as to learn what all of it means and how it works. I'll set most of the copied values the same but I like to adjust them to learn more
about the associated properties. I definitely did all of the HTML by myself and half of the CSS alone. Once I got stumped, however, I looked at the example's code. I was trying to use flex boxes to make the nav bar, but it turns out that just
using absolute/relative position with margin, padding, top, left, etc. works better.
final paragraph
On top of that, I am also:
- lifting weights
- walking and jogging two miles daily
- playing guitar
- learning to code
- making weekly videos documenting my journey
- blank
and
- blank
I'm hoping to get back to my social life as well.
I've gone a long way already but I have much longer to go.
Thanks for reading! :)
Run code snippetExpand snippet
I am still new to all of this and honestly don't know where the issue would be so I pasted the whole css code, except for my font import.
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
