SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    614
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Header image on top of eachother???

    I am stumped and I know its the simplest thing I am missing.

    As you can see here.

    Code:
    http://wolphewebdesign.com/Clients/Brandon/
    The header images on the right look like they are under the left images.

    If anyone can point out what I am missing I would appreciate it.

    HTML
    Code:
    <body>
    <center>
    <div id="container">
    <div id="head1"></div>
    <div id="head2"></div>
    <div id="head3"></div>
    <div id="head4"></div>
    
    
    </div><!--Closes container-->
    </center>
    
    </body>
    CSS
    Code:
    body {
    	background:url(images/bg.jpg);
    	}
    
    #container {
    	width:1020px;
    	
    	}
    
    #head1 {
    	background-image:url(images/head1.png);
    	height: 86px;
    	width: 512px;
    	float: left;
    	}
    	
    #head2 {
    	background-image:url(images/head2.png);
    	height:86px;
    	width:538px;
    	
    	}
    	
    #head3 {
    	background-image:url(images/head3.png);
    	width:512px;
    	height:54px;
    	float: left;
    	}
    	
    #head4 {
    	background-image:url(images/head4.png);
    	width:538px;
    	height:54px;
    	}
    Thanks In Advance

    David

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Even if you floated #head2 and #head4 to the right, the layout would still be broken, because their combined width exceeds the contaner width.

    Really, though, there's no reason to have those images split up. Make them one image.

    Better still, detach the text from the background image and have one large background and place the text on top. You can still use image replacement techniques to keep the fancy fonts and styling, but text should not be provided via an image alone.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Looks you just fixed it

    Anyway, please don't use <center>. It's deprecated.

    Code css:
    #container {
      width: 1050px; /* not 1020px ;) */
      margin: 0 auto;
    }
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  4. #4
    SitePoint Guru laflair13's Avatar
    Join Date
    Nov 2004
    Location
    TN
    Posts
    614
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made image bigger but its still messed up
    Thanks In Advance

    David

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,109
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    LOL, you aren't listening. If you are just going to use images, just use one great big one. Don't call it a website, though. As the wise ancients used to say, "An image maketh not a website".
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

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