nicht angemeldet
Boxabstand innerhalb eines Wrappers
0 0 0 0 
Gunnar Bittersmann
0
0
Boxabstand innerhalb eines Wrappers
Hallo
Ich hab glaub ich gerade einen Gedankenfehler im Design. Kann mir jemand auf die Sprünge helfen. Anbei mein Problem sehr stark vereinfacht.
#wrapper{width:600px;}
.container{width:195px;margin-left:5px;margin-bottom:5px;float:left}
<div id="Wrapper">
Inhalt
</div>
<div id="Wrapper">
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
<div class="container">Inhalt</div>
...
</div>
Was ich gerne hätte wäre das die Container, wo die Anzahl unbekannt ist, alle konstant innerhalb 5px zueinander Abstand haben. Jedoch nicht der ganz linke Container, da er genau am Rand bleiben soll, was mit margin-left:5px natürlich nicht der fall ist. Margin-right geht auch nicht weil ich dann wieder rechts den Abstand am Wrapper habe der auch nicht sein soll. Sprich ich will an den Aussenkanten eine gemeinsame Fluchtlinie.
So in der Art:
----------------------------
| |
----------------------------
----------------------------
|| | | | | ||
|| | | | | ||
|| | | | | ||
|| | | | | ||
----------------------------
Geht das nur über einen zweiten übergeordneten Wrapper wo man den Abstand dann simuliert, oder kann man das mit CSS auch innerhalb eines Wrappers lösen? Steh gerade vollkommen im Wald. ;)
lg
-
-
evtl. hilft dir http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=first-child
Sollte das auch mit DIV funktionieren? Bei mir funktioniert das nicht.
lg
-
Sollte das auch mit DIV funktionieren? Bei mir funktioniert das nicht.
Hängt vom Browser ab.
-
Sollte das auch mit DIV funktionieren?
ja
Bei mir funktioniert das nicht.
das ist keine gute/sinnvolle Fehlerbeschreibung
-
Sollte das auch mit DIV funktionieren?
ja
Bei mir funktioniert das nicht.
das ist keine gute/sinnvolle Fehlerbeschreibung
Naja was will man da groß Fehlerbeschreiben. Im FF3.6 hat es 0 Effekt => funktioniert nicht ;)
lg
-
-
-
-
Hi,
#wrapper{width:600px;}
.container{width:195px;margin-left:5px;margin-bottom:5px;float:left}
> Was ich gerne hätte wäre das die Container, wo die Anzahl unbekannt ist, alle konstant innerhalb 5px zueinander Abstand haben. Jedoch nicht der ganz linke Container, da er genau am Rand bleiben soll, was mit margin-left:5px natürlich nicht der fall ist. Margin-right geht auch nicht weil ich dann wieder rechts den Abstand am Wrapper habe der auch nicht sein soll. Sprich ich will an den Aussenkanten eine gemeinsame Fluchtlinie. Das haut ja bei den von dir angegebenen Maßen ja sowieso nicht hin. Oder wie willst du die Anzahl x der Elemente nebeneinander wählen, so dass x\*195+(x-1)\*5 = 600 ergibt ...? MfG ChrisB -- “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi,
#wrapper{width:600px;}
.container{width:195px;margin-left:5px;margin-bottom:5px;float:left}
> > Das haut ja bei den von dir angegebenen Maßen ja sowieso nicht hin. > > Oder wie willst du die Anzahl x der Elemente nebeneinander wählen, so dass x\*195+(x-1)\*5 = 600 ergibt ...? Abgesehen das es nur eine Demo war funktioniert das schon => (195+5)\*3 = 600 pro Zeile. Es ist ja gefloated-
Hi,
Oder wie willst du die Anzahl x der Elemente nebeneinander wählen, so dass x*195+(x-1)*5 = 600 ergibt ...?
Abgesehen das es nur eine Demo war funktioniert das schon => (195+5)*3 = 600 pro Zeile. Es ist ja gefloated
Ja, und?
Trotzdem willst du ja links und rechts keinen Abstand, sondern nur zwischen den Elementen. Also hast du eben nicht so oft 5px, wie du auch 195px breite Elemente hast, sondern ein mal weniger.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi,
Oder wie willst du die Anzahl x der Elemente nebeneinander wählen, so dass x*195+(x-1)*5 = 600 ergibt ...?
Abgesehen das es nur eine Demo war funktioniert das schon => (195+5)*3 = 600 pro Zeile. Es ist ja gefloated
Ja, und?
Trotzdem willst du ja links und rechts keinen Abstand, sondern nur zwischen den Elementen. Also hast du eben nicht so oft 5px, wie du auch 195px breite Elemente hast, sondern ein mal weniger.
Bingo, darum geht es ja .. ich weiß das ich im gezeigten Bsp. pro Line einmal 5px zuviel hab... das BSP war ja eigentlich vo vorn herein zum scheitern ausgerichtet um das Problem zu demonstrieren. Dachte da gibt es vielleicht einen Hack das man es für das erste oder letzte Element der Zeile overriden kann. Der Ansatz von User Gast war so in die Richtung wie ich mir gedacht habe, das es sowas geben könnte.
Hab es jetzt altebacken gelöst und geb den Wrapper darüber einfach ein margin-left:5px mit, und ziehs beim übergeordneten wieder ab, und ich bin wieder in einer Flucht. Glücklich bin ich mit der Lösung zwar nicht, weil ich zu dieser endlos Verschlachtelorgien von Container nicht so preferiere, aber es funktioniert, alles andere ist mir dann jetzt egal weil Zeit ist Geld, und das wiederum hat bekanntlich keiner ;)
thx, lg
-
-
-
-
[code lang=css]#wrapper{width:600px;}
<div id="Wrapper">
<div id="Wrapper">einerseits: wrapper != wrapper - CSS-Selektoren sind case-sensitive - der IE nimmts in manchen Versionen aber nicht so genau damit.
Anderseits: eine ID muss dokumentweit eindeutig sein, 2x dieselbe ID darf nicht sein und kann zu nicht kontrollierbaren Fehlern führen.
-
@@suit:
nuqneH
einerseits: wrapper != wrapper
?? ;-)
CSS-Selektoren sind case-sensitive
?? [CSS2 §4.1.3]
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
einerseits: wrapper != wrapper
?? ;-)
Ich reiche einen Blasebalg nach um eines der W's zu vergrößern sowie ein "nicht" :p
-
@@suit:
nuqneH
Ich reiche einen Blasebalg nach um eines der W's zu vergrößern sowie ein "nicht" :p
Hm, ein o kann man zu O aufblasen, aber wie soll in einem w die Luft drinbleiben?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Hm, ein o kann man zu O aufblasen, aber wie soll in einem w die Luft drinbleiben?
Stell dir das W als Hohlkörper vor :p
-
-
-
-
Eselsbrücke: _W_eib
Und wenn’s kopfsteht? _M_ann?
Mein Lieblings-KFZ-Kennzeichen in Österreich ist ein M, also ein Wiener der auf dem Dach liegt :p
-
@@suit:
nuqneH
Mein Lieblings-KFZ-Kennzeichen in Österreich ist ein M, also ein Wiener der auf dem Dach liegt :p
Lass das mal Thomas J.S. und Orlando (noch hier?) hören. ;-)
Und Shadowcrow ist deine Lieblings-Stammposterin?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Mein Lieblings-KFZ-Kennzeichen in Österreich ist ein M, also ein Wiener der auf dem Dach liegt :p
Lass das mal Thomas J.S. und Orlando (noch hier?) hören. ;-)
Und Shadowcrow ist deine Lieblings-Stammposterin?
Ich fürchte ich kann dir nicht ganz folgen, da mir nicht bekannt ist, woher die genannten stammen - aber hauptsache es sind keine Preißn :p
-
@@suit:
nuqneH
Lass das mal Thomas J.S. und Orlando (noch hier?) hören. ;-)
Und Shadowcrow ist deine Lieblings-Stammposterin?
Ich fürchte ich kann dir nicht ganz folgen, da mir nicht bekannt ist, woher die genannten stammenMir schon (bei den Jungs).
Bei Shadowcrow ging’s auch nicht um die Herkunft, sondern ihre Unterschrift.
aber hauptsache es sind keine Preißn :p
Wat soll’n dit heiß’n? Pass ja uff, sonst jibt et Keile.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Bei Shadowcrow ging’s auch nicht um die Herkunft, sondern ihre Unterschrift.
Welche - die Unterschrift wechselt permanent :p
Wat soll’n dit heiß’n? Pass ja uff, sonst jibt et Keile.
:)
-
'ǝɯɐu$ ıɥ
Bei Shadowcrow ging’s auch nicht um die Herkunft, sondern ihre Unterschrift.
Welche - die Unterschrift wechselt permanent :p
huh? ich glaub die hat nur einmal gewechselt, oder meintest du meine sig(s)?
ssnɹƃ
ʍopɐɥs--
Gerne der Zeiten gedenk' ich, da alle Glieder gelenkig - bis auf eins.
Doch die Zeiten sind vorüber, steif geworden alle Glieder - bis auf eins.
Johann Wolfgang von Goethe-
huh? ich glaub die hat nur einmal gewechselt, oder meintest du meine sig(s)?
Jetzt hab' ich's auch kapiert - Gunnar meinte tatsächlich deine Unterschrift, ich hab' allerdings auf die Signatur geschlossen :p
-
-
-
-
-
-
-
-
-
-
-
-
-
-
[code lang=css]#wrapper{width:600px;}
<div id="Wrapper">
<div id="Wrapper">einerseits: wrapper != wrapper - CSS-Selektoren sind case-sensitive - der IE nimmts in manchen Versionen aber nicht so genau damit.
Danke, aber das weiß ich eh. War ja nur vereinfacht zum veranschaulichen, damit klar ist wars ich meine. Hab das übersehen das es jetzt doppelt war
lg
-