tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
521
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 29.11.08 17:10 #1
    karl123 karl123 ist offline Mitglied Silber
    Registriert seit
    Nov 2008
    Ort
    Püttlingen (Saarland)
    Beiträge
    91
    Hallo allerseits,

    Ich habe ein 3-splatiges Layout mit Kopf- und Fußzeile erstellt. Jetzt erhalte ich je nach Browser eine nicht erwünschte Lücke zwischen Kopfzeile und Mittelteil und zwischen Mittelteil und Fußzeile.
    IE7: keine Lücke; so möchte ich es gerne haben
    Firefox 3: Lücke zwischen Kopfzeile und Mittelteil, Lücke zwischen Mittelteilund Fußzeile
    Opera 9: Lücke zwischen Kopfzeile und Mittelteil
    Safari: Lücke zwischen Kopfzeile und Mittelteil
    Die Lücke zeigt sich im Layout als brauner Streifen. Der braune Streifen ganz unten ist ok; er kommt vom Padding des Containers.
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <    html xmlns="http://www.w3.org/1999/xhtml">
    <    head>
    <    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <    title>meine Webseite</title>
    <    style type="text/css" media="screen">
    /*---------------------------------Allgemein------------------------------------*/
    /* Standard für html in allen Browsern */
    html, body { 
            margin:0px; border:0px; padding:0px;
    }
    html {
            top:0; left:0; right:0;
    }

    /*---------------------------Schrift und Hintergrund----------------------------*/
    body {
            padding:0px; 
            margin:auto;
            width:90%; /* Breite der Seite */
            font-family:Arial, Helvetica, sans-serif; /* Schrift und Schriftfamilie */
            font-size:1em; /*Schriftgroesse hier relativ festlegen */
            background:#FFFCC8 url("../pictures_root/rose.gif"); /* Hintergrundfarbe und Bild */
            background-repeat:no-repeat;
            background-position:top left;
            background-attachment:fixed;
    }

    /*------------------------------Seiten-Container--------------------------------*/
    #container {
            margin:40px 0px 0px 0px;
            padding:0px 0px 40px 0px;
            background-color:#990000;
    }
    /*-----------------------------------Header-------------------------------------*/
    #header {
            position:relative;
            display:block;
            width:100%;
            height:140px; /* Höhe des Headers */
            background:#FFCCCC url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
            background-repeat: repeat-x;
            background-position: left top;
    }

    /*------------------------Seite zwischen Header und Footer-----------------------*/
    #page_outer {
            position:relative;
            display:block;
            border-left:160px solid #00FFFF; /* Breite der linken Seite und Farbe */
            border-right:100px solid #FFFF00; /* Breite der rechten Seite und Farbe */
    }
    #page_inner {
            position:relative;
            display:block;
            margin-left:-160px; /* Breite der linken Seite */
            margin-right:-100px; /* Breite der rechten Seite */
    }
    .    clear {
            clear:both;
            height:0;
            font-size: 1px;
            line-height: 0px;
    }

    /*---------------------------------linke Seite-----------------------------------*/
    #left_container {
            position:relative;
            float:left;
            left:0px;
            width:160px; /* Breite der linken Seite */
    }

    /*---------------------------------rechte Seite-----------------------------------*/
    #right_container {
            position:relative;
            float:right;
            right:0px;
            width:100px; /* Breite der rechten Seite */
    }

    /*-----------------------------------Footer-------------------------------------*/
    #footer {
            display:block;
            width:100%;
            height:50px; /* Hoehe des Footers */
            background:#FF00FF url("sunset140_2.jpg"); /* Farbe und Bild des Hintergrunds */
            background-repeat: repeat-x;
            background-position: left top;
    }

    /*-----------------------------------Content-------------------------------------*/
    #content {
            position:relative;
            display:block;
            margin-left:160px; /* Breite der linken Seite */
            margin-right:100px; /* Breite der rechten Seite */
            height:1%;
            background-color:#EEEECC;
    }
    </    style>
    </    head>

    <    body>
    <!--     Container für Seite -->
    <    div id="container">

    <!--     Header -->
    <    div id="header">Das ist der Header
            <div id="header_logo">Logo</div>
        <    div id="header_login">Ein Login-Bereich</div>
        <    div id="header_search">Ein Such-Bereich</div>
        <    div id="header_links">Links</div>
        <    div id="header_sitemap">Eine Sitemap</div>
        <    div id="header_menu">Ein Men&uuml;</div>
    </    div>

    <!--     wird benötigt für festes Layout -->
    <    div id="page_outer">
        <    div id="page_inner">

    <!--     linke Seite -->
            <    div id="left_container">Das ist die linke Seite
                        <div id="left_login">Ein Login-Bereich</div>
                    <    div id="left_search">Ein Such-Bereich</div>
                    <    div id="left_menu">Ein Men&uuml;</div>
                        asdfsa<br />
            </    div>

    <!--     rechte Seite -->
            <    div id="right_container">Das ist die rechte Seite
                        <div id="right_login">Ein Login-Bereich</div>
                    <    div id="right_search">Ein Such-Bereich</div>
                    <    div id="right_links">Links</div>
                    <    div id="right_menu">Ein Men&uuml;</div>
            </    div>

    <!--     Mitte-Inhalt -->
            <    div id="content">

                <    p class="normtext">Ullamco
              laboris nisi ut enim ad minim veniam    , consectetur adipisicing elit. Sunt
              in culpa velit esse cillum dolore excepteur sint occaecat    . Lorem ipsum
              dolor sit amet    , ut labore et dolore magna aliqua. Quis nostrud exercitation
              sunt in culpa duis aute irure dolor    . Excepteur sint occaecat in reprehenderit
              in voluptate qui officia deserunt    . Mollit anim id est laborum. Velit esse
              cillum dolore ut aliquip ex ea commodo consequat    . Lorem ipsum dolor sit
              amet    , eu fugiat nulla pariatur. Ut enim ad minim veniam, ut aliquip ex
              ea commodo consequat    . Excepteur sint occaecat ut labore et dolore magna
              aliqua    . Velit esse cillum dolore lorem ipsum dolor sit amet, eu fugiat
              nulla pariatur    . In reprehenderit in voluptate sunt in culpa sed do eiusmod
              tempor incididunt    . Ut aliquip ex ea commodo consequat. Excepteur sint occaecat
              quis nostrud exercitation duis aute irure dolor    . Ut enim ad minim veniam.
                  In reprehenderit in voluptate sed do eiusmod tempor incididunt duis aute
              irure dolor    .</p>

            </    div>

    <!--     wird benötigt für festes Layout -->
            <    div class="clear"></div>
        </    div>
    </    div>

    <!--     Footer -->
    <    div id="footer">Das ist der Footer. Das ist der Footer. Das ist der Footer.
          Das ist der Footer. Das ist der Footer.</div>

    </    div>
    </    body>
    </    html> 
    Wo liegt mein Fehler?
     
    Gruß

    Karl
    www.stangerweb.de
    Zitieren Zitieren
  2. 29.11.08 17:15 #2
    Maik Tutorials.de Gastzugang
    Hi,

    du hast vergessen, die voreingestellte äußere Polsterungseigenschaft des p-Elements auf null zurückzusetzen:

    Code :
    1
2
3

    .normtext {
    margin:0;
}


    Oder zu Beginn des Stylesheets den Universalselektor * notieren, der alle im HTML-Dokument enthaltenden Elemente miteinbezieht:

    Code :
    1
2
3
4

    * {
    margin:0;
    padding:0;
}


    Der IE6 erzeugt zwischen den drei Spaltenblöcken (#left_container, #content, #right_container) ebenfalls eine unerwünschte Lücke, Stichwort: "3px-Gap-Bug" - siehe hierzu meinen Webmaster-FAQ-Artikel [CSS] Unerwünschter Abstand zwischen floatenden Boxen im IE6 - was tun?.

    Und das inhaltsleere DIV .clear zum "clearen" liesse sich auch durch CSS ersetzen -> How To Clear Floats Without Structural Markup.

    mfg Maik
     
    Zitieren Zitieren
  3. 29.11.08 17:37 #3
    karl123 karl123 ist offline Mitglied Silber
    Registriert seit
    Nov 2008
    Ort
    Püttlingen (Saarland)
    Beiträge
    91
    Das war es. Ich habe den Universalselektor notiert.
    Vielen Dank für deine Hilfe.

    Zu deinem Hinweis mit dem IE6: dessen Probleme umgehe ich mit den IE7 Script.
     
    Gruß

    Karl
    www.stangerweb.de
    Zitieren Zitieren
  4. 29.11.08 17:43 #4
    Maik Tutorials.de Gastzugang
    Zitat Zitat von karl123 Beitrag anzeigen
    Zu deinem Hinweis mit dem IE6: dessen Probleme umgehe ich mit den IE7 Script.
    Ich wollte hier auch nur darauf hinweisen, falls sich ein Benutzer den Quellcode als Arbeitsvorlage kopiert, und anschliessend über die fehlerhafte Darstellung im IE6 wundert.

    mfg Maik
     
    Zitieren Zitieren
« Text in HTML Textfeld mit CSS vertikal mittig zentrieren | DIV lässt sich nicht im Firefox UND Internet Explorer korrekt positionieren »

Ähnliche Themen

  1. Lücke im IE
    Von dasraz im Forum CSS
    Antworten: 4
    Letzter Beitrag: 02.07.08, 12:14
  2. [CSS] Wie behebe ich unterhalb des Formulars die unerwünschte Lücke im Textfluss?
    Von Maik im Forum Webmaster FAQ
    Antworten: 0
    Letzter Beitrag: 19.04.08, 04:08
  3. 1px Lücke zw. 2 Tabellen
    Von -Ener- im Forum HTML & XHTML
    Antworten: 15
    Letzter Beitrag: 16.05.06, 22:28
  4. Unerwünschte Lücke zwischen border und Inhalt eines Div
    Von Chosi im Forum CSS
    Antworten: 2
    Letzter Beitrag: 22.02.06, 12:04
  5. CSS div: Lücke
    Von kalfany im Forum CSS
    Antworten: 4
    Letzter Beitrag: 24.04.05, 19:11