Welcome to WebmasterWorld Guest from 54.144.79.200

Forum Moderators: not2easy

Message Too Old, No Replies

convert {My old </TABLE> layout) to (Shiny new CSS <DIV> layout!);}

those darn DIVs wont look how i want

     

delboy1978uk

8:26 pm on May 5, 2009 (gmt 0)

10+ Year Member



Hi everyone
I had a neat little dreamweaver template that used a table with an editable region .

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 &lt;td&gt;<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>&nbsp;</p>
<p>&nbsp;</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]

delboy1978uk

10:50 pm on May 5, 2009 (gmt 0)

10+ Year Member



okay, i'm getting there - but now i have a problem
3 side by side divs

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?

delboy1978uk

11:06 pm on May 5, 2009 (gmt 0)

10+ Year Member



the code so far is like this

.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;
}

topr8

12:19 am on May 6, 2009 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



if the 1st and third are both fixed width and floating left and 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?

delboy1978uk

3:55 am on May 6, 2009 (gmt 0)

10+ Year Member



that works...well kind of :-s
if the right hand side box doesnt have a background the middle box background continues, margin or not!
the code as simply as possible is now:

<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

steve

8:24 am on May 6, 2009 (gmt 0)

10+ Year Member



.box has a width of 100% PLUS right and left margins of 100px which is making it too wide.

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>

delboy1978uk

4:18 pm on May 20, 2009 (gmt 0)

10+ Year Member



that almost did what i needed, so i played around with it, but it just wasnt happening :-(

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]

 

Featured Threads

Hot Threads This Week

Hot Threads This Month