Ergebnis 1 bis 6 von 6

Thema: Padding- Block Element wird größer?!

  1. #1
    Teeny
    Registriert seit
    13.07.2007
    Ort
    Wolfsburg
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Padding- Block Element wird größer?!

    Ich möchte den Innenabstand vom <div>-Element zum Text beeinflussen, denk ich mir Logo, mitm Padding. Merkwürdigerweise wird das ganze Block Element dadurch aber größer, obwohl ich eine fest Größe zugewiesen habe. Wieso?!

    Hier mal der Code, is noch recht übersichtlich:
    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
        <title>Haunted Germany - Die deutsche Website für Halloween Fans!</title>
    
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <meta name="robots" content="index, follow">
        <meta name="revisit-after" content="1 week">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="content-language" content="de">
    
        <link rel="stylesheet" href="css/splash.css" type="text/css" media="screen">
    </head>
    <body>
        <div id="welcome">
    
    Haunted Germany
    befindet sich zur Zeit im Umbau und bereitet sich auf die Halloween Saison 2008 vor.
    Genießt den Sommer, die unheimliche Jahreszeit kommt schneller als man denkt!</p></div>
        <div id="countdown">
            <script type="text/javascript">
            var eventdate = new Date&#40;"November 01, 2008 00&#58;00&#58;00 GMT"&#41;;
            d=new Date&#40;&#41;;
            count=Math.floor&#40;&#40;eventdate.getTime&#40;&#41;-d.getTime&#40;&#41;&#41;/1000&#41;;
            count=Math.floor&#40;count/&#40;60*60*24&#41;&#41;;
            document.write&#40;count&#41;;
            </script>
        </div>
        <div id="news">News</div>
        <div id="links">Direkt zu<ul>[*]Forum[*]Bildergalerie[/list]</div>
    </body>
    </html>
    CSS:
    Code:
    body &#123;
        background&#58; #000;
        color&#58; #fff;
        font-family&#58; georgia, times, serif;
        margin&#58; 80px 0px 40px 60px;
    &#125;
    
    h1 &#123;
        font-weight&#58; normal;
        font-size&#58; 20pt;
        color&#58; 9d0a0e;
        margin&#58; 0;
    &#125;
    
    #welcome &#123;
        background&#58; url&#40;../img/bg_welcome.gif&#41; no-repeat;
        width&#58; 600px;
        height&#58; 220px;
        font-size&#58; 14pt;
        position&#58; absolute;
        padding&#58; 20px 40px 20px 40px;
        display&#58; block;
    &#125;
    
    #countdown &#123;
        background&#58; url&#40;../img/bg_countdown.gif&#41; no-repeat;
        width&#58; 320px;
        height&#58; 220px;
        position&#58; absolute;
        left&#58; 680px;
        padding&#58; 85px 0px 0px 100px;
        font-weight&#58; bold;
        font-size&#58; 34pt;
        color&#58; 9d0a0e;
        display&#58; block;
    &#125;
    
    #news &#123;
        background&#58; url&#40;../img/bg_news.gif&#41; no-repeat;
        width&#58; 600px;
        height&#58; 350px;
        position&#58; absolute;
        top&#58; 320px;
        display&#58; block;
    &#125;
    #links &#123;
        background&#58; url&#40;../img/bg_links.gif&#41; no-repeat;
        width&#58; 320px;
        height&#58; 120px;
        position&#58; absolute;
        top&#58; 320;
        left&#58; 680px;
        display&#58; block;
    &#125;
    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
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Weil der IE ohne qualifizierten Doctype das Boxmodell darstellt.
    Was du ändern musst findest du hier

  3. #3
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich glaube hier geht es nicht speziell um den IE, Sejuma.
    Phil, du hast das Boxmodell nicht verstanden:
    Breite = width+padding-left+padding-right+margin-left+margin-right+border

    Beispiel:
    Code:
    <div style="width&#58; 200px; margin&#58; 0 10px; padding&#58; 0 5px; border&#58; 2px solid #000;">Na, wie breit bin ich?</div>
    Dieser Div ist nicht 200px breit, wie in width angegeben,sondern 234px, da
    200(width) + 10(margin-left) + 10(margin-right) + 5(padding-left) + 5(padding-right) + 4(border-links/rechts) = 234

    Nun klar?

    Gruß,
    Jojo

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du hast recht, Jojo.
    Der IE verkleinert ja das Boxmodell

    Dennoch sollte man einen qualifizierten Doctype verwenden.
    Hier nochmal ein Link zur Eräuterung des Boxmodells: http://de.selfhtml.org/css/formate/box_modell.htm#w3c

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    13.07.2007
    Ort
    Wolfsburg
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Jo, danke nochmal für die Erklärung. Ich bin immer davon ausgegangen, das sich trotz Padding nichts an der Größe des Blocks ändert, quasi also das Padding nur Auswirkungen auf den Inhalt des Blocks hat.

  6. #6
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    so machts nur der ie, darum unter anderem ja diese Verwirrung unter Webdesignern.
    Ab CSS3 kann man dann zwischen diesen 2 verschiedenen Boxmodellen auswählen.

Ähnliche Themen

  1. CSS layout formatierung! BODY wird immer größer...
    Von Berti123 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 17.03.2008, 12:29
  2. h + padding-top
    Von ad3nau im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 27.11.2006, 21:54
  3. Tabelle wird größer dargestellt als angegeben
    Von Gast im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 12.05.2006, 15:32
  4. W3C-konform trotz Block- in Inline-Element?
    Von Torty im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 08.11.2005, 07:54
  5. Seite größer
    Von Taikun im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 02.06.2005, 19:44

Stichworte

Berechtigungen

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