Div Positioning, Center, Bottom Left, and Bottom Right
Posted: 18 May 2006 05:53 PM   [ Ignore ]
Newbie
Rank
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
 
 
Posted: 18 May 2006 11:01 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
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
 
 
Posted: 18 May 2006 11:07 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
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

htmlbody {
height
:100%;
margin0;
padding0;
bordernone;
text-aligncenter;
}

body {
background
-color:#000000;
}

#container {
height:100%;
width:100%;
margin0 auto;
text-alignleft;
vertical-alignmiddle;
}

#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;
margin0 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! ››