zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div-Container mit Schatten rechts und unten?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.10.2007, 12:06
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard Div-Container mit Schatten rechts und unten?

Hallo,
wie der Name der Frage schon sagt würde ich gerne eine/mehrere Div Container in meiner Seite verwenden mit einem schicken Schatten rechts und unten.
Diese werden diverse Längen und Breiten haben, also nicht unbedingt immer gleich.

Sollte in etwa so aussehen:


Am oberen Rechten Rand und am linken unteren Rand fängt der Schatten etwas versetzt an, das sollte am besten auch so bleiben(wenn mans überhaupt merkt?).

Wenn jemand Rat hat zu diesem Problem dann wäre ich ganz glücklich wenn er was dazu sagen kann!

Lg
Jenny
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.10.2007, 16:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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).
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.10.2007, 16:32
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

kann man das nicht algemeiner machen,
Sozusagen als Universalcontainer, egal was für ein Inhalt reinkommt?
Evtl. mit 5 divs?

Lg
Mit Zitat antworten
  #4 (permalink)  
Alt 22.10.2007, 17:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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 17:11 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 22.10.2007, 17:20
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

Wie würdest du den die 5 divs anordnen?
ein Aussendiv und die 5 innen mit floats?
Müsste ja vom Aufbau so sein wie auf dem Bild:



Aber wie baue ich denn das HTML am besten?

Lg
Mit Zitat antworten
  #6 (permalink)  
Alt 22.10.2007, 17:32
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Nie leere Elemente verwenden - einfach 5 divs ineinander und zuguterletzt den Inhalt rein
Mit Zitat antworten
  #7 (permalink)  
Alt 22.10.2007, 19:25
Benutzerbild von Loïs Bégué
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2007
Ort: Freiburg (D)
Beiträge: 779
Loïs Bégué wird schon bald berühmt werden
Standard 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;
        }
und in der (X)HTML-Datei:
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>
(in Anlehnung an Stuart Nicholls's Simple fluid drop shadows)
__________________
To attain knowledge, add things everyday. To obtain wisdom, remove things everyday. (Lao Tzu)
Links : Some needfull links (Delphi, XHTML...)
Tools : Arpoon Freeware (Checksum...)
Mit Zitat antworten
  #8 (permalink)  
Alt 30.10.2007, 17:23
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

Wow, das sieht echt gut aus.
Aber wie mache ich das jetzt mit Grafiken?
Also eigene Schattengrafiken?

Lg
Jenny
Mit Zitat antworten
  #9 (permalink)  
Alt 30.10.2007, 17:28
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.10.2007, 17:48
Benutzerbild von jenny79
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 14.06.2006
Beiträge: 137
jenny79 befindet sich auf einem aufstrebenden Ast
Standard

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>
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
div rechts und links neben zentriertem div bis zum Rand je marcus1302 CSS 4 05.02.2010 19:44
2 DIV container neben einander immer verschachtelt compcasper CSS 2 19.02.2009 15:28
div Block rechts neben zentrierten Container setzen unicorn CSS 3 12.12.2008 22:50
Container überlappen sich trotz clearing Klaus_Hansen CSS 3 22.11.2008 19:29
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:17 Uhr.