CSS Drive forums | Div Positioning, Center, Bottom Left, and Bottom Right

Div Positioning, Center, Bottom Left, and Bottom Right

Posted: 18 May 2006 05:53 PM

[ Ignore ]

Newbie

Total Posts: 2

Joined 2006-05-18

Okay, so here’s the idea. I don’t have an example on the web, but the idea is pretty simple. I’d like to position an image and progress bar in the center of my screen, a copyright in the bottom left, and a logo in the bottom right of the screen. I’ve tried to position them, but in my browser (firefox) it either overextends, or doesn’t fit properly. I’d also like it to update on resize, if possible. Here is the last bit of code I tried.

The CSS:

body {
background-color:#000000;
}

#copyright {
position:relative;
top:100%;
left:0;
}

#mslogo {
position:absolute;
top:100%;
left:100%;
}

#progressbar {
color:#FFFFFF;
position:absolute;
top:50%;
left:50%;
} 

The HTML:

<div id="copyright">
  <img src="images/boot_copyright.jpg" />
</div>
<div id="mslogo">
  <img src="images/boot_mslogo.jpg" />
</div>
<div id="progressbar" align="center">
  <img src="images/boot_winlogo.jpg" />
  <br />
  <script type="text/javascript">
  // var xyz = createBar(width,height,bgcolor,borderwidth,bordercolor,barcolor,...leave defaults...)
  var xp_bar = createBar(300,15,'black',1,'white','green',85,7,3,"");
  </script>
</div> 

Can CSS do this or should I resort to Javascript? I was never that great at positioning w/ CSS…

Profile

maxxtraxx

Posted: 18 May 2006 11:01 PM

[ Ignore ] [ # 1 ]

Newbie

Total Posts: 2

Joined 2006-05-18

of course CSS can do it! =] just check out CSS Zen Garden to see some awesome layouts, speaking of which there are some great CSS templates you can learn from here:

http://blog.html.it/layoutgala/

enjoy!

Profile

Whoa Buddy

Posted: 18 May 2006 11:07 PM

[ Ignore ] [ # 2 ]

Newbie

Total Posts: 2

Joined 2006-05-18

I figured it out! It definitely can be done, but when your document is in strict mode (darn XHTML) it gets a little bit more difficult. Quirks mode will allow you to do it, but you sacrifice some compatibility between browsers. Here is how to horizontally and vertically center a container using CSS and a single table.

The CSS

html, body {
height:100%;
margin: 0;
padding: 0;
border: none;
text-align: center;
}

body {
background-color:#000000;
}

#container {
height:100%;
width:100%;
margin: 0 auto;
text-align: left;
vertical-align: middle;
}

#container td {
vertical-align:middle;
text-align:center;
}

#copyright {
position:absolute;
bottom:5px;
left:5px;
}

#mslogo {
position:absolute;
bottom:5px;
right:5px;
}

#progressbar {
color:#FFFFFF;
margin: 0 auto;
} 

The HTML

<table id="container">
<tr>
  <td>
<div id="progressbar" align="center">
<img src="images/boot_winlogo.jpg" />
<br />
<script type="text/javascript">
// var xyz = createBar(width,height,bgcolor,borderwidth,bordercolor,barcolor,...leave defaults...)
var xp_bar = createBar(300,15,'black',1,'white','green',85,7,3,"");
</script>
</div>
  </td>
</tr>
</table>
<div id="copyright">
<img src="images/boot_copyright.jpg" /></div>
<div id="mslogo">
<img src="images/boot_mslogo.jpg" />
</div> 

It took a lot of internet searching to find that… but thanks for looking/helping!

Profile

‹‹ Help New to CSS: Some direction, please! ››