Floating Problem @ tutorials.de: Tutorials, Forum & Hilfe

DeniseLechner · 13.12.09 23:51

Hallo Ihr Lieben.

Ich fall es einfach nicht, ich scheitere schon wieder am Floating
Im Grunde will ich einfach nur ein 3 Spaltiges Layout das in etwa so aussieht:

http://img121.imageshack.us/img121/6947/website.png

Bei Mir hab ich jedoch das Problem, das der Container (der um die drei Spalten liegt) nur maximal so groß ist, wie #main.

(Habe den Inhalt herausgenommen, um den Beitrag nicht unnötig lange zu machen)

index.php:

HTML-Code:

<div id="cont">
   <div id="l-m"></div>
   <div id="main"></div>
   <div id="r-m"></div>
   <div id="footer"></div>
</div>

style.css:

Code :

#cont{width: 300px;background-color:lime}
#l-m{width:100px; float:left;background-color:red}
#main{width:100px;float:left;background-color:green}
#r-m{width:100px;float:right;background-color:blue}
#footer{clear:both}

dankee

Maik · 14.12.09 06:22

Zitat von DeniseLechner

Bei Mir hab ich jedoch das Problem, das der Container (der um die drei Spalten liegt) nur maximal so groß ist, wie #main.

Kann ich mit dem gezeigten Code nicht bestätigen:

mfg Maik

DeniseLechner · 14.12.09 06:36

Bin die ganze Nacht daran gesessen, und konnte das Problem nicht lösen

index.php:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/traditionalsa.dtd">
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
		<link rel="apple-touch-icon" href="iphone-icon.png"/>
		
		<script language="javascript" src="js/functions.js"></script>
	</head>
	<body>
	
		<div id="header_border">
			<div id="header_img"></div>
		</div>
	
	<div id="main">
		<div id="content_border">
			<div id="content">
				<div id="c_left">
				
				<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
				</div><!-- END c_left -->
				
				<div id="c_main">
				
					<div class="content_top1"></div>
					<div class="content_top2">
						<span class="content_headline">Wir sind bald online!
						<span class="content_dateline"><br />13.Dez.2009</span>
						</span>
					</div>
					<div class="content_main">
						<div class="content_">
						<h2>Hallo Welt</h2>
						<p>Hallo Ihr Lieben! Ja, es ist wahr... Wir sind bald online. </p>
						</div>
					</div>
					<div class="content_end1"></div>
					
				</div><!-- END c_main -->
				<div id="c_right">
				
				
				</div><!-- END c_right -->
				
				

			</div><!-- END content -->
			<div id="cleaner"></div>
			
			<div id="footer">
				Kontakt | Impressum<br /><br />
			
			</div>
						
		</div><!-- END content_border -->
	</div><!-- END main -->
	
	</body>
</html>

style.css:

Code :

body{background-color: black; margin: 0; padding: 0; height: 100%}
 
#main{width: 1100px; margin: auto}
#header_border{width: 1100px; height: 600px; background: transparent url(../images/header_border.png) no-repeat; margin: auto}
#header_img{width: 990px; height: 510px; background: black url(../images/header/header_5.jpg) no-repeat; position: relative; top: 90px; left:55px}
 
 
#content_border{width: 1100px; margin: auto; background: transparent url(../images/content.png) repeat-y}
#content{width: 990px; margin: auto}
 
 
#c_left{width: 160px; height: 20px; float: left}
#c_right{width: 160px; height: 20px; float: left}
#c_main{width: 670px; float: left}
#footer{width: 990px; font-size: 10px; color: #555; text-align: center; margin-top: 50px; margin-left:55px; clear: both}
 
#cleaner{width: 990px; height: 1px; clear: both}
 
.content_top1{width: 690px; height: 14px; background: transparent no-repeat url(../images/content/content_01.png)}
.content_top2{width: 690px; height: 45px; background: transparent no-repeat url(../images/content/content_02.png)}
.content_main{width: 690px; background: transparent repeat-y url(../images/content/content_03.png)}
.content_end1{width: 690px; height: 30px; background: transparent no-repeat url(../images/content/content_04.png)}
 
.content_{width: 580px; margin: auto}
 
 
h1,h2,h3,h4,h5,h6{margin: 0; padding: 0; line-height: 2}
p{margin: 0; padding: 0; line-height: 1.4}
 
.content_headline{position: relative; top: 5px; left: 95px; font-weight: bold; font-size: 15px; float: left}
.content_dateline{position: relative; top: -3px; left: 0px; font-weight: bold; font-size: 10px}
 
.navigation_head{font-size: 14px; color: white}
.navigation_link{font-size: 12px; color: white}
 
ul{color: white; list-style-type: none}
.hauptklasse{font-size: 13px; font-weight: bold; margin-left: 0px}
.subklasse{font-size: 11px; margin-left: 10px}

Maik · 14.12.09 06:49

In dieser Code-Variante liegt es an den height:20px-Deklarationen für die beiden äußeren Spaltenblöcke #c_left und #c_right, die von den standardkonformen Browsern als absolute Höhe interpretiert wird, und somit das Gesamtlayout in der Höhe nicht mitwachsen lassen, wenn darin der Inhalt die vorgegebene Höhe überschreitet.

Wenn du hier eine Mindesthöhe vorsehen möchtest, nutze stattdessen min-height.

mfg Maik

DeniseLechner · 14.12.09 08:00

Hii Maik,

Ich glaube nicht, wie blind ich bin/war.
Besten dank

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Problem mit Links in floating div im IE

Floating Menü

Klassisches IE floating Problem (nur IE)?

Der IE und das Floating...

Floating von 3 Spalten

Stichworte

E-Mail:

Abonnieren Abbestellen