nicht angemeldet
Margin verschiebt Container
Hallo
Ich habe folgendes Problem:
Mein Menü #mainnav hat ein Hintergrundbild (mainnav.png) das der Button darstellen soll. Wenn ich jetzt in den Container mit dem Hintergrundbild schreiben möchte, positioniert es den Text nicht in die Mitte. Deshalb verwende ich z.B. margin-top: 8px; um die Schrift 8 pixel von dem oberen Containerrand zu verschieben. Doch statt nur die Schrift zu verschieben, verschiebt es den ganzen #mainnav Container!
Hier das Bild:
http://img84.imageshack.us/img84/6207/mainnav.gif
Style.css:
body
{
margin: 0;
padding: 8;
font: 10pt "Comic Sans MS", "Times New Roman";
text-align: center;
color: #333;
background-color: #FFFFFF;
background-image: none;
}
#container
{
margin: 1em auto;
width: 900px;
text-align: left;
background-color: #CCCCCC;
border: 1px solid #000000;
}
#header
{
height: 170px;
width: 900px;
background-repeat: no-repeat;
background-position: 0 0;
position: relative;
}
#mainnav
{
width: 900px;
height: 28px;
background-color: #CCCCCC;
background-image: url(images/mainnav.png);
color: #FFFFFF;
font-family: "Comic Sans MS", "Times New Roman";
font-size: 14px;
font-variant: small-caps;
text-decoration: none;
text-align: center;
margin-top: 8px;
index.php
<div id="container">
<div align="justify">
<div id="header"> <img name="austausch" src="header1.gif" alt="austausch"></div>
</div>
<div id="mainnav">
<div align="left">sdag</div>
</div>
<div id="contents">
<div align="center">
<p><h1>Willkommen auf unserer Homepage</h1>
</div>
</div></div>
-
Doch statt nur die Schrift zu verschieben, verschiebt es den ganzen #mainnav Container!
Works as designed:
Box model: 8.3.1 Collapsing marginsWenn ein Element einen Innenabstand haben soll, gib ihm einen Innenabstand - nicht den betreffenden, darinliegenden Elementen, einen Außenabstand.
-
Doch statt nur die Schrift zu verschieben, verschiebt es den ganzen #mainnav Container!
Works as designed:
Box model: 8.3.1 Collapsing marginsWenn ein Element einen Innenabstand haben soll, gib ihm einen Innenabstand - nicht den betreffenden, darinliegenden Elementen, einen Außenabstand.
sorry, aber wie geht das
hab noch nie davon gehört!
wäre dir echt dankbar wennd u mir helfen könntest!-
Doch statt nur die Schrift zu verschieben, verschiebt es den ganzen #mainnav Container!
Works as designed:
Box model: 8.3.1 Collapsing marginsWenn ein Element einen Innenabstand haben soll, gib ihm einen Innenabstand - nicht den betreffenden, darinliegenden Elementen, einen Außenabstand.
sorry, aber wie geht das
hab noch nie davon gehört!
wäre dir echt dankbar wennd u mir helfen könntest!meinst du zb padding-top: 8px;?
dann passiert das:
die schrift wäre zwar in der mitte, doch der hintergrund ist wieder hinauf geschoben worden, zwar nicht der ganze container, aber dafür die schrift und der hintergrund
-
Hi,
meinst du zb padding-top: 8px;?
dann passiert das:
die schrift wäre zwar in der mitte, doch der hintergrund ist wieder hinauf geschoben worden, zwar nicht der ganze container, aber dafür die schrift und der hintergrund
Ich werde aus dieser Art von "Problembeschreibung" nicht schlau.
Deshalb möchte ich die Lektüre der Tipps für Fragende empfehlen.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Hi,
meinst du zb padding-top: 8px;?
dann passiert das:
die schrift wäre zwar in der mitte, doch der hintergrund ist wieder hinauf geschoben worden, zwar nicht der ganze container, aber dafür die schrift und der hintergrund
Ich werde aus dieser Art von "Problembeschreibung" nicht schlau.
Deshalb möchte ich die Lektüre der Tipps für Fragende empfehlen.
MfG ChrisB
Hi
Ich entschuldige mich für die schlechte beschreibung des Problems.
Meine Website hat einen Container der #mainnav heißt und das Menü darstellen soll. In den Container wurde ein Hintergrundbild eingefügt. Doch wenn ich in den Container reinschreibe, kann ich den Text nicht formatieren, d.h. ich möchte den Text mittig verschieben.
Folgendes hab ich bereits versucht:
padding-top: 8px
margin-top: 8pxBei margin-top: 8px wird der gesamte Container um 8px von oben verschoden
Bei padding-top: 8px wird zwar nicht der gesamte Container verschoben, aber der Hintergrund wird verschoben was nicht gewünscht ist!Ich wäre sehr dankbar für eine Antwort!
lg-
Hi,
bitte zitiere sinnvoll, nicht immer einfach alles!
Bei margin-top: 8px wird der gesamte Container um 8px von oben verschoden
Na dafür ist margin ja auch da.
Bei padding-top: 8px wird zwar nicht der gesamte Container verschoben, aber der Hintergrund wird verschoben was nicht gewünscht ist!
Vermutlich hältst du das Hintergrundbild deshalb für "verschoben", weil du dir noch nicht klar gemacht hast, dass sich durch das padding auch die Höhe des Elements ändert.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Bei margin-top: 8px wird der gesamte Container um 8px von oben verschoden
Na dafür ist margin ja auch da.
Bei padding-top: 8px wird zwar nicht der gesamte Container verschoben, aber der Hintergrund wird verschoben was nicht gewünscht ist!
Vermutlich hältst du das Hintergrundbild deshalb für "verschoben", weil du dir noch nicht klar gemacht hast, dass sich durch das padding auch die Höhe des Elements ändert.
hi
vielen dank für die Erklärung
Jetzt ist es mir klar weshalb ich nicht das gewünschte Desing habe.
Kennt jemand vielleicht eine andere möglichkeit um den Text richtig zu positionieren?
lg-
Hi,
Vermutlich hältst du das Hintergrundbild deshalb für "verschoben", weil du dir noch nicht klar gemacht hast, dass sich durch das padding auch die Höhe des Elements ändert.
Jetzt ist es mir klar weshalb ich nicht das gewünschte Desing habe.
Kennt jemand vielleicht eine andere möglichkeit um den Text richtig zu positionieren?Wenn du padding hinzufügen willst, ohne dass sich die Höhe des Elements ändert - dann verringere den Wert für letztere doch einfach.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.
-
-
-
-
-
-
-