Sponsored Links |
|
||||
Für unbegrenzte Skalierbarkeit in alle Richtungen brauchst Du 5 Grafiken: repeat-x, repeat-y, sowie die 3 "Ecken". Als Elemente zum Aufnehmen der Grafiken bieten sich natürlich das div sowie dessen erstes und letztes Kindelement an, in diesem Falle Überschrift und Liste (deren letztes li ginge sogar auch noch). Ab da wäre es das einfachste, divs zu verschachteln (d.h. weitere divs um das umgebende).
|
Sponsored Links |
|
||||
Der Inhalt ist ja grundsätzlich egal, es müßten nur immer das erste und letzte Element innerhalb des divs die entsprechende ID bekommen (immer jeweils dieselbe, egal ob nun ul oder p etc. das letzte Element ist).
Aber ich verstehe, was Du meinst - klar, wenn der Inhalt völlig "unberührt" bleiben soll, muß man 5 divs nehmen. Oder die ursprünglichen repeat-Grafiken sehr lang machen (und ihnen je eine Ecke verpassen), um auch ohne Wiederholung immer ausreichend Skalierbarkeit zu gewährleisten. Geändert von heiko_rs (22.10.2007 um 16:11 Uhr) |
|
||||
2 DIVs Schattenwurf
Mit nur 2 DIVs sollte es auch gehen:
Die CSS Datei: Code:
.out { display:block; background:#bbb; border:1px solid #ddd; position:relative; margin:.5em 0em; left:0em; width:55em; } .in { background:#fff; position:relative; left:-.25em; top:-.25em; margin:0; padding:1em 2em; } .midsize{ width:35em; } .narrow { width:20em; } .wide { width:50em; } Code:
<!-- WIDE --> <div class="out wide"><div class="in"> <p>Ich bin extra breit</p> </div></div> <!-- MIDSIZE --> <div class="out midsize"><div class="in"> <p>Dick? Wer hat gesagt ich wäre dick?</p> </div></div> <!-- NARROW --> <div class="out narrow"><div class="in"> <p>Ich bin ganz dünn...</p> </div></div>
__________________
To attain knowledge, add things everyday. To obtain wisdom, remove things everyday. (Lao Tzu) Links : Some needfull links (Delphi, XHTML...) Tools : Arpoon Freeware (Checksum...) |
|
||||
Nein, das ist ja eine Lösung ohne Grafiken, d.h. mit künstlich erzeugtem Schatten (per border und background-color). Falls Dir dieses Ergebnis "reicht" (ist rein optisch halt nicht so "High-Tech" wie eine Grafik-Lösung), kannst Du auf Grafiken verzichten.
|
Sponsored Links |
|
||||
ich benötige schon eine grafische Lösung.
Habe hier mal angefangen, aber das sieht alles nicht gut aus... Hast du eine Lösung meines Dilemmas? Code:
<style> #box_u {background: #4d87c7 url("../../../images/bg_blue.gif") repeat-x top left fixed; padding: 10px 0;} #box_r {background: #4d87c7 url("../../../images/bg_blue.gif") repeat-x top left fixed; padding: 10px 0;} </style> <div style="position: relative; width:250px; background-color:#FFFFFF"> <p>test</p> <p>test<br> </p> <div id="box_u" style="position: absolute; bottom: 0px; left: 0px; "><!--height:5px; schatten unten --></div> <div id="box_r" style="position: absolute; bottom: 0px; right: 0px; width:5px; height:25px;"><!-- schatten rechts --></div> </div> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
div rechts und links neben zentriertem div bis zum Rand je | marcus1302 | CSS | 4 | 05.02.2010 18:44 |
2 DIV container neben einander immer verschachtelt | compcasper | CSS | 2 | 19.02.2009 14:28 |
div Block rechts neben zentrierten Container setzen | unicorn | CSS | 3 | 12.12.2008 21:50 |
Container überlappen sich trotz clearing | Klaus_Hansen | CSS | 3 | 22.11.2008 18:29 |
Design Float IE6 Problem | koknarr | CSS | 10 | 05.09.2008 18:05 |