Box Shadow Hilfe!
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
boxen
break
code
container
eigenschaft
element
header
helfen
hilfe
http
image
inhalt
navigation
position
problem
schatten
schritt
tag
url
-
Hallo Leute,
Ich hab ein tag/problem">Problem mit meiner Homepage ...
Ich möchte um meine ganze Homepage ein Schatten haben der mitgeht falls sich die Höhe der Seite verändert ... Ich habs teilweise hinbekommen bloß die Navigation soll nicht betroffen sein ... Ich bitte um Hilfe :
HTML:
<!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> <link rel="shortcut icon" href="images/favicon.png" /> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>fabi-me</title> </head> <body> <div id="homepage"> <div id="header"> </div> <div id="navi"> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> </ul> </div> <div id="content"> <div id="contenttext"> <div class="oben"><div class="textoben">Seite wird bald gestartet !</div></div> <div class="unten"><div class="textunten">WITZLOS ! und <a href="downloads/rappidprofffence.zip">Download</a></div></div> </div> </div> <div id="contentmenu"> TEST </div> </div> </body> </html>
CSS:
body{ background-repeat:repeat; background-color:#f4f4f4; } #homepage{ margin: 0 auto; width:1024px; height:242px; box-shadow: 8px 0 10px #888, -8px 0 10px #888; -moz-box-shadow: 8px 0 10px #888, -8px 0 10px #888; -webkit-box-shadow: 8px 0 10px #888, -8px 0 10px #888; } #header{ width:1024px; height:200px; background-color:#f4f4f4; background-image: url(images/banner.png); } #content{ background-color:#FFF; width:1024px; min-height:600px; max-height:auto; height:auto; position:absolute; border-top:none; box-shadow: 8px 0 10px #888, -8px 0 10px #888; -moz-box-shadow: 8px 0 10px #888, -8px 0 10px #888; -webkit-box-shadow: 8px 0 10px #888, -8px 0 10px #888; } #contenttext{ margin-top:20px; margin-left:50px; word-break:break-all; word-wrap:break-word; } #navi{ width:1024px; height:38px; } #nav { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; } #nav li { float: left; } #nav li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #669900; border-right: 1px solid #ccc; } #nav li a:hover { color: #333333; background-color: #fff; } .textoben{ position:absolute; margin-top:2px; margin-left:5px; } .oben{ background-image:url(images/oben.png); background-repeat:repeat-x; width:500px; min-height:20px; max-height:auto; height:auto; color:#FFF; font-family:Lucida Sans; font-size:14px; } .textunten{ position:absolute; margin:2px; } .unten{ width:498px; min-height:150px; max-height:auto; height:auto; border:1px solid #b5b4b2; color:#32302e; font-size:14px; } #contentmenu{ width:250px; background-color:#FFF; min-height:550px; max-height:auto; height:auto; margin-left:774px; position:absolute; }
Hier nochmal ein Screen meiner jetzigen Lage:
Hier klicken um zu helfen ! :D -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
wie lautet denn die dazugehöroge Webadresse? Dann könnte man sich das mal "live" ansehen und etwas mit Firebug herumspielen, um Dir helfen zu können.
Gruß,
webdesingerin
-
Du machst einfach einen DIV-Container um deine ganzen Elemente. also das öffnende <div id="wrapper"> direkt nach dem <body>-Tag und das schließende </div> direkt vor dem </body>-Tag und gibst diesem die box-shadow Eigenschaft:
#wrapper { box-shadow: 0 0 10px #000; } -
webdesignerin schrieb:
Hallo,
wie lautet denn die dazugehöroge Webadresse? Dann könnte man sich das mal "live" ansehen und etwas mit Firebug herumspielen, um Dir helfen zu können.
Gruß,
webdesingerin
http://www.fabi-me.de/
____________________________________________________________________________________________________________________
cyclobox schrieb:
Du machst einfach einen DIV-Container um deine ganzen Elemente. also das öffnende <div id="wrapper"> direkt nach dem <body>-Tag und das schließende </div> direkt vor dem </body>-Tag und gibst diesem die box-shadow Eigenschaft:
#wrapper { box-shadow: 0 0 10px #000; }
Geht leider nicht ... Teste doch mal mit Firebug aus ... isst vooll der Fehler ... sry
Beitrag zuletzt geändert: 15.6.2012 22:59:28 von fabian-meinders -
Hallo fabian-meinders!
fabian-meinders schrieb:
Ich möchte um meine ganze Homepage ein Schatten haben der mitgeht falls sich die Höhe der Seite verändert ... Ich habs teilweise hinbekommen bloß die Navigation soll nicht betroffen sein
Hier nochmal ein Screen meiner jetzigen Lage:
Hier klicken um zu helfen ! :D
Also vielleicht stehe ich ja auch auf dem Schlauch, aber wenn ich mir den Screenshot ansehe und die Webseite, dann weiß ich nicht, was das Problem sein soll. Der Schatten wandert mit, wenn ich den Browser verkleinere und vergrößere aber auch wenn ich die Seite heran- und wieder wegzoome. Ich habse es mit Mozilla Firefox 13.0 und Internetexplorer 9 getestet. Kannst Du Dein Problem vielleicht genauer beschreiben/skizzieren?
Edit: Falls Du das mit der veränderbaren Höhe des div unter der Navigation meinst, wo der Content Deiner Webseite hinkommt: Kopier doch mal so lange den lateinischen Beispieltext in die Startseite, bis Deiner Meinung nach das Problem auftritt, damit wir uns das mal ansehen können.
Gruß,
webdesignerin
Beitrag zuletzt geändert: 16.6.2012 11:46:34 von webdesignerin -
1. Der umgebende Container (bei dir <div id="homepage">) hat eine feste Höhe. die Höhe wird vom Inhalt bestimmt, also von den innenliegenden Div-Containern. Entferne dies.
2. Auch die id navi bekommt eine feste Höhe. Warum? Weil du damit das Problem gelöst hast, dass die IDs navi bzw. nav eine Höhe von 0 hatten. Das liegt daran, dass die Listenelemente gefloatet sind. Um dieses Verhalten zu beheben schreibst du vor das Tag </ul> folgendes:
<div class="clear"></div>
Die Klasse clear erhält per CSS folgende Eigenschaften:
.clear { clear: both; overflow: hidden; height: 0; }
3. dein Container Content erhält ebenfalls box-shadow. der ist überflüssig und sorgt nur für den Schatten nach oben über die Navigation. Ich würde ihn entfernen. -
WASSSS ??!!!?! Anscheinend haste davon eecccht Ahnung :) Könntenst du mir die Quellcodes nicht bearbeitet schicken ?
Wäre echt nett von dir ...
Und webdesignerin mein Problem ist es die Navi soll kein Schatten abbekommen -.- Das sieht dann voll blöd aus :D -
Hallo fabian-meinders!
fabian-meinders schrieb:
Und webdesignerin mein Problem ist es die Navi soll kein Schatten abbekommen -.- Das sieht dann voll blöd aus :D
Ach Dein Problem ist also nicht mehr die gesamte Seite, sondern nur noch die Navi? Dann folge einfach den Tipps cyclobox - ganz besonders Nr. 3.
Gruß,
webdsignerin
Beitrag zuletzt geändert: 16.6.2012 13:54:03 von webdesignerin -
Okey, okey, also nochmal Schritt für Schritt:
Geh in deine style.css Datei ung gleich oben, wo du die Styles für #content (nicht bei #homepage) festlegst, entfernst du diese 5 Zeilen:
box-shadow: 8px 0 10px #888, -8px 0 10px #888; -moz-box-shadow: 8px 0 10px #888, -8px 0 10px #888; -webkit-box-shadow: 8px 0 10px #888, -8px 0 10px #888;
Weiter: Bei #homepage entfernst du noch die Angabe height:242px; - die ist vollkommen überflüssig.
Weiterhin fügst du den style.css-Datei noch folgende Zeilen hinzu:
.clear { clear: both; overflow: hidden; height: 0; }
Danach entfernst du bei #navi ebenfalls die height Angabe (height:38px;).
In deinem HTML-Dokument schreibst du dann noch vor das Tag </ul> (also direkt bevor die Navigationsliste geschlossen wird) folgende Zeile - die Klasse hast du im Schritt davor ja in deiner style.css hinterlegt:
<div class="clear"></div>
Hintergrund zu den letzten paar Schritten:
Die Listeneinträge haben ja float:left. Die Elemente, die diese Liste dann umschließen (bei dir das DIV mit der ID #navi und die Liste UL mit der ID #nav), schrumpfen dann auf die Höhe 0 Zusammen, weil sie den Inhalt der Listeneinträge aufgrund von float ignorieren.
Man könnte nun - so wie du es gemacht hast - einfach diesen Elementen wieder eine feste Höhe zuweisen, aber das braucht man nicht. Durch das div mit der Klasse clear strecken sich die umfassenden Elemente wieder auf die Höhe der Listeneinträge - sie werden nicht mehr ignoriert. -
Hat nicht funktioniert ... fabi-me.de Warte aber trotzdem noch auf Hilfe ;(
-
Hallo fabian-meinders!
Irre ich mich oder umfasst der Div-Container #homepage nicht die gesamte Webseite, sondern nur fast den selben Bereich wie der Div-Container #header? Das solltest Du mal ändern, weil so ergibt das für mich keinen Sinn. Das ist auch der Grund, weshalb der Schatten auch nicht weiter nach unten geht. Definiere für #homepage einfach min-height und schau bitte nochmal, wo Du den schließenden </div> Tag von dem Element #header einbauen musst.
Gruß,
webdesignerin
-
Ja wenn ich die Höhe definiere ist es ja wieder blöd weil der Schatten mitgehen soll wenn die höhe sich ändert.
-
Das dort keine Höhe bzw. minimale Höhe definiert ist, muss auch so sein. Sonst funktioniert es nicht, wie du erkannt hast.
So, dann mach ich mich nochmal ans Werk.
1. Das <div class="clear"></div> hast du ja nun drinnen, leider direkt NACH dem </ul>-Tag, es muss davor stehen.
2. Warum hat die ID #nav ein float:left? Es langt, wenn die Listenelemente dieses bekommen (haben sie ja auch)
Weiterhin umfasst der DIV-Container #homepage schon die komplette Seite, aber ich vermute, dass er sich nicht auf die komplette Größe ausdehnt, weil irgendwo entweder float oder position:absolute; definiert wurde. Ja, dein Content und die Sidebar wurden beide über position:absolute positioniert.
position:absolute bewirkt, dass diese Elemente völlig aus dem Dokumentfluss genommen werden und deshalb erkennt der Container #homepage diese nicht mehr und hört schon nach dem Header und der Navigation auf.
Ich würde dir empfehlen dir einen anderen Weg zu suchen, wie man #content und #contentnavi positionieren soll.
Tipp: Das geht genauso wie schon bei der Navigation. Du benutzt float:left bzw. float:right und feste Breitenangaben und wieder diesen Trick mit <div class="clear"></div> um zu erreichen, dass #homepage den Inhalt nun auch beachtet. -
Boah :O Send mir mal den bearbeiteten Quellcode ich verstehhs nich. Ich glaube wenn du mir das fertig zeigst das ich das dann wohl sehen kann ...
bitte um hilfe -
Wer etwas erreich will, muss gefälligst auch selbst was dafür tun. Dir fehlt absolutes Grundverständnis für die Anwendung von CSS und dem Aufbau einer einfachen Seitenstruktur. Du verwendest position:absolute um alles mögliche zu positionieren, dass ist absolut grauenhaft und falsch. Benutzer Margin und Padding für so etwas. Leg nicht überall sinnlose height, min-height-Eigenschaften fest und verwende nicht dauernd Eigenschaften, die dich irgendwie an dein Ziel führen, ohne das du weißt wie so.
Fang am besten von Null an und schaffe erst ein mal eine funktionierende Struktur, bevor du Inhalt positionierst oder eine Navigation formulierst.
In folgendem Code hab ich mal das clearende Div richtig gesetzt, weil du das immernoch nicht gemacht hast.
Ich hab auch keine Lust dir zig mal alles vorzukauen, ich hab schließlich alles völlig idiotensicher oben erklärt. Jetzt mach halt auch mal selber was.
<!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> <link rel="shortcut icon" href="images/favicon.png" /> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>fabi-me.de</title> </head> <body> <div id="homepage"> <div id="header"> </div> <div id="navi"> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Login</a></li> <div class="clear"></div> </ul> </div> <div id="content"> <div id="contenttext"> <div class="oben"><div class="textoben">Seite wird bald gestartet !</div></div> <div class="unten"><div class="textunten">WITZLOS ! und <a href="downloads/rappidprofffence.zip">Download</a></div></div> </div> </div> <div id="contentmenu"> TEST </div> </div> </body> </html>
-
Habs hinbekommen zum Teil lagt ihr richtig mit euren Läsungen aber sonst alles falsch :D
Beitrag zuletzt geändert: 17.6.2012 18:51:38 von fabian-meinders -
Es bleibt aber noch das Problem, dass dein Schatten unter Internet Explorer nicht funktioniert. Ich habe das gleiche Problem und suche noch nach Lösungen. Weiß da jemand weiter?
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
