nicht angemeldet
CSS Layout verschiebt sich sobalt ein Inhalt eingefügt wird.
Hallo,
ich habe ein Layout mit CSS erstellt. Es besteht aus vier div boxen.
Eine oben für das Logo und zwei darunter, mit dem Menu und dem Inhalt (Menu & Inhalt nebeneinander). Die drei divs habe ich zum Zentrieren in ein weiteres div gepackt.
Soweit so gut, es schaut so aus wie ich es erwarte. Nur wenn ich jetzt ein <p></p> in die Inhaltsbox einfüge, verschiebt sich die Box um ein paar (ca 10-20px?) Pixel nach unten
+----------+
| |
+----+-----+
| | |
| | |
| | |
| | |
| | |
+----+-----+
--------------------------------HTML------------------------------
<body>
<div id="zentriert">
<div id="logo"></div>
<div id="menu"></div>
<div id="inhalt"></div>
</div>
</body>
------------------------------------------------------------------
--------------------------------CSS------------------------------
body {
margin: 0px;
padding: 0px;
background-color: #f4d17d;
font-family: Arial,Helvetica,Times New Roman,sans-serif;
font-size:1.0em;
color: #000000;
text-align: center;
}
#zentriert {
border-style: none;
border-color: black;
margin: 0px auto;
padding: 0px;
height: 700px;
width: 850px;
text-align: left;
}
#logo {
border-style: none;
border-color: black;
margin: 0px;
padding: 0px;
background-image: url(../images/logo01.gif);
background-position: left top;
background-repeat: no-repeat;
background-color: #f4d17d;
width: 850px;
height: 175px;
text-align: center;
}
#menu {
border-style: none;
border-color: black;
margin: 0px;
padding: 0px;
background-image: url(../images/bgmenu2.gif);
background-repeat: no-repeat;
width: 200px;
height: 700px;
text-align: left;
float: left;
}
#inhalt {
border-style: none;
margin: 0px 0px 0px 200px;
padding: 0px;
background-image: url(../images/bginhalt.gif);
width: 650px;
height: 700px;
text-align: left;
font-size: medium;
float: none;
}
------------------------------------------------------------------
-
Jetzt hatte ich den Vorschaubutton nicht angeklickt :-/.
Meine Frage sollte ja klar sein. Wo liegt mein Denkfehler?Grüße & ein schönes WE
Alex-
Hi,
Jetzt hatte ich den Vorschaubutton nicht angeklickt :-/.
Meine Frage sollte ja klar sein. Wo liegt mein Denkfehler?das liegt vermutlich daran, dass du die per Default vorhandenen Margin-Werte für p (und diverse andere Block-Level Elemente, wie auch alle <hx>) nicht "abgefangen"/ geändert hast.
Du solltest dir zum Entwickeln unbedingt auch mal den Firefox mit dem Addon Firebug zulegen. Damit findet man solche Dinge im Handumdrehen!
Gruß Gunther
-
Hallo Gunther,
danke für den Tipp mit Firebug! Es scheint auf den ersten Blick ein richtig nützliches Tool zu sein.
Ich werde mich damit jetzt mal auseinander setzen und schauen ob ich den Fehler aufspüren kann.Grüße Alex
-
-