SELFHTML Forum
SELFHTML Forumsarchiv
2006
Juli
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 31. 07. 2006, 22:40
Hallo!
Ich wollte mal wissen ob es eine Möglichkeit gibt, div-Boxen nebeneinander anzuordnen ohne ein "margin-left" plus "float:left"??
Wie macht man das am besten?
mfg.
Die folgende Nachricht zum Thema stammt von: Gunther, 31. 07. 2006, 23:38
Hallo Jan Niklas!
»»
»» Ich wollte mal wissen ob es eine Möglichkeit gibt, div-Boxen nebeneinander anzuordnen ohne ein "margin-left" plus "float:left"??
Ja, gibt es!
»» Wie macht man das am besten?
Dazu wäre es hilfreich, wenn du dein Anliegen mal etwas genauer beschreiben könntest, denn dann könnte eine mögliche Antwort evt. auch etwas präziser ausfallen.
Gruß Gunther
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 01. 08. 2006, 00:09
»» Hallo Jan Niklas!
»» »»
»» »» Ich wollte mal wissen ob es eine Möglichkeit gibt, div-Boxen nebeneinander anzuordnen ohne ein "margin-left" plus "float:left"??
»»
»» Ja, gibt es!
»»
»» »» Wie macht man das am besten?
»»
»» Dazu wäre es hilfreich, wenn du dein Anliegen mal etwas genauer beschreiben könntest, denn dann könnte eine mögliche Antwort evt. auch etwas präziser ausfallen.
»»
»» Gruß Gunther
Also meine linke div-box hat eine breite von 10 em und einen border von 1px. die rechte div box soll 10px Abstand zur linken haben und besitzt auch einen 1px border. Sie soll den Rest des Bildschirms bekommen.
mfg.
Die folgende Nachricht zum Thema stammt von: Ingo Turski, 01. 08. 2006, 00:43
Hi,
»» Also meine linke div-box hat eine breite von 10 em
also width:1em; gloat:left
»» die rechte div box soll 10px Abstand zur linken haben
warum so exakt? margin-left:10.7em sollte es auch tun, oder?
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
Die folgende Nachricht zum Thema stammt von: Ingo Turski, 01. 08. 2006, 00:45
Hi,
»» also width:1em; gloat:left
Murks, eine Taste nicht angesprungen und einmal knapp daneben getippt. Sollte natürlich heißen:
width:10em; float:left
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 01. 08. 2006, 00:47
»» Hi,
»»
»» »» Also meine linke div-box hat eine breite von 10 em
»» also width:1em; gloat:left
»»
»» »» die rechte div box soll 10px Abstand zur linken haben
»» warum so exakt? margin-left:10.7em sollte es auch tun, oder?
»»
»» freundliche Grüße
»» Ingo
Die Möglichkeit kannte ich schon, ist aber nen bisschen dirty, da es dann nicht genau passt und um ein paar Pixel verschoben ist, vorallem wenn jemand ne andere Schriftgröße eingestellt hat. Deswegen wollte ich von euch wissen ob's auch ne saubere w3-like Lösung gibt. Geht's nicht anders?
mfg.
Die folgende Nachricht zum Thema stammt von: Gunther, 01. 08. 2006, 00:49
Hi Ingo,
»»
»» »» Also meine linke div-box hat eine breite von 10 em
»» also width:10em; float:left
»»
»» »» die rechte div box soll 10px Abstand zur linken haben
»» warum so exakt? margin-left:10.7em sollte es auch tun, oder?
z.B. wenn der Abstand zwischen den Spalten bspw. gleich bleiben soll, unabhängig von der Schriftgröße. Eine Variante, die ich persönlich bevorzuge, da ich (viel) breiter werdende Zwischenräume hauptsächlich als "Platzverschwendung" ansehe.
Gruß Gunther
Die folgende Nachricht zum Thema stammt von: Gunther, 01. 08. 2006, 00:45
Hallo Jan Niklas!
»» »» »» Ich wollte mal wissen ob es eine Möglichkeit gibt, div-Boxen nebeneinander anzuordnen ohne ein "margin-left" plus "float:left"??
»» Also meine linke div-box hat eine breite von 10 em und einen border von 1px. die rechte div box soll 10px Abstand zur linken haben und besitzt auch einen 1px border. Sie soll den Rest des Bildschirms bekommen.
Bei deinen gewünschten Breitenangaben und Abstandsgrößen ist die Methode der Wahl doch genau die von dir beschriebene, wobei du jeweils in DIV 1 und 2 noch ein weiteres DIV Element verschachteln solltest, denen du dann die gewünschten Werte für die margins und borders verpasst.
Möglichkeit A:
DIV 1 left floaten mit einer width von 10em und DIV 2 mit width:auto und einem margin-left:10em (wobei ich eher einen Wert etwas größer als 10em nehmen würde, um Probleme durch Rundungsfehler zu vermeiden, bspw. 10.1em)
┌-----------------------------------┐
| DIV 1 DIV 2 |
|┌------------┐┌-------------------┐|
||float:left ||width:auto ||
||width:10em ||margin-left:10em ||
|| || ||
|| || ||
| |
| |
| |
└-----------------------------------┘
Andere Möglichkeiten wären z.B. beide DIVs (left/right) floaten zu lassen. Eingeschlossen in ein Wrapper DIV mit bspw. width:100% bekäme DIV 1 dann eine width von 20% und DIV 2 80%.
Oder du verwendest die display Eigenschaft mit den Werten table, table-row und table-cell. Diese Möglichkeit funktioniert aber nicht in den IEs Win/Mac.
Oder es bestünde theoretisch die Möglichkeit DIV 1 bspw. absolut zu positionieren (wovon ich allerdings abraten würde!).
Oder, oder, oder ..., dem Einfallsreichtum und den Kombinationsmöglichkeiten sind kaum Grenzen gesetzt. Es kommt halt immer auch auf den konkreten Anwendungsfall an, welche Methode man am besten wählt. Wie eingangs bereits erwähnt, halte ich Möglichkeit A in deinem Fall wohl für die beste.
Gruß Gunther
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 01. 08. 2006, 01:20
Zu Möglichkeit A:
Nur wo ist jetzt der Abstand von 10px zwischen den Div-Boxen garantiert?
Zu Möglichket B:
Werd ich mir mal angucken mit table-row. Thema IE: Mal wieder... Kann man die eigentlich wegen starker Wutanfälle und Selbstmordversuche verklagen?
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 01. 08. 2006, 01:25
»» Zu Möglichket B:
»» Werd ich mir mal angucken mit table-row. Thema IE: Mal wieder... Kann man die eigentlich wegen starker Wutanfälle und Selbstmordversuche verklagen?
Hab mir das mit dem table ding mal angeguckt, doch das Problem ist, dass jetzt die Beiden div-Boxen gleich hoch sind, dies sollte aber nicht so sein. Oder lässt sich das umgehen?
mfg.
Die folgende Nachricht zum Thema stammt von: Gunther, 01. 08. 2006, 01:44
»» Zu Möglichket B:
»» Hab mir das mit dem table ding mal angeguckt, doch das Problem ist, dass jetzt die Beiden div-Boxen gleich hoch sind, dies sollte aber nicht so sein. Oder lässt sich das umgehen?
Nein, denn genau_darin_liegt ja der Vorteil dieser Methode.
»» ...dies sollte aber nicht so sein.
Davon hattest du bis jetzt nichts geschrieben! ;-)
Gruß Gunther
Die folgende Nachricht zum Thema stammt von: Gunther, 01. 08. 2006, 01:41
»» Zu Möglichkeit A:
»» Nur wo ist jetzt der Abstand von 10px zwischen den Div-Boxen garantiert?
»» »» wobei du jeweils in DIV 1 und 2 noch ein weiteres DIV Element verschachteln solltest, denen du dann die gewünschten Werte für die margins und borders verpasst.
Gruß Gunther
Die folgende Nachricht zum Thema stammt von: Jan Niklas Hasse, 01. 08. 2006, 02:12
»» »» Zu Möglichkeit A:
»» »» Nur wo ist jetzt der Abstand von 10px zwischen den Div-Boxen garantiert?
»»
»» »» »» wobei du jeweils in DIV 1 und 2 noch ein weiteres DIV Element verschachteln solltest, denen du dann die gewünschten Werte für die margins und borders verpasst.
»»
»» Gruß Gunther
Danke! Mein Fehler, hatte nicht genau gelesen. Jetzt klappt alles!!
mfg.
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)