Navigationsstreifen mit voller Höhe

  • Navigationsstreifen mit voller Höhe

    Ich möchte meinen Navigationsstreifen auf volle höhe Bringen, abzüglich Banner.

    Ich hab das aktuell mit z-index und negativem Margin versucht aber das Ergebniss funktioniert nicht entsprechend. Soll heißen die Seite wird trotzdem unnötig nach unten gedehnt und das Hintergrundbild des navcontainers liegt über dem Banner. Jedenfalls mit Firefox 2 und Opera 9.5

    Gibt es da eine besser Lösung? Ich hab das leider noch nicht zum ansehen online, da das ganze nur ein Django Template ist und der Code nicht so weit fertig ist.

    Die HTML validiert korrekt mit ausnahme des Dateinamens der Navigationsbilder die CSS ohne Warnungen

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    3. <head>
    4. <link type="text/css" href="/media/style.css" rel="stylesheet" />
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    6. <title>Sehr Klein</title>
    8. </head>
    10. <body>
    11. <div id="container">
    12. <a id="banner" href="/"></a>
    13. <div id="content">
    14. <div id="advs">
    15. </div>
    16. <div id="navcontainer">
    19. <div class="nav">
    21. <a href="/" class="anav"><img src="/media/""" alt="Home" width="100" height="50" /></a><br />
    23. <a href="/david/" class="anav"><img src="/media/""" alt="David" width="100" height="50" /></a><br />
    25. <a href="/small/" class="anav"><img src="/media/""" alt="Wenig" width="100" height="50" /></a><br />
    27. </div>
    29. <div class="nav">
    31. <a href="/members/list/" class="anav"><img src="/media/""" alt="K&uuml;nstler" width="100" height="50" /></a><br />
    33. <a href="/films/list/" class="anav"><img src="/media/""" alt="Filme" width="100" height="50" /></a><br />
    35. </div>
    37. <div class="nav">
    39. <a href="/impressum/" class="anav"><img src="/media/""" alt="Impressum" width="100" height="50" /></a><br />
    41. </div>
    47. <br />
    48. <div id="advb"><img src="/media/full.png" />
    49. </div>
    50. </div>
    51. <div id="text">
    52. <h1>Sehr Klein</h1>
    54. <p>Ganz wenig Text!</p>
    56. </div>
    57. </div>
    58. <br style="clear:both" />
    59. </div>
    60. </body>
    61. </html>
    Alles anzeigen


    CSS

    Quellcode

    1. * {
    2. padding: 0;
    3. margin: 0;
    4. }
    6. body {
    7. background-color: #000000;
    8. height: 101%;
    9. }
    11. html {
    12. height: 101%;
    13. }
    15. h1,h2,h3,h4,h5 {
    16. color: #dd0000;
    17. margin: 10px;
    18. font-family: sans-serif;
    19. }
    21. input {
    22. width: 420px;
    23. }
    25. textarea {
    26. width:420px;
    27. height:100px;
    28. }
    30. h1 {
    31. text-align: center;
    32. margin-bottom: 20px;
    33. }
    35. li {
    36. margin-left: 10px;
    37. }
    39. p {
    40. font-size: 12pt;
    41. font-weight: lighter;
    42. }
    44. #banner {
    45. width: 900px;
    46. height: 140px;
    47. margin: 0;
    48. display: block;
    49. /*border-left: 5px solid #aa0000;
    50. border-right: 5px solid #aa0000;*/
    51. background-image: url("/media/cryptic.gif");
    52. z-index: 5;
    53. }
    55. #container {
    56. background-color: #ffffff;
    57. border-left: 5px solid #5a5a59;
    58. border-right: 5px solid #5a5a59;
    59. width: 900px;
    60. margin: 0 auto;
    61. height: 101%;
    62. background-image: url("/media/nav.png");
    63. }
    65. #content {
    66. width: 900px;
    67. height: 100%;
    68. }
    70. #navcontainer {
    71. float: left;
    72. width: 180px;
    73. margin: 0px;
    74. margin-top: -140px;
    75. height: 100%;
    76. background-image: url("/media/navbar.gif");
    77. z-index: 1;
    78. }
    80. .nav {
    81. width: 160px;
    82. border-top: 1px #0c0c0c solid;
    83. border-left: 1px #0c0c0c solid;
    84. padding-top: 10px;
    85. padding-left: 10px;
    86. padding-bottom: 10px;
    87. }
    89. #advs {
    90. float: right;
    91. padding: 0px;
    92. padding-top: 10px;
    93. width: 120px;
    94. height: 600px;
    95. border: solid 2px;
    96. margin: 0px;
    97. }
    99. #advb {
    100. width: 125px;
    101. height: 125px;
    102. border: solid 2px;
    103. margin: 0px;
    104. }
    106. #text {
    107. width: 720px;
    108. padding: 10px;
    109. padding-top: 20px;
    110. }
    112. .anav {
    113. color: #e50000;
    114. text-decoration: none;
    115. margin-left: 30px;
    116. width: 100px;
    117. display: block;
    118. font-weight: bold;
    119. font-size: 14px;
    120. }
    123. .anav:visited {
    124. color: #550000;
    125. }
    128. .anav:hover {
    129. /* color: #e50000;
    130. background-color: #ededed;
    131. background-image: url("/media/nav_hoover.png"); */
    132. }
    134. a {
    135. color: #e50000;
    136. text-decoration: none;
    137. font-weight: bolder;
    138. }
    140. a:hover {
    141. background-image: url("/media/nav_hoover.png");
    142. }
    144. .expose {
    145. font-weight: bold;
    146. font-size: 25px;
    147. color: #FF0000;
    148. }
    150. .error {
    151. font-weight: bold;
    152. font-size: 25px;
    153. color: #ee1111;
    154. }
    Alles anzeigen
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • also bei 100% Höhe Scripts orientiere ich mich immer hieran, einfach nur weil ich weiß, dass es funktioniert und ich es nicht immer neu testen will. Kann sein, dass es gar keine großen Auswirkungen hat.

    mache im #container aus height 100% ein min-height: 100%
    und füge zusätzlich noch das seperat ein:

    Quellcode

    1. * html #container {
    2. height: 100%;
    3. }


    Damit hast du schonmal die eigentliche Seite auf 100%. Wars das schon oder willst du #navcontainer wirklich auch auf 100% ? Durchs float wird das wohl schwieriger. Dadurch orientieren sich die 100% jedenfalls nicht mehr am Elternelement.

  • Ich hab das ganze jetzt auf fixed umgestellt und es funktioniert :)

    cryptic-entertainment.de/

    Allerdings hätte ich die Buttons in der Navigationsleiste noch gerne direkt übereinander und keine Ahnunh wo ich noch ein margin:0px setzen soll ;) Wenn jemand mir da noch weiterhilft wäre ich froh.

    CSS @ cryptic-entertainment.de/media/style.css

    Nebenbei, das ganze ist meine erste Python / Django Website :) Auch wenn das meiste online noch nicht funktioniert
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Ich weiß nicht, ob das relevant ist aber du hast im img-tag 2x das style-tag verwendet. Vielleicht änderst du das, also so:

    aus:

    Quellcode

    1. <img style="border-width:0px;" src="/media/buttons/a" alt="Registrieren" width="120" style="margin:0px;" />

    wird

    Quellcode

    1. <img style="border-width:0px;margin:0px;" src="/media/buttons/a" alt="Registrieren" width="120" />


    Wenn das nicht der Fehler ist, schauen wir noch einmal genauer hin...

  • Puuuuh, also einfach ist dein html-css-mix da nicht =)
    Arbeitest du mit einem speziellen Editor? Mir fällt auf, dass der Text in lauter div-Containern ist. Das ist glaub ich nicht so Sinn von div-Containern.

    Ok, kommen wir zum eigentlichen Thema. Ich habe als erstes mal die Pfadangaben zu den Bilder und Dateien geändert. Ich weiß nicht, ob das bei deinem Server notwendig ist, aber bei mir gehts nicht ohne.

    Beispiel (halt ohne Strich vor "media"):

    Quellcode

    1. <link type="text/css" href="media/style.css" rel="stylesheet" />


    Dann habe ich mich gefragt, was deine div-Container mit der Klasse "nav" bringen?! Die habe ich mal entfernt und die komplette Darstellung auf die Links selbst gelegt.
    In den Links kannst du das Style-Element entfernen. Das bringt hier gar nichts...
    Wenn du ein festes Design hast (und danach sieht es bei dir aus), dann würde ich dir empfehlen, die Grafiken per Grafikprogramm und nicht per HTML zu verkleinern. (Also das Element width entfernen). Dann kannst du mit CSS die Links formatieren.
    Nun sieht also der Navigationsblock so aus:

    Quellcode

    1. <div id="navcontainer">
    3. <a href="/" class="anav"><img border="0" src="media/buttons/home.png" alt="Home" width="120" /></a>
    4. <a href="/david/" class="anav"><img border="0" src="media/buttons/news.png" alt="David" width="120" /></a>
    5. <a href="/small/" class="anav"><img border="0" src="media/buttons/equipment.png" alt="Wenig" width="120" /></a>
    6. <a href="/members/list/" class="anav"><img border="0" src="media/buttons/members.png" alt="K&uuml;nstler" width="120" /></a>
    7. <a href="/films/list/" class="anav"><img border="0" src="media/buttons/projekte.png" alt="Filme" width="120" /></a>
    8. <a href="/members/add/" class="anav"><img border="0" src="media/buttons/a" alt="Registrieren" width="120" /></a>
    9. <a href="/impressum/" class="anav"><img border="0" src="media/buttons/impressum.png" alt="Impressum" width="120" /></a>
    11. <!--<div id="advb"><img src="media/full.png" />
    12. <script type="text/javascript">
    13. google_ad_client = "pub-8063770336122145";
    14. /* firefox */
    15. google_ad_slot = "3019285710";
    16. google_ad_width = 125;
    17. google_ad_height = 125;
    18. </script>
    19. <script type="text/javascript"
    20. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    21. </script>
    22. </div>-->
    24. </div>
    Alles anzeigen


    die css-Klasse zu den Links:

    Quellcode

    1. .anav {
    2. color: #e50000;
    3. margin:0px 30px;
    4. padding:0px;
    5. display: block;
    6. height: 73px;
    7. }


    So. Das sollte erstmal reichen. Wenn es jetzt immer noch Fehler gibt, dann gib bescheid, ich helfe gern.

    Ein Tipp: Überarbeite mal das HTML, das mag ja valide sein, aber du solltest dir überlegen, wofür einige Tags gedacht sind. Beispiel die divs in denen der Text steckt. Divs sind Container, die man eigentlich für jeden Inhalt nutzen kann, aber man sollte nicht jeden Satz in einen Container packen, denn das ist sehr verwirrend.

    Ich hoffe, ich konnte dir erstmal helfen...

    bye

  • Die HTML ist noch etwas überfüllt, ich war schon dabei das Template auszumisten aber an den vielen divs dürfte der FCKeditor schuld sein, den ich für den Inhalt verwenden lasse. Die absoluten pfadangaben sind nötig, da das ganze ein Template ist das von cryptic-entertainment.de genauso verwendet wird wie von cryptic-entertainment.de/members/list/

    Auch die .nav ist ein überbleibsel des vorgänger-Templates.

    Ich werde dann mal soweit übernehmen was du angemerkt hast und nachsehen wie weit das hlft. Danke :)
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Danke für deine Hilfe, jetzt sieht's schon fast so aus, wich ich das will (An einigen Bildern muss ich wohl noch feilen ...)

    Wenn mir jetzt noch jemand erklär was ich in das

    Quellcode

    1. google_cpa_choice = ""; // on file


    der Anzeige schreiben muss bin ich glücklich :)
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)

  • Ich habe ewig danach gesucht und mir die ein oder andere Seite durchgelesen, aber eigentlich will ich nur wissen was ich da 'reinschreiben muss damit der Button funktioniert ;)

    EDIT://
    Seltsam, jetzt geht's ohne da einen Text 'reinzuschreiben ... => einfach ignorieren ;)
    There are only 10 types of people in the world: Those who understand binary, and those who don't.

    Download meines ersten Spiels:HIER
    Über Feedback würde ich mich freuen ;)