zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Leere <div> Tags ohne spacer.gif

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.08.2005, 22:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2005
Beiträge: 16
droptix befindet sich auf einem aufstrebenden Ast
Standard 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>
Das Problem: Die leeren <div> Tags werden umgangen und nicht angezeigt, selbst wenn ich im CSS explizit eine Breite angebe. Erst wenn ich z.B. ein spacer.gif oder einen Buchstaben reinsetze, dann erscheint die Spalte in der korrekten Breite.

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...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.08.2005, 22:20
Neuer Benutzer
neuer user
 
Registriert seit: 11.08.2005
Beiträge: 13
dreamshocker befindet sich auf einem aufstrebenden Ast
Standard

EDIT: SORRY...
__________________
_dshock*collecting dreams
//
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.08.2005, 22:42
Benutzerbild von Dieter
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 12.09.2003
Beiträge: 3.640
Dieter sorgt für eine eindrucksvolle AtmosphäreDieter sorgt für eine eindrucksvolle Atmosphäre
Standard

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."
Mit Zitat antworten
  #4 (permalink)  
Alt 17.08.2005, 23:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 23.03.2005
Beiträge: 1.033
Swoop befindet sich auf einem aufstrebenden Ast
Standard

Was willst du denn erreichen (mehr code, onlinebeispiel angeben), denn ich bin mir ziemlich sicher, dass es machbar sein wird
__________________
Shibby.....

Mein Blog
Mit Zitat antworten
  #5 (permalink)  
Alt 18.08.2005, 00:31
Benutzerbild von Geronimo
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.06.2004
Beiträge: 2.644
Geronimo sorgt für eine eindrucksvolle AtmosphäreGeronimo sorgt für eine eindrucksvolle Atmosphäre
Standard Re: Leere <div> Tags ohne spacer.gif

Zitat:
Zitat von droptix
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...
Sollen denn die Abstände eine identische Hintergrundfarbe haben? Denn dann könntest du einfach den umgebenden Bereich und / oder den Body einfärben.
Mit Zitat antworten
  #6 (permalink)  
Alt 18.08.2005, 02:16
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2005
Beiträge: 16
droptix befindet sich auf einem aufstrebenden Ast
Standard 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.
Mit Zitat antworten
  #7 (permalink)  
Alt 18.08.2005, 12:17
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.12.2004
Beiträge: 357
kippe befindet sich auf einem aufstrebenden Ast
Standard

Ohne Link zum Beispiel geht trotzdem nichts.

In jedem Falle aber gilt: Du brauchst absolut NIE leere Elemente zu benutzen!
__________________
Gruß,
Sebastian
Mit Zitat antworten
  #8 (permalink)  
Alt 18.08.2005, 13:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2005
Beiträge: 16
droptix befindet sich auf einem aufstrebenden Ast
Standard 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 &lt;div&gt; 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>
Mit Zitat antworten
  #9 (permalink)  
Alt 18.08.2005, 19:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard Re: Border statt <div>

Zitat:
Zitat von droptix
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.
center "verschwindet", weil es in der Höhe keine Ausdehnung hat, wenn es leer ist (außer im IE )
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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.08.2005, 22:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.08.2005
Beiträge: 16
droptix befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Zwei <div> nebeneinander. Wie umschließendes <div> ausdehnen, wenn 2. <div> fehlt? Mango CSS 2 10.03.2013 23:44
Strings die HTML Tags enthalten erkennen? braindead Serveradministration und serverseitige Scripte 7 30.12.2008 18:54
Tabellenumrandung mit <div> tags Exclaimer CSS 3 13.04.2006 14:55
Textsemantik und <div> tags Titus CSS 1 11.04.2006 14:14
Eigene Tags in XHTML 1.1 x-sharp (X)HTML 8 03.03.2005 20:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:23 Uhr.