homepage Welcome to WebmasterWorld Guest from 184.73.40.21
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
convert {My old </TABLE> layout) to (Shiny new CSS <DIV> layout!);}
those darn DIVs wont look how i want
delboy1978uk

10+ Year Member



 
Msg#: 3907392 posted 8:26 pm on May 5, 2009 (gmt 0)

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+ Year Member



 
Msg#: 3907392 posted 10:50 pm on May 5, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3907392 posted 11:06 pm on May 5, 2009 (gmt 0)

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

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



 
Msg#: 3907392 posted 12:19 am on May 6, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3907392 posted 3:55 am on May 6, 2009 (gmt 0)

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

10+ Year Member



 
Msg#: 3907392 posted 8:24 am on May 6, 2009 (gmt 0)

.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

10+ Year Member



 
Msg#: 3907392 posted 4:18 pm on May 20, 2009 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved