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

relative breite

A

ayloedxa

Neues Mitglied
HTML: 
<html>
 <body>
  <div class="mother">
   <div class="header"></div>
   <div class="menu">
   </div>
   <div class="main">
   </div>
   <div class="footer">
   </div>
  </div>
 </body>
</html>

Code: 
* {
 margin: 0px;
 padding: 0px;
}

.mother {
 margin: 25px;
 width: 100%;
}

.header {
 height: 100px;
 background: grey;
 color: white;
}

.menu {
 float: left;
 width: 180px;
 background: white;
 color: black;
}

.main {
 background: lightgrey;
 margin-left: 190px;
 margin-top: 10px;
 border: 1px solid darkgrey;
}

.footer {
 clear: left;
 background: grey;
 text-align: right;
}

Header und Fußzeile sollen sich über die ganze Breite erstrecken - wie man sieht und auch klappt.

Das Menü soll 180px breit sein und link anliegen.. soweit sogut
Aber der Main-Teil soll den rest ausfüllen, praktisch 100%-190px, nur darf man das ja nicht.. wie macht man es?

Wäre dankbar über jede Hilfe..
 
Im Prinzip war das schon ganz richtig.

Falls das Problem noch immer besteht, schreibe bitte den Browser dazu und erstelle eine vollständige Testseite (inklusive DOCTYPE).

(Nur im Firefox getestet.)

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>

        <style type="text/css">

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

.mother {
 padding: 25px;
}

.header {
 height: 100px;
 background: gray;
 color: white;
}

.menu {
 float: left;
 width: 180px;
 background: red;
 color: black;
}

.main {
 background: silver;
 margin-left: 190px;
 margin-top: 10px;
 border: 1px solid black;
}

.footer {
 clear: left;
 background: gray;
 text-align: right;
}


        </style>

    </head>

    <body>
        <div class="mother">
           <div class="header">.header</div>
           <div class="menu">.menu</div>
           <div class="main">.main<br/><br/><br/><br/><br/><br/></div>
           <div class="footer">.footer</div>
        </div>

    </body>

</html>
 
eine Vollständige Textseite?

Ich hab jetzt
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

hinzugefügt... nicht anzeigbare Bilder werden jetzt mit mit ihrem Alternativtext ersetzt, sonst hat sich aber nix verändert.. die Breite des Mains ist immernoch größer als es sein soll..
 
Sehe grad als ich meines mit deinem verglich:

.mother {
margin: 25px;
width: 100%;
}

hatte ich...
so war der main-block um 50px verschoben..


Danke =) So klappt das jetzt =)
 
Okay.

Blocklevel-Elemente (darunter div-Elemente --wenn sie nicht "gefloatet" werden) nehmen standardmäßig die gesamte verfügbare Breite ein. Ein width: 100%; ist unnötig und oft falsch, wenn padding oder margin hinzukommen, da diese Werte dann auf die 100% aufaddiert werden.

Weshalb ich das mit dem "vollständigen Beispiel" sagte: DOCTYPE-Switch und seine Auswirkungen

CSS wird von Browsern unterschiedlich interpretiert, je nachdem, ob ein DOCTYPE vorhanden ist oder nicht. Das ist eine häufige Ursache von Missverständnissen, da die Antwortenden davon ausgehen, dass der Standardsmode gemeint ist, was aber bei fehlendem DOCTYPE nicht zwangsläufig auch im Code des Fragestellers so sein muss.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben