zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout Problem. Ich verzweifle bald.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.08.2007, 14:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.08.2007
Beiträge: 4
nomore befindet sich auf einem aufstrebenden Ast
Unglücklich Layout Problem. Ich verzweifle bald.

Hallo erst mal. Ich habe mir eine Template auf Basis von XHTML und CSS geschrieben. So weit so gut. Jetzt habe ich aber das Problem, das wenn sich die Navigation links erweitert, sich der DIV (left2) über den Hauptrahmen des DIV (container) hinausschiebt. Also der Hauptrahmen (Container erweitert sich nicht mit. Weiß eventuell jemand Rat? Hier die Dateien:

XHTML

Code:
<!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">

<head>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
	<title>Titel</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, projection" />
</head>
<body>
	<div id="container">
	<div id="header">Header</div>
	<div id="suche">Suche</div>
	<div id="navtop">Navigation Top</div>
	<div id="left"><p>Navigation (dynamische H&ouml;he)</p>
	<div id="left2">Grafik (fixe Größe und Ausrichtung unten) </div>
	</div>
	<div id="content"><p>Content (dynamische H&ouml;he)</p></div>
	<div id="footer">Footer</div>
	</div>
</body>
</html>
CSS

Code:
* {
	margin: 0;
	padding: 0;
	}
body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color:#000;
	}
	
	
/* Formatierung allgemein */	

a {
	color: #cc0066;
	text-decoration: none;
	}
a:hover {
	text-decoration: underline;
	}
a img {
	border: 0 none;
	}
td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color:#666;
	}
tr {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color:#666;
	}
h1, h2, h3 {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	background: transparent;
	}
h1{
 	font-family:Verdana, Arial, Helvetica, sans-serif;
 	font-size: 1.0em;
 	margin-bottom:10px;
	}
h2{
	font-size: 1.4em;
	}
h3{
 	font-size: 1.2em;
	}
ul{
 	list-style-type: square;
	}
ul ul{
	list-style-type: disc;
	}
ul ul ul{
	list-style-type: none;
	}
.label{
 	font: bold 100% Verdana,Arial,sans-serif;
 	color: #334d55;
	}
hr{
	border:solid #ff0000 1px;
	height:1px;
	}
	
/*Styles für die Container*/
	
#container {
	position: relative;
	margin: 0px auto;
	margin-top: 5px;
	width: 958px;
	border: 1px solid #000;
	background-color:#fff;
	}
#header {
	height: 181px;
	background-color: #990000;
	}
	
#suche{
	position:absolute;
	left:727px;
	top:46px;
	width:225px;
	height:28px;
	background:none;
	}
#navtop{
	position:absolute;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:left;
	color:#FFFFFF;
	left:739px;
	top:121px;
	width:214px;
	height:16px;
	}
#content {
	height: 250px;
	background-color: #fff;
	margin-left: 235px;
	padding:15px;
	}
#left{
	position: absolute;
	left: 0;
	width: 235px;
	background-color:#FF9900;
	padding-top:15px;
	}
#left2{
	position:absolute;
	left: 0;
	width: 235px;
	height:130px;
	background-color:#990000;
	}
#footer {
	height: 20px;
	text-align:center;
	padding-top:5px;
	margin-top:10px;
	margin-left:235px;
	margin-right:15px;
	border-top: 1px solid #666;
	}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.08.2007, 14:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von nomore Beitrag anzeigen
Weiß eventuell jemand Rat?
Wirf die absolute Positionierung raus. Es geht so nicht.
Du brauchst die Float-Eigenschaft. Grundlagen dazu unter FAQ Punkt 2.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.08.2007, 14:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wirf jegliches position: absolute; raus und nutze float & clear, dann lösen sich Deine Probleme von selbst.

EDIT:
Mit Zitat antworten
  #4 (permalink)  
Alt 14.08.2007, 17:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.08.2007
Beiträge: 4
nomore befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für die raschen Antworten. Ich habe es jetzt hin bekommen.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
problem mit layout --> testcase andip CSS 5 29.02.2008 15:10
css layout problem fz21z CSS 0 30.01.2008 23:41
Problem mit dreispaltigem Layout im IE Breezah CSS 7 13.08.2006 22:27
Problem mit 3-Zeiligem Layout guenterfrosch CSS 6 10.08.2006 13:41
Layout Problem smooth-graphics CSS 3 08.08.2006 18:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:03 Uhr.