nicht angemeldet
<DIV><DIV> Ich will in die Mitte! </DIV></DIV>
Hallo,
folgender Code zeichnet eine große grüne Box (id="greenBox") aus, die drei rote Boxen (id="redBox") beinhaltet.
Die drei roten Boxen werden (wie im Code impliziert) nebeneinander im Stil einer Menübar angezeigt (so weit funktioniert alles).
Proble... LÖSUNGSIMMANENTE ANGELEGENHEIT:
Was bei der grünen Box gelingt, will mir bei den drei roten Boxen nicht gelingen; - nämlich die horizontal zentrierte Ausrichtung...
Auweh oje ein Satz mit e,
weiß hier jemand mein Leid zu beenden?
Ein dankender Kuss im Voraus,
Conny.
--------
Und hier noch der [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=utf-8" />
<title>DIV MITTIG STRITTIG</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#greenBox {
margin: 0 auto 0 auto;
width: 1200px;
height: 50px;
border: 0px;
background-color: #006600;
}
#redBox {
float: left;
width: 220px;
background-color: #FF0000;
padding: 0.6em 0em 0.6em 0;
margin-top: 12px;
margin-right: 1px;
text-align: center;
}
-->
</style></head>
<body>
<div id="greenBox">
<div id="redBox">SOOO gern wären wir in der Mitte!</div>
<div id="redBox">SOOO gern wären wir in der Mitte!</div>
<div id="redBox">SOOO gern wären wir in der Mitte!</div>
</div>
</body>
</html>
-
was machst du, wenn die greenBox eines Tages rot sein soll?
-
was machst du, wenn die greenBox eines Tages rot sein soll?
?
background-color: #FF0000;[OFF-TOPIC]
-
Hi!
was machst du, wenn die greenBox eines Tages rot sein soll?
?
Es geht darum sinnvolle Bezeichner zu wählen, die nicht die *aktuell gewünschte* Darstellung beschreiben. Z.B: "infoBox" oder "navBox" statt "greenBox".
off:PP
--
"You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
-
Hi!
was machst du, wenn die greenBox eines Tages rot sein soll?
?
Es geht darum sinnvolle Bezeichner zu wählen, die nicht die *aktuell gewünschte* Darstellung beschreiben. Z.B: "infoBox" oder "navBox" statt "greenBox".
off:PP
<!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=utf-8" /> <title>DIV MITTIG STRITTIG</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } #IDSJPF { margin: 0 auto 0 auto; width: 1200px; height: 50px; border: 0px; background-color: #006600; } #Peter_Pan { float: left; width: 220px; background-color: #FF0000; padding: 0.6em 0em 0.6em 0; margin-top: 12px; margin-right: 1px; text-align: center; } --> </style></head> <body> <div id="IDSJPF"> <div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div> <div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div> <div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div> </div> </body> </html>Geht's euch jetzt besser?
-
<div id="IDSJPF">
<div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div>
<div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div>
<div id="Peter_Pan">SOOO gern wären wir in der Mitte!</div>
</div>
</body>Geht's euch jetzt besser?
Ich vermag nicht einzuschätzen, inwiefern Peter Pan sich jetzt geschmeichelt fühlt, aber es ist definitiv zu viel der Ehre.
Oder im Klartext: Da das id-Attribut zur Identifikation verwendet wird, muss der Wert dokumentweit eindeutig sein. Spätestens beim Einsatz von Javascript wird dir obiges Konstrukt zum Verhängnis.
Für deinen Zweck bietet sich entweder das class-Attribut an, oder der Selektor div#IDSJPF div.
Gruß Fabulit
-
Moin!
Ich vermag nicht einzuschätzen, inwiefern Peter Pan sich jetzt geschmeichelt fühlt, aber es ist definitiv zu viel der Ehre.
Peter Pan kann sich spätestens seit 1918 nicht mehr geschmeichelt fühlen. Hier ist sein Heldengrab:
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
Moin!
Nur um das für das Abmahngaunerpack gleich klar zu stellen: Die Rechte am Foto liegen bei mir.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix
-
-
-
-
-
-
-
Was bei der grünen Box gelingt, will mir bei den drei roten Boxen nicht gelingen; - nämlich die horizontal zentrierte Ausrichtung...
Meinst Du so?
#greenBox { margin:0 auto; width: 1200px; border: 0px; padding:2em; background-color: #006600; text-align:center; } #redBox { display:inline; width: 220px; margin:0 1em; background-color: #FF0000; padding: 0.6em 0em 0.6em 0; text-align: center; }Gruß H.
-
Was bei der grünen Box gelingt, will mir bei den drei roten Boxen nicht gelingen; - nämlich die horizontal zentrierte Ausrichtung...
Meinst Du so?
#greenBox {
margin:0 auto;
width: 1200px;
border: 0px;
padding:2em;
background-color: #006600;
text-align:center;
}
#redBox {
display:inline;
width: 220px;
margin:0 1em;
background-color: #FF0000;
padding: 0.6em 0em 0.6em 0;
text-align: center;
}> > Gruß H. > Das ISSES! Danke! Letzte Frage: wie schaffe ich es jetzt, #redBox am UNTEREN Rand von #greenBox zu positionieren?-
Letzte Frage: wie schaffe ich es jetzt, #redBox am UNTEREN Rand von #greenBox zu positionieren?
Als Tipp: kennst du Firebug (ein PlugIn für den Firefox)? Dieses Tool ist z. B. dann eine große Hilfe, wenn es darum geht zu prüfen welche Abstände aus welchen CSS-Angaben resultieren, welche CSS-Angabe womöglich von einer anderen überschrieben wird, etc.
In deinem Fall solltest du mal schauen, inwiefern das Padding der greenBox den von dir unerwünschten Effekt auslöst.
Gruß Fabulit
-
-
-
Ah, danke Conny, mir geht's besser! Na ja, fast... ach, ich fühle mich schon wieder schlecht. Zack Teufel! Was genau bezweckst du denn hiermit:
<!--
?