Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Align content bottom and center using CSS

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

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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Well Fed,
    Maybe if you try ap on your #content like this:
    Code:
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That did the trick!

    Thank you so much Excavator...



  •  

    Posting Permissions

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