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

Div-Box ignoriert "background-color" attribut

R0b

R0b

Neues Mitglied
Hallo liebe Community,

habe 2 kleine Probleme, bei denen ich einfach nicht weiterkomme. seit 2 Stunden komme ich nicht auf die Lösung der Probleme.

1. die Login Div-Box nimmt zum verrecken nicht das Background-color Attribut an, nichtmal wenn ich !important hinterschreibe.

Hier mal Codeschnipsel, die ich zum testen etwas abgeändert habe:
HTML: 
<?php   
error_reporting(E_ALL);
include "config.php";
?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
    </head>
    <body>
        <div id="container">
            <div id="top">
                <div id="banner">
                    <img src="pictures/logo/fahrschulekorte.png" />
                </div>
                <div id="login">#login</div>
                <div id="like">#like</div>
            </div>
            <div id="middle">middle
            </div>
            <div id="bottom">bottom
            </div>
        </div>
    </body>
</html>
und der css-part

Code: 
/*
==========
= Layout =
==========
*/

#container {
      height: 100%;
      width: 80%;
      margin: auto;
    }
    
#top {
      height: 10%;
      width: 100%;
      background-color: red;
    }
    
#middle {
      height: 35%;
      width: 100%;
      clear: both;
      background-color: yellow;
    }
    
#bottom {
      height: 55%;
      width: 100%;
      background-color: green;
    }
    
    
/* top */
    
#banner {
      height: 75%;
      width: 75%;
      float: left;
      background-color: blue;
    }

#login{
      height: 100%;
      width: 25%;
      float: right;
      background-color: #fuchsia;
    }
    
#like {
      height: 25%;
      width: 75%;
      float: left;
      background-color: orange;
      text-align: center;
    }


Das 2. Problem ist etwas einfacheres denk ich und hängt wohl mit meiner Syntax zusammen, da es erst Probleme gibt sobald ich den Doctype einbinde.

Gibt es ne Möglichkeit, dass div-boxen die ein attribut "height: 100%" haben auch wirklich die 100% höhe haben und anzeigen, auch wenn kein text dort steht? also das man das anhand der background-color sieht. (das problem tritt weiter unten im layout auf, möchte aber nicht sofort ein 2. mal quellcode posten, weils sonst vll. zu viel ist.;) )

vielen lieben dank im vorraus.
wer erlöst mich? :D
 
1. die Login Div-Box nimmt zum verrecken nicht das Background-color Attribut an, nichtmal wenn ich !important hinterschreibe.
Zum Vergrößern anklicken....

„fuchsia“, nicht „#fuchsia“.

Gibt es ne Möglichkeit, dass div-boxen die ein attribut "height: 100%" haben auch wirklich die 100% höhe haben und anzeigen, auch wenn kein text dort steht?
Zum Vergrößern anklicken....

Die Frage ist immer: 100% wovon? Probier mal, html und/oder body eine Höhe von 100% zu setzen.
 
vielen lieben dank für das 1. problem.
manchmal sehe ich den wald vor lauter bäumen nicht mehr, vielleicht hab ich auch einfach nur zu lange rumgebastelt :?

Die Frage ist immer: 100% wovon? Probier mal, html und/oder body eine Höhe von 100% zu setzen.
Zum Vergrößern anklicken....
kann damit grade nicht sooo viel anfangen.


ich möchte, dass die boxen, die im container selbst eine höhe von 30% haben, auch diese VOLLEN 30% höhe anzeigen, egal ob da text ist oder nicht. hier mal der code:

HTML: 
<?php   
error_reporting(E_ALL);
include "config.php";
?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="css/layout.css" />
    </head>
    <body>
        <div id="container">
            <div id="top">
                <div id="banner">
                    <?php include "banner.php"; ?>
                </div>
                <div id="login">#login</div>
                <div id="like">#like</div>
            </div>
            <div id="middle">
                <div id="menu">
                    <?php include "menu.php"; ?>
                </div>
                <div id="slideshow">
                    <img src="pictures/background/slideshow.png">
                </div>
                <div id="calendar">#calendar</div>
            </div>
            <div id="bottom">
                <div id="content">
                    <?php include "content.php"; ?>
                </div>
                <div id="news">#news</div>
                <div id="facebook">#facebook</div>
                <div id="footer">#footer</div>
            </div>
        </div>
    </body>
</html>
und hier nochmal der gesamte css code, etwas länger wegen dem blöden menü ^^

Code: 
/*
===============
= Farbtabelle =
===============
#da1515 rot
*/


/*
==========
= Layout =
==========
*/

#container {
      height: 100%;
      width: 80%;
      margin: auto;
    }
    
#top {
      height: 10%;
      width: 100%;
    }
    
#middle {
      height: 35%;
      width: 100%;
      background-color: #da1515;
    }
    
#bottom {
      height: 55%;
      width: 100%;
    }
    
/* top */
    
#banner {
      height: 75%;
      width: 75%;
      float: left;
      background-color: green;
    }

#login{
      height: 100%;
      width: 25%;
      float: right;
      background-color: yellow;
    }
    
#like {
      height: 25%;
      width: 75%;
      float: left;
      background-color: yellow;
      text-align: center;
    }    
    
/* middle */
    
#menu {
      height: 100%;
      width: 25%;
      float: left;
      clear: both;
      background-color: #da1515;
    }
    
#slideshow {
      height: 100%;
      width: 50%;
      float: left;
      background-color: orange;
    }
    
#calendar{
      height: 100%;
      width: 25%;
      float: right;
      background-color: #da1515;
    }
    
/* bottom */
    
#content {
      height: 95%;
      width: 75%;
      float: left;
      background-color: silver;
    }

#news{
      height: 50%;
      width: 25%;
      float: right;
      background-color: #da1515;
    }

#facebook {
      height: 50%;
      width: 25%;
      float: right;
      background: url(../pictures/background/gradient.png) repeat-x;
    }

#footer {
      height: 5%;
      width: 75%;
      float: left;
      background-color: #da1515;
      text-align: center;
    }    

/*
========
= Menu =
========
*/    

ul {
      padding: 0;
      margin: 0;
    }

ul li {                                    
      list-style-type: none;
      position: relative;
      background-color: #da1515;        /* img menu*/
    }

ul ul {                                    
      display: none;
    }

ul li:hover > ul {
      display: block;
      position: absolute;
}

li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
    }

li.sub > a {                    
      font-weight: bold;
      color: #ffffff;
    }

ul ul {
      width: 10em;                     /* Länge der Buttons vom Submenu */
    }

    
#navi {
      width: 8em;                    /* Breite der Buttons */
    }

#navi ul {
      border: 1px solid #ffffff;
      border-width: 0 0 0 2px;
    }

#navi ul li {
      border-width: 1px 0;
      padding: 0 0 0 5px;
      line-height: 1.25em;
    }

#navi ul ul {
      border-width: 0 1px 1px 1px;
    }

#navi ul ul li {
      border-color: #ffffff;
      background-color: #da1515;        
    }

#navi li > a {
      background-color: transparent;
      padding: 3px;
    }

#navi li:hover {
      background-color: orange;
      border: 1px solid #ffffff;
    }

#navi li.sub:hover {
      margin-right: -10.2em;            /* länge des balkens der sich bei mouseover ausklappt */
      border: 1px solid #ffffff;
    }

#navi li.sub:hover > a {
      color: #ffffff;
      background-color: orange;
    }

#navi li.sub:hover > ul {
      top: 1.75em;
      left: 7.9em;                        /* Submenu rechtsanordnen */
    }
    
/*
====================
= Sonstige Formate =
====================
*/    

body {
      background-color: gray;
    }


und nochmal vieeelen lieben dank.
hoffentlich habe ich nen einfachen blöden "fehler" gemacht ;)
 
aaaaaaaaaah okeee. vielen dank du bist mein held :D:D

hab das attribut immer falsch verstanden, aber nun wurde ich eines besseren belehrt und hab was neues dazugelernt.
DANKE - Thread kann geclosed werden.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben