nicht angemeldet
DIV Container relative Breite
Hallo!
Ich steh gerade wieder einmal auf dem Schlauch und brauch mal eure Hilfe.
Für eine neue Website in CSS hab ich u.a. einen Div Container der 30px hoch ist und 100% breit mit einer Hintergrundfarbe. In diesem Container soll nun ein weiterer Container sein, indem ein 2 zeiliger Text steht und eine andere Hintergrundfarbe hat.
Bis hier hin kein Problem, aber:
Nun möchte ich, dass dieser 2te Container genau in der vertikalen Mitte von Container 1 steht, und je nach Textinhalt von der Breite größer oder kleiner wird.
Wenn ich es mit float mache wechselt zwar die Größe, aber es ist halt links, oder rechts. Lasse ich float weg, verdeckt die Hintergrundfarbe des 2ten Containers die Hintergrundfarbe des 1ten.
Was mach ich falsch?
ND
-
Hi,
Nun möchte ich, dass dieser 2te Container [genau in der vertikalen Mitte von Container 1 steht, und] je nach Textinhalt von der Breite größer oder kleiner wird.
Also moechtest du eigentlich das Verhalten eines Inline-Elementes (bzw. eines als inline *dargestellten* Elementes).
MfG ChrisB
-
Hi!
Noachmal bitte: vertikal zentriert oder doch eher horizontal?
-
Noachmal bitte: vertikal zentriert oder doch eher horizontal?
»»
Sorry, natürlich horizontal.
Also moechtest du eigentlich das Verhalten eines Inline-Elementes (bzw. eines als inline *dargestellten* Elementes).
»»
?????? Was ??????
-
Hiho!
Wie man horizontal zentriert steht ausfuehrlich in den FAQ zum Forum. :D
Aber hier nochmal in kurz: Super (horizonatl) zentrieren kann man ueber margin. Gib einfach dem linken und rechten Rand den wert auto. z.B. margin: 0px auto;
Viel Erfolg.
-
Aber hier nochmal in kurz: Super (horizonatl) zentrieren kann man ueber margin. Gib einfach dem linken und rechten Rand den wert auto. z.B. margin: 0px auto;
Das mit margin auto war mein erster Versuch das Problem zu lösen. Doch leider klappt das nicht.
Hier mal der Quellcode (gekürzt) meines Problems:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>test</title>
<style type="text/css">#con1 {
width: 600px;
height: 30px;
background: #666666;
}#con2 {
margin: 0 auto;
height: 30px;
background: #FF0000;
text-align: center;
font-size: 12px;
}</style>
</head>
<body>
<div id="con1">
<div id="con2">
test test test test test test test test test test
<br>test test test test test test test test test test
</div>
</div></body>
</html>
Sobald ich das float left oder right rausnehme, überdeckt mir die con2 Hintergrundfarbe die con1 Hintergrundfarbe.
Also was mach ich falsch bzw. wo denke ich falsch.
-
Hi,
Das mit margin auto war mein erster Versuch das Problem zu lösen. Doch leider klappt das nicht.
Kann ja auch nicht - wenn du keine Breite angibst, nimmt das Div als Block-Element immer noch die gesamte verfuegbare Breite ein - und dann gibt es nun mal nix zu "zentrieren".
Also was mach ich falsch bzw. wo denke ich falsch.
Wenn du willst, dass sich das Div wie ein Inline-Element verhaelt, dann sorge per display-Eigenschaft dafuer, dass es das tut.
MfG ChrisB
-
Danke erstmal für eure Mithilfe, aber irrgendwie bekomm ich das nicht gebacken, wie ich das will. Als inline-block steht es zwar zentriert da, aber der Hintergrund passt wieder mal nicht, und als inline steht es rechts....
Am leichtesten wäre es wirklich mit einer festen Breite und z.B. über margin auto, aber ich will ja eigentlich eine variable Breite, wo nachgesehen wird wie lange der längste inhalt des divs ist, und dann die benötigte Breite dargestellt wird.
-
Hi,
Als inline-block steht es zwar zentriert da, aber der Hintergrund passt wieder mal nicht,
Du nimmst doch nicht ernsthaft an, "passt nicht" waere eine brauchbare Problembeschreibung?
und als inline steht es rechts....
Inline Elemente werden nicht ueber margin:auto zentriert; sie reagieren aber auf text-align.
MfG ChrisB
-
Du nimmst doch nicht ernsthaft an, "passt nicht" waere eine brauchbare Problembeschreibung?
sorry, das soll heißen, dass es zwar mittig ausgerichtet ist wie ich das will, aber der Hintergrund wieder die volle Breite ausnutzt. Und genau das will ich nicht. Sprich wenn du dir meinen geposteten code ansiehst, dann soll es so aussehen:
------------------------------------------------------------------
| grau |text rot text| grau |
------------------------------------------------------------------Von links nach rechts betrachtet: grauer Hintergrund, roter Hintergrund mit text drin, grauer Hintergrund.
Inline Elemente werden nicht ueber margin:auto zentriert; sie reagieren aber auf text-align.
Bei inline-block eben nicht, zumindest nicht bei mir. Es bleibt trotz text-align links stehen.
Schon langsam verzweifle ich daran....
-
Hi,
Inline Elemente werden nicht ueber margin:auto zentriert; sie reagieren aber auf text-align.
Bei inline-block eben nicht
Warum klammerst du dich denn so an inline-*block*?
Dir wurde doch jetzt schon mehrfach mitgeteilt, wenn du willst, dass ein Element nur so breit sein soll, wie es sein Inhalt erfordert, dann lasse es *inline* darstellen.MfG ChrisB
-
Ich glaub ich hab es jetzt!!!!!
Der Fehler von mir ist jetzt aber mehr als peinlich...
Durch das ewige konzentrieren auf den 2. Container, hab ich auf den Inhalt des 1. vergessen! Dort steht nämlich kein text-align drin!!!
Dadurch wird ja logischerweise der text bei inline links angezeigt, egal ob jetzt 1000-mal text-align center im zweiten steht.Manchmal ist es wirklich wichtig das "GANZE" mal mit Abstand zu betrachten.
Trotzdem, der Tipp mit inline hat mir wirklich weiter geholfen!!!
Danke vielmals dafür!!!So jetzt mal eine kurze Pause, und dann bau ich das endlich in meine HP ein...
-
Tag nochmal!
Funktioniert im IE jetzt genau so wie ich das will, aber im Firefox noch nicht. Und zwar besteht ja der Text aus zwei Zeilen mit unterschiedlicher Zeilenlänge. Der IE nimmt die längere Zeile als Breite für das gesamte div. Jedoch FF macht das mit jeder Zeile separat. Will heissen, dass ich statt einem schönen Block ein Stufengebilde habe. Gibt es nun noch eine Möglichkeit das anzupassen, dass es im FF genau so aussieht wie im IE?
Danke.
-
Yerf!
Will heissen, dass ich statt einem schönen Block ein Stufengebilde habe. Gibt es nun noch eine Möglichkeit das anzupassen, dass es im FF genau so aussieht wie im IE?
Das Problem ist: inline ist kein Block (der IE kann das blos mal wieder nicht richtig...) Eigentlich war inline-block schon das gesuchte, aber der FF kann das (noch) nicht.
Also ein inline für IE, ein -moz-inline-block für FF und ein inline-block für Opera (wie es mit anderen Browsern aussieht weis ich nicht.)
Eigentlich müsste es so gehen:
.klasse{
display:inline;
display:inline-block;
display:-moz-inline-block;
}Jeder Browser sollte dann das nehmen, welches er versteht (allerdings ungetestet).
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
-
-
-
-
-
-
-
Hiho!
Du denkst insofern falsch, als das Dein Code genau das macht, was man von ihm auch erwarten sollte. Ein Div ist normal immer 100% breit. Gib ihm eine Breite, oder wie Chris schon erwaehnt hat: nimm ein inline Element oder gib dem Div das Verhalten eines solchen.
-
-
-