Forum Moderators: not2easy
You can see it here in the old <TABLE> format:
<snip>
and here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="10" height="10" background="nw.gif"></td>
<td background="n.gif"></td>
<td width="10" height="10" background="ne.gif"></td>
</tr>
<tr>
<td width="10" background="w.gif"></td>
<td>
<p>MAIN CONTENT HERE</p>
<p>A very simple table - View source and you will see!</p>
<p>Images w.gif and e.gif repeat vertically depending how much content in this <td><br />The top and botton images n.gif and s.gif stretch horizontally to resize with the browser.<br />Try resizing the browser, the border always looks good and stays put!</p>
<p> </p>
<p> </p>
</td>
<td width="10" background="e.gif"></td>
</tr>
<tr>
<td width="10" height="10" background="sw.gif"></td>
<td background="s.gif"></td>
<td width="10" height="10" background="se.gif"></td>
<tr>
</table>
</body>
</html>
As you can see from the source it is a very simple page!
But is there any way to recreate this using DIV tags?
Please help!
Derek :-s
[edited by: swa66 at 11:58 pm (utc) on May 5, 2009]
[edit reason] No personal URLs please see ToS and Forum Charter [/edit]
the 1st floats left and is fixed width
the 3rd floats right and is fixed width
I need the 2nd div in the middle to stretch the distance in between
setting the width to 100% uses 100% of the container div, and thats too much!
i tried using left and right margins too but the 2nd div starts where it should, yet continues the length of the page
and the 3rd div appears below the first two divs, albeit with the correct alignment on the right. any ideas?
.leftBG {
margin-left: 0px;
width: 50px;
height: 100px;
padding: 0px;
position: relative;
float: left;
}
.nav {
margin-left: 50px;
margin-right: 50px;
width: auto;
height: 100px;
padding: 0px;
position: relative;
background-image: url(../images/layout/n.gif);
}
.rightBG {
margin-right: 0px;
width: 50px;
height: 100px;
padding: 0px;
position: relative;
float: right;
}
why don't you make them absolutely positioned divs?
then make the middle column have a left and right margin slighly bigger than the widths of the left and right columns?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
background-color: #ffffff;
margin: 0;
}
.left{
position:absolute;
width:100px;
height: 50px;
left: 0px;
}
.box{
position:absolute;
width: 100%;
height: 50px;
background-color:#0000FF;
margin-left: 100px;
margin-right: 100px;
}
.right{
position:absolute;
width:100px;
right:0px;
height: 50px;
}
</style>
</head>
<body>
<div class="left">123</div>
<div class="box">test</div>
<div class="right" >123</div>
</body>
</html>
what we need is for the blue box to fill up until the 3rd div, but no further! i cant seem to do it, im being driven nuts lol! please help
You shouldn't mix % and px's.
You can also remove the positioning on it, and remove the height from all three items:
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #ffffff;
}
.left{
position:absolute;
width:100px;
left: 0px;
top: 0px;
}
.right{
position:absolute;
width:100px;
right:0px;
top: 0px;
}
.box{
background-color:#0000FF;
margin-top: 0;
margin-right: 100px;
margin-bottom: 0;
margin-left: 100px;
}
</style>
I discovered a page describing a liquid layout that done the trick, but it taught me that css is actually quite horrible and not so elegant as a humble table. cant wait for css3 now, hope they sort their selves out!
Here is the CSS:
.top {
width:100%;
height:20px;
background:url(/rounded/top.gif) no-repeat left top;
}
.top span {
display:block;
position:relative;
height:20px;
background:url(/rounded/top-right.gif) no-repeat right top;
}
.center-content {
position:relative;
background:url(/rounded/rightside.gif) repeat-y right top;
padding:1px 20px 1px 25px;
margin:-1px 0 -50px 0;
}
.bottom {
height:60px;
background:url(/rounded/bottom.gif) no-repeat left bottom;
}
.bottom span {
display:block;
position:relative;
height:60px;
background:url(/bottom-right.gif) no-repeat right top;
}
and the html is like this:
<div id="liquid-round">
<div class="top"><span></span></div>
<div class="center-content">
<!-- CONTENT BEGIN -->
<p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
<p>this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text this is some text</p>
<!-- CONTENT END -->
</div>
<div class="bottom"><span></span></div>
</div>
pretty neat, although it means you cant use a span properly inside the top or bottom sections without it doing some pretty horrible stuff :-s
thanks for your help, you put me on the right track!
derek :-)
[edited by: swa66 at 10:12 pm (utc) on May 20, 2009]
[edit reason] No URLs please see ToS and forum charter [/edit]
