10 replies [Last post]
losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

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 ?

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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?

The next sentence is true. The previous sentence is false. Discuss...

losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

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 Sad

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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.

The next sentence is true. The previous sentence is false. Discuss...

losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

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 ?

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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

The next sentence is true. The previous sentence is false. Discuss...

losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

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 . Wink 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

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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>

The next sentence is true. The previous sentence is false. Discuss...

losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

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 Sad

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

an HEIGHT Problem

Ah, I understand what you mean... will try and resolve it later today (gotta work!). Smile Wink

The next sentence is true. The previous sentence is false. Discuss...

losninos
Offline
newbie
Last seen: 17 years 51 weeks ago
Joined: 2004-05-26
Posts: 6
Points: 0

:-)

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 Smile

now im very curious for your reason !