...

View Full Version : Align content bottom and center using CSS



Well Fed
10-19-2009, 01:07 PM
I've been having a bit of trouble aligning things on my website:

http://www.wellfedproductions.com/shanghai/

Right now it's aligned top center...I would like it to be aligned bottom center. It being the images, links and copyright etc. I couldn't even get it to align top center using CSS...and obviously had to revert to the old "align="center" using HTML.

Any help would be greatly appreciated...




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->

</head>

<body link="#800000" alink="#800000" vlink="#800000">

<div id="page-background"><img src="theultraviolent.jpg" width="100%" height="100%" alt="The Ultraviolent">
</div>
<div align="center">
<div id="content">

<a href="http://www.myspace.com/Shanghaimyspace" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/myspace.png" alt="MySpace" border="0"></a>

<a href="http://www.facebook.com/Shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/facebook.png" alt="Facebook" border="0"></a>

<a href="http://www.twitter.com/Shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/twitter.png" alt="Twitter" border="0"></a>

<a href="http://www.wellfedproductions.com" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/wellfed.png" alt="Well Fed" border="0"></a>

<font color="#800000" size="1" face="Arial"><strong><a href="mailto:shanghai@wellfedproductions.com.com"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/email.png" alt="Email" border="0"></a></strong></font>

<a href="http://www.last.fm/music/Shanghai" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/lastfm.png" alt="Last.FM" border="0"></a>

<a href="http://www.youtube.com/user/WellFedProductions" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/youtube.png" alt="YouTube" border="0"></a>

<a href="http://www.flickr.com/photos/shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/flickr.png" alt="Flickr" border="0"></a>

<br />

<font color="#800000" size="1" face="Arial"><strong>&copy; 2009 well fed productions</strong></font>

<embed src="brood.mp3" hidden="true" autoplay="true" autostart="True" loop="true" type="audio/mpeg" height="0" width="0">

</div>
</div>
</body>
</html>

Excavator
10-19-2009, 04:12 PM
Hello Well Fed,
Maybe if you try ap on your #content like this:
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {
position: absolute;
z-index:1;
bottom: 10px;
left: 50%;
margin: 0 0 0 -300px;
}

Well Fed
10-20-2009, 03:23 AM
That did the trick!

Thank you so much Excavator...

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum