Stuck on CSS layout

Flunky · 11-20-2010, 02:19 AM

There are a couple things I'm stuck on. First, I have some things at the bottom of my page that are all stacked on top of each other.I know this is a problem with my CSS but I can't figure out what I'm doing wrong. Here is this part of my CSS style:

div#donate {
margin-top: 150px;
position: absolute;
bottom: 0;
}

div#w3c p {
display: inline;
position: absolute;
bottom: 0;
}

div#made_date p {
position: absolute;
bottom: 0;
}

#donate I'm trying to get above the other 2 divs
#w3c I'm trying to get each image in this div to be side by side and under #donate also centered.
#made_date I'm would like in the bottom left corner of my page.

Second, I added a title attribute to my links in the HTML yet most of them don't appear in the page on mouse-over.

If you need to look at my html code you can view the source at http://www.ruefulwebdesigning.com/
also you can see the current incorrect layout there.
Thanks

I've attached the .CSS file here, also.ruefulstyle.css

optimus203 · 11-20-2010, 02:43 AM

The mouse-over title attributes work for me.

For the other issue, try making these revisions:

CSS:

Code:

div#bottomleft {
position: absolute;
bottom: 0; }

div#donate { 
margin-top: 150px;
} 

div#w3c p { 
display: inline; 
}
 
div#made_date p { 
}

HTML:

Code:

<div id="bottomleft">
  <div id="donate">

   <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="CW3RM24U7RGYU" />
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" title="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
   </form>
  </div>
  
  <div id="w3c">
   <p>
    <a href="http://validator.w3.org/check?uri=referer">
	    <img style="border:0;width:88px;height:31px"
		src="http://www.w3.org/Icons/valid-xhtml10"
	    alt="Valid XHTML 1.0 Transitional" />
	</a>
   </p>
   <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid CSS!" />
    </a>
   </p>

  </div>
  <div id="made_date">
   <p>
    <small>I began this page on 11/18/2010.</small>
   </p>
  </div>
 </div>

Not sure if you wanted the fixed footer to just be in bottom-left corner, or spanning entire width (like a traditional footer).

teedoff · 11-20-2010, 02:43 AM

First things first. Your div layout structure could be reworked. I always like to start with a simple layout like so:

Code:

<body>
<div id="wrapper">
<div id="header"></div>
<div id="content">

<div id="footer"></div>
</div>
</div>
</body>

Now, once you have this basic div layout, then you can style the divs in which ever way you want. It's good that you're learning to layout pages with divs. One thing to mention is your use of positioning, especially absolute positioning. Floats are a much better way to position divs, along with margins. Absolutes should be used only in rare occasions.

I think you should really try and rework your page using these tips. Try it and post back and we can go from there.

Flunky · 11-20-2010, 03:09 AM

@optimus203

I was looking to center the donate button and the W3C icons in the center of the bootom of the page. Also, to have the donation button above the 2 W3C icons. While the 2 W3C icons to be side by side. Lastly, the page creation start date in the bottom left corner.

Did you mouse-over all the links in the text? Maybe, I just need to clean my browser or something.

optimus203 · 11-20-2010, 05:17 PM

Link rollovers work fine for me on all links.

Is this footer revision your talking about?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="google-site-verification" content="NIYKCfL1grYE79DbOvpppW3U7cG-fuhUJolsoc-OwTM" />
  <title>ruefulwebdesigning.com</title>
  <style type="text/css">
  div#bottomleft {
position: absolute;
bottom: 0;
width:100%; }

div#donate { 
margin-top: 150px;
text-align:center;
} 

div#w3c p { 
display: inline; 
text-align:center;
}

</style>

 </head>
 <body>
  <div id="bottomleft">
  <div id="donate">

   <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick" />
    <input type="hidden" name="hosted_button_id" value="CW3RM24U7RGYU" />
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" name="submit" title="PayPal - The safer, easier way to pay online!" />
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1" />
   </form>
  </div>
  
  <div id="w3c">
   <p>
    <a href="http://validator.w3.org/check?uri=referer">
	    <img style="border:0;width:88px;height:31px"
		src="http://www.w3.org/Icons/valid-xhtml10"
	    alt="Valid XHTML 1.0 Transitional" />
	</a>
   </p>
   <p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
        src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid CSS!" />
    </a>
   </p>

  </div>
  <div id="made_date">
   <p>
    <small>I began this page on 11/18/2010.</small>
   </p>
  </div>
 </div>
  
</body>
</html>