Forum Moderators: not2easy
One thing I can't get div to do is to have a "rest of width - width" when nested. E.g.
<DIV STYLE="WIDTH: 100%; float: left;">
<DIV STYLE="WIDTH: 20px; float: left;">Used for left border</DIV>
<DIV STYLE="float: Left;">This should now take up the rest of the available width in order to fill the browser width. But it does not.</DIV>
<DIV STYLE="WIDTH: 20px; float: right;">Used for right border</DIV>
</DIV>
A work around is to have some javascript function the calculate the browser window's width and then figures out (per browser type and flavour) the width of the middle div. But if you resize the browser then it "breaks" the layout, unless you write yet another script to pick-up the resize and reloads the page - which doesn't work for all browsers, and it sucks to reload the page every time.
I know this is very "table"-like thinking, but it irks me to design a page with "dead" space on the sides.
If you need a 20 pix border, use a real border.
<div style="border-left:20px solid green; border-right:20px solid red;">content goes here.</div>
<DIV STYLE="position:absolute;
left: 5px;
top: 5px;
right: 5px;
HEIGHT: 106px;
background-image: url(../images/head_top.gif);
padding: 0px;
margin: 0px;">
<DIV STYLE="position:absolute;
left: 0px;
top: 0px;
background-image: url(../images/head_tl.gif);
width: 24px;
height: 106px;
padding: 0px;
margin: 0px;"></DIV>
<DIV STYLE="position:absolute;
left: 82px;
top: 0px;
background-image: url(../images/head_top.gif);
height: 106px;
padding: 0px;
margin: 0px;">
This should now take up the rest of the available width in order to fill the browser width. But it does not.
</DIV>
<DIV STYLE="position:absolute;
right: 0px;
top: 0px;
background-image: url(../images/head_tr.gif);
width: 28px;
height: 106px;
padding: 0px;
margin: 0px;"></DIV>
</DIV>
It should be noted that the "STYLE" part is in a css file. As well as some fixing needs to be done for IE, such as setting the width to 100% for the "out side" / first div, but not for the "other" browsers.
I'll do it one step at a time.
Sliding window sis a technique to use one or more images and let adjacent elements use them as background creating the illusion of an image that stretches in the middle.
We'll need an image (or two, but it's easier to see what goes on if we start without them at first).
As always I start in a browser such as firefox (anything but IE, it'll mess with my head if I do)
Consider this code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
.outer {
background-color:red;
padding-right:20px;
}
.outer div {
background-color:green;
padding-left:20px;
}
</style>
</head>
<body>
<div class="outer">
<div>
<p>Ipso Lorum</p>
</div>
</div>
</body>
</html>
Now we need to construct image material for the background.
We could go for one image for each of the divs in there:
one with just the left border, and one with the right border, and then let the default background take over. In case of symmetric images this might be preferable.
But I'll take the chance to introduce you to using different parts of one image while retaining the asymmetry as we please instead.
So we make a huge image (wider than any display will ever be) [don't worry, compression will make it small in download size] with the border on either side of it.
Next we position it on the right and left side of the respective divs and take out the colors not needed anymore.
We can make the image high enough to cover any situation, or we can make it not so tall and repeat it vertically, that's up to what we need graphically.
Putting it together:
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled Document</title>
<style type="text/css">
.outer {
background: url("border.png") repeat-y right top;
padding-right:20px;
}
.outer div {
background: url("border.png") repeat-y left top;
padding-left:20px;
}
</style>
</head>
<body>
<div class="outer">
<div>
<p>Ipso Lorum</p>
</div>
</div>
</body>
</html>
For testing it, I'll add a bit more substantial body and see how it looks (not shown here).
As it looks good, I now move on away from my browser of choice, to the other standards complaint browsers such as safari, opera etc., but not yet any version of IE.
As expected, I find no issues in safari not in opera.
Up to IE7, if I find any issues I'll add conditional comments to try to counteract the bugs.
A bit surprisingly, it works in IE7 and IE6 without modification, although there are some default margins that might need resetting. Real cases often do yield issues.
I'm not too proud of having had to use two div's but I doubt it can be simpler than this. Overuse of divs is in my book as evil as tables were.
IE seems to have a weird approach / interpretation to the standards :)
So the only silly questions are the ones not asked...
This may be basics (that I might have skipped)
You have a style element / class called ".outer" and one called ".outer div". I see how they are used and that ".outer div" is the inner div's style. The question is why declare it like that? (does it mean that for everything within the element ".outer" use this style? e.g. ".outer div" refers to all the divs used within a block element who's class is ".outer" - hope this makes any sense)
I'm trying to create a new layout for a site that I "designed" along time ago. It runs on Joomla and uses a template that I've tweaked a bit. But most of the layout for this template was done using tables.
<snip>
[edited by: engine at 5:15 pm (utc) on Sep. 23, 2008]
[edit reason] No urls, See Charter, thanks [/edit]
"outer" isn't the best name possible, it would be better to use something relating to the content instead of it (but in examples that's hard to do as you've no relation to the content anyway)
You can give the "inner" div a name and select it like that, in a template that might not be all that stupid as it will indeed match any div (no matter how deep) in the one with the class "outer".
A selector like ".outer>div" would be far preferable, but ... I know up front IE6 will stumble over it so I tend not to use it. This is probably wrong of me, I probably should do the best possible CSS and then fix it for IE6 as needed (e.g. using IE7.js in the conditional comment should fix the lack of support for selectors in IE6)
Webmasters need to collectively use what CSS has to offer if we hope that the next generation of browsers will finally implement what was standardized over a decade ago.
From numerous details I've the impression you're trying to create graphical "boxes". You can combine the sliding windows technique in both vertical and horizontal directions (you will unfortunately need 4 nested divs). That way you draw one big graphical box and you can use it to generate all your boxes.
I'm slowly coming out of the tabular thinking patterns. Thank you for your help.
I found that when I nest divs and place the content in the inner most div, then the outer most div doesn't size vertically, unless the inner divs are of "position: relative". (which makes sense if you first language is English :) )
I also found by setting the margins, only the inner divs "moves" in, and not the text of that div? This may be also a gap in my understanding of css:
<DIV STYLE="position: absolute; left: 0px, right: 0px; width: 400px; background: #FF0000; margin: 10px;">Level 1 begin
<DIV STYLE="position: relative; left: 0px, right: 0px; width: 300px; background: #00FF00; margin-left: 10px; margin-top: 10px;">Level 2 begin
<DIV STYLE="position: relative; left: 0px, right: 0px; width: 200px; background: #0000FF; margin-left: 10px; margin-top: 10px;">Level 3 begin
<DIV STYLE="position: relative; left: 0px, right: 0px; width: 100px; background: #00FF00; margin-left: 10px; margin-top: 10px;">Some text to see how this works, like, Hallo World!</DIV>
Level 3 end</DIV>
Level 2 end</DIV>
Level 1 end</DIV>
(This is just to see how the div's auto size vertically)
As for using the correct css and fixing it for each browser... I do agree, but it puts a time and maintenance constraint / pressure on a project.
But in any case, in IE the top / bottom margin are done but not in FireFox 3.0.1 (If you take the above code and take out the text, like the "Level 1 begin", etc)
I'm not sure, but it might well be one of those things IE never got right.
