...

View Full Version : 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.9108

optimus203
11-20-2010, 02:43 AM
The mouse-over title attributes work for me.

For the other issue, try making these revisions:

CSS:

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

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

div#w3c p {
display: inline;
}

div#made_date p {
}


HTML:

<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:



<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?



<?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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum