|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
July 21st, 2004, 07:17 AM
|
||||
|
||||
|
how to make this without tables so that it fills the screen
hello everyone,
i've been pulling my hairs on this one. i have a layout designed and i want to produce the html and CSS. what i wish is that the layout fills the screen by stretching towards the right and bottom, according to what's inside the "content" area. my problem is having the left side stretch vertically as needed to display the content , so that it joins the footer. the structure of the page blocks would be: (see attached img) any idea how to do this ? please help, it's urgent !! thanks a great lot, alx
|
|
#2
July 21st, 2004, 11:09 AM
|
||||
|
||||
|
There are loads of articals etc to help you find what you're looking for. For a start, try:
http://www.positioniseverything.net/ http://www.alistapart.com and of course, google and these boards.  but have a look at the template I've just finished (attached) Incedently, if anyone has any feed back on this layout (bugs, whatever) please let me know, ta 
|
|
#3
July 21st, 2004, 12:03 PM
|
||||
|
||||
|
Having all columns reach the bottom is usually an illusion. In your example, give the body a background color the same as the lower left column. That or something similar will work most times.
I'll second Dusk's reading suggestions. cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#4
July 21st, 2004, 12:47 PM
|
||||
|
||||
|
hello mates,
thanks for your feedback. i managed, like this: Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin:5;
padding:5;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333333;
font-size:10pt;
}
.copyright {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
font-size:10px;
}
</style>
</head>
<body>
<!-- top banner -->
<div id="topbanner" style="width:100%; height: 36px; z-index:1;;border-top: 1px solid #78172E;border-left:1px solid #78172E;border-right:8px solid #78172E;border-bottom:1px solid #364852">
<div id="topleft" style="width:244px; height:35px; z-index:1; background-image: url(images/top-left.gif); layer-background-image: url(images/top-left.gif); border: 1px none #000000;"></div>
</div>
<!-- middle -->
<div id="main" style="width:100%;height:auto;margin:0; padding:0;border-left:1px solid #78172E;background:url(images/leftside-repeatpatternY.gif) top left repeat-y;border-left:1px solid #78172E;border-right:8px solid #78172E">
<div id="left" style="float:left;width:296px;height:100%;background:url(images/leftside-background.gif) top left no-repeat;">
<div id="menu" style="height:314px;">
<ul id="vertnav">
<li> <a href="#" >first Level menu</a>
<ul>
<li><a href="#" >second Level menu</a></li>
<li><a href="#" >second Level menu</a>
<ul>
<li><a href="#" >third Level menu</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div id="bottomleft"></div>
</div>
<div id="middle" style="height:100%;margin-left:296px;border:1px solid #FFFFFF;">
<div id="middlecontent" style="margin:1em;padding:1em;overflow:inherit">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer
bibendum aliquet nibh. Maecenas imperdiet, risus a rutrum posuere, nunc
diam ultricies nunc, eget suscipit odio dolor pretium lacus. Nulla
fringilla luctus dui. Sed lectus. Nullam sagittis condimentum augue.
Vestibulum commodo ornare nunc. Donec faucibus bibendum nibh. Nunc
fringilla turpis in urna hendrerit faucibus. Quisque vitae massa in
felis imperdiet tristique. Sed semper euismod mi. Aliquam viverra, sem
quis malesuada pharetra, lectus justo imperdiet orci, ut auctor nunc
orci vitae ante. Cras sit amet diam.
</p>
<p>Mauris malesuada. Pellentesque sodales dapibus nisl. Praesent ante
mi, fermentum et, viverra a, pellentesque sit amet, mauris. Suspendisse
tincidunt erat eget ipsum. Etiam id metus et mi accumsan rhoncus. In
hac habitasse platea dictumst. Vivamus arcu. Proin urna leo, placerat
ut, facilisis vitae, condimentum a, magna. Vestibulum mattis eros vel
pede. Vestibulum sagittis massa eget justo. Nam urna. Donec condimentum
pulvinar ante. Nulla facilisi. Nunc a lorem. Morbi magna quam, interdum
volutpat, cursus fermentum, pulvinar a, nunc. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.
Vivamus rhoncus elementum libero. Phasellus viverra, nisl non vehicula
iaculis, diam sapien lobortis odio, accumsan porttitor sem odio sed
nisl.
</p>
<p>Ut eget est. Nam ac quam vel leo elementum vehicula. Duis enim.
Suspendisse eu purus eget odio tempus ultrices. Sed vulputate iaculis
dolor. Morbi et lacus. Nulla facilisi. Vestibulum imperdiet. Integer
suscipit erat vel dui. Donec pharetra nunc vel ante. Mauris semper, sem
eget sagittis ultricies, purus leo consectetuer ante, sed varius lectus
massa ac est. Integer eget tellus ultrices urna volutpat tincidunt.
</p>
</div>
</div>
<div id="footer" style="clear:both;width:100%;border-bottom:4px solid #78172E; ">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width:376px;background-image:url(images/leftside-repeatpatternY.gif);background-repeat:repeat-y;border-bottom:4px solid #78172E;text-align:right;height:100%"><img src="images/footer-mid.gif" width="249" height="117"></td>
<td style="background-image:url(images/footer-repeatpatternx.gif);background-repeat:repeat-x;background-position:bottom;" align="right" valign="bottom"><span class="copyright">SCAN ID 2004</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > how to make this without tables so that it fills the screen |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
