Header length and page navigation length

  • gullguttenmathias · Member ·

    Hi.

    Can anyone help me with a code to costumize the length and placement of header and page navigation? I want both to be centered over the main section of the blog, and not to go over the sidebar. The width of the main section is 740px.

    The blog I need help with is: (visible only to logged in users)

  • timethief · Member ·

    Hello there,
    I can’t help with CSS editing. I’m replying only so your thread will bumped onto the front page of the forum where be seen by the Volunteers who can help you.
    Best wishes with your blog. :)

  • thesacredpath · Member ·

    To left-align the navigation, add the following to #pagenav

    float:left;

    To change the width of the header to match the content area, add the following to #header-img

    width:740px;

    Also, add the following to #header-img img

    width:730px;

    The above squishes your header image, but it doesn’t look too bad unless you toggle back and forth between them. You would have to make a new header image that is 730px wide by 198px tall and then insert it into the proper place in the CSS (after going back to “no header image” from the dashboard.

    Since the header image is handled in the markup instead of the CSS, I would have to play around with things a little to figure out where exactly to insert the code.

    If you wanted to implement the above and then make the new image and upload it to your media library, and post the URL of that image here, then I could work on getting it onto your blog through the CSS

  • gullguttenmathias · Member ·

    Here is a url to my header in size 730x198px.

  • thesacredpath · Member ·

    You know, I’m sorry to say this has me stumped. I can get a background color in the header area, but not the image.

    I’m afraid this one is going to have to wait for devblog. I’ll email him and point him to this thread. He has a day job, so it might be a little while before he can get to this.

  • hallluke · Member ·

    Where exactly are you trying to place the header image on your blog at the moment? I assume you want it above the title and navigation. Try adding the code below to the bottom of your CSS stylesheet and let me know if it is close to what you were aiming for.

    #logo {background-image:url("http://i277.photobucket.com/albums/kk45/theri86/header730x198.png"); height:198px; width:730px; margin-bottom:90px; border:5px solid #EFEFEF;}
.site-title {padding-top:230px;}

    lh

  • devblog · Member ·

    If having the image above the title is what you’re looking for, the hallluke’s solution is the way to go.

    If you want the image to be the background of the blog title, and want the menu bar to be “part” of the header (share the white background, and stuff), then try this:

    #logo, #pagenav {
border-left: solid 5px #efefef;
border-right: solid 5px #efefef;
width: 730px;
}

#logo {
background: #fff url(http://i277.photobucket.com/albums/kk45/theri86/header730x198.png) 0 0 no-repeat;
border-top: solid 5px #efefef;
height: 198px;
}

.site-title {margin: 110px 10px 0; text-shadow: #fff 0 -2px;}

#pagenav {
background: #fff;
border-bottom: solid 5px #efefef;
height: 50px;
margin-top: 0;
padding: 20px 0 0;
}

#pagenav ul li {padding: 0; margin: 0 -4px 0 1px;}
  • devblog · Member ·

    “the hallluke’s”

    should read “theN halluke’s”

    BTW, if you want the image to be the background of your blog title, then I’d suggest making an image that would make the text more readable.

  • gullguttenmathias · Member ·

    My tought was that the header will be placed betweet the page navigation and the main section of the blog. I have uploaded the header to my blog so you can see, but i have to get the header in by using css, because the picture is getting stretched when uploading it trough wordpress. It is to high.

  • gullguttenmathias · Member ·

    *placed between, not betweet. :P Bad english after a long day at work and after beeing at summerparty at my sons kindergarden. Getting a bit sleepy now. :P

  • devblog · Member ·

    Well it seems you got it working the way you wanted, so case close?

  • gullguttenmathias · Member ·

    Its not working yet. I need to get the header in with the css. Now it is uploaded trough wordpress, and the header is too high. I need to be able adjust the headers lenght and hight, as well as putting a url for the header in to the css. Im only able to adjust the lenght at this time.

  • devblog · Member ·

    Based on your description it looks fine to me… This is what I see:

    Having said that, do you want the gaps to be closer together? in other words, make the margin above “THERIBLOG” smaller as well as the one below the image and the blog contents?

    Also, although I could do it through CSS (but don’t wanna do it), please remove the header through WP so that it doesn’t interfere with the code when I test it.

  • gullguttenmathias · Member ·

    You see what i see, but the header picture, with the shoe and sunglasses in it is streched so it is to high. I dont want the picture to be this high. Now it is 198 px high, but i need it to be around 150px high. I have adjusted the length, but the hight is what i need to fix now.

  • devblog · Member ·

    well, first you need to create an image 150px high. Since this is a background image, you cannot modify the image dimensions proper.

    For now, I’ll work with this image, but whenever you have the new one, please post its URL.

    I’ll post something whenever I can.

  • gullguttenmathias · Member ·

    This one is 730px x 170px

    It was better with 170px instead of 150px with this picture.

  • devblog · Member ·

    Ok, add this to your CSS and see if this is what you wanted.

    #header {
height: 270px;
position: relative;
}

#pagenav{margin-top: 70px;}

#logo {
border: solid 5px #efefef;
bottom: 15px;
background: #fff url(http://i277.photobucket.com/albums/kk45/theri86/girlheaderhvit730.png) 0 0 no-repeat;
height: 170px;
position: absolute;
width: 731px;
}

#header .site-title {margin-top: -160px;}
  • gullguttenmathias · Member ·

    Just what i needed devblog!!!! :D Thank you so much!!! :D

  • devblog · Member ·

    You’re welcome.

  • gullguttenmathias · Member ·

    One more question, if anyone reads this. When i go to one of the pages on my blog, the blogname that says theriblog moves down, over the header. How do i fix this? I want it to be on the top of the page al the time.

1 2
  • The topic ‘Header length and page navigation length’ is closed to new replies.