kostenloser Webspace werbefrei: lima-city


CSS wo kommt der Abstand her ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    webclub

    webclub hat kostenlosen Webspace.

    Hallo
    ich habe mal einen Test mit CSS Layout gemacht
    und frage mich, wo der Abstand zwischen div id="oben" und div id="mitte"´her kommt,
    also definiert ist er nicht, da soll eigentlich kein Abstand sein ?!

    QuellCode siehe: http://webclub.lima-city.de/test1.html

    edit: oder gleich hier

    <!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" xml:lang="en" lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Start</title>
    <meta name="description" content="Startseite der Homepage" />
    <meta name="keywords" content="Start, Startseite, Willkommen" />
    
    <style type="text/css">
    <!--
    
    body { 
    margin: 0 auto; 
    padding: 0px; 
    text-align: center; 
    background: #000000; 
    } 
    
    #seite { 
    margin: 0 auto; 
    padding: 0px; 
    width: 1000px;
    text-align:center; 
    background: #336666; 
    } 
    
    #oben { 
    margin: 0 auto; 
    padding: 0px; 
    clear: both; 
    width: 94%;
    background: #AAAAAA; 
    } 
    
    #mitte { 
    margin: 0 auto; 
    padding: 0px; 
    clear: both; 
    float: left; 
    width: 70%;
    background: #CCCCCC; 
    } 
    
    #sidebar { 
    margin: 0 auto; 
    padding: 0px; 
    float: right; 
    width: 30%;
    background: #AAAAFF; 
    } 
    
    #footer { 
    clear: both; 
    margin: 0 auto; 
    padding: 0px; 
    width: 90%;
    background: #AAAAAA; 
    } 
    
    
    -->
    </style>
    
    </head>
    
    <body>
    
    <div id="seite">
    
    
    <div id="oben">
    <p>hier Dein Men&uuml;</p>
    </div>
    
    <div id="mitte">
    <p>hier Dein Haupt-Inhalt</p>
    </div>
    
    
    <div id="sidebar">
    <p>hier Seiten-Inhalt</p>
    </div>
    
    <div id="footer">
    <p>hier Footer-Inhalt</p>
    </div>
    
    
    </div>
    
    
    </body>
    </html>

    Woran kann das liegen, alles mit margin 0 auto und padding 0px aber trotzdem Abstand ?!
    hä ?!

    Beitrag zuletzt geändert: 5.5.2011 15:10:27 von webclub
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. m******e

    webclub schrieb:
    Hallo
    ich habe mal einen Test mit CSS Layout gemacht
    und frage mich, wo der Abstand zwischen div id="oben" und div id="mitte"´her kommt,
    also definiert ist er nicht, da soll eigentlich kein Abstand sein ?!

    Woran kann das liegen, alles mit margin 0 auto und padding 0px aber trotzdem Abstand ?!
    hä ?!


    <div id="oben">
    <p>hier Dein Men&uuml;</p>
    </div>
    ^^ Schmeiß <p></p> raus und schon gehts.

    <div id="oben">
    hier Dein Men&uuml;
    </div>


  4. Oder du setzt ganz einfach mit CSS den Abstand des 'div#oben p' auf '0':
    #oben p {
      margin:0;
    }


    Beitrag zuletzt geändert: 5.5.2011 17:07:24 von wagnerm
  5. Autor dieses Themas

    webclub

    webclub hat kostenlosen Webspace.


    hmmm ok ... margin 0 für p
    damit funktioniert es

    stellt sich mir bloss die Frage nach der Logik ... warum ist das nur bei #oben ein Problem

    die anderen divs haben doch auch <p> TAGs ... aber da war kein Abstand zu sehen
    Logik ? ... warum wirkt es sich nicht auf alle <p> TAGs aus ?!?

    verwirrt
  6. Genau weiß ich es auch nicht, aber es hängt mit "float" zusammen. Wenn du für #mitte und #sidebar das float weglässt, hast du überall die Abstände. Google mal ein bißchen danach und gib uns dann Bescheid! :biggrin:
  7. Das ist eine Vorbelegung des Browsers, um ein sinnvolles Standardlayout anzeigen zu können, wenn keine Layoutangaben getroffen wurden.
    Da ein <p> einen Absatz (engl. paragraph) darstellt sollte dieser auch räumlich als Absatz erkennbar sein, darum wird am Ende ein Abstand von [meistens ca.] 1em eingefügt, damit die Trennung erfolgt. Das selbe ist auch bei Listen der oder <blockquote> der Fall, diese werden ohne Anderweitige Layoutangaben Eingerückt um sie als Liste bzw. Zitat kenntlich zu machen.

    Mit freundlichen Grüßen
  8. Um da Probleme bzw. verwirrungen zu vermeiden, greife ich immer zum "globalen nullen":

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


    Zwar musst du dann sämtliche Abstände selbst definieren, dafür vermeidest du aber Unterschiede bei verschiedenen Browsern (die evtl. verschiedene Standartwerte haben). Außerdem wirst du durch scheinbar nicht definierte Abstände nicht verwirrt :)
  9. Wenn man so ein Problem sucht wieso greift man nicht nach Firebug und sucht danach geht kinderleicht?
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!