• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Schatten - Problem?!

Status
Für weitere Antworten geschlossen.
Loon3y

Loon3y

Neues Mitglied
Moinsen,

langsam häufen sich meine Fragen wieder....aber irgendwie muss ich ja zu einer lösung kommen :)

ich würde gerne links und rechts von der Page einen leichten / dezenten Schatten haben. Mit CSS3 wäre das eine leichtigkeit...aber leider sind wir noch nicht so weit.

Jetzt war mein erster gedanke "floatest du einfach links und rechts davon jeweils links und rechts den schatten und positionierst es mit bottom". Schön und gut. Was ist aber jetzt wenn sich der contentbereich erhöht? Die grafik ist 600px hoch. Was ist wenn der content auf, sagen wir mal, 700px wächst? dann hab ich oben bei den ersten 100px keinen schatten.

Schön und gut, es wäre leicht zu lösen, wenn es NUR schatten wäre. dann hätte ich einfach ~20px hohe grafik genommen und sie x-mal in die y-achse wiederholt. aber wie schaut es denn aus wenn ich am boden einen farbverlauf noch habe?

Wie soll ich dies hinbekommen?!

Grüße und Anhang.

Loon3y

P.S.: sry für die plumbige paint zeichnung ;) der schwarze rand ist der schatten die 3 farben sollen den "farbverlauf" darstellen.
 

Anhänge

  • verlauf.jpg
    verlauf.jpg
    3,2 KB · Aufrufe: 10
Werbung:
Du musst einfach Schatten (die Grafik darf dann oder sollte sogar nur 1px hoch sein) und den Farbverlauf voneinander trennen. D. h. einmal ein DIV (oder den Body selbst missbrauchen) für den Farbverlauf und dadrüber ein DIV für den Schatten.
 
Körnerbrötchen schrieb:
Du musst einfach Schatten (die Grafik darf dann oder sollte sogar nur 1px hoch sein) und den Farbverlauf voneinander trennen. D. h. einmal ein DIV (oder den Body selbst missbrauchen) für den Farbverlauf und dadrüber ein DIV für den Schatten.
Zum Vergrößern anklicken....

wäre natürlich eine idee... hmm ^^

edit ok geht nicht! Ich habe den farbverlauf in den body getan, hatte ich schon vorher...ABER ich habe noch einen footer unten wo kein schatten sein darf. d.h.

footer: 5px
inhalt+navi+header: 595px

-> inhalt+navi+header darf schatten haben, inhalt ändert sich aber in der höhe.
 
Zuletzt bearbeitet:
Werbung:
anders geht's auch nicht. Du brauchst auf jeden Fall zwei Schichten. Wie du die herstellst, ist dann natürlich eine andere Sache. Theoretisch braucht man dafür sogar gar kein DIV, sondern missbraucht html und body als Container. ;)

edit: Wo ist das Problem? Gib mal Code her.
 
css
Code: 
body { 
margin:0; 
padding:0; 
font-size:0.9em; 
font-family:Arial, Tahoma, Geneva, Helvetica, sans-serif; 
background-image: url("gfx/body_gradient.gif"); 
background-repeat: repeat-x; 
background-position: bottom; 
}

body * { margin:0; padding:0; }

div#over { 
width: 918px; 
height: 100%; 
margin: 0px auto; 
}

div#header            
{ 
height:102px; 
width: 900px; 
margin: 0px auto;
background-image: url("gfx/navi.gif"); 
}

div#flash    
{ 
width:900px; 
height: 400px;
text-align:right; 
margin:0px auto; 
background-image: url("gfx/bg.png"); 
}

div#borderleft    { 
float:left; 
width: 9px; 
height: 400px; 
background-image: url("gfx/border_left.gif"); 
background-repeat: no-repeat; 
background-position: bottom; 
}

div#borderright    { 
float:right; 
width: 9px; 
height: 400px; 
background-image: url("gfx/border_right.gif"); 
background-repeat: no-repeat; 
background-position: bottom; 
}

div#bottom    
{ 
width: 918px; 
height: 50px; 
margin:0px auto; 
background-image: url("gfx/footer_mirror_complete.gif"); 
}

div#main { 
width: 900px; 
min-height: 500px; 
margin:0px auto; 
position:relative; 
background-image: url("gfx/bg.png"); 
}

div#unternavi { 
width: 160px; 
position:absolute; 
left: 20px; 
right: 0px; 
top: -400px; 
bottom: 0px; 
background-image: url("gfx/unternavi-bg.gif"); 
}
html
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title> Testseite </title>

<link href="page.css" media="screen" rel="stylesheet" type="text/css" />

</head><body>
<div id="over">
    <div id="header"> 
     <h1> <a href="index.htm"><img src="gfx/header.gif" width="160" height="80" alt="Willkommen" /> </a> </h1>
     <ul id="navigation">
        <li class="first"> puntk 1 </li>
        <li> punkt 2  </li>
     </ul>
    </div>
    <div id="flash">
    </div>
    <div id="borderleft"> </div>
    <div id="borderright"> </div>
    <div id="main">
     <div id="unternavi">
     </div>
    </div>

</div>
<div id="bottom"> </div>
</body></html>
es gibt leider auch ncoh ein problem mit dem main, da ich ihn relative positionieren muss wegen der unternavigation...urgs.....bitte nicht deswegen rumnörgeln..bin grad dabei die fehler zu beheben..und hänge beim schatten fest.

Edit: ist nicht die komplette css, nicht wundern.
 
Wow die reinste DIV-Suppe. Ich mach dir einfach mal vor, wie ich mir das vorstelle.

Code: 
[DOCTYPE]
<html>
<head>
[...]
</head>
<body>
<div class="schatten">
</div>
</body>
</html>

CSS:
Code: 
body {
background-image:url(img/bg.png);
background-repeat:repeat-x;
background-position:bottom;
}

.schatten {
background-repeat:repeat-y;
background-image:url(img/schatten.png);
width:soundsoviel px;
}
Der Schatten sieht dann so aus, als dass links der Schatten ist und rechts. Dazwischen ganz viel weiß. Allerdings ist mein Beispiel nicht ganz dolle, denn hier wird mit fixen Breiten gearbeitet. Für variable Breiten mit ein wenig Umbau, aber sehr gut verwendbar.
 
Werbung:
Körnerbrötchen schrieb:
Wow die reinste DIV-Suppe. Ich mach dir einfach mal vor, wie ich mir das vorstelle.
Zum Vergrößern anklicken....

jein. was ist daran div suppe?

header-div -> kommt noch eine navigation mit sprachauswahl rein, deswegen ein div ums <h1>
navigation-ul -> passt
flash-div -> nicht von der höhe von 400px irritieren, das hab ich vorerst mal damit ich einen anhaltspuntk habe.
main-div -> inhalt
subnavi-div -> div außenrum, weil nicht nur navigation, sondern auch etwas textliches stehen wird.

das einzigste was man entfernen könnte ist das borderleft-div und borderright-div. oder sehe ich das falsch?

Grüße und Bitte um Verbesserungsvorschläge.

Loon3y


ok das wäre ein möglichkeit...allerdings schlecht, da wenn das ganze vergrößert wird der schatten verschwindet..d.h. man müsste schon getrenntest hintergrundbild benutzen...

Edit: ok ich korregieren mich....beim header brauch ich kein div. geht auch so positionieren da <h1> unabhängig von <ul> positionieren geht...sry.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben