kostenloser Webspace werbefrei: lima-city


HTML & CSS Probleme mit divs

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    tobiworlds

    Kostenloser Webspace von tobiworlds

    tobiworlds hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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
  4. Autor dieses Themas

    tobiworlds

    Kostenloser Webspace von tobiworlds

    tobiworlds hat kostenlosen Webspace.

    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
  5. 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----->
  6. Autor dieses Themas

    tobiworlds

    Kostenloser Webspace von tobiworlds

    tobiworlds hat kostenlosen Webspace.

    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!
  7. 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>.
  8. Autor dieses Themas

    tobiworlds

    Kostenloser Webspace von tobiworlds

    tobiworlds hat kostenlosen Webspace.

    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?
  9. 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 :confused:

    Der blaue Rahmen bei aktiven Eingabefeld ist in beiden Browsern gleich!?
  10. 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 :confused:

    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
  11. Und in Chrome sieht man noch gar keinen Schatten...
    http://bit.ly/x59Ozo


    Till
  12. 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
  13. 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
  14. 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. :wink:

    Das Problem liegt bei den Standart Einstellungen der -webkit-Browser.
    Safari hat als Standart:
    border: inset 2px


    Überschreibt man diese Angabe mit zBsp:
    border: 2px
    sind auch die box-shadows zu sehen.


    Davon abgesehen sind die Schatten (wenn man sie sieht) schon ganz schön gruselig :biggrin:

  15. Autor dieses Themas

    tobiworlds

    Kostenloser Webspace von tobiworlds

    tobiworlds hat kostenlosen Webspace.

    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

  16. 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>



  17. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!