Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Help Aligning Header Image

    Hi,

    I had a header designed for my WP site. I like the header dimensions even though the bottom of it is getting cut off.

    1) Can anyone tell me where in my style.css file that I would modify the code to fit this header. My site is:

    http://tinyurl.com/ykg5utl

    Essentially, I want to lower the orange bar.
    I've attached the WP theme style sheet and header jpg files for reference.

    2) I'd also like to know how to get the Shearling Boots (black title0 which
    is part of the h1 tag in the theme to be positioned where the
    Shearling Boot (orange title) is. I guess I should have the orange one
    removed from the header image.

    3) How do I get ride of the jagged edges on the orange bar under the header?


    Any advice appreciated

    George
    Attached Thumbnails Attached Thumbnails Need Help Aligning Header Image-header-bg.jpg  
    Attached Files Attached Files

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your CSS and fix the errors in it, see http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    The way to comment inside CSS is like
    Code:
    /*
    commented items here 
    */
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding a background image to the header

    You have to add an additional style in your header. Aside from the following styles:

    #header {
    background:yellow none repeat scroll 0 0;
    border-right:1px solid #E4E4E4;
    overflow:hidden;
    padding:11px 20px;
    }


    You may also want to add:

    background-image: url (file location);

    or

    background-image: url(/media/header-bg.jpg);

    The orage bar should go down automatically, but if not, you should add few pixels for the top padding of the orange bar..

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by gmr324 View Post
    Hi,

    1) Can anyone tell me where in my style.css file that I would modify the code to fit this header. My site is:

    http://tinyurl.com/ykg5utl

    Essentially, I want to lower the orange bar.
    I've attached the WP theme style sheet and header jpg files for reference.
    Make the #header the height you want. In this example I've given it the same height as it's background image, I also removed the top/bottom padding -
    Code:
    #header {
    	position: relative;
    	/*padding-bottom: 10px; this one is being ignored*/
    	overflow: hidden;
    	background: #ffffff ;
            background: #000000 url('http://www.shearlingboots.org/wp-content/themes/love-the-orange/images/header-bg.jpg') no-repeat;
            border-left: 1px solid #E4E4E4;
    	border-right: 1px solid #E4E4E4;
    	padding: 0 20px;
    height: 133px;
    }
    2) I'd also like to know how to get the Shearling Boots (black title0 which
    is part of the h1 tag in the theme to be positioned where the
    Shearling Boot (orange title) is. I guess I should have the orange one
    removed from the header image.
    You've pretty much answered that one.
    3) How do I get ride of the jagged edges on the orange bar under the header?
    That would require a different image or, if it's just orange you want, no image at all. The image your using, Looks like the end piece of a navigation bar.
    Try just orange instead, like this -
    Code:
    #mainNav {
    	background: #ea7521;
    	padding: 10px 0 10px 10px;
    	color: #EF9552;
    	border-left:1px solid #E4E4E4;
    	border-right:1px solid #E4E4E4;
    	clear:left;
    	height:19px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    I appreciate the help. I will be having the Shearling Boots title removed from the header image since the I positioned the h1 title properly.
    However, there is a space between the Orange bar and the header that is driving me crazy! Also, this space varies depending on which browser
    you look at the site through (IE, FF)

    Any final advice appreciated

    George

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •