Abstand zwischen 2 div wegen navigation

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Abstand zwischen 2 div wegen navigation

    problem gelöst!!!

    .:closed:.

    danke an alle helfer, ihr seid die besten!

    hallo leute,
    ich arbeite noch nicht lange mit css, bin aber kurz davor meine website fertig zu stellen. ich habe 4 div boxen (banner_oben, navigation, inhalt, banner_unten) in eine div box (container) getan und per css konfiguriert.

    leider habe ich das problem das ich zwischen banner_oben und navigation einen abstand habe. nach langem suchen habe ich herrausgefunden das der text in der navigation schuld ist. und zwar ist der abstand zwischen den divs immer so groß wie die pixelgröße der navigationsschrift. also bei "font-size: 12px;" gleich 12px. was kann ich tun damit dieser abstand verschwindet? und warum bekomme ich die schrift in der vertikalen nicht mittig?

    ich habe übrigends die box 40px hoch gemacht, da im hintergrund noch eine 40px große grafik eingebaut ist.

    css
    @charset "utf-8";
    #container {
    width: 860px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #262626;
    }
    #container #banner_oben {
    height: 180px;
    }
    #container #navigation {
    background-image: url(../images/navigation.jpg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px; <-hier ist das problem!
    font-weight: bold;
    color: #333333;
    background-repeat: no-repeat;
    background-color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    height: 40px;
    }
    #container #navigation ul {
    list-style-type: none;
    color: #000000;
    }
    #container #navigation li {
    list-style-position: inside;
    display: inline;
    padding-right: 50px;
    }

    #container #inhalt {
    background-color: #FFFFFF;
    }
    #container #banner_unten {
    height: 80px;
    }


    nehmts mir bitte nicht übel, bin ein absoluter newbie :(
  • danke für den tipp,
    jetzt hab ich halt einen abstand von 12pt :rolleyes: hab jetzt übrigends gemerkt das ich auch wenn ich einen text in den inhalt schreibe weitere abstände erhalte. siehe screenshot:



    weiß jetzt gar nicht mehr was ich machen soll :(

    html 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" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Unbenanntes Dokument</title>
    <!-- TemplateEndEditable -->
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    <link href="../css/design.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #CCCCCC;
    }
    -->
    </style></head>

    <body>
    <div id="container">
    <div id="banner_oben"></div>
    <div id="navigation">
    <ul>
    <li>Home</li>
    <li>Inhalte</li>
    <li>Sonstiges</li>
    <li>Videos</li>
    <li>Downloads</li>
    <li>Links</li>
    <li>Impressum</li>
    </ul>
    </div>
    <div id="inhalt"><!-- TemplateBeginEditable name="inhalt" -->
    <p>hier steht der text</p>
    <p>&nbsp;</p>
    <!-- TemplateEndEditable --></div>
    <div id="banner_unten"></div>
    </div>
    </body>
    </html>
  • So hier. Hintergrundfargeb und die groessen der Divs musste noch anpassen aber ich glaube so sollte das sein mit der navi oder?

    Warum das mit dem abstand zwischen den Divs bei dir ist weiss ich auch nicht, is voll komisch naja. Bei meiner loesung ist der abstand auf jedenfall weg.

    chakruhk

    Quellcode

    1. @charset "utf-8";
    2. #container {
    3. width: 860px;
    4. height:700px;
    5. margin-right: auto;
    6. margin-left: auto;
    7. border: 1px solid #262626;
    8. background-color:green;
    9. }
    10. #container #banner_oben {
    11. height: 180px;
    12. background-color:black;
    13. }
    14. #container #navigation {
    15. top:189px;
    16. position:absolute;
    17. width:860px;
    18. background-image: url(../images/navigation.jpg);
    19. font-family: Arial, Helvetica, sans-serif;
    20. font-size: 12px;
    21. font-weight: bold;
    22. color: #333333;
    23. background-repeat: no-repeat;
    24. background-color: pink;
    25. text-align: center;
    26. height: 40px;
    27. }
    28. #container #navigation ul {
    29. list-style-type: none;
    30. color: #000000;
    31. }
    32. #container #navigation li {
    33. list-style-position: inside;
    34. display: inline;
    35. padding-right: 50px;
    36. }
    37. #container #inhalt {
    38. background-color: red;
    39. top:229px;
    40. position:absolute;
    41. width:860px;
    42. height:150px;
    43. }
    44. #container #banner_unten {
    45. height:100px;
    46. width:860px;
    47. top:379px;
    48. position:absolute;
    49. color:white;
    50. background-color:yellow;
    51. }
    Alles anzeigen
  • @chakruhk - danke für dein posting. ich verstehe was du meinst. du vergiebst für den container eine gesammtgröße und unterteilst diesen dann.

    leider hab ich das problem, dass der inhalt nie die selbe größe besitzt. ich arbeite nämlich mit einer vorlage in dreamweaver cs3 und habe den inhalt als bearbeitbaren bereich deklariert. da der inhalt nie gleich groß ist kann ich auch keine feste größe vergeben. sonst noch eine idee?
  • So hallo nochmal, wenn ich das richtig verstanden habe dann muesste das so gehen. Die groesse des Inhalt Divs ist jetzt variabel, wird also groesser oder kleiner je nach Inhalt.

    Quellcode

    1. @charset "utf-8";
    2. div#container {
    3. width: 860px;
    4. [COLOR='Red']height:100%;[/COLOR]
    5. margin-right: auto;
    6. margin-left: auto;
    7. border: 1px solid #262626;
    8. background-color:green;
    9. }
    10. div#banner_oben {
    11. height: 180px;
    12. background-color:black;
    13. }
    14. div#navigation {
    15. [COLOR='Red']margin-top:-12px;
    16. padding-top:4px;[/COLOR]
    17. width:860px;
    18. background-image: url(../images/navigation.jpg);
    19. font-family: Arial, Helvetica, sans-serif;
    20. font-size: 12px;
    21. font-weight: bold;
    22. color: #333333;
    23. background-repeat: no-repeat;
    24. background-color: pink;
    25. text-align: center;
    26. height:40px;
    27. }
    28. div#navigation ul {
    29. list-style-type: none;
    30. color: #000000;
    31. }
    32. #navigation li {
    33. list-style-position: inside;
    34. display: inline;
    35. padding-right:50px;
    36. }
    37. div#inhalt {
    38. [COLOR='Red']margin-top:-16px;[/COLOR]
    39. background-color: red;
    40. width:860px;
    41. }
    42. div#banner_unten {
    43. [COLOR='Red']margin-top:-16px;[/COLOR]
    44. height:100px;
    45. width:860px;
    46. color:white;
    47. background-color:yellow;
    48. }
    Alles anzeigen


    chakruhk
  • Also um den Abstand zwischen Navi und Inhalt weg zubekommen musst du margin top erhoehen oder verringern je nachdem wie es bei dir muss.

    margin: aussenabstand
    padding: innenabstand

    mit padding-top wird halt die Schrift von der Navigation "runter gedrueckt"
  • machs doch einfach so, dass du in den navicontainer nochmal nen container für die schrift reinmachst, dann kannste die font-size des äußeren conatiners der navi auf 0 setzen und der abstand müsste weg sein.