DIV-Width

  • Sheldon schrieb:

    Gute Frage, darf ich den gesamten CSS Code sehen?
    Aber natürlich. ;)

    Hier erstmal ein Link , wo du es dir "live" angucken kannst.

    Quellcode

    1. /*
    2. - Layout
    3. - Body
    4. - Navigation
    5. - Schrift
    6. - Fett gedruckt
    7. - Wichtige Daten
    8. */
    10. /* =========================================================
    11. * Layout *
    12. ========================================================= */
    15. /* ====================
    16. Body
    17. ==================== */
    19. body {
    20. background: #0066CC; /* Alternativ für IE */
    21. background: -webkit-gradient(linear, 0 0, 0 25%, from(#3399CC), to(#0066CC));
    22. background: -moz-linear-gradient(top, #3399CC, #0066CC 25%);
    23. background-attachment: fixed;
    24. font-family: 'Droid Sans'; /* By Google Web Fonts */
    25. font-size: 100%;
    26. }
    28. #header {
    29. width: 1000px;
    30. margin-left: auto;
    31. margin-right: auto;
    32. }
    34. #content {
    35. position: relative;
    36. top: 27px;
    37. width: 1000px;
    38. margin-left: auto;
    39. margin-right: auto;
    40. background: #FFF;
    41. }
    43. #inner {
    44. width: 950px;
    45. }
    46. /* ====================
    47. Navigation
    48. ==================== */
    50. #navi_frame {
    51. width: 100%;
    52. height: 50px;
    53. background-color: #99FF33;
    54. }
    56. #navi_wrapper {
    57. width: 1000px;
    58. margin-left: auto;
    59. margin-right: auto;
    60. }
    62. #navi_bar {
    63. left: 550px;
    64. width: 450px;
    65. top: 5px;
    66. position: relative;
    67. }
    69. #navi_bar li {
    70. display: inline;
    71. list-style-type: none;
    72. }
    74. /* === Navi-Button === */
    76. a.nav_ref {
    77. background: transparent url("images/navigation/navbutton_right_blu.png") no-repeat scroll top right;
    78. color: #FFF;
    79. display: block;
    80. font-family: Verdana, Arial, Helvetica, sans-serif;
    81. font-weight: bold;
    82. font-size: 0.8em;
    83. text-shadow: 1px 1px 1px #000;
    84. float: left;
    85. height: 39px; /* Hoehe der verwendeten Grafik (Des angezeigten Teils)*/
    86. margin-right: 6px;
    87. padding-right: 18px;
    88. text-decoration: none;
    89. }
    91. a.nav_ref .span_link {
    92. background: transparent url("images/navigation/navbutton_left_blu.png") no-repeat;
    93. display: block;
    94. line-height: 29px;
    95. padding: 5px 0 5px 18px;
    96. }
    98. a.nav_ref:hover {
    99. background-position: bottom right;
    100. color: #FFF;
    101. outline: none; /* Punktierten Umriss im Firefox verhindern */
    102. }
    104. a.nav_ref:hover .span_link {
    105. background-position: bottom left;
    106. padding: 6px 0 4px 18px; /* Verschiebt Text um 1px nach unten */
    107. }
    109. /* Navi-Button Aktiv (=ac)*/
    111. a.nav_ref_ac {
    112. background: transparent url("images/navigation/navbutton_right_ora.png") no-repeat scroll top right;
    113. color: #FFF;
    114. font-family: Verdana, Arial, Helvetica, sans-serif;
    115. font-weight: bold;
    116. font-size: 0.8em;
    117. text-shadow: 1px 1px 1px #000;
    118. display: block;
    119. float: left;
    120. height: 39px; /* Hoehe der verwendeten Grafik (Des angezeigten Teils)*/
    121. margin-right: 6px;
    122. padding-right: 18px;
    123. text-decoration: none;
    124. }
    126. a.nav_ref_ac .span_link_ac {
    127. background: transparent url("images/navigation/navbutton_left_ora.png") no-repeat;
    128. display: block;
    129. line-height: 29px;
    130. padding: 5px 0 5px 18px;
    131. }
    133. a.nav_ref_ac:hover {
    134. background-position: bottom right;
    135. color: #FFF;
    136. outline: none; /* Punktierten Umriss im Firefox verhindern */
    137. }
    139. a.nav_ref_ac:hover .span_link_ac {
    140. background-position: bottom left;
    141. padding: 6px 0 4px 18px; /* Verschiebt Text um 1px nach unten */
    142. }
    145. /* ====================
    146. Schrift
    147. ==================== */
    149. /* Fett gedruckt */
    150. #bold {
    151. font-weight: bold;
    152. font-size: 100%;
    153. }
    155. /* Wichtige Daten (Rot) */
    156. #imp_r {
    157. color: red;
    158. font-weight: bold;
    159. font-size: 100%;
    160. }
    162. /* Wichtigen Daten (Grün) */
    163. #imp_g {
    164. color: green;
    165. font-weight: bold;
    166. font-size: 100%;
    167. }
    169. /* Wichtigen Daten (Gelb) */
    170. #imp_y {
    171. color: yellow;
    172. font-weight: bold;
    173. font-size: 100%;
    174. }
    Alles anzeigen


    Ganz schön lang, für den Anfang. ;)

  • Ist die Navigation im Content eingefügt?
    Aufgrund des fehlendes Html Codes kann ich das nicht so ganz beurteilen,aber wenn ja,
    dann könnte es aufgrund der angegeben Content-Breite sein.

    Mit freundlichen Grüßen

    Sheldon


    #edit : :D blöd kann ja quelltext doch anschauen ^^


    Setzt mal bitte Body auf 100 % Breite!

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Sheldon ()

  • Kev95 schrieb:

    Sheldon schrieb:

    Setzt mal bitte Body auf 100 % Breite!
    Jetzt hab ich nen Scrollbalken, aber der Abstand rechts ist weg.

    #Edit: Ich spiel mal mit den Paddings/Margins ein bisschen vielleicht komm ich auf die Lösung.

    #Edit2: Habs gefunden! Body-Breite auf 100% und Margin-left auf 0px.


    Gut, dann kann ich beruhigt schlafen gehen.

    Mit freundlichen Grüßen

    Robin Code