leere DIVs

[sandra]

Hi,

ich weiss, man tut es nicht.. also leere DIVs verwenden. Mir fällt nur ehrlich gesagt für mein aktuelles Problem keine andere Lösung ein. Ich fände es nicht schlimm leere DIVs zu benutzen aber vielleicht fällt ja jemand ein anderer Lösungsweg ein.

Mein Problem:

Rechteck mit abgerundeten Ecken, einem Rand mit Schatten und das ganze hat schräge Linien im Hintergrund.

Wegen dem Hintergrund habe ich mich dazu entschlossen 4 Grafiken zu machen.

eine hat quasi den "Kopf" des Rechtecks sprich beide abgerundete Ecken + ein Stück Hintergrund mit drauf.
Die andere Grafik den unteren Teil und dann noch jeweils eine Grafik von links und rechts.

Mein Code dazu schaut so aus:

  
<div style="position:absolute; left: 100px; top:400px; z-index:2; height: 400px;">  
	<div style="width:289px; position:absolute; top:0px">  
		<img src="oben.png">  
	</div>  
	<div style="width:31px;background-image: url(seitelinks.png); background-repeat: repeat-y; position:absolute; top: 31px; left:0px; float:left; height:338;"></div>  
	<div style="width:31px;background-image: url(seiterechts.png); background-repeat: repeat-y; position:absolute; top: 31px; left:258px; float:left; height:338;"></div>  
	<div style="width:289px; position:absolute; bottom:0px;">  
		<img src="unten.png">  
	</div>  
</div>  

Wie man sieht sind die mittleren Divs leer und das soll man ja angeblich nicht machen. Ich habe mir überlegt die Grafik per img src einzubinden aber mir ist kein Web bekannt grafiken sich wiederholen zu lassen ausser über den Hintergrund. "Großziehen" geht auch nicht weil ja die Querstreifen im Hintergrund sind und die würden ja dann gestreckt werden.

Jemand eine Idee?

[suit]

Jemand eine Idee?

border-radius und box-shadow

alternative für den IE
filter: progid:DXImageTransform.Microsoft.Shadow()

Auf runde Ecken wird verzichter und wenns unbedingt sein muss musst du per vml nachhelfen.

Aber aufgrund deiner Beschreibung ist es schwierig zu sagen, ob diese Lösung etwas taugt.

[Gunnar Bittersmann]

@@suit:

nuqneH

border-radius und box-shadow

Und für Firefox braucht man nicht einmal für die schrägen Linien ein Hintergrundbild: -moz-repeating-linear-gradient.

Beispiel für runde Ecken und Schatten

Qapla'

[sandra]

also bei mir geht das box-shadow zeug überhaupt nicht. Egal in welcher Ausprägung auch mit moz etc. Ich glaub ich bleib bei Grafiken. Da weiss ich was ich habe, dass es überall funktioniert und sollte ich mal blümchen am rand haben wollte dann tausch ich die Grafiken und gut ist.

[sandra]

ahhh ja,

so jetzt nachdem ich alles mal positioniert habe ist mir noch ein Nachteil von "border-radius" aufgefallen und zwar:

dunkler Hintergrund, heller Border und das div liegt auf einem hellen Hintergrund. Bei den Rundungen sieht man das dunkle des Hintergrunds, oder das gehört sich so und ist immer so. Keine Ahnung aber das ist doof!

[suit]

dunkler Hintergrund, heller Border und das div liegt auf einem hellen Hintergrund. Bei den Rundungen sieht man das dunkle des Hintergrunds, oder das gehört sich so und ist immer so. Keine Ahnung aber das ist doof!

Du verwendest scheinbar einen defekten Browser.

[Felix Riesterer]

Liebe sandra,

nicht immer muss es ein <div> sein. Was spricht denn gegen folgendes Konstrukt?

<p class="rund">  
    <span class="oben"></span>  
    <span class="unten-links"></span>  
    <span class="unten-rechts"></span>  
    Hier steht der eigentliche Inhalt...  
</p>

Das macht die Sache zwar kaum besser, aber semantisch ist es doch etwas anderes, denn das eigentliche Element (<p>) ist ein echter Textabsatz und dazu nicht in bedeutungslose Elternelemente verschachtelt.

Die Möglichkeiten von CSS3 mit border-radius wurden bereits angesprochen. Es ist die Frage, ob Du veraltete Browser, die das noch nicht unterstützen, überhaupt noch so vollumfänglich bedienen willst.

Wenn Deine abgerundeten Elemente eine feste Breite haben, dann genügt bereits ein leeres Element am Anfang, da Du dann eine lange schmale Grafik mit zwei runden Ecken als Hintergrundbild verwenden kannst. Da sparst Du gleich zwei sinnbefreite Elemente ein:

<p class="rund">  
    <span class="oben"></span>  
    Hier steht der eigentliche Inhalt...  
</p>

Im obigen Beispiel könnte das so aussehen:

.rund        .oben

|   .--------.
       |   |        |
       |
       |

°--------°

Liebe Grüße,

Felix Riesterer.

[Felix Riesterer]

technische Korrektur (wegen meiner Forumseinstellungen)

.rund        .oben
 |        |   .--------.
 |        |   |        |
 |        |
 |        |
 °--------°

Liebe Grüße,

Felix Riesterer.

[suit]

technische Korrektur (wegen meiner Forumseinstellungen)

.rund        .oben
|        |   .--------.
|        |   |        |
|        |
|        |
°--------°

Bei einer festen Breite und einer definierten maximalhöhe geht das auch mit einer Grafik.

[sandra]

technische Korrektur (wegen meiner Forumseinstellungen)

.rund        .oben
|        |   .--------.
|        |   |        |
|        |
|        |
°--------°

Bei einer festen Breite und einer definierten maximalhöhe geht das auch mit einer Grafik.

Ja mir entgeht aber ehrlich gesagt hier total der Sinn überhaupt 2 zu nehmen. Ich kann sie so nach dem vorschlag, wenn sie größer werden musst defintiv nicht ausdehnen, da die Querstriche "gezogen" werden würden.

Heisst ich brauche mindestens oben, unten, mittelteil, wenn ich eine variable höhe haben möchte. oder ich steh schon wieder auf dem Schlauch.

[suit]

Heisst ich brauche mindestens oben, unten, mittelteil, wenn ich eine variable höhe haben möchte. oder ich steh schon wieder auf dem Schlauch.

Bei einer Variablen höhe ist ein "mittelteil" sicher nicht verkehrt, das ändert aber nichts an der Tatsache, dass man das in eine Grafik packen kann.

Die Grafik sieht dann in etwa so aus:

|//////////| |//////////| .----------.
°----------° |//////////| |//////////|

Welchen der drei Teile du anzeigst, regelst du mittels background-position (left, center, right).

[suit]

<p class="rund">

<span class="oben"></span>
    Hier steht der eigentliche Inhalt...
</p>

  
  
ggf. schadet es nicht, so ein span-Element mit der Klasse "before" auszustatten damit - sollte irgendwann mal ::before allgemein unterstützt werden und sich border-radius noch nicht entsprechend verbreitet habe - man einfach im css 2 Zeilen austauscht und auf die Pseudoklasse umbauen kann bzw. gleich mal weiß, was gemeint ist.  
  
Alternativ kann man in guten Browsern mit ::before arbeiten und in anderen Browsern dieses Element per JavaScript nachreichen.

[Gunnar Bittersmann]

@@suit:

nuqneH

Alternativ kann man in guten Browsern mit ::before arbeiten und in anderen Browsern dieses Element per JavaScript nachreichen.

Wobei das JavaScript auch mit im Stylesheet steht (CSS-Expression).

Qapla'