CSS Formatierung

[mschoening]

Hi,
ich habe folgendes Problem: ich möchte ein DIV als "separator" benutzen. Der DIV hat per CSS ein "background-image" bekommen und soll 10px breit sein (das "background-image" widerholt sich auf der y-Achse, ist aber hier irrelevant). Das DIV ist im Code-Teil aber leer. Wie bekomme ich das mit CSS hin, dass es den trotzdem mit einer "width" von 10px anzeigt.

Gibt es da auch browser-compatibility issues?

<div class="separator"></div>

.separator {
float:left;
width:10px;
background-image:url(images/separator.png);
background-repeat:repeat-y;
}

 

[Nighthawk]

background-image:url(images/sepearator.png);
background-repeat:repeat-y;

Tippfehler?
Möglichereweise liegt's da dran, dass nix angezeigt wird

EDIT: Ich seh grad, deine Höhenangabe fehlt. Füg noch ein height:XXpx; ein.
EDIT2: Zu lahm...

 

[ChuckyGFX]

Versuch es mal indem du die höhe mit angibst. Das dürfte das problem eigentlich schon beheben.

 

[.holger]

die Klasse im CSS hat auch nen anderen Namen als das DIV.

 

[mschoening]

@Nighthawk: der Tippfehler ist nicht im original script nur hier im Forum.

@ChuckyGFX/Nighthawk: Nein height kann ich nicht nehmen da ich eine flexible Höhe brauch! Den Separator müsst ihr euch ungf. als Bildversion von border-left:1px grey dotted; vorstellen

 

[mschoening]

die Klasse im CSS hat auch nen anderen Namen als das DIV.

Nur hier im Forum...Tippfehler! Sorry :-D

 

[Nighthawk]

@ChuckyGFX/Nighthawk: Nein height kann ich nicht nehmen da ich eine flexible Höhe brauch! Den Separator müsst ihr euch ungf. als Bildversion von border-left:1px grey dotted; vorstellen

Du brauchst aber ne Höhe. Probiers halt mal mit 100%

 

[ChuckyGFX]

Ja aber wenn du ne flexible höhe brauchs...dann wird das ding doch eh gefüllt oda nicht?
Ansonsten ne prozentzahl mit übergeben...
ohne height wird das meiner meinung nach nix, weil ja kein bereich angegeben ist wo was rein muss...also wo ein background füllen wo kein inhalt ist? verstehst du was ich meine?

// edit: diesma war ich zu spät ;D

 

[mschoening]

Habt ihr noch einen Vorschlag ausser "height" mit anzugeben?

EDIT: Ja moment ich versuche es mit 100%

 

[mschoening]

Hi,
also es geht nur mit fixen angaben wie PX, sobald ich % oder auto nehme wird nichts angezeigt. Noch einen Vorschlag? Ich hatte mal irgendwo gelesen in das div ein span Element einzufügen und dann im CSS noch etwas für das span zu definieren, habe es aber leider nicht mehr im Kopf.

 

[Nighthawk]

Prozentangaben müssten doch gehen?
Probier mal position:absolute; bzw. position:relative;

 

[mschoening]

Neee LoL

 

[.holger]

gib in das DIV ein &nbsp; ! - also zwischen die <div ...> </div> Tags.

 

[mschoening]

Ja so gehts! Ist das auch valid CSS bzw XHTML? mit dem &nbsp;?

 

[.holger]

ja, das macht einfach nur ein Leerzeichen in HTML. also so:

<div class="separator">&nbsp; </div>

 

[mschoening]

Yep hast recht! Danke...

ich habe noch eine Frage:

was ist besser für ein 3-Spaltiges Layout:
float left, float left und float right

oder

die erste Spalte so wie sie ist, die zweite position absolute und right:XXXpx, und die dritte position absolute und right:XXXpx

Thanks,

 

[Nighthawk]

  funktioniert tatsächlich, auch wenn man keine Höhe angibt, oder wie hast du es nun gelöst?

 

[mschoening]

Ja mit  ...aber ich bin nocht nicht richtig zufrieden mit meine 3-Spalten Lösung

 

[.holger]

&nbsp; funktioniert tatsächlich, auch wenn man keine Höhe angibt, oder wie hast du es nun gelöst?

ja funktioniert.

@m.schoening ich würd das ganze von links aufbauen mit absoluten Angaben.

 

[mschoening]

Ja werde ich so machen! Float ist bei IE 5.5 ja nicht so toll! Aber ich verstehe eins nicht:
ich habe ein div als container um die 3 Spalten gemacht. So die erste spalte lasse ich ganz normal! Die zweite Spalte will ich mit absolute positionieren. Der positioniert die aber nicht relativ zu dem Container! Normalerweise ist absolute doch zu dem nächst höheren Element oder nicht?