Anyone know how to make a box in CSS that will span the entire height of the screen at minimum? So if there are only three words in the box it will still take up the entire height of the sreen (whether resolution is 800x600 or greater).
Thanks for any help provided.
CSS Boxes
Moderator: General Moderators
The way I'd do it is:
Hope that helps,
-Nay
Code: Select all
<table cellpadding="0" cellspacing="0" width="100%" height="100%" align="center" valign="middle">
<tr><td>
<!-- anything you want here //-->
</td></tr>
</table>-Nay
CSS has problems with the height attribute in its current implementations. There are a variety of ways to trick it using container elements (DIVs within DIVs). I believe that there are relevant articles at http://www.positioniseverything.net.
Another option is to use javascript to get the height of the browser window and assign that pixel value to your DIV. Obviously there are problems with this method, as well. There are fewer display problems with tables (but even then the height=100% thing won't render properly on all platforms), but many more other problems.
You just have to decide what the best way to look at your project is. Does it need to be extensible? forward-looking? deliverable on multiple platforms (portables, PDAs, etc.)?
Another option is to use javascript to get the height of the browser window and assign that pixel value to your DIV. Obviously there are problems with this method, as well. There are fewer display problems with tables (but even then the height=100% thing won't render properly on all platforms), but many more other problems.
You just have to decide what the best way to look at your project is. Does it need to be extensible? forward-looking? deliverable on multiple platforms (portables, PDAs, etc.)?
- SantaGhost
- Forum Commoner
- Posts: 41
- Joined: Mon Sep 15, 2003 11:54 am
this is what i use:
a div that covers the whole page, inside it a table with three columns, logo , links, content.
this is also very well possible with divs inside divs.
style.css (not full file)
example at http://santa-ghosts.pelle-webdesign.net/
a div that covers the whole page, inside it a table with three columns, logo , links, content.
this is also very well possible with divs inside divs.
Code: Select all
<script type="text/javascript">
if (window.navigator.appName == "Netscape"){ document.write ("<div align='center'>"); }
else {document.write ("<div id='around'>"); }
</script>
<table cellspacing="0" cellpadding="1" id="main">
<tr><td class="tdtop"><img src="SnGlogo.jpg" alt="Santa Ghosts ClanLogo"></td></tr>
<tr><td class="tdlinks">
<a href="?page=Home">Home</a>
<a href="?page=About">About</a>
<a href="?page=Members">Members</a>
<a href="?page=Contact">Contact</a>
<a href="?page=Messages">Messages</a>
</td></tr>
<tr><td class="tdcontent">
<?php print ($content); ?>
</td></tr>
</table>
</div>Code: Select all
#around { text-align: center; margin: 0;}
table#main { background: #fff; width: 750px; border-collapse: collapse; border: 1px solid #000;}
.tdtop { height: 150px; background: #091D01; text-align: center;}
.tdlinks { background: #000; text-align: center; background: url("camo_desert.jpg"); padding: 8px; }
.tdcontent { background: #424942 url("halfscr-blue.gif"); color: #fff; padding-bottom: 50px; }
.tdlinks a { text-decoration: none; font-weight: bold; font-size: 20px; color: #FBFFCB; font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center; padding: 2px 6px 2px 6px; margin-right: 3px; background: url("camouflage.jpg"); border: 2px solid #000;
font-family: Georgia, Minion Web, Palatino, Book Antiqua, Utopia, Times New Roman, serif;}
.tdlinks a:hover { border-color: #cad603 ; }