Anzeige

100% Breite eines Divs

100% Breite eines Divs | PSD-Tutorials.de

Erstellt von ZackBag, 29.10.2008.

  1. ZackBag

    ZackBag I think, I spider!

    31
    Dabei seit:
    30.03.2006
    Beiträge:
    1.076
    Geschlecht:
    männlich
    Ort:
    Bad Hersfeld
    Software:
    Photoshop CS3
    Kameratyp:
    Digikam
    100% Breite eines Divs
    Hey :)

    Bin gerade dabei, mich ein wenig in Komplett anpassungsfähige Designs einzuarbeiten.

    Mein Zwischenstand:
    http://xxzackbagxx.lima-city.de/swingin/index.html
    (vom Header bitte absehen, der dient nur für mich als Anschauung)

    Nun ist mein Problem der Content-Bereich (dunkelgrau)
    Dieser springt, sobald man den Browser kleiner macht nach unten.
    Ich versteh aber nicht warum.

    Habe um die Navigation und den Content einen großen Div-Container liegen,
    weil ich dachte, dass das das Problem behebt.. (wuuhh 3 mal "das(s)" hintereinander :p)

    Wäre wirklich schön, wenn ihr mir helfen könntet.

    Hier der Code:

    Index.html

    Code (Text):
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <link rel="stylesheet" href="format.css" type="text/css">
    6. <title>Swinging Trumpet</title>
    7. </head>
    8. <body>
    9. <div class="header2">
    10. <div class="header">
    11. </div>
    12. </div>
    13. <div class="leiste">
    14. <div class="leistenlinks">
    15. <a href="kontakt.html">Kontakt</a>  |
    16. <a href="impressum.html">Impressum</a>
    17. </div>
    18. </div>
    19. <div class="contentin">
    20. <div class="navi">
    21. <b>Navigation</b>
    22. <br>
    23. <br>
    24. <ul>
    25. <li><a href="start.html">Start</a></li>
    26. <li><a href="start.html">Termine</a></li>
    27. <li><a href="start.html">Biografie</a></li>
    28. <li><a href="start.html">Fotoalbum</a></li>
    29. <li><a href="start.html">Presse</a></li>
    30. <li><a href="start.html">Records</a></li>
    31. <li><a href="start.html">Cat Room</a></li>
    32. <li><a href="start.html">Links</a></li>
    33. <li><a href="start.html">Gästebuch</a></li>
    34. </ul>
    35. </div>
    36.  
    37. <div class="content">
    38. lalalalala
    39. </div>
    40. </div>
    41. </body>
    42. </html>
    43.  
    format.css
    Code (Text):
    1.  
    2. body
    3. {
    4. color:white;
    5. background-color: #262626;
    6. font-family: Tahoma
    7. }
    8.  
    9. .header
    10. {
    11. background-image: url(header.png);
    12. background-repeat: no-repeat;
    13. background-color: #7e0167;
    14. height: 258px;
    15. width: 759px;
    16. }
    17.  
    18. .header2
    19. {
    20. background-image: url(header2.png);
    21. background-color: #7e0167;
    22. height: 258px;
    23. width: 100%;
    24. margin-bottom:10px;
    25. }
    26.  
    27. .leiste
    28. {
    29. background-color: #111111;
    30. height: 31px;
    31. width:100%;
    32. text-align: right;
    33. }
    34.  
    35. .leistenlinks
    36. {
    37. color:#7e0167;
    38. font-size: 13px;
    39. margin-right: 10px;
    40. line-height: 31px;
    41. }
    42.  
    43. .leistenlinks a:link,
    44. .leistenlinks a:visited
    45. {
    46. color: white;
    47. text-decoration: none;
    48. }
    49.  
    50. .leistenlinks a:hover,
    51. .leistenlinks a:active
    52. {
    53. color: #7e0167;
    54. text-decoration: none;
    55. }
    56.  
    57. .navi
    58. {
    59. font-size:15px;
    60. width: 200px;
    61. margin-left: 100px;
    62. margin-top: 50px;
    63. list-style-image: url(pfeil.gif);
    64. float: left;
    65. }
    66.  
    67. .navi a:link,
    68. .navi a:visited
    69. {
    70. color: #7e0167;
    71. text-decoration: none;
    72. }
    73.  
    74. .navi a:hover,
    75. .navi a:active
    76. {
    77. color: white;
    78. text-decoration: none;
    79. }
    80.  
    81.  
    82. .content
    83. {
    84. background-color: #111111;
    85. height: 500px;
    86. margin-top:50px;
    87. float: left;
    88. width: 80%;
    89. }
    90.  
    91. .contentin
    92. {
    93. height: 500px;
    94. width: 100%;
    95. }
    96.  
    Gruß
    ZackBag
     
    #1      
  2. thexe

    thexe ein Albtraum

    Dabei seit:
    11.11.2007
    Beiträge:
    551
    Geschlecht:
    männlich
    Ort:
    A:\autostart.exe
    Software:
    CS5 Design Premium
    Kameratyp:
    Pentax K200D
    100% Breite eines Divs
    AW: 100% Breite eines Divs

    .navi
    {
    font-size:15px;
    width: 200px;
    margin-left: 100px;
    margin-top: 50px;
    list-style-image: url(pfeil.gif);
    float: left;
    }

    .content
    {
    background-color: #111111;
    height: 500px;
    margin-top:50px;
    float: left;
    width: 80%;
    }

    sobald die 80% nicht mehr verfügbar sind, weil die navi zuviel platz (über 20% des browserfensters) einnimmt, passts nichtmehr in eine "zeile" im browser und er fügt automatisch eine art zeilenumbruch hinzu, um die css-angaben auch umzusetzen
    wie man das abschaltet kann ich dir jetzt nicht beantworten ...
     
    #2      
  3. 100% Breite eines Divs
    AW: 100% Breite eines Divs

    Es hilft die Navi 20% breit zu machen (einschließlich margin!). Und du kannst zudem noch eine min-width für die Navi mit 200px ansetzen. Das sollte helfen.
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    100% Breite eines Divs
    AW: 100% Breite eines Divs

    beim content div sollte das float:left heraus...

    und ich empfehle feste breiten und höhen nicht mit prozentualen zu mischen... wenn du dem content nen margin gibst sollte das doch auch passen, dann ist der variabel in der breite behält aber links und rechts nen abstand, nicht?
     
    #4      
  5. Loilo

    Loilo Guest

    100% Breite eines Divs
    AW: 100% Breite eines Divs

    Das
    float:left;
    beim Content-Div weg, dafür ein
    margin-left: 300px;
    rein, das wars schon. Aber prozentuale Angaben würd ich da nicht machen, mischen ist da nicht so gut. Vllt. 600px Breite sind ganz sinnvoll...
     
    #5      
x
×
×
teststefan