Breite der Webseite

Servus,
wie schaff ich es, dass mein Header, Hauptbereich, Footer … die passende Breite besitzt ?
Ich habe meinen Hauptbereich und meinem Footer “width: 1100px” gegeben. Aber trotzdem ist der Footer breiter :confused: Mein Menü sollte so breit sein wie mein Header, also habe ich beiden die breite “width: 1090px” gegeben. Aber mein Menü ist wieder um ein paar pixel breiter :confused:

Kann mir jemand dabei zu Seite stehen oder mir einen Link zu einem tut … schicken ?

Achja, das ist meine Webseite, wo ich übe. moderndesigns.bplaced.net

[code]/Hauptbereich/
body
{
font: 12px arial, sans-serif;
background-color: #414141;
height: 100%;
}

#container
{
width: 1100px;
background-color: #ffffff;
padding: 5px 5px;
}

#header
{
background-color: #000000;
height: 120px;
position: absolute;
}

#footer
{
clear: left;
background: #000000;
text-align: center;
width: 1100px;
padding: 10px;
color: #a0a0a0;
}

/Navigation/
#menu
{
font: bold 11px arial;
height: 30px;
line-height: 30px;
background-color: #414141;
margin-top: 75px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
}

#menu .last-li
{
border: none;
}

#menu li
{
float: left;
display: inline;
height: 30px;
border-right: 1px solid #6d6d6d;
}

#menu a
{

display: block;
text-decoration: none;
color: #a0a0a0;
padding-left:12px;
padding-right:12px;
}

#menu a:hover
{
color: #ffffff;
}

#index #navIndex a,
#komodie #navKomodie a,
#drama #navDrama a,
#fantasie #navFantasie a,
#action #navAction a,
#thriller #navThriller a,
#krimi #navKrimi a,
#sciencefiction #navScience-Fiction a,
#horror #navHorror a,
#comedy #navComedy a,
#kindertv #navKinder-TV a
{
background-color: #00acfd;
color: #000000;
height: 30px;
display: block;
}[/code]

Nein, hast du nicht - Firebug zeigt mir auf der genannten Beispielseite ganz deutlich, dass du für #container und #footer width:1150px angegeben hast.
Und ein padding von 5px bzw. 10px kommt auch noch dazu.

Für #header hast du ebenfalls 1150px angegeben, für #menu 1100px.

Ok, dann hab ich das noch nicht upgeloadet. Ich stell es nicht immer gleich online.

Wenn ich dem Header jetzt eine Breite von 1000px verpasse und dann noch padding 5px dazu mache. Ist der Header dann 1010px breit oder immernoch 1000px ?

gr

wenn der padding links und rechts ist stimmt das

Das sind Grundlagen.
de.selfhtml.org/css/formate/box_modell.htm

…auch wenn den Sinn dieser Entscheidung des W3C infrage stellen kann. Schließlich ist padding der Innenabstand und hat somit nichts mit der in Anspruch genommenen Breite des Elements zu tun.

Das dachte ich auch :slight_smile:
Ich dachte immer, wenn ich ein Div ne Breite von 200px gebe und einen Innenabstand von 5 px. Dass eben nach innen 5px wegfallen ^^ Aber wenn sie dazukommen ist das was anderes :slight_smile:

gr. chris

PS. danke für die ganzen Antworten, heute abend werd ich dann mal versuchen meiner Homepage die passende Breite zu geben :slight_smile:

Servus,
also das klappt jetzt :slight_smile:
Danksche :wink:

Eine Sache wäre da noch.
Wie schaffe ich es, dass meine Webseite “Header+Hauptbereich+Footer” 100% hoch sind ? Also die komplette Höhe vom Browser ausnutzen ?

Mit Height:100% für body ist es ja leider nicht getan :confused:

gr

Das mit der Höhe von 100% muß man dann nur konsequent
durchziehen, also vom Element html bis zu dem Element, worauf
sich die volle Höhe beziehen soll.

Alternativ kann man auch position:fixed beim betroffenen Element
verwenden, teils auch position:absolute, wenn es nicht selbst
bereits in einem positionierten Element steckt. Man muß dann nur
etwa top und bottom auf 0 setzten.

Bei solchen in der Höhe festgelegten Elementen ist man dann auch
selbst dafür verantwortlich, daß der komplette Inhalt zugänglich
bleibt, kann man meist erreichen, indem man overflow:auto bei
einem geeigneten Element setzt.

Servus,
also ich habe nun alles “height:100px” gegeben, wie Sie es gesagt haben.
Leider ist meine HP nun ein paar pixel zu groß, damit ein Scrollbalken entsteht, was ich natürlich nicht möchte.

Desweiteren habe ich einen Header unten angefügt, an dem es aber nicht liegen dürfte, da das Problem vorher schon bestand.

gr. chris

Du meinst Prozent, nicht Pixel(?)

Tja, 100% plus x sind halt mehr als 100% … Stichwort Box Model, again.

Tipp: Firebug installieren, damit kann man sich sehr schön anschauen, was wie hoch ist und was wo welche Abstände verursacht, etc.

Jo, meinte 100%.

Hab mir auch gedacht, dass das mit dem Padding zu tun hat. Dann sind das 10px zu viel ^^

Mal schauen, vll. find ich google … eine Lösung wie ich von 100% die 10px abziehen kann.

gr

Bei CSS2.x kann man jedenfalls nicht direkt abziehen.
Ich meine, das wurde erst für einen Arbeitsentwurf für ein
CSS3-Modul vorgeschlagen.

Insofern kann man da allenfalls tricksen mit weiteren
Verschachtelungen oder wie angegeben durch Positionierung von
Elementen.