✔ Menu links gefloated stört den Inhalt

Status
Nicht offen für weitere Antworten.
P

packman

Grünschnabel
Hallo Leute,

Ich habe eine CSS Testseite erstellt, das menu links geflouted und der Inhalt hat einen Abstand von links (margin-left: 135px) nun wirken sich aber die Menu Einträge auf den Inhalt aus. Es ensteht ein unnötiger Abstand im Inhalt, ab dem 3. Menu ist der der Abstand im Inhalt genau so gross wie das 3. Menu. Ich hab so das Gefühl, dass es mit dem: clear: left; zu tun haben kann.

wäre froh wenn sich das mal jemand kurz anschauen könnte

ps: habe erst vor kurzem mit css angefangen

HTML: 
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS TestPage</title>
<style type="text/css">

/* Page Style    */
body
{
	background-color:	#FFFFFF;
}
#page
{
	width:				800px;
	margin:				0 auto;
	font-family: 		arial;
	text-align: 		left;
	font-size:			12px;
	/*background-color:		#bdbec6;*/
	/*border:1px solid 		#000000;*/
}
#banner
{
	font-size:			24px;
	font-weight:		bold;
	background-color:	#CCCCCC;
	margin:				0 0 20px 0;
}
#content
{
	border:				1px solid #CCCCCC;
	margin-left: 		135px;
	padding: 			3px 5px 10px 7px;
}
#footer
{
	margin-top: 		10px;
	border: 			1px solid #CCCCCC;
	text-align: 		center;
}

/* ---- Einträge ----  */
.entry
{
	border: 			1px dashed #CCCCCC;
	padding: 			3px 3px 7px 3px;
	margin-top: 		5px;
}
.entry_titel
{
	float: 				left;
	width: 				80px;
	font-size: 			12px;
	font-weight: 		bold;
	margin: 			0px 10px 0px 15px;
}


/*  Menu Style   */
#menu
{
	float:				left;
	width: 				120px;
	/*border: 				1px solid #CCCCCC;*/
}
.menu_titel
{
	margin: 			0 0 0 0;
	padding: 			0 0 0 5px;
	background-color: 	#CCCCCC;
	font: 				italic small-caps bold 14px verdana, sans-serif;
}
.menu_content
{
	border-left: 		1px solid #CCCCCC;
	border-right: 		1px solid #CCCCCC;
	border-bottom: 		1px solid #CCCCCC;
	padding: 			5px 0 5px 5px;
	margin: 			0 0 30px 0;
}


/* Bestehende Elemente    */
p
{
	margin: 			5px 0px 10px 0px;
}
h1
{
	color: 				#FF0000;
	font-size: 			22px;
	margin: 			0px 0px 0px 0px;
}
h2
{
	font-size: 			13px;
	margin: 			10px 0px 5px 0px;
}
h3
{
	font-size: 			12px;
	font-style: 		bold;
	margin: 			10px 0px 5px 0px;
}


/* Links  */

	a:link, a:visited, a:hover, a:active{
	color:				#000000;
	text-decoration: 	none;
	border: 			0;
	border-bottom: 		1px solid #FF0000;
}

/* Zusatz Elemente   */
div.clear	/* stellt nach den floatenden Boxen den normalen Textfluss her */
{
	clear: 				left;
	font-size: 			1px;
}
</style>
</head>


<body>

<div id="page">
	<div id="banner">Banner</div>
	
	<div id="menu">
		<div class="menu_titel">Menu</div>
		<div class="menu_content">
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
		</div>
		<div class="menu_titel">Menu</div>
		<div class="menu_content">
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
		</div>
		<div class="menu_titel">Menu</div>
		<div class="menu_content">
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
			<a href="http://www.google.com">Google</a> <br />
		</div>
	</div>
	
	<!-- Inhalt -->
	<div id="content">
		<h1>TITEL</h1>
		<p>
		Nach Angaben von Rettungskr&auml;ften war Irwin auf der
		Stelle tot; die mit einem Helikopter eingeflogenen
		Rettungskr&auml;fte konnten ihm nicht mehr helfen. Irwin sei durch
		Herzstillstand gestorben, sagte der Notarzt. Der Dokumentarfilmer hatte
		in der beeindruckenden Unterwasserlandschaft des Great Barrier Reef vor
		der Nordostk&uuml;ste Australiens an einem Dokumentarfilm
		gearbeitet.
		Die scheuen Stachelrochen haben an ihrer Schwanzflosse
		einen giftigen Stachel, den sie als Waffe einsetzen, wenn sie sich
		bedroht f&uuml;hlen. Irwin habe sich mit den Dreharbeiten so nahe
		an Stachelrochen in h&ouml;chste Gefahr begeben, sagte der
		australische Naturfilmer David Ireland. "Sie haben einen oder zwei
		Stachel am Schwanz, die nicht nur von Gift umh&uuml;llt sind,
		sondern auch wie ein Bajonett wirken", erl&auml;uterte Ireland. Der
		Australier, dessen Markenzeichen Khaki-farbene Shorts und Hemden waren,
		war &uuml;ber die Landesgrenzen hinweg mit Fernsehsendungen
		ber&uuml;hmt geworden, in denen er sich ohne Scheu mit wilden
		Tieren umgab.
		</p>
		
		<h2>Die Lezten 5 Eintr&auml;ge: </h2>
		
		<!-- Eintrag -->
		<div class="entry">
			<div class="entry_titel">Name: </div> asd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Nachname: </div>asddd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Ort: </div>assd
			<div class="clear">&nbsp;</div>
		</div>
		<div class="entry">
			<div class="entry_titel">Name: </div> asd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Nachname: </div>asddd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Ort: </div>assd
			<div class="clear">&nbsp;</div>
		</div>
		<div class="entry">
			<div class="entry_titel">Name: </div> asd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Nachname: </div>asddd
			<div class="clear">&nbsp;</div>
			<div class="entry_titel">Ort: </div>assd
			<div class="clear">&nbsp;</div>
		</div>
		
	</div>
	
	<!-- stellt nach den floatenden Boxen den normalen Textfluss her -->
	<div class="clear">&nbsp;</div>


</div>

</body>
</html>
 
Es liegt wohl eher an dem linken Außenabstand, den Du für das DIV .entry_titel definiert hast:

Code: 
.entry_titel
{
        float:                                 left;
        width:                                 80px;
        font-size:                         12px;
        font-weight:                 bold;
        margin:                         0px 10px 0px 15px;
}
Setze daher mal den rotmarkierten Wert auf null.

Vielleicht hilft Dir das weiter?
 
Leider nein, den Abstan möchte ich, das ist der horizontale Abstand von links der soll schon so bleiben. Der vertikale Abstand der so gross wie das dritte Menu ausfällt solte nicht sein. Der zwischen Name und Nachname
 
Sorry, darauf hab ich eben nicht so geachtet ;)

Okay, verwende mal diese Regeln für das CSS-Layout:

Code: 
#content
{
        border:                                1px solid #CCCCCC;
        width:                 653px;
        padding:                         3px 5px 10px 7px;
        float:                       right;
}

div.clear        /* stellt nach den floatenden Boxen den normalen Textfluss her */
{
        clear:                                 both;
        font-size:                         1px;
}
 
Noch ein Tipp zum Schluß: Derzeit fehlt dem Dokument eine Doctype-Deklaration, weshalb der IE im Quirksmodus läuft und das Layout nicht im Fenster horizontal zentriert ;)
 
meinst du so einen?:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

hatte ich eigentlich drinnen, wahrscheinlich aber nicht mitgepostet. Wozu dient der genau?
 
Mit der Dokumenttyp-Deklaration bestimmst Du, welche Auszeichnungssprache in welcher Version für das Dokument verwendet wird.

Die Dokumenttyp-Definition (DTD) regelt wiederum, welche Elemente in dem Dokumenttyp enthalten sein dürfen, in welchen Elementen sie vorkommen dürfen, ihre Attribute, usw.

Links zum Thema:
  1. SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei / Dokumenttyp-Deklaration
  2. CSS 4 You - The Finest in Stylesheets: Workshop Doctype-Switch: Teil 1 - Doctype-Switching
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück