![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Header "Navbar" Section
Links: Code Index // Position at W3Schools.com // z-index at W3Schools.com // Background & Header Images Tutorial
The links at the top of your journal are contained in the header section of your coding. This doesn't include your header image but you can put it in this section. I tend to have mine at the bottom so it is easy to find. Your header image is controlled by the coding for headerimage. These two elements will effect each other.
The coding I would like to work with is from my layout Oxygen.
Let me cut out exactly what we will be working with....
#header: As you can see the header (navbar) is set at 1000px. This is the width of the content because I want it across the entire journal. I can also set this to 100% because of the position element which is set to inherit. This means it is inheriting it's width from the content which is 1000px and 100% of 1000 is 1000. I didn't tell you there would be math, did I? You will also notice other elements under your basic header coding which impliment designs into links. We will get to that.
div#header a, div#header a:link, div#header a:visited, div#header a:active: The commas mean I'm coding four different sections of coding exactly the same. These elements are better when they are the same but there might be reasons to separate them much like the journal links.
div#header li.view: This is coding from the link on your navbar that you are currently on. Good example is going to Calendar. This will be the coding for that link when you are looking at the calendar page. It is often evident in the recent posts link.
div#header a:hover: This will be our link hover customizing.
ul.navheader: This element is seen in red in the picture above and controls this section. At times you may want to customize this for example if you'd want to make the width smaller and the height taller then you'd move the header section up with margins so you'd likely get a vertical menu on your image.
ul.navheader li: This element is shown in gray. This is the actual links and on occasion they get their own customizations. FYI elements that have follow ups like li usually denote a list like a bulleted list or a numbered list. Often in coding a menu is based on a list format that has been customized.
.title, .subtitle: This is where you customize the Title or Subtitle of your journal. You can seperate them for customizing each separately. I almost never customize these because I don't like the function of applying the post's subject. Customizing these elements is much like customizing anything. Remove the display:none; and see where you're title is. Then add margins, padding, font, etc to customize it.
.headerimage: As you can see I put under the MISC section which I have at the bottom of my coding so it is easy to find. You'll notice that it's width is set to 960px instead of 1000px. Typically, I would have it set to 1000px. But this layout has a header image border to make it look like it too is on this white background. We do that in the border element but you need to allow for it in the width. So our image is 1000px but according to the border it has 20px on all sides. But here we are only counting left and right: 1000px - 20px left - 20px right = 960px. See how that worked out?
Time to break down all the coding:
#header {
position: inherit;
width: 1000px;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !important;
line-height: 130%;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
z-index: 199;
}
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
ul.navheader {
list-style: none;
line-height: 24px;
margin-left: 15px;
padding: 0;
}
ul.navheader li {
display: inline;
list-style: none;
}
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: center top;
}
We are moving down to the bottom of the coding where I put the headerimage just so it is easily found. This will work much like the background images.
So now here is what our coding has come to:
Theme: Flexible Squares
Actions: Creating Your Own Layout: Header "Navbar" Section
Links: Code Index // Position at W3Schools.com // z-index at W3Schools.com // Background & Header Images Tutorial
The links at the top of your journal are contained in the header section of your coding. This doesn't include your header image but you can put it in this section. I tend to have mine at the bottom so it is easy to find. Your header image is controlled by the coding for headerimage. These two elements will effect each other.
The coding I would like to work with is from my layout Oxygen.
Let me cut out exactly what we will be working with....
#header: As you can see the header (navbar) is set at 1000px. This is the width of the content because I want it across the entire journal. I can also set this to 100% because of the position element which is set to inherit. This means it is inheriting it's width from the content which is 1000px and 100% of 1000 is 1000. I didn't tell you there would be math, did I? You will also notice other elements under your basic header coding which impliment designs into links. We will get to that.
div#header a, div#header a:link, div#header a:visited, div#header a:active: The commas mean I'm coding four different sections of coding exactly the same. These elements are better when they are the same but there might be reasons to separate them much like the journal links.
div#header li.view: This is coding from the link on your navbar that you are currently on. Good example is going to Calendar. This will be the coding for that link when you are looking at the calendar page. It is often evident in the recent posts link.
div#header a:hover: This will be our link hover customizing.
ul.navheader li: This element is shown in gray. This is the actual links and on occasion they get their own customizations. FYI elements that have follow ups like li usually denote a list like a bulleted list or a numbered list. Often in coding a menu is based on a list format that has been customized.
.title, .subtitle: This is where you customize the Title or Subtitle of your journal. You can seperate them for customizing each separately. I almost never customize these because I don't like the function of applying the post's subject. Customizing these elements is much like customizing anything. Remove the display:none; and see where you're title is. Then add margins, padding, font, etc to customize it.
.headerimage: As you can see I put under the MISC section which I have at the bottom of my coding so it is easy to find. You'll notice that it's width is set to 960px instead of 1000px. Typically, I would have it set to 1000px. But this layout has a header image border to make it look like it too is on this white background. We do that in the border element but you need to allow for it in the width. So our image is 1000px but according to the border it has 20px on all sides. But here we are only counting left and right: 1000px - 20px left - 20px right = 960px. See how that worked out?
Time to break down all the coding:
#header {
position: inherit;
width: 1000px;
height: 30px;
text-align: left;
color: #282828;
padding: 0px;
margin-bottom: 5px;
font-family: "Abel", georgia, arial;
font-size: 16px !important;
line-height: 130%;
letter-spacing: 1px;
text-transform: lowercase;
font-weight: none;
z-index: 199;
}
- background-color: You will notice it's lack of presence. This is because our header is transparent and removing this line in the header element works.
- position: This is a complicated coding line. Generally we are working with inherit or relative. But if we wanted our content to be 1000px but our navbar to go across the entire browser like here at Layout Lounge we'd change it to absolute. This is similar to fixed but allows for the the element to scroll with the page. But absolute will change things. You'll have to use margins to move the sidebar, content and header down into place to accomodate and headerimage. This is why I give instructions along those lines it layouts like Layout Lounge 1.0. You can learn more about Position at W3Schools.com.
- width: As stated above this is typically the width of your content though in Gradient Hover it is smaller so it can look like it is hovering over the layout. And at
![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-community.gif)
outlander_watch I made it smaller to make it seem like it was part of the above headerimage. - height: This is a good line of code to have for something like the navbar.
- padding: This is set to 0 because most of the customizing is going to be done in the header link sections.
- margin: We have a bottom margin of 5 just to get a little extra separation from the sidebar and posts.
- letter-spacing: So say the font you are using seems like the letters are a bit squished together. You can add letter-spacing. It depends on how you wish the text to look.
- z-index: What is it and why would we want it in our coding? This is for stack order. I've had someone ask how they can get a fixed header image with all the other elements scrolling up beneath the image. This is necessary. A value of 199 is as high as you can go and means it is on top over everything. You can also go the other extreme and have something set as -199. In this layout the z-index is not necessary but is left for instances which it might be. I have left it in to give a brief explaintion. You can find more info at W3Schools.com.
div#header a, div#header a:link, div#header a:visited, div#header a:active {
padding: 5px 5px 5px 5px;
margin: 0px 2px 0px 0px;
letter-spacing: 1px;
color: #0da4d3;
text-align: left;
border:0px solid #E0E0E0;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-ms-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear;
}
- We are going to skip padding, margin, letter-spacing, and text-align because I've gone over them in previous elements and I think we get it.
- color: This is a link and the opening code says it is for your header a (a mean in html when you us the a href to make a link), an a:link, visited and active. These are all pretty much the same unless you want to separate out visited which I never do. But this is where you decided what the color of you navbar link will be.
- border: Sometimes you want it and sometimes you don't. You can remove it if it is set at 0px but here I'm showing you the possibility.
- transition: This is just a change on the box-shadow and here we are making the shadow move slowly so it doesn't just abruptly change. This function will become more apparent when we hover over the image. The different lines (-webkit, -moz, -ms, -o) are added to cover other browsers.
div#header a:hover {
color: #000000;
-webkit-box-shadow: #f6f6f6 0 0 10px inset;
-moz-box-shadow: #f6f6f6 0 0 10px inset;
-ms-box-shadow: #f6f6f6 0 0 10px inset;
-o-box-shadow: #f6f6f6 0 0 10px inset;
box-shadow: #f6f6f6 0 0 10px inset;
}
- This coding is more simple because we don't need to retell the layout to give us fonts and sizes. It is pulling all that from the header element. But if you want the hover color to change this is where you'd put it.
- box-shadow: This is going to work together with the previous code. Above we have the linear ease of 0.3seconds. Now we are telling our hover links to ease a shadow of the color F6F6F6. The 0s mean that the shadow is centered horizontally and vertically so we see it all around the link. But then we say we want the ease out of the shadow to be 10px. If we stopped there it would ease out on the outside of the link but because we added inset now the shadow is coming towards the link words.
ul.navheader {
list-style: none;
line-height: 24px;
margin-left: 15px;
padding: 0;
}
- list-style: As I said above many menus in CSS is made from lists which us the li coding. But you don't actually want to see the list so we go with none.
- line-height: isn't necessary here but I've added it to make sure my links have their room.
- margin: Typically I've have this set to 0 but I want all of the links to move over just a bit without moving the header sections. I would do this in ul.navheader. This moving the red section not the black.
ul.navheader li {
display: inline;
list-style: none;
}
- display: This is similar to position but actually means what is says. How ill it be displayed. Our answer here would be inline because we do want to see the links in a line. If you wanted them in a block list over your image you'd say block.
- list-style: Again we don't want to see the list so we say none.
.headerimage {
position: relative;
width: 960px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: 20px solid #ffffff;
background-color: transparent !important;
background-image: url(HEADER IMAGE);
background-repeat: no-repeat;
background-position: center top;
}
We are moving down to the bottom of the coding where I put the headerimage just so it is easily found. This will work much like the background images.
- position: We generally want this set to relative because then it is relative to the layout. For Layout Lounge it is absolute which then involve adjusting margins for many other elements of a layout.
- width & height: Okay super important. I explained above why it isn't set to the width of our layout or the width of the actual image. But it is important that the height be accurate. Occasionally if and image looks okay cutting off 100px of it's bottom I will go down to 200px but I've helped many a person wondering why there is a gap below their header. Their image will be 300px in height and in their coding it says 400px. This is the reason for the gap.
- border: Again as I explained above we used this border to give our header a look as if it is layout on this white layout. If I put it to 0px then I need to change the width.
- background-color: Here I went for transparent (not the !important) but in this layout it would be good to use white so if you don't have the image in place it still looks like part of the overall layout.
- background image, repeat, postition: Just like the background images. More in-depth Tutorial HERE.
- If you would like a gap at the top of your journal to seperate you journal from the LJ bar at the top you will want to add a margin-top bit of coding to the .headerimage section.
So now here is what our coding has come to:
Any questions about this tutorial? Please Comment.
layout_lounge
(no subject)
Date: 2015-05-13 07:44 pm (UTC)(no subject)
Date: 2015-05-13 11:02 pm (UTC)Hey again.:)
Date: 2015-05-15 04:45 pm (UTC)I feel soooo Stupid....I figured it out.
Date: 2015-05-15 05:24 pm (UTC)Re: I feel soooo Stupid....I figured it out.
Date: 2015-05-21 11:47 pm (UTC)Congrats!
(no subject)
Date: 2015-07-17 06:01 pm (UTC)Since LJ updated the navigation bar I'm getting a gap between the nav bar and my header image, but only on my friends page.
Here's the link to my own posts: http://voicesinherbody.livejournal.com/ (http://voicesinherbody.livejournal.com/)
Here's a link to my friends page: http://voicesinherbody.livejournal.com/friends/ (http://voicesinherbody.livejournal.com/friends/)
I'm not sure why it's only happening on the one page and not the others. :(
(no subject)
Date: 2015-07-17 09:44 pm (UTC)So when setting the margins for your journal do it while looking at the front page of your journal. It stinks but there isn't much we can do about it.
You can read more about it HERE (http://layout-lounge.livejournal.com/43475.html).
I think this gap is only visible to the owner of the journal so I suggest logging out to see what your friends page looks like.
(no subject)
Date: 2016-01-07 12:49 am (UTC)(no subject)
Date: 2017-07-20 08:11 am (UTC)(no subject)
Date: 2017-09-07 08:25 pm (UTC)