Kleines Problem bei der Breite am Footer

[Felidae]

Guten Tag,
ich hab da doch noch ein Problem"chen" mit dem Footer.

Mit diesem Code ist der Footer unten angebracht:

body { background-color:#990000;
       margin:5px; }

div { padding-bottom:5px;
      padding-top:5px; }

img { border:0px none #000000; }

#banner { border-bottom:3px dotted #000000;
          text-align:center; }

#navi { border-bottom:3px dotted #000000; }

#footer { border-top:3px dotted #000000;
          bottom:5px;
          position:absolute;
          text-align:center;
          width:100%; }

Website gegen ICQ-Kettenbriefe

Leider wird unten nun ein kleines Stückchen die vertikale Scrollleiste angezeigt. Ich glaub, das hängt mit dem Rahmen und dem width zusammen.
Jemand ne Idee, wie ich das hinbekomme, dass es wieder auf Normalbreite ist?

THX
^^
mfg.

 

[dkdenz]

Gib mal dem Footer nur 99% Breite.

Edit:
Oder gib dem body ein margin:0px und stelle die 5px-Abstände anders her.
(was ich für besser halte)

 

[Felidae]

x_X Da hätt ich auch drauf kommen können.
Dankeschön. ^^ So einfach ist das also.. Kannste mir noch einen Gefallen tun? Kannste mir vileicht erklären, warum das so ist? Also, hast du einfach nurmal so 99% gesagt, weils kleiner ist und dann "vermutlich" wieder passt, oder ist das allgemein bekannt, dass es mit 99% immer geht? Blöde Frage, ließt sich bisschen beschissen, aber mir kommt das grad so in den Sinn..

THX.
mfg.

 

[dkdenz]

Les' bitte meinen Edit im vorherigen Post.
Durch das body{margin:5px} entsteht die Scrollbar.

 

[Felidae]

Hi, danke. Das hab ich gemacht. margin:0px; für den body und alle anderen Abstände gelöscht. Funktioniert wunderbar. Alles wird schön angezeigt. Aber dann ist leider alles an den Rand gequetscht. Also hab ich allen div´s ein padding:5px; gegeben. Jetzt ist die Scrollleiste wieder da. x_X

body { background-color:#990000;
       margin:0px; }

div { padding:5px; }

img { border:0px none #000000; }

#banner { border-bottom:3px dotted #000000;
          text-align:center; }

#navi { border-bottom:3px dotted #000000; }

#footer { border-top:3px dotted #000000;
          bottom:0px;
          position:absolute;
          text-align:center;
          width:100% }

Website gegen ICQ-Kettenbriefe
Hättest du oder sonst wer ne Idee wie ich es ordentlich hinbekomme?

THX
^^
mfg.

 

[planet4]

Hallo,

wenn du deinem #footer 100% Breite gibst und 5px links und rechts padding, dann sind das nun mal mehr als 100% und ein Scrollbalken entsteht...
(da du das padding für alle divs angibst, wirkt sich das nun mal auch auf den footer aus)
also gib dem footer explizit kein padding oder vergib die 5px padding an container mit einer eindeutigen id

planet4.

 

[Felidae]

Stimmt, hast recht. Und da der footer eh text-align:center; hat brauch ich da auch gar nicht padding links und rechts. ^^ THX Dann werd ich das nachher oder morgen mal so ändern.

mfg.

 

[Felidae]

Hi, ich muss mich doch nochmal melden.

Auf der Seite Website gegen ICQ Kettenbriefe funktionierts leider immernoch nicht. Das mit der Breite habe ich dank euch super hinbekommen, aber das Teil hängt jetzt nichtmehr ganz unten. Der Grund dafür ist, woweit ich denke, das position:relative;. Aber wenn ich absolute nehme, dann bleibt der Footer über der Schrift stehen, wenns mal etwas mehr ist und man dann scrollt. Hat jemand noch ne Idee dazu? Wäre sehr schön. ^^

a:link { color:#000000;
         text-decoration:none; }

a:visited { color:#000000;
            text-decoration:none; }

a:focus { color:#000000;
          text-decoration:underline; }

a:hover { color:#000000;
          text-decoration:underline; }

a:active { color:#000000;
           text-decoration:none; }

body { background-color:#990000;
       color:#000000;
       font-family:"Comic Sans MS",serif;
       font-size:12pt;
       margin:0px; }

img { border:0px none #000000; }

.heading { font-size:18pt;
           font-weight:bold;
           text-align:center;
           text-decoration:underline; }

#banner { border-bottom:3px dotted #000000;
          padding:5px;
          text-align:center; }

#navi { border-bottom:3px dotted #000000;
        padding:5px; }

#content { padding:10px; }

#footer { border-top:3px dotted #000000;
          bottom:0px;
          padding-bottom:5px;
          padding-top:5px;
          position:relative;
          text-align:center;
          width:100% }

mfg.

 

[planet4]

ja, ich hab 'ne Idee

:wenn du den footer absolut positionierst, richtet sich diese Positionierung immer nach demjenigen umschließenden Elternelement, dass auch positioniert ist; bei dir ist ein solches nicht vorhanden, also richtet sich die Positionierung nach dem Stammelement (html).
also: gib dem Container #content ein position:relativ, schließe den footer in diesen Container mit ein, dann kannst du ihn mit position: absolut; bottom: 0px; unten positionieren.
Es kann sein, dass der Inhalt von #content den footer dann noch ein bisschen überlappt, da man Text sowieso in <p></p> einschließen sollte, kannst du diesem Inhalt dann ein margin-bottom: 40px; oder so mit geben, dann klappt's...

alternativ zum <p> mit margin-bottom kannst du natürlich auch dem footer ein margin-top geben...
und bei sehr wenig Inhalt auf der Seite hast du den footer natürlich immer noch weiter oben sitzen, aber du wirst wahrscheinlich nicht soo wenig Inhalt haben wie auf der Testseite... bei längerem Inhalt sitzt er da, wo er hin soll

planet4.