SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cannot get Images to Display - HELP please :(

    Hey guys,
    Okay I'm really struggling with getting image placement on a website I'm re-making for my first 'client' (a friend of mine opened a store and they needed a website so I offered). It is currently up and running and looks like this: http://www.originalgangsterburgers.com

    What I'm trying to do is make it so that the body extends down the page instead of having it compressed into that little white box.

    My problem is not being able to get other images to display like the extender body image which will be the background for additional text so that the layout looks seamless. Right now there's just a black square where the image should be.

    Here is my html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<title>Original Gangster Burgers Inc</title>
    		<meta http-equiv="Content-Type"
    			content="text/html; charset=iso-8859-1" />
    		<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
    		<link rel="stylesheet" type="text/css" href="styles2.css" />
    		
    	</head>
     
    	<body>
    		<div id="navigation">
    				<ul>
    					<li><a id="home" href="http://www.originalgangsterburgers.com/index.html"></a></li>
    					<li><a id="aboutus" href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
    					<li><a id="menu" href="http://www.originalgangsterburgers.com/menu.html"></a></li>
    					<li><a id="photos" href="http://www.originalgangsterburgers.com/construction.html"></a></li>
    					<li><a id="directions" href="http://www.originalgangsterburgers.com/directions.html"></a></li>
    					<li><a id="contactus" href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
    				</ul>
    			
    		</div>
    		<div id="contentwrapper">
    				<h1 class="beef">
    					GOT BEEF!
    				</h1>
    				<p class="beef">
    				Can You Handle Our Burgers?
    				</p>
    				
    				<img class=home src=images/home.png></img>
     				
    
    				<p><h1>
    				This Month's Special
    				</h1></p>
    
    				<img class=home src=images/januarypromofront.jpg></img>
    				<img class=home src=images/januarypromoback.jpg></img>
    		</div>
    		
    		<div id=extendbody">
    		
    		</div>
    
    		<div id="footer">
    			<img src="images/images/footer.jpg" height="70px" width="1024px" alt="Copyright 2009 Original Gangster Burgers Inc">
    		</div>
     
    	</body>
    
    <div id="preload">
       <img src="images/homenav.png" width="1" height="1" alt="" />
       <img src="images/homehover.png" width="1" height="1" alt="" />
       <img src="images/aboutusnav.png" width="1" height="1" alt="" />
       <img src="images/aboutushover.png" width="1" height="1" alt="" />
       <img src="images/menunav.png" width="1" height="1" alt="" />
       <img src="images/menuhover.png" width="1" height="1" alt="" />
       <img src="images/photosnav.png" width="1" height="1" alt="" />
       <img src="images/photoshover.png" width="1" height="1" alt="" />
       <img src="images/directionsnav.png" width="1" height="1" alt="" />
       <img src="images/directionshover.png" width="1" height="1" alt="" />
       <img src="images/contactusnav.png" width="1" height="1" alt="" />
       <img src="images/contactushover.png" width="1" height="1" alt="" />
    
    </div>
    </html>

    Here is my css:

    Code:
    div#preload { display: none; }
    
    body {
      background-image: url(images/images/ogbg.jpg);
      background-repeat: no-repeat;
      background-color: #000000;
      color: #000000;
      background-position: 30px 30px;
    }
    
    #navigation {
      position: absolute;
      top: 223px;
      left: 120px;
      display: block; 
      width:1024px; 
      height:32px;
    }
    
    
    
    #contentwrapper {
      position: absolute;
      top: 240px;
      left: 100px;
      width: 880px;
    }
    
    #extendbody {
      height: 461px;
      width: 1024px;
      background: url(../images/extendbody.jpg) no-repeat 728px 30px;
    }
    
    
    
    #footer {
      position: absolute;
      top: 1189px;
      left: 30px;
    }
    
    
    
    #navigation ul {
      margin: 0;
      padding: 0;
    }
    #navigation li {
      display: inline;
    }
    
    
    
    
    #navigation a#home {
      display: block;
      position: absolute;
      top: 3px;
      left: 1px;
      height: 29px;
      width: 47px;
      background: url(images/homenav.png) ;
    }
    
    #navigation a#home:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 1px;
      height: 29px;
      width: 47px;
      background: url(images/homenav.png) ;
    }
    
    #navigation a#home:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 29px;
      width: 49px;
      background: url(images/homehover.png) ;
      background-position: -316px 0 no-repeat;
    }
    
    #navigation a#home:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 29px;
      width: 49px;
      background: url(images/homehover.png) ;
      background-position: -330px 0 no-repeat;
    }
    
    
    
    
    #navigation a#aboutus {
      display: block;
      position: absolute;
      top: 3px;
      left: 102px;
      height: 29px;
      width: 76px;
      background: url(images/aboutusnav.png) ;
    }
    
    #navigation a#aboutus:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 102px;
      height: 29px;
      width: 76px;
      background: url(images/aboutusnav.png) ;
    }
    
    #navigation a#aboutus:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 101px;
      height: 29px;
      width: 78px;
      background: url(images/aboutushover.png) ;
      background-position: -350px 0 no-repeat;
    }
    
    #navigation a#aboutus:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 101px;
      height: 29px;
      width: 78px;
      background: url(images/aboutushover.png) ;
      background-position: -370px 0 no-repeat;
    }
    
    
    
    
    
    
    
    #navigation a#menu {
      display: block;
      position: absolute;
      top: 3px;
      left: 234px;
      height: 29px;
      width:47px;
      background: url(images/menunav.png) ;
    }
    
    #navigation a#menu:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 234px;
      height: 29px;
      width: 47px;
      background: url(images/menunav.png) ;
    }
    
    #navigation a#menu:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 233px;
      height: 29px;
      width: 49px;
      background: url(images/menuhover.png) ;
      background-position: -390px 0 no-repeat;
    }
    
    #navigation a#menu:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 233px;
      height: 29px;
      width: 49px;
      background: url(images/menuhover.png) ;
      background-position: -410px 0 no-repeat;
    }
    
    
    
    
    
    
    #navigation a#photos {
      display: block;
      position: absolute;
      top: 3px;
      left: 339px;
      height: 29px;
      width:62px;
      background: url(images/photosnav.png) ;
    }
    
    #navigation a#photos:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 339px;
      height: 29px;
      width: 62px;
      background: url(images/photosnav.png) ;
    }
    
    #navigation a#photos:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 338px;
      height: 29px;
      width: 64px;
      background: url(images/photoshover.png) ;
      background-position: -430px 0 no-repeat;
    }
    
    #navigation a#photos:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 338px;
      height: 29px;
      width: 64px;
      background: url(images/photoshover.png) ;
      background-position: -450px 0 no-repeat;
    }
    
    
    
    
    
    
    
    #navigation a#directions {
      display: block;
      position: absolute;
      top: 3px;
      left: 457px;
      height: 29px;
      width:89px;
      background: url(images/directionsnav.png) ;
    }
    
    #navigation a#directions:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 457px;
      height: 29px;
      width: 89px;
      background: url(images/directionsnav.png) ;
    }
    
    #navigation a#directions:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 456px;
      height: 29px;
      width: 91px;
      background: url(images/directionshover.png) ;
      background-position: -470px 0 no-repeat;
    }
    
    #navigation a#directions:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 456px;
      height: 29px;
      width: 91px;
      background: url(images/directionshover.png) ;
      background-position: -490px 0 no-repeat;
    }
    
    
    
    
    
    
    
    
    #navigation a#contactus {
      display: block;
      position: absolute;
      top: 3px;
      left: 582px;
      height: 29px;
      width:94px;
      background: url(images/contactusnav.png) ;
    }
    
    #navigation a#contactus:visited {
      display: block;
      position: absolute;
      top: 3px;
      left: 582px;
      height: 29px;
      width: 94px;
      background: url(images/contactusnav.png) ;
    }
    
    #navigation a#contactus:hover {
      display: block;
      position: absolute;
      top: 0px;
      left: 581px;
      height: 29px;
      width: 96px;
      background: url(images/contactushover.png) ;
      background-position: -510px 0 no-repeat;
    }
    
    #navigation a#contactus:active {
      display: block;
      position: absolute;
      top: 0px;
      left: 581px;
      height: 29px;
      width: 96px;
      background: url(images/contactushover.png) ;
      background-position: -530px 0 no-repeat;
    }
    
    
    
    
    
    h1 {
      color: #FFFFFF;
      font: bold 1.6em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
      padding: 0px 10px 3px 10px;
      background-color: #000000;
    }
    h2 {
      color: #000000;
      font: bold 1.5em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
      padding: 0px 10px 3px 10px;
    }
    p {
      color: #000000;
      font: 1em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
      padding: 0px 10px 3px 20px;
    }
    
    p.number {
      font: bolder 2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
      color: #cc0000;
    }
    
    .email {
      font-weight: bolder;
      color: #cc0000;
    }
    
    h1.beef {
      font-size: 2.5em;
      text-align: center;
      padding: 0px 0px 0px 0px;
      margin-bottom: 0;
    }
    
    p.beef {
      font: bold 1.2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
      text-align: center;
      margin-top: 0;
      text-decoration: underline;
    }
    p.nopadding {
      padding: 0;
      margin: 0;
    }
    
    img#menu {
      margin-top: 10px;
      margin-left: 60px;
      padding: 0px;
      border: 5px solid #000000;
    }
    .scroll img.home {
      image-align: center;
      margin: 0 0 20px 60px;
      padding: 0;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry but I get a bit confused easily . Can you point exactly what black box is supposed to have an image on it?

    I notice you are using an awful lot of absolute positioning there and it shouldn't be used to lay out a page, but rather small segments
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The part that's supposed to have an image on the background is the the extendbody div. I used the absolute positioning because i used the hover effect for the navbar (you can see it at the website I posted) so I had to do the rest absolute or it threw everything off. Unless there is a way I can do just the navbar as absolute and the rest as relative, let me know how cause I struggled a lot with that.

    P.S. What's the reasoning for not using absolute pos. for layout?

  4. #4
    SitePoint Zealot agarcia831's Avatar
    Join Date
    Nov 2009
    Location
    California
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as the image for the #extendbody area, one of the reasons the background image may not be showing up is because of a missing quotation mark in the html...

    Code:
    <div id="extendbody">
    Also, I noticed an inconsistent use of quotation marks around class and src values. not exactly sure how problematic that could be, but it's probably better to make a habit of always putting attribute values within "".

    ...and lastly, instead of using a closing < /img >, you can simply close the image tag like this...

    Code:
    <img src="mypic.jpg" width="720" height="100" />
    Done nit-picking. I'll shove off so Ryan can do his thing.

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    thanks for that. I actually realized that and validated the code, fixed it up and now it passes the validation. This is the new html code, I forgot to post it again:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    	<head>
    		<title>Original Gangster Burgers Inc</title>
    		<meta http-equiv="Content-Type"
    			content="text/html; charset=iso-8859-1" />
    		<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
    		<link rel="stylesheet" type="text/css" href="styles2.css" />
    		
    	</head>
     
    	<body>
    		<div id="navigation">
    				<ul>
    					<li><a id="home" href="http://www.originalgangsterburgers.com/index.html"></a></li>
    					<li><a id="aboutus" href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
    					<li><a id="menu" href="http://www.originalgangsterburgers.com/menu.html"></a></li>
    					<li><a id="photos" href="http://www.originalgangsterburgers.com/construction.html"></a></li>
    					<li><a id="directions" href="http://www.originalgangsterburgers.com/directions.html"></a></li>
    					<li><a id="contactus" href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
    				</ul>
    			
    		</div>
    		<div id="contentwrapper">
    				<h1 class="beef">
    					GOT BEEF!
    				</h1>
    				<p class="beef">
    				Can You Handle Our Burgers?
    				</p>
    				
    				<img class="home" src="images/home.png" alt="" />
     				
    
    				<h1>
    				This Month's Special
    				</h1>
    
    				<img class="home" src="images/januarypromofront.jpg" alt="" />
    				<img class="home" src="images/januarypromoback.jpg" alt="" />
    		</div>
    		
    		<div id="extendbody">
    		
    		</div>
    
    		<div id="footer">
    			<img src="images/images/footer.jpg" height="70px" width="1024px" alt="Copyright 2009 Original Gangster Burgers Inc" />
    		</div>
    
    <div id="preload">
       <img src="images/homenav.png" width="1" height="1" alt="" />
       <img src="images/homehover.png" width="1" height="1" alt="" />
       <img src="images/aboutusnav.png" width="1" height="1" alt="" />
       <img src="images/aboutushover.png" width="1" height="1" alt="" />
       <img src="images/menunav.png" width="1" height="1" alt="" />
       <img src="images/menuhover.png" width="1" height="1" alt="" />
       <img src="images/photosnav.png" width="1" height="1" alt="" />
       <img src="images/photoshover.png" width="1" height="1" alt="" />
       <img src="images/directionsnav.png" width="1" height="1" alt="" />
       <img src="images/directionshover.png" width="1" height="1" alt="" />
       <img src="images/contactusnav.png" width="1" height="1" alt="" />
       <img src="images/contactushover.png" width="1" height="1" alt="" />
    
    </div> 
    	</body>
    
    
    </html>

    But it still doesn't work :'( tear tear lol

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, I went to the link you posted and I was unable to e ven find the #extendbody element in the HTML?? The source code is very different in the live link then from what you posted...are you sure it is the correct link?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no no I tried to explain in the first post that the live link is what it looks like now but that I'm trying to change the layout so that it doesn't have that scroll box but instead the text and the background image run vertically down the page like a "normal" website. It makes it easier to use. So for that, I need to have an extra image that I can add to the site to make enough room for the text when I need it... do you know what I'm trying to say?

    For example.... look at www.mint.com
    The first page, then watch what happens to the background image when you go to different pages with more text. They added an extra image in the middle of the regular background image to accommodate the rest of the text.

    Unfortunately for me, that website is too complex (javascript and more from what I can see) to figure out.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    For example.... look at www.mint.com
    The first page, then watch what happens to the background image when you go to different pages with more text. They added an extra image in the middle of the regular background image to accommodate the rest of the text.
    Maybe they do it with Javascript, as I don't have Javascript and the fuzzy white stuff at the edges does NOT continue down the sides of the longer pages for me at all... and really, they don't need to use scripting for that, they just chose to (and that's ok because it's not important anyway).

    P.S. What's the reasoning for not using absolute pos. for layout?
    The reasoning is, Absolute positioning is usually (not always) very brittle, and newbs tend to latch onto it right away for the wrong reasons (because it looks like it let's people place stuff exactly where they want).

    Exceptions to this general rule would be doing funky stuff like Andy Clarke does, or using Absolute Positioning tricks for things like "equal columns" (which needs some hackage to work in IE6). Otherwise, most of us devs tend to use abso-po-ing for small things on a page, where it's sorta encapsulated by a positioned parent and can't cause havok on the rest of the page (as you may have noticed with your menu).

    I haven't had time to actually look at the site in question but whenever someone asks about making something "stretch down" then I start thinking in that direction (equal-column or height tricks).

    *Edit okay took a VERY quick look... first, I think you want
    <img src="images/body.jpg" height="461px" width="1024px" alt="">
    to be a background image of someone instead.

    Second, .scroll is going to never stretch out of the white area so long as you limit it with a height declaration. Since absolute positioning takes stuff out of the "flow" (how HTML boxes will act when left alone, not positioned), then the usual things we can count on don't work like that.

    Could you post an image of what you would like the site to look like? Even if it's a photoshop thingie, or even Paint, doesn't matter... that would really help us understand exactly where you want to go with this... rather than only working on "making .scroll "stretch" down" because we'd like to remove the absolute positioning and still have it "work" for you. That prolly means re-evaluating the other elements (typical in CSS).

    *edit 2 since attachements take time to get approved, throw the image up on the server holding the site you're working on... then you can just post the link.

    *edit3 just wanted to say, the artwork design is excellent! I love it.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to remove all the absolute positioning as mentioned and just repeat that background position correctly.

    I think you were looking for something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Original Gangster Burgers Inc</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="styles2.css" />
    <style type="text/css">
    html,body{margin:0;padding:0;}
    body {
        background:#000;
        color: #fff;
    }
    #outer{
        width:1024px;
        margin:auto;
        color:#000;
        background:url(http://www.originalgangsterburgers.com/images/body.jpg) repeat-y 0 0;
    }
    #header {
        position: relative;
        height:235px;
    }
    #header h1,#header h1 em {
        margin:0;
        width:1024px;
        height:235px;
        display:block;
        position:relative;
    }
    #header h1 em{
        background:url(http://www.originalgangsterburgers.com/images/header.png) no-repeat 0 0;
        left:0;
        top:0;
        position:absolute;
    }
    
    #body {
        width:1024px;
    }
    #footer {
        width:1024px;
        height:72px;
        background:url(http://www.originalgangsterburgers.com/images/footer.jpg) no-repeat 0 0;
    }
    #navigation {
        position: absolute;
        top: 193px;
        left: 90px;
        display: block;
        width:1024px;
        height:32px;
    }
    #navigation ul {
        margin: 0;
        padding: 0;
    }
    #navigation li,#navigation a {
        position:absolute;
        height: 0;
        width: 0;
        top: 0;
        left:0;
    }
    #navigation a {
        position:absolute;
        height: 29px;
        width: 49px;
    }
    #navigation li#home{background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;}
    #navigation li#home a{
        background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
        top: 3px;
        left: 1px;
    }
    #navigation li#home a:hover,
    #navigation li#home a:active {
        background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
        top:0;
        left:0;
    }
    
    #navigation li#aboutus{background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;}
    #navigation li#aboutus a{
        background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
        top: 3px;
        left: 102px;
        width: 78px;
    }
    #navigation li#aboutus a:hover,
    #navigation li#aboutus a:active {
        background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
        top:0;
        left:100px;
    }
    
    #navigation li#menu{background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;}
    #navigation li#menu a{
        background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
        top: 3px;
        left: 234px;
        width: 47px;
    }
    #navigation li#menu a:hover,
    #navigation li#menu a:active {
        background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
        top:0;
        left:233px;
    }
    #navigation li#photos{background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;}
    #navigation li#photos a{
        background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
        top: 3px;
        left: 339px;
        width: 62px;
    }
    #navigation li#photos a:hover,
    #navigation li#photos a:active {
        background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
        top:0;
        left:338px;
    }
    #navigation li#directions{background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;}
    #navigation li#directions a{
        background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
        top: 3px;
        left: 457px;
        width: 89px;
    }
    #navigation li#directions a:hover,
    #navigation li#directions a:active {
        background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
        top:0;
        left:456px;
    }
    #navigation li#contactus{background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;}
    #navigation li#contactus a{
        background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
        top: 3px;
        left: 582px;
        width: 94px;
    }
    #navigation li#contactus a:hover,
    #navigation li#contactus a:active {
        background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
        top:0;
        left:581px;
    }
    .scroll {
        margin-left: 60px;
        width: 902px;
    }
    h1 {
        color: #FFFFFF;
        font: bold 1.6em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
        background-color: #000000;
    }
    h2 {
        color: #000000;
        font: bold 1.5em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
    }
    p {
        color: #000000;
        font: 1em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 20px;
    }
    p.number {
        font: bolder 2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        color: #cc0000;
    }
    .email {
        font-weight: bolder;
        color: #cc0000;
    }
    h1.beef {
        font-size: 2.5em;
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin-bottom: 0;
    }
    p.beef {
        font: bold 1.2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        text-align: center;
        margin-top: 0;
        text-decoration: underline;
    }
    p.nopadding {
        padding: 0;
        margin: 0;
    }
    img#menu {
        margin-top: 10px;
        margin-left: 60px;
        padding: 0px;
        border: 5px solid #000000;
    }
    .scroll img.home {
        image-align: center;
        margin: 0 0 20px 60px;
        padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1><em></em></h1>
            <div id="navigation">
                <ul>
                    <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                    <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                    <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                    <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                    <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                    <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
                </ul>
            </div>
        </div>
        <div id="body">
            <div class="scroll">
                <h1 class="beef"> GOT BEEF! </h1>
                <p class="beef"> Can You Handle Our Burgers? </p>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
                <h1> This Month's Special </h1>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
            </div>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>
    I removed that pre-load nonsense as it's a very bad method. Just include the hover state in the same image as the normal state and then swap the background image on hover.

    In the example above I've pre-loaded it anyway by applying it to the anchors parent and hiding it. It saves using any extra elemetns but is a little too complicated when you could do it more easily with the double image technique.

    Hope it helps anyway.

  10. #10
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    This is what I want it to look like (just the image) on a black background:
    http://www.originalgangsterburgers.com/images/demo.jpg

    The last poster got it to look almost exactly what I wanted (and I'm not too sure exactly how! I'm trying to figure out the code) the only issue is that there is a black line running between the header and the body, also the footer is positioned on the left whereas the body and header are centered.

    Thanks for all your help, just hoping someone can help me figure out the line and how to position the footer. You guys are awesome and I'm still learning

    *Edit* OH and I just realized the demo image doesn't have the nav links on it but that's okay, you still get the idea for the layout

  11. #11
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and I just noticed also that the footer covers part of the body

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by dynamic.flare View Post
    Hey,
    This is what I want it to look like (just the image) on a black background:
    http://www.originalgangsterburgers.com/images/demo.jpg
    Looks almost exactly like the code I posted

    the only issue is that there is a black line running between the header and the body,
    That line seems to be part of your header image itself.

    also the footer is positioned on the left whereas the body and header are centered.
    Looks exactly like your drawing to me and is centered as it should be unless you mean something else?

    and I just noticed also that the footer covers part of the body
    Again it looks much like your drawing. You should make sure the footer background sits inside the repeating outer if you don't want a clash of backgrounds although they seem to merge quite well in the demo I posted.

    Here is the code again and I've shortened the header height so that your black line will disappear.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Original Gangster Burgers Inc</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="styles2.css" />
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    body {
        background:#000;
        color: #fff;
    }
    #outer {
        width:1024px;
        margin:auto;
        color:#000;
        background:url(http://www.originalgangsterburgers.com/images/body.jpg) repeat-y 0 0;
    }
    #header {
        position: relative;
        height:230px;
    }
    #header h1, #header h1 em {
        margin:0;
        width:1024px;
        height:230px;
        display:block;
        position:relative;
        overflow:hidden;
    }
    #header h1 em {
        background:url(http://www.originalgangsterburgers.com/images/header.png) no-repeat 0 0;
        left:0;
        top:0;
        position:absolute;
    }
    #body {
        width:1024px;
    }
    #footer {
        width:1024px;
        margin:auto;
        height:72px;
        background:url(http://www.originalgangsterburgers.com/images/footer.jpg) no-repeat 0 0;
    }
    #navigation {
        position: absolute;
        top: 193px;
        left: 90px;
        display: block;
        width:1024px;
        height:32px;
    }
    #navigation ul {
        margin: 0;
        padding: 0;
    }
    #navigation li, #navigation a {
        position:absolute;
        height: 0;
        width: 0;
        top: 0;
        left:0;
    }
    #navigation a {
        position:absolute;
        height: 29px;
        width: 49px;
    }
    #navigation li#home {
        background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
    }
    #navigation li#home a {
        background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
        top: 3px;
        left: 1px;
    }
    #navigation li#home a:hover, #navigation li#home a:active {
        background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
        top:0;
        left:0;
    }
    #navigation li#aboutus {
        background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
    }
    #navigation li#aboutus a {
        background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
        top: 3px;
        left: 102px;
        width: 78px;
    }
    #navigation li#aboutus a:hover, #navigation li#aboutus a:active {
        background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
        top:0;
        left:100px;
    }
    #navigation li#menu {
        background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
    }
    #navigation li#menu a {
        background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
        top: 3px;
        left: 234px;
        width: 47px;
    }
    #navigation li#menu a:hover, #navigation li#menu a:active {
        background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
        top:0;
        left:233px;
    }
    #navigation li#photos {
        background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
    }
    #navigation li#photos a {
        background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
        top: 3px;
        left: 339px;
        width: 62px;
    }
    #navigation li#photos a:hover, #navigation li#photos a:active {
        background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
        top:0;
        left:338px;
    }
    #navigation li#directions {
        background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
    }
    #navigation li#directions a {
        background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
        top: 3px;
        left: 457px;
        width: 89px;
    }
    #navigation li#directions a:hover, #navigation li#directions a:active {
        background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
        top:0;
        left:456px;
    }
    #navigation li#contactus {
        background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
    }
    #navigation li#contactus a {
        background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
        top: 3px;
        left: 582px;
        width: 94px;
    }
    #navigation li#contactus a:hover, #navigation li#contactus a:active {
        background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
        top:0;
        left:581px;
    }
    .scroll {
        margin-left: 60px;
        width: 902px;
    }
    h1 {
        color: #FFFFFF;
        font: bold 1.6em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
        background-color: #000000;
    }
    h2 {
        color: #000000;
        font: bold 1.5em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
    }
    p {
        color: #000000;
        font: 1em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 20px;
    }
    p.number {
        font: bolder 2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        color: #cc0000;
    }
    .email {
        font-weight: bolder;
        color: #cc0000;
    }
    h2.beef {
        font-size: 2.5em;
        text-align: center;
        padding: 15px 0px 5px 0px;
        margin: 0;
    }
    p.beef {
        font: bold 1.2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        text-align: center;
        margin-top: 0;
        text-decoration: underline;
    }
    p.nopadding {
        padding: 0;
        margin: 0;
    }
    img#menu {
        margin-top: 10px;
        margin-left: 60px;
        padding: 0px;
        border: 5px solid #000000;
    }
    .scroll img.home {
        image-align: center;
        margin: 0 0 20px 60px;
        padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1>Gangster Burgers<em></em></h1>
            <div id="navigation">
                <ul>
                    <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                    <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                    <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                    <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                    <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                    <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
                </ul>
            </div>
        </div>
        <div id="body">
            <div class="scroll">
                <h2 class="beef"> GOT BEEF! </h2>
                <p class="beef"> Can You Handle Our Burgers? </p>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
                <h1> This Month's Special </h1>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
            </div>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>
    That should serve as a base for you to use but you will of course need to tweak things to make them fit where required. I can't do everything for you as I don't know exactly how you want it but it should point you in the right direction.

    The only absolute positioning is for the navigation and we can do that because the height is preserved in the header so as not to interrupt the flow of the document.

    The page is a basic auto margined centred page with elements mainly in the flow so that there is no need to position everything. The background is repeated on the outer wrapper which means it will repeat forever and be as high as the page needs to be. There may be issues if you haven't made the image start and end positions look the same so that they can repeat seamlessly.

    Take some time to deconstruct and understand the layout as it as it will help you later on. If you don't understand anything in particular then shout and we'll explain why something is done the way it is.

    Bear in mind that you may need to be creative to achieve the desired effect.

    Hope it helps anyway.

  13. #13
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much. I fiddled around and found out that the black line that shows up between the header and the body was caused by the auto padding so I set padding to 0 and it fixed it.

    I figured out how you got it to work like that and I'm so greatful because I have a better grasp of how to make layouts. I'm not scared of relative positioning anymore lol

    The thing I can't seem to get is the footer. When I view it, the footer is positioned to the left while the rest of the page is centered. I have a 19" monitor so I'm not sure if that's why it appears centered in yours. I checked with other browsers and I'm getting the same problem. I tried setting margin to auto and it doesn't fix it. I'll keep fiddling, hopefully I get it. Don't spend too much more of your time on this, you've done more than enough.

    Thanks to everyone! I'll post again once I get it.

  14. #14
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okie, last post...

    It seems that if I add
    left:auto;
    to the footer style, it centers the footer image.... This would be the new code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Original Gangster Burgers Inc</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="styles2.css" />
    <style type="text/css">
    html,body {
        margin:0;
        padding:0;
    }
    body {
        background:#000;
        color: #fff;
    }
    #outer{
        width:1024px;
        margin:auto;
        color:#000;
        background:url(images/extendbody.jpg) repeat-y 0 0;
    }
    #header {
        position: relative;
        height:235px;
    }
    #header h1,#header h1 em {
        margin:0;
        padding:0;
        width:1024px;
        height:235px;
        display:block;
        position:relative;
    }
    #header h1 em {
        background:url(images/header.png) no-repeat 0 0;
        left:0;
        top:0;
        position:absolute;
    }
    
    #body {
        width:1024px;
    }
    #footer {
        width:1024px;
        height:72px;
        margin:auto;
        padding:0;
        left:auto;
        background:url(images/footer.jpg) no-repeat 0 0;
    }
    #navigation {
        position: absolute;
        top: 193px;
        left: 90px;
        display: block;
        width:1024px;
        height:32px;
    }
    #navigation ul {
        margin: 0;
        padding: 0;
    }
    #navigation li,#navigation a {
        position:absolute;
        height: 0;
        width: 0;
        top: 0;
        left:0;
    }
    #navigation a {
        position:absolute;
        height: 29px;
        width: 49px;
    }
    #navigation li#home{background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;}
    #navigation li#home a{
        background: url(http://www.originalgangsterburgers.com/images/homenav.png) 0 0;
        top: 3px;
        left: 1px;
    }
    #navigation li#home a:hover,
    #navigation li#home a:active {
        background: url(http://www.originalgangsterburgers.com/images/homehover.png) 0 0;
        top:0;
        left:0;
    }
    
    #navigation li#aboutus{background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;}
    #navigation li#aboutus a{
        background: url(http://www.originalgangsterburgers.com/images/aboutusnav.png) 0 0;
        top: 3px;
        left: 102px;
        width: 78px;
    }
    #navigation li#aboutus a:hover,
    #navigation li#aboutus a:active {
        background: url(http://www.originalgangsterburgers.com/images/aboutushover.png) 0 0;
        top:0;
        left:100px;
    }
    
    #navigation li#menu{background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;}
    #navigation li#menu a{
        background: url(http://www.originalgangsterburgers.com/images/menunav.png) 0 0;
        top: 3px;
        left: 234px;
        width: 47px;
    }
    #navigation li#menu a:hover,
    #navigation li#menu a:active {
        background: url(http://www.originalgangsterburgers.com/images/menuhover.png) 0 0;
        top:0;
        left:233px;
    }
    #navigation li#photos{background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;}
    #navigation li#photos a{
        background: url(http://www.originalgangsterburgers.com/images/photosnav.png) 0 0;
        top: 3px;
        left: 339px;
        width: 62px;
    }
    #navigation li#photos a:hover,
    #navigation li#photos a:active {
        background: url(http://www.originalgangsterburgers.com/images/photoshover.png) 0 0;
        top:0;
        left:338px;
    }
    #navigation li#directions{background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;}
    #navigation li#directions a{
        background: url(http://www.originalgangsterburgers.com/images/directionsnav.png) 0 0;
        top: 3px;
        left: 457px;
        width: 89px;
    }
    #navigation li#directions a:hover,
    #navigation li#directions a:active {
        background: url(http://www.originalgangsterburgers.com/images/directionshover.png) 0 0;
        top:0;
        left:456px;
    }
    #navigation li#contactus{background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;}
    #navigation li#contactus a{
        background: url(http://www.originalgangsterburgers.com/images/contactusnav.png) 0 0;
        top: 3px;
        left: 582px;
        width: 94px;
    }
    #navigation li#contactus a:hover,
    #navigation li#contactus a:active {
        background: url(http://www.originalgangsterburgers.com/images/contactushover.png) 0 0;
        top:0;
        left:581px;
    }
    .scroll {
        margin-left: 60px;
        width: 902px;
    }
    h1 {
        color: #FFFFFF;
        font: bold 1.6em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
        background-color: #000000;
    }
    h2 {
        color: #000000;
        font: bold 1.5em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 10px;
    }
    p {
        color: #000000;
        font: 1em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        padding: 0px 10px 3px 20px;
    }
    p.number {
        font: bolder 2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        color: #cc0000;
    }
    .email {
        font-weight: bolder;
        color: #cc0000;
    }
    h1.beef {
        font-size: 2.5em;
        text-align: center;
        padding: 0px 0px 0px 0px;
        margin-bottom: 0;
    }
    p.beef {
        font: bold 1.2em Calibri, "Arial Narrow", Arial, Verdana, sans-serif;
        text-align: center;
        margin-top: 0;
        text-decoration: underline;
    }
    p.nopadding {
        padding: 0;
        margin: 0;
    }
    img#menu {
        margin-top: 10px;
        margin-left: 60px;
        padding: 0px;
        border: 5px solid #000000;
    }
    .scroll img.home {
        image-align: center;
        margin: 0 0 20px 60px;
        padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="header">
            <h1><em></em></h1>
            <div id="navigation">
                <ul>
                    <li id="home"><a  href="http://www.originalgangsterburgers.com/index.html"></a></li>
                    <li id="aboutus"><a  href="http://www.originalgangsterburgers.com/aboutus.html"></a></li>
                    <li id="menu"><a href="http://www.originalgangsterburgers.com/menu.html"></a></li>
                    <li id="photos"><a href="http://www.originalgangsterburgers.com/construction.html"></a></li>
                    <li id="directions"><a href="http://www.originalgangsterburgers.com/directions.html"></a></li>
                    <li id="contactus"><a  href="http://www.originalgangsterburgers.com/contactus.html"></a></li>
                </ul>
            </div>
        </div>
        <div id="body">
    	<div class="scroll">
                <h1 class="beef"> GOT BEEF! </h1>
                <p class="beef"> Can You Handle Our Burgers? </p>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/home.png" alt="" /></p>
                <h1> This Month's Special </h1>
                <p><img class="home" src="http://www.originalgangsterburgers.com/images/febpromofront.jpg" alt="" /><img class="home" src="http://www.originalgangsterburgers.com/febpromoback.jpg" alt="" /></p>
       	</div>
        </div>
        <div id="footer"></div>
    </div>
    </body>
    </html>

    Hopefully, there is nothing wrong with this? No rules I've broken?
    If it really was this simple, I need to slap myself lol.

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Since #footer isn't positioned, it shouldn't react at all to left: auto : )

    Coords like top and left affect "positioned" elements... those with either position: relative or absolute on them.

    Normally, on static blocks (boxes who aren't positioned), setting a width and margin: auto does the trick. When it doesn't, there's usually something else going on like boxes on the side who block automargins.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Stomme said the code you added will not make any difference as it does not apply.

    I'm guessing that you might be linking to the old stylesheet while at the same time have the new styles in the head. - I could be wrong though

  17. #17
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried setting the width and making margin set as auto but it didn't work. I'm not linking to another stylesheet. The left:auto works for some reason. The website is running at
    www.originalgangsterburgers.com.

    Any ideas why it's working but margin auto isn't?

  18. #18
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    note:
    I realize the code I posted on here linked to another stylesheet but I changed it after and made an external stylesheet with the same styles I used in the above example and only linked to that one. The footer is still centered. No idea why, but it still wouldn't work when I tried to use margin auto.. oy!

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Margin:0 auto; only works on static (and relative) elements. If an element has position:absolute; then it won't recognize margin:0 auto; but it will recognize left:auto; and other vlaues
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I just went to the site, you nest footer inside of the wrapper thus it's centered already. You don't even need margin:auto or the left:auto (though if footer was outisde wrapper then the margin:auto; would be needed but not left:auto)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    When you do multiple posts, Ryan, there are too many dancing peanut butter jelly banana guys

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Any ideas why it's working but margin auto isn't?
    I think we must be talking at cross purposes here as I'm a little confused

    As Ryan said the footer is inside the wrapper and doesn't need anything special added to it.

    If you are referring to the actual copyright text then that's on the left of your image and won't be centred.

  23. #23
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'OH!
    I keep missing the obvious. Okay thanks guys. It was aligning left before BECAUSE of the margin:auto. I tried removing the left:auto, and not replacing it with anything else and it was still centered so THANKS.

    Problem solved and the website is up and running almost to how I wanted it. Now I just need to replace those temp images of the menu and main page and add some text but they just wanted it up asap so these are kind of place holders.

    The layout is exactly how I wanted it. You guys are awesome

    Off-topic: I like dancing bananas.

  24. #24
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Glad everything is working now . You're welcome.

    Off Topic:

    I personally hate bananas lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

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
  •