Divbox fängt nicht bei 0/0 an...

Darian · 23. Mai 2008

Hallo Leute,

da ich gerade dabei bin ein paar Test Sachen zu probieren, habe ich wieder einmal ein eher komisches Problem mit CSS.

Mich wundert es wieso die Box nicht oben links anfängt, obwohl top:0px und left:0px ist.
Wieso der Rahmen der Tabelle nicht genau dort umrahmt wo die Box ist.

Ich habe die Rahmen eingeblendet um mein Problem besser darzustellen. (siehe Anhang)

HTML-Code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DHTML MenüTest</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="menu_left">
	<ul>
		<li onmousover="show_submenu(1)">Menü 1</li>
		<li>Menü 2</li>
		<li>Menü 3</li>
		<li>Menü 4</li>
	</ul>
</div>
</body>
</html>

CSS-Code:

Code:

#menu_left {
	position:relative;
	top:0px;
	left:0px;
	width:70px;
	height:100px;
	border:solid 1px;
	
}

#menu_left ul{
	border:solid 1px red;
}

#menu_left li a:hover {
	background-color:#ffffff;;
}



#menu_left li{
	background-color:#ffff33;
	height:25px;
	width:70px;
	line-height:25px;
	padding:5px;
	list-style:none;
	border-top:solid 1px;
	cursor:pointer;
}

Ist schon irgendwie durcheinander, und wäre daher super wenn ich ein paar Infos bekomme.

lg und danke für eventuelle Infos
Darian

Maik · 23. Mai 2008

Hi,

setz zunächst mal die in den Browsern unterschiedlich voreingestellten Polsterungseigenschaften des Listenelements auf null zurück, dann werden seine Listenpunkte li auch wie gewünscht am oberen und linken Boxenrand ausgerichtet:

Code:

#menu_left ul{
        border:solid 1px red;
        margin:0;
        padding:0;
}

Und damit die Box #menu_left unmittelbar am oberen und linken Browserfensterrand beginnt, müssen hier ebenfalls besagte Polsterungseigenschaften des Viewports und Dokumentkörpers zurückgesetzt werden:

Code:

html,body {
margin:0;
padding:0;
}

Diese beiden Regelerweiterungen kannst du aber auch mit Hilfe des Universal-Selektors * für alle im Dokument enthaltenden Elemente global festlegen, der zu Beginn des Stylesheets notiert wird:

Code:

* {
margin:0
padding:0;
}

Desweiteren ist dir bei den Breitenangaben gemäß dem CSS-Boxmodell ein Fehler unterlaufen - entweder muss #menu_left 82px, oder die Listenpunkte nur 58px breit sein.

Gleiches gilt für die Höhenangaben: entweder ist das Elternelement #menu_left 146px hoch, oder die Listenpunkte besitzen nur eine Höhe und Zeilenhöhe von jeweils 14px.

Darian · 24. Mai 2008

Hallo Leute,

ah ja, verstehe schon, das mit dem Standardpolster war mir bis jetzt nicht klar, also am besten immer bevor man anfängt mal alles löschen.

Und der Fehler mit meinem Boxmodelling habe ich jetzt auch verstanden, hat ja auch keinen Sinn es doppelt anzugeben. Habe es also bei einem gelöscht, damit es nicht doppelt definiert wird.

Danke und liebe Grüsse
Darian

Divbox fängt nicht bei 0/0 an...

Darian

Erfahrenes Mitglied

Anhänge

Maik

Darian

Erfahrenes Mitglied

Neue Beiträge