HTML & CSS Probleme mit divs
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aktiven eingabefeld
bild
bit
blaue rahmen
boxen
browser
button
code
dank
effekt
entstehen
header
http
kante
opus
problem
safari
schatten
standart
url
-
Hey,
ich habe irgendwie ein Problem mit meiner Seite.
Ich möchte den oberen Teil wie in diesem Bild sichtbar gestalten:
http://img.webme.com/pic/t/tobistudios/unbenannt.png.
Leider sieht alles aber so wie auf diesem Bild aus:
http://img.webme.com/pic/t/tobistudios/grundgeruest.png.
Hier seht ihr meinen HTML-Code:
<html> <head> <title>Grundgerüst</title> <link rel="stylesheet" media="screen" type="text/css" href="styles/main.css"> </head> <body> <div id="header"> <div id="logo"> <img src="images/logo.png" height="100px"> </div> <div id="nav" align="right"> <div id="login" align="right"> <form action="grundgerüst.html" method="GET"> <input type="text" name="username" placeholder="Username"> <input type="password" name="password" placeholder="Passwort"> <input type="submit" value="Anmelden"> </form> <ul class="menu red"> <li><a href="index.php" title="Startseite">Home</a></li> <li><a href="events.php" title="Aktionen">Events</a></li> <li><a href="news.php" title="Neuigkeiten">News</a></li> <li><a href="contact.php" title="Kontakt">Kontakt</a></li> <li><a href="impressum.php" title="Impressum">Impressum</a></li></div> </div> </div> </body> </html>
sowie das CSS:
#logo { float: left; } #nav { /*float:right;*/ } #menu { float: right; } input{ box-shadow: 2px 2px 3px #000000; } #header { background: rgb(30,87,153); /* Old browsers */ background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */ background: linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ box-shadow: 5px 5px 10px #000000; }
Den CSS-Teil vom Menü habe ich raus gelassen, da ich nicht denke, dass er etwas ändert.
Nun wieder zum Problem:
ich hätte gerne, dass der gesamte Bereich, den ich bis jetzt gecodet habe, in einer einzigen Box mit dem #header-div formatiert werden kann. Leider wird nur die obere Leiste geändert.
Ich habe bereits andere Browser getestet, den Verlauf und den Schatten in eine einfache HIntergrundfarbe geändert, doch es half alles nichts.
Vielleicht kann mir ja jemand helfen....
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich weiß nicht wo dein Fehler/Problem liegt, hab gerade deinen Code 1:1 kopiert und als Ergebnis bekam folgendes:
Bild
(Firefox 9.0.1, Opera 11.60 zeigt es ähnlich an)
Kannst du uns bitte den kompletten Code zur Verfügung stellen,denn hier ist bis jetzt anscheinend kein Fehler.
MfG
Beitrag zuletzt geändert: 7.1.2012 18:12:39 von copynpaste -
Ich habe jetzt alles auf den Lima-Server geladen, so sieht es aus:
http://tobiworlds.lima-city.de/grundgeruest.html
Überhaupt schon mal danke für die Mühe :D
Beitrag zuletzt geändert: 7.1.2012 18:24:10 von tobiworlds -
Dein Problem liegt bei den floats.
Du musst irgendwo dann mal ein clear einbauen und probieren wie es für dich richtig ist. Wie man es richtig platzieren muss weiß ich nicht genau.
CSS zum clear: .clear{ clear:both; /*clear:left; clear:right;*/ } HTML: <div class="clear"></div> <!---leerer div reicht-----> -
Ok, danke, aber es funktioniert alles nicht so wirklich...
jetzt habe ich das noch einmal überdacht und das Konzept verändert.
Jetzt sieht es zwar immer noch nicht so aus, wie erst geplant, aber es klappt wenigstens:
http://tobiworlds.lima-city.de/grundgeruest.html
Nochmal vielen Dank! -
tobiworlds schrieb:
Jetzt sieht es zwar immer noch nicht so aus, wie erst geplant, aber es klappt wenigstens:
Sicher? Ich habe es jetzt mal mit 3 Browsern betrachtet. Jeder zeigt es anders!
Wesentliche Probleme:
1. Kein Doctype angegeben -> Die Browser schalten in den Quirks-Mode -> Nicht vorhersehbare Darstellung
2. Die Liste ist nicht ordentlich abgeschlossen, da fehlt am Ende ein </ul>.
-
Danke,
das fehlende </ul> hatte ich lokal zwar bemerkt, jedoch vergessen, neu hochzuladen :)
Jetzt gibt es nur noch das Problem, dass der Schatten der Login-Boxen sich irgendwie überlappt, sodass unschöne Kanten entstehen, wenn man darüber fährt.
Dieser Effekt ist aber anscheinend nur mit dem Firefox zu sehen...
Hätte dafür vielleicht noch jemand eine Idee? -
tobiworlds schrieb:
.....sodass unschöne Kanten entstehen, wenn man darüber fährt.
Dieser Effekt ist aber anscheinend nur mit dem Firefox zu sehen...
Also ich sehe weder mit Firefox noch mit Safari irgendeinen hover-Effekt
Der blaue Rahmen bei aktiven Eingabefeld ist in beiden Browsern gleich!? -
pcw schrieb:
tobiworlds schrieb:
.....sodass unschöne Kanten entstehen, wenn man darüber fährt.
Dieser Effekt ist aber anscheinend nur mit dem Firefox zu sehen...
Also ich sehe weder mit Firefox noch mit Safari irgendeinen hover-Effekt
Der blaue Rahmen bei aktiven Eingabefeld ist in beiden Browsern gleich!?
Er meint wahrscheinlich unter den Textfeldern diese Kante: Bild
Im Opera gibt es auch noch einen Anzeigefehler um den Button: Bild -
tillpro schrieb:
Und in Chrome sieht man noch gar keinen Schatten...
http://bit.ly/x59Ozo
Till
Ja, dann unterstützt Chrome wahrscheinlich noch nicht "box-shadow" sondern benötigt noch seinen Browser-Prefix: "-webkit-box-shadow"
MfG -
Nein, das scheint nicht das Problem zu sein.
Eher, dass das Eingabefeld keinen Rahmen hat. Ich wüsste gerne, warum...
Zum Anschauen: http://bit.ly/z1rGSw
Till
Beitrag zuletzt geändert: 9.1.2012 19:04:29 von tillpro -
copynpaste schrieb:
Ja, dann unterstützt Chrome wahrscheinlich noch nicht "box-shadow" sondern benötigt noch seinen Browser-Prefix: "-webkit-box-shadow"
MfG
nein, Chrome unterstützt box-shadow schon ne Weile.
Das Problem liegt bei den Standart Einstellungen der -webkit-Browser.
Safari hat als Standart:
border: inset 2px
Überschreibt man diese Angabe mit zBsp:
sind auch die box-shadows zu sehen.border: 2px
Davon abgesehen sind die Schatten (wenn man sie sieht) schon ganz schön gruselig
-
Ok, vielen Dank für die vielen Antworten;
ich habe das Problem jetzt einfacher gelöst: Ich habe den Schatten einfach entfernt ;D
So richtig konnte der mich sowieso nicht überzeugen, unter anderem wegen diesen Kanten und dem Kasten um den Button.
Ich habe jetzt also die neue Version hochgeladen:
tobiworlds.lima-city.de/grundgeruest.html
Beitrag zuletzt geändert: 10.1.2012 23:00:13 von tobiworlds -
ich habe das Problem jetzt einfacher gelöst: Ich habe den Schatten einfach entfernt ;D
gute Entscheidung :tumb:
Warum setzt du den Doctype nicht gleich HTML5 konform, wenn du HTML5 Elemente benutzt?
... ist mir gerade so aufgefallen.
also nur:<!doctype html>
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
