Fri, 2004-05-21 15:15
Hi!
I´ve found this http://bluerobot.com/web/layouts/layout1.html and it works great.
Now i want another "box" beneath the first called .Meny.
I cant get the other one to "follow" the first. If i set top:300px and then the menu overflodes it it hides.
Hope anyone could understand, both problem and language 
Fri, 2004-05-21 23:32
#1
Following <div>´s
Hi temptraq,
Can you post a link to what you have done so far?
It will make it easier to help you.
Sat, 2004-05-22 08:09
#2
Following <div>´s
Hi!
Yes, i planed to but my webhotel seem to be down... 
I´ll post asap.
Sat, 2004-05-22 13:44
#3
Re: Following <div>´s
temptraq wrote:
Now i want another "box" beneath the first called .Meny.
I cant get the other one to "follow" the first. If i set top:300px and then the menu overflodes it it hides.
I am guessing on the left you are looking to put another box under #menu called #meny, and although you could do it the way you are planning, but it would be better if the absolute positioned left box was a container for holding all the boxes you want.
I have redone the blue robot code to add an extra box for you as below - I also changed to the simplified hack for IE 5.n
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Two Columns - Left Menu</title>
<style type="text/css">
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#content>p {margin:0px;}
#content>p+p {text-indent:30px;}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
height:14px;
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
line-height:11px;
background-color:#eee;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #header{
height: 33px;
he\ight: 14px;
}
/* End hide from IE5/mac */
/* 14px + 17px + 2px = 33px for IE5.n*/
#content {
margin:0px 50px 50px 200px;
padding:10px;
}
#menucontainer {
position:absolute;
top:100px;
left:20px;
width:150px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #menucontainer{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */
.menu {
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:150px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #menu{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */
.meny {
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
width:150px;
margin-top: 20px;
}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #menu{
width: 172px;
w\idth: 150px;
}
/* End hide from IE5/mac */
</style>
</head>
<body>
<div id="header"><a href="http://bluerobot.com/" title="BlueRobot Home">BLUEROBOT.COM</a></div>
<div id="content">
<h1>Left Menu</h1>
<p>This is a simple two column layout with a left menu box. By modifying the stylesheet, this layout can serve as the basis for many standard two column layouts. As is the case with most layouts in the Reservoir, the order of elements (header, content, menu) in the HTML source is friendly and accessible to mobile computers, text-based browsers, and alternative/accessible devices.</p>
<p>Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it. <em>Please</em> <a href="mailto:[email protected]?subject=Layout Reservoir" title="Email BlueRobot about a layout issue">email me</a> a heads-up. Your help will benefit the other five or six people who visit this site.</p>
<p><a href="default.asp" title="Layouts to make your own...">< Return to the Layout Reservoir</a> :: <a href="view_css.asp?layout=layout1" title="">View the CSS</a></p>
</div>
<div id="menucontainer">
<div class="menu">
<a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br />
<a href="http://greasyskillet.org/" title="The Website of Dave Elfving">Greasy Skillet</a><br />
<a href="http://royrosenow.com/" title="Sketches, illustrations, and Voodoo Bob">Roy Rosenow</a><br />
<a href="http://swankyal.com/" title="A swanky weblog">SwankyAl</a><br />
<a href="" title="">Fake Link One</a><br />
<a href="" title="">Nothing Here</a><br />
<a href="" title="">Links Nowhere</a><br />
<a href="" title="">Fake Link Four</a><br />
<a href="" title="">Fifth Fake Link</a><br />
</div>
<div class="meny">
<p>Whatever you want to have in here.</p>
</div>
</div>
<!-- BlueRobot was here. -->
</body>
</html>
NB: The blue robot code used capitals for the first letter of its ID's - It is a good idea to not use capitals due to strict xhtml.
Regards
Day
Sat, 2004-05-22 14:32
#4
Following <div>´s
Thank you daybreak_0. I´ll test your version.
Here is the link to my problem... (that perhaps are solved )
Removed due to solved problem...
Sat, 2004-05-22 15:01
#5
Following <div>´s
Thank you Daybreak_0!
Works fine.