[CSS] Div abstand löschen

Dieses Thema im Forum "Webdesign" wurde erstellt von MasterJulian, 29. August 2009 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 29. August 2009
    Div abstand löschen

    Ok vorweg das letzte mal, dass ich selber ne Website erstellt habe ist bestimmt 5 Jahre her. Damals habe ich mit Iframes etc.. gearbeitet. Jetzt möchte ich eine ganz simple Page erstellen. Ich hab deshalb beim Dreamweaver eine passende Vorlage gewählt. Nun möchte ich unterhalb der Kopfzeile eine Navigationsleiste einfügen. Dies hat mit diesen divs auch geklappt. Doch nun habe ich einen Abstand zwischen Kopfzeile und Navigation. Wie bekomme ich den weg? Der Code sieht so aus:
    Spoiler
    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>Test</title>
    <style type="text/css">
    <!--
    body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
     padding: 0;
     text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
     color: #000000;
    }
    .oneColFixCtrHdr #container {
     width: 780px; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
     background: #FFFFFF;
     margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
     border: 1px solid #000000;
     text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    }
    .oneColFixCtrHdr #header {
     background: #DDDDDD; 
     padding: 0 10px 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
    }
    .oneColFixCtrHdr #header h1 {
     margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
     padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    }
    .oneColFixCtrHdr #navigation {
     background: #DDDDDD; 
     padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die 
    Auffüllung entfernen. */
     text-align: center;
    }
    .oneColFixCtrHdr #mainContent {
     padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
     background: #FFFFFF;
    }
    .oneColFixCtrHdr #footer {
     padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
     background:#DDDDDD;
    }
    .oneColFixCtrHdr #footer p {
     margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
     padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
    -->
    </style></head>
    
    <body class="oneColFixCtrHdr">
    
    <div id="container">
     <div id="header">
     <h1>Kopfzeile</h1>
     <!-- end #header --></div>
     <div id="navigation">
     <h5> link1 link2 link3 </h5>
     <!-- end #navigation--></div>
     <div id="mainContent">
     <h1> Hauptinhalt </h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo </p>
     <p>convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
     <h2>H2-Überschrift </h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
     <!-- end #mainContent --></div>
     <div id="footer">
     <p>Fußzeile</p>
     <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    Sollte für die Webdesigner unter euch ein Kinderspiel sein (ich hab noch nie mit CSS gearbeitet)
    PS: Jetzt weiß ich wieder, warum ich mich nie länger mit Webdesign beschäftigt hab XD.
     
  2. 29. August 2009
    AW: Div abstand löschen

    Füg als letzte Eigenschaft beim CSS-Code folgendes ein:
    Code:
    h5 { margin: 0; }
    h5 ist eine Überschrift, das wegen solltest du H5 nicht für die Navigation benutzen!
     
  3. 29. August 2009
    AW: Div abstand löschen

    Das ist alles nicht sehr schön ^^'

    Spoiler
    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>Test</title>
    <style type="text/css">
    <!--
    
    h5 {
     margin:0px;
     padding:0px;
    }
    
    body {
     font: 100% Verdana, Arial, Helvetica, sans-serif;
     background: #666666;
     margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (Auffüllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
     padding: 0;
     text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
     color: #000000;
    }
    .oneColFixCtrHdr #container {
     width: 780px; /* Mit einer Breite, die 20 Pixel unter der vollen Breite von 800 Pixel liegt, können Sie dem Browser-Chrome Rechnung tragen und gleichzeitig eine horizontale Bildlaufleiste vermeiden. */
     background: #FFFFFF;
     margin: 0 auto; /* Durch automatische Ränder (in Verbindung mit einer Breite) wird die Seite zentriert. */
     border: 1px solid #000000;
     text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element überschrieben. */
    }
    .oneColFixCtrHdr #header {
     background: #DDDDDD; 
     padding: 0 10px 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die Auffüllung entfernen. */
    }
    .oneColFixCtrHdr #header h1 {
     margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, können Sie das Auftreten unerwarteter Abstände zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnötig, weil dieser Rahmen die gleiche Wirkung hat. */
     padding: 10px 0; /* Durch die Verwendung der Auffüllung anstelle von Rändern lässt sich gewährleisten, dass das Element die Kanten des div nicht berührt. */
    }
    .oneColFixCtrHdr #navigation {
     background: #DDDDDD; 
     padding: 0 10px 0 20px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die 
    Auffüllung entfernen. */
     text-align: center;
    }
    .oneColFixCtrHdr #mainContent {
     padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
     background: #FFFFFF;
    }
    .oneColFixCtrHdr #footer {
     padding: 0 10px; /* Diese Auffüllung entspricht der linksbündigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
     background:#DDDDDD;
    }
    .oneColFixCtrHdr #footer p {
     margin: 0; /* Wenn Sie die Ränder des ersten Elements in der Fußzeile auf 0 einstellen, können Sie unerwartete Abstände zwischen divs vermeiden. */
     padding: 10px 0; /* Durch die Verwendung der Auffüllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }
    -->
    </style></head>
    
    <body class="oneColFixCtrHdr">
    
    <div id="container">
     <div id="header">
     <h1>Kopfzeile</h1>
     <!-- end #header --></div>
     <div id="navigation">
     link1 link2 link3 
     <!-- end #navigation--></div>
     <div id="mainContent">
     <h1> Hauptinhalt </h1>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo </p>
     <p>convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
     <h2>H2-Überschrift </h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
     <!-- end #mainContent --></div>
     <div id="footer">
     <p>Fußzeile</p>
     <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
    

    Edit: Whaaa zu spät :angry:
     
  4. 29. August 2009
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: Div abstand löschen

    padding und margin wären die befehle für solche aktionen


    padding ist der randabstand
    randabstand.gif
    {img-src: //de.selfhtml.org/css/eigenschaften/randabstand.gif}




    margin der innenabstand.
    innenabstand.gif
    {img-src: //de.selfhtml.org/css/eigenschaften/innenabstand.gif}



    hoffe das ich es richtig verstanden habe.
    SELFHTML: Stylesheets / CSS-Eigenschaften / Innenabstand - hilft dir garantiert!

    oder : SELFHTML: Stylesheets / CSS-Eigenschaften / Au
     
  5. 29. August 2009
    AW: Div abstand löschen

    Danke für eure Hilfe. Wie gesagt hab seit ewigkeiten keine HP mehr erstellt und schon gar nicht mit CSS. Ich hab im ".oneColFixCtrHdr #navigation {" jetzt einfach die größe und Bold per hand angegeben. Somit verwende ich kein hl5 mehr (wusste nciht, dass das nicht für navigation geeignet ist)
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.