|
|||
Leere <div> Tags ohne spacer.gif
Ich möchte leere <div> Tags einsetzen, um bei einem dreispaltigen Layout zwischen den Spalten Platz zu schaffen. Also nutze ich insgesamt fünf Spalten nach dem Motto:
| A | B | A | B | A | Wobei ein A eine Spalte mit Inhalt kennzeichnet und B eine leere Spalte ist, die nur einen Abstand schaffen soll. Sieht dann ungefähr so aus: Code:
<div id="left">left col</div> <div id="space"></div> <div id="center">center col</div> <div id="space"></div> <div id="right">right col</div> Gibt's dafür einen Workaround? P.S. Mir ist klar, dass ich auch ein dreispaltiges Layout nehmen und margin bzw. padding einsetzen könnte, aber das stößt an seine Grenzen, wenn ich die Abstände z.B. andersfarbig haben will... |
Sponsored Links |
|
||||
Dann wirf schnell mal Deine B raus und gib für A einen Rahmen in der von Dir gewünschten Farbe an!
__________________
Informationen aus Koblenz-Metternich ----------------------------------- "Wissen heißt, Fragen zu erwerben." |
|
|||
Abstandhalter
Ich hätte gern die Möglichkeit, die Spalten für die Abstände einzeln und verschiedenfarbig einzufärben.
Das war auch nur ein Beispiel. Ich habe z.B. ein Layout, welches dynamisch Inhalt aus einer DB bekommt. Die Spalten sind wie folgt: | Navi | Content | Extra | Border | Manchmal aber bleibt die Spalte "Extra" leer. Wenn in "Border" was drin steht und in "Extra" nicht, dann bleibt das <div> Tag von "Extra" leer. Dadurch wird "Border" sichtlich mehr nach links verschoben und das ist echt ein Problem. |
|
|||
Border statt <div>
Der erste Tipp war gut: Ich nehme Rahmen anstelle von leeren <div> Tags, um Abstände zwischen zwei Spalten zu erzeugen. Geht viel einfacher, ist auch logisch und ich kann für jeden Abstand eine separate Farbe einstellen! Danke für den Denkanstoß!
Aber: Es bleibt das Problem bei dynamischen Inhalten. Beispiel: Im Code-Snippet mal ein vierspaltiges Layout. Wenn die Inhalte der Spalten dynamisch generiert werden und z.B. für die Spalte 'center' kein Inhalt vorgesehen ist (weil man vielleicht zuerst einen Untermenüpunkt wählen muss oder so), dann verschiebt sich die rechte Spalte nach links. Setzt man ein spacer.gif rein, dann bleibt alles an der richtigen Stelle. Hier zum Anschauen: http://droptix.dr.ohost.de/boards/xhtml-emptydiv/ Und hier der Code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>empty <div> tags</title> <style type="text/css"> <!-- body { background-color:#FFFFFF; text-align:center; } body, div { margin:0px; padding:0px; } #all { width:400px; margin:40px auto; background-color:#FFCC00; } #left { width:100px; background-color:#CCCCCC; float:left; } #center { width:100px; background-color:#999999; float:left; } #right { width:100px; background-color:#CCCCCC; float:left; } #extra { width:100px; background-color:#999999; float:right; } --> </style> </head> <body> <div id="all">Alle Spalten mit Inhalt <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> <div id="extra">extra</div> </div> <div id="all">Spalte 'center' ohne Inhalt <div id="left">left</div> <div id="center"></div> <div id="right">right</div> <div id="extra">extra</div> </div> <div id="all">Spalte 'center' mit spacer.gif <div id="left">left</div> <div id="center">[img]spacer.gif[/img]</div> <div id="right">right</div> <div id="extra">extra</div> </div> </body> </html> |
|
|||
Re: Border statt <div>
Zitat:
Gibst du dem Element z.B. ein padding-top, bleibt's schon da. Am sinnvollsten wäre wahrscheinlich eine Mindesthöhe. BTW: wenn du möchtest, dass alle Spalten bei egal wie viel Inhalt die gleiche Höhe haben, dann schau dich nach "faux columns" um. Grüße fricca |
Sponsored Links |
|
|||
Mindesthöhe
Min-height geht doch nich im IE... aber der zeigt ein leeres <div> ja trotzdem an. Find ich doof, dass es da keine Einigkeit gibt.
Jaja, 'faux columns' kommen auch noch auf mich zu. Habe einige Anleitungen gefunden, die allerdgins Lücken aufweisen und nicht eindeutig beschreiben, wie sie ans Ziel gekommen sind. Mit meinen bisherigen Ergebnisse sahen im IE immer gut aus (denn der zieht die Spalten grundsätzlich bis runter, so dass alle gleich lang sind), nur Mozilla trotzt rum Wird schon. Aber das mit min-height ist auch ne gute Idee! Danke! |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zwei <div> nebeneinander. Wie umschließendes <div> ausdehnen, wenn 2. <div> fehlt? | Mango | CSS | 2 | 11.03.2013 00:44 |
Strings die HTML Tags enthalten erkennen? | braindead | Serveradministration und serverseitige Scripte | 7 | 30.12.2008 19:54 |
Tabellenumrandung mit <div> tags | Exclaimer | CSS | 3 | 13.04.2006 15:55 |
Textsemantik und <div> tags | Titus | CSS | 1 | 11.04.2006 15:14 |
Eigene Tags in XHTML 1.1 | x-sharp | (X)HTML | 8 | 03.03.2005 21:53 |