zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Container ragen aus anderen heraus

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.03.2007, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 4
Trikerdaniel befindet sich auf einem aufstrebenden Ast
Standard Container ragen aus anderen heraus

Hi All

Ich bin im Moment an meinem ersten CSS Layout. Ein relativ simples, aber ich habe Trotzdehm Probleme.
Das Design steht eigentlich, aber die Boxen ragen aus dem Container. Ich habe die FAQ durgelesen. Dort wird das Problem behandelt, aber es funktioniert bei mir einfach nicht. Hier habe ich Euch den Code zu meinem Design.

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></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="left">
<div id="newsbox">{HEADLINES_FILE}</div>
<div id="navi">{NAVBAR_FILE}</div>
<div id="search">
<form action="?section=search" method="post" name="searchForm">
<input type="text" name="term" value="Suchen" />
<input class="go" value="Go" name="Submit" type="submit" />
</form>
<!-- search --></div>
<div id="print">
<p><a href="[[PRINT_URL]]" class="meta">Seite Drucken</a></p>
<p><a href="index.php?section=recommend">Seite Weiterempfehlen</a></p>
<!-- print --></div>
<div id="referenzen">{BLOCK_RANDOMIZER}</div>
<!-- left --></div>
<div id="right">
<div id="content">{CONTENT_FILE}</div>
<!-- right --></div>
<!-- main --></div>
<div id="footer">
<div id="footerinhalt">
© 2006 Darodesign - <a href="index.php?page=707">Impressum</a> |  Sie sind der [[VISITOR_NUMBER]]. Besucher</div>
<!-- footer --></div>
<!-- container --></div>
</body>
</html>
Code:
/* allgemein */
* {
	margin: 0;
	padding: 0;
}

body {
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #ffffff url(images/bg.gif) top left repeat;
	}
	
#container {
	width: 100%;
	margin-left: 0;
	margin-right: auto;
}

#header {
	width: 100%;
	height: 168px;
	background: url(images/header_bg.jpg) top left no-repeat;
	margin: 0;
	padding: 0;	
	border-bottom: 2px solid #fff;
}

#main {
	width: 730px;
	background: url(images/bg_haupt.gif) top left repeat-y;
}

div#main {
	clear: both;
}

#right {
	width: 496px;
	margin-left: 232px;
	}
	
#content {
	padding: 5px;
}

#left {
	position: absolute;
	top: 168px;
	left: 0px;
	width: 230px;
}

#newsbox {
	background-color: Black;
	color: White;
	margin-top: 10px;
	padding: 5px;
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
	
}

#navi {
	margin-top: 10px;
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
}

#search {
	margin-top: 10px;
	padding: 5px;
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
	text-align: center;
	background-color: #F3F3F3;
}

#search input {
	background-color: #e5e5e5;
	border: 1px solid #999;
	padding: 2px;
}

#search .go {
	background-color: #e5e5e5;
	border: 1px solid #999;
	padding: 1px;
}

#print {
	margin-top: 10px;
	padding: 5px;
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
	background-color: #F3F3F3;
}

#referenzen {
	margin-top: 10px;
	padding: 5px;
	border-bottom: 2px solid #fff;
	border-top: 2px solid #fff;
	background-color: #F3F3F3;
}

#footer {
	width: 100%;
	height: 33px;
	background: url(images/footer_bg.gif) top left repeat-y;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;	
}

#footerinhalt {
	margin-left: 293px;
	margin-top: 8px;
	width: 496px;
}
Danke zum voraus für Eure Hilfe
Daniel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.03.2007, 14:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

wo ist Dein clearfix in #main? Einfach nur #main ein clear mitzugeben ist sinnlos, die floats beginnen ja erst in #main. Du musst clearen bevor #main endet.

EDIT: Solange Du in main absolut positionierst, ist natürlich jedes clear für die Katz. Absolut positionierte Elemente stehen völlig unabhängig vom Rest da. das "aus einem Container herausragen" in den FAQ bezieht sich nur auf floats.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.03.2007, 14:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 4
Trikerdaniel befindet sich auf einem aufstrebenden Ast
Standard

Hallo Mazzo

Danke für Deine Antwort.
Ich habe nun einmal meine Absolute Position auf Float geändert.

Code:
#left {
	float: left;
	width: 230px;
}
Aber den clear: both; kann ich setzen wo ich will, es ändert sich leider nichts!

Daniel
Mit Zitat antworten
  #4 (permalink)  
Alt 05.03.2007, 14:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Bitte lies und versteh wie float und clear (und im speziellen clearfix) funktionieren. Ein einfaches clear: both; reicht für Deinen Fall nicht aus. Erst Recht nicht, wenn es vor den floats definiert wird.
Mit Zitat antworten
  #5 (permalink)  
Alt 05.03.2007, 14:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2007
Beiträge: 4
Trikerdaniel befindet sich auf einem aufstrebenden Ast
Standard

Dann versuch ichs mal.
Danke für Deine Hilfe
Daniel
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
Container verschoben UNTER anderen Container setzen. Flux CSS 1 15.08.2009 07:59
Container geht nicht über alle anderen divs Hurrican CSS 1 10.08.2008 11:12
Container ragen aus anderen heraus amandine CSS 32 04.03.2008 16:24
Container ragt (nur im IE7) aus anderen heraus Pixelchen2008 CSS 5 13.01.2008 18:43
Objekte in einem anderen container platzieren ?? twm CSS 7 31.03.2005 15:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:48 Uhr.