Wed, 2004-05-26 08:34
i need help for my layout.
here you can see my problem:
[url]http://www.nightlinerweb.de/test.htm [/url]
when the text is longer than 100% then ignores the container that.
can anybody help me ?
Wed, 2004-05-26 08:48
#1
an HEIGHT Problem
Not quite sure what you want the container to do? Do you want the container to expand with the text (which is what it's doing anyway). Or do you want it to become scrolled?
Wed, 2004-05-26 09:55
#2
an HEIGHT Problem
Quote:
Not quite sure what you want the container to do? Do you want the container to expand with the text (which is what it's doing anyway). Or do you want it to become scrolled?
yes it should expand with the main text ! do you think its doing that anyway ? not in my script 
Wed, 2004-05-26 10:08
#3
an HEIGHT Problem
Which browser?
Also, I've noticed that when the browser window is reduced in size, the side-column elements overlap the content. This is because you've used absolute positioning extensively. Is this what you want?
You could do that whole design without absolute positioning.
Wed, 2004-05-26 10:13
#4
absolute
i would love to do an design without absolute positions ! but i dont know how. i have try sometimes a layout without absolute but it dont works.
the best view must be in IE 5 - 6 and Mozilla !
do you have any ideas how i can design it all without the absolute positions ?
Wed, 2004-05-26 10:28
#5
an HEIGHT Problem
The main attribute in CSS, used to achieve decent layouts, is the float attribute. Your best researching it and getting used to using them, they are a CSS-user's best friend.
Here's a very good set of tutorials: http://css.maxdesign.com.au/floatutorial/
Additionally, ClevaTreva from this very forum, has developed a fantastic generation site, to auto-generate the code for you. It may help you to either get the result you want, without any hassle, or to develop a page as so you can pick it apart and discover how floats work (they really are simple).
Here's his link: http://209.216.241.33/pagemaker_form.php
Wed, 2004-05-26 10:42
#6
hmmm
the code generator is very very veeeery nice !
but i have a problem with all these generators. becaus i need a more complicated layout. you see the gray field above the right red container.
i think you cant realize that with floating fieldes ! okay i cant realize that yet . 
but maybe i have only an wrong thought
i hope that anybody can help me or i despair of this layout. :?
--------------------------
P.S.
this one is cool:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
it is pretty nice ! but how can i put an own background image to the left and the right container and a bgcolor for the whole right and left side ?????????? thats tricky ... not this tutorial because there is the border line left and right only in the content part and the rest is whit. its easy ..... i hope anyone can help me
Wed, 2004-05-26 13:25
#7
an HEIGHT Problem
In the limited time I've got here's something for you to get on with. It's by no means complete (and you may find some bugs), but is a half decent basis for you to learn from:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css" media="all">
/* <![CDATA[ */
*html,body
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
font: normal 12px/14px Verdana, Arial, Sans-serif;
}
p
{
margin: 0;
}
div#header
{
height: 100px;
padding: 10px;
background: #fff;
}
div#subHeader
{
height: 25px;
background: #000;
color: #fff;
padding: 0 10px;
}
div#leftCol
{
float: left;
width: 100px;
padding: 10px;
background: yellow;
height: 400px;
}
div#contentHeader
{
height: 50px;
background: #ccc;
padding: 10px;
}
div#contentWrap
{
margin: 0 0 0 130px;
}
div#content
{
background: pink;
margin: 0 170px 0 0;
border: 1px dotted #999;
}
div#rightCol
{
float: right;
background: red;
width: 150px;
height: 350px;
}
/* ]]> */
</style>
</head>
<body>
<div id="header">
<p>header div</p>
</div>
<div id="subHeader">
<p>subHeader div</p>
</div>
<div id="leftCol">
<p>leftCol div</p>
</div>
<div id="contentHeader">
<p>contentHeader div</p>
</div>
<div id="contentWrap">
<div id="rightCol">
<p>rightCol div</p>
</div>
<p>content</p>
</div>
</body>
</html>
Wed, 2004-05-26 13:55
#8
cool
first of all. BIG thanks to you !
but you have the same problem like me with the left / right container. they dont expand when you have more text in the content field. you know what i mean ?
yes the text float around the red box. and when you make the window smaller then looks the content better. but the problem are the 2 containers
Wed, 2004-05-26 14:17
#9
an HEIGHT Problem
Ah, I understand what you mean... will try and resolve it later today (gotta work!). 
Wed, 2004-05-26 14:19
#10
:-)
oh that would be great ! sorry when i make it a bit more complicated here. but its not so easy to describe perfectly what i mean
now im very curious for your reason !