Ergebnis 1 bis 7 von 7

Thema: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

  1. #1
    HTML Newbie
    Registriert seit
    08.10.2013
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Frage Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    Hallo zusammen ...

    Ich bin aktuell dabei mir HTML/CSS etc beizubringen.
    Nun habe ich ein normales <div>-Boxmodell aufgestellt ... allerdings bin ich anhand der Abbildung ein wenig ... sagen wir ... irritiert. Ich bastel und überlege nun schon ewig, aber es klappt einfach nicht.

    Hier zu meinem Problem. Ich habe ein simples <div> in den Body gepackt, ihm die Größe 1024*800 zugewiesen und es horizontal zentriert, Margin zum body ist hierbei 20px.

    Nun habe ich in das <div> 4 weitere <div>s gepackt. Von der Breitenangabe ergibt sich summiert immer 1024. Dieses wird im IE 10 auch richtig dargestellt. Das "Eltern-div" ist komplett gefüllt.
    In Chrome allerdings ist das nicht der Fall. Das "inhalt-<div>" füllt das "Eltern-<div>" nicht in der kompletten Breite aus. Das "header- und footer-<div>" allerdings schon, und da ist die breite fest definiert...

    Das letzte Problem, was ich nicht verstehe, ist ... addiert man nun die "height-Werte", dann kommt man insgesamt auf 780px. Das "Eltern-<div>" ist allerdings trotzdem komplett ausgefüllt, obwohl gegenüber der Definition ja 20px fehlen (die beiden border-bottom habe ich hier schon eingerechnet). Allerdings stellt sowohl Chrome als auch IE es so dar, als wären es 800px.

    Hier der Quelltext:

    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <style>
                div > #header {
                    background-color: yellow; 
                    width: 1024px; 
                    height: 40px; 
                    text-align: center; 
                    padding: 2% 0 0 0;
                    border-bottom: 5px solid white;
                }
                
                div > #nav {
                    background-color: yellow; 
                    width: 150px;
                    height: 710px;
                    border-bottom: 5px solid white;
                    border-right: 5px solid white;
                    float: left;
                }
                
                div > #inhalt {
                    background-color: yellow; 
                    width: 869px;
                    height: 710px;
                    border-bottom: 5px solid white;
                }
                
                div > #footer {
                    background-color: yellow; 
                    width: 1024px;
                    height: 20px;
                }
            </style>
        </head>
        <body>
            <div style="margin: 20px auto; width: 1024px; height: 800px; background-color: black;">
                <div id="header">Das hier ist der Header</div>
                <div id="nav">Hier ist die Navi!</div>
                <div id="inhalt">Inhalt</div>
                <div id="footer">footer</div>
            </div>
        </body>
    </html>
    Anscheinend stehe ich irgendwo auf dem Schlauch oder habe einen kompletten Denkfehler ... ich weiß es wirklich nicht.

    Könnt ihr mir bitte auf die Sprünge helfen?

    Vielen Dank im Voraus!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    HTML-Code:
    div > #header {                 
                            padding: 2% 0 0 0; 
    }
    Padding musst du dazuzählen.
    2% von 1024Pixel sind 20,48 ~ 20Pixel (auf volle gerundet)
    Geändert von explanator (08.10.2013 um 08:33 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    08.10.2013
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    Das mit den 20px ist aber in der Höhe, nicht in der Breite.

    Das padding ist ja auch nur top gesetzt, zieht also auch nur von der Höhe etwas ab ...

    Das erklärt leider nicht das Problem mit width ...
    Geändert von snoriginal (08.10.2013 um 13:15 Uhr)

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    Zitat Zitat von snoriginal Beitrag anzeigen
    Das mit den 20px ist aber in der Höhe, nicht in der Breite.

    Das padding ist ja auch nur top gesetzt, zieht also auch nur von der Höhe etwas ab ...
    Du hattest ja auch ein Problem mit der Höhe.
    Das Padding wird immer dazuaddiert.
    Lies dich zum Thema Boxmodell ein.

    Dein Problem mit der Breite löst du wenn du dem Element mit der ID Inhalt auch float:left gibst und dem Element mit der ID footer ein clear:both.

    Lesetipp:
    http://css-technik.de/css-examples/219_9/
    http://www.thestyleworks.de/basics/float-rule.shtml
    http://www.thestyleworks.de/basics/visual_format.shtml

  5. Folgende User finden die Antwort von explanator gut:


  6. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    08.10.2013
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    Vielen Dank! Funzt

    Werde mir das mal zu Gemüte führen ... das mit dem padding war auch so gemeint von mir, nur falsch formuliert
    Hab mit dem Box-Model aber allgemein noch so meine Problemchen ... Danke für deine Lesetipps

  7. #6
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    und ich bevorzuge beim boxmodel-gedöhnse die variante einen wrapper zu benutzen.
    ja manche schreien da nach "divsuppe" weil man nen container mehr hat, aber effizient hat man am ende des tages weniger code durch zusätzliche divs, als durch etliche css-files, die einzelnen browsern fixes anbieten.

    faktisch macht man nichts anderes, als dem container, der ne höhe oder breite definiert hat kein padding oder margin zu geben, sondern dafür ein div aussen drum oder innen rein schreibt und dem dann entsprechend margin (inneres div) oder padding (äußeres div) setzt.

    damit geht man 90% aller anzeigefehler durch unterschiedliche interpretation des boxmodels aus dem weg.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. Folgende User finden die Antwort von synaptic gut:


  9. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    08.10.2013
    Beiträge
    4
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Simpler "Fehler" im Quellcode bei normalenm Box-Modell?

    Interessant .. evt werde ich auch das mal anwenden

Ähnliche Themen

  1. simpler "passwortschutz"
    Von Maike22 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 22.07.2010, 22:59
  2. PHP: include("sample.php") Liefert Quellcode zurück
    Von makroy im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 17.02.2010, 09:07
  3. Dürrenmatts "Der Besuch der alten Dame" und Sophokles' "Ödipus Tyrannos"
    Von Unregistriert im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 21.01.2010, 22:22
  4. "generic host hat ein Fehler verursacht"
    Von sibbiiii im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 27.05.2007, 16:55
  5. "Fehler auf der Seite" - was kann ich dagegen tun?
    Von Adorno im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 14.09.2004, 18:33

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •