Website Rand

[BertaBiene]

Hallo Leute,
ich möchte eine Website machen.

Die Seite soll:
- 100% in hight & width sein
- ein Rand ca. 7 bis 10px top, right, bottom & left
- dieser Rand soll immer mit dem Viewport mitwandern


Innerhalb des Randes soll der Content sein, wenn der Content größer ist als der Viewport soll der untere Rand mit dem Content der höhe nach, nach unten wandern.

Ich hoffe ihr könnt das verstehen was ich meine.

Code: Alles auswählen

html, body {
background-color: #333333;
margin: -6px 6px 6px 6px;
padding:0;
height: 100%;
}

#head {
position:absolute;
top:0px;
background-color: #333333;
height:10px;
min-width:99%;
}

#center {
background-color:#FFFFFF;
min-height:100%;
}


Code: Alles auswählen

<div id="head"><!-- head --></div>

<div id="center"><!-- center --></div>

So sieht das aus was ich schon habe, von der Sache is es genau das was ich brauch.
Es kommt mir aber bisschen unsauber vor, es muss doch auch noch anders gehen? besser?

Ich Danke für Antworten.

[sejuma]

Was unsauber ist, das ist der #head.

Zum einen brauchst du den vermutlich überhaupt nicht, weil du ihn z.B. per Überschrift h1 innerhalb #center einfügen kannst.

Falls er dennoch benötigt wird, reichen diese Angaben völlig aus:

Code: Alles auswählen

#head {
background-color: #333333;
height:10px;
min-width:99%;
}

Beachte: Wenn zu den 100% oder 90 % noch Rahmen, Padding- oder Margin-Werte kommen, dann vergößert sich die Gesamtbreite u.U. auf über 100%.

[BertaBiene]

Ja ich weiss das es mit margin oder padding größer als 100% wird...
ich probiere ja auch schon, aber eine Lösung w.z.B. 4 div`s, eins oben, rechts, unten und links, will ich nicht machen.

Aber so wie ich es bis jetzt habe geht es ja schon ein bisschen, kennst Du noch ein andere herangehensweise?

Besten Dank

[BertaBiene]

Hallo,
ich habe jetzt die Lösung für mich.
aber eine Sache ist noch, und dafür erstmal der Code.

Code: Alles auswählen

*{ margin:0; padding:0;}

html, body {
background-color: #333333;
height: 99%; }

#center {
background-color:#FFFFFF;
margin: 10px 10px 0 10px;
min-height:100%;
background-image:url(raster.jpg); }

#navi {
background-color:#333333;
height:20px;
width:500px;
position:relative;
top:30%; }

#fuss,#bottom {
background-color:#333333;
position:absolute;
bottom:0px; }

#fuss {
right:0px;
height:50px;
width:300px; }

#bottom {
height:10px;
width:90%; }

p{
color:#FFFFFF; }

Code: Alles auswählen

<div id="center"><!-- center -->
      <div id="navi"><p>Navi</p></div>
      <div id="fuss"><p>Kontakt</p></div>
      <div id="bottom"><!-- bottom --></div>   
</div>


Wenn ich die Seite (viewport) jetzt von einer durchschnittlichen normal Größe etwas kleiner mache w.z.B. auf LapTop Größe ist alles O.K.


Wenn ich den viewport jetzt aber noch kleiner mache (der NAVIplatzhalter ist größer als der viewport), und ich wegen dem NAVI div jetzt nach Links und Rechts scrollen muss, dann ist der rechte dunkle rand breiter als er sein solltet...!

Ich hoffe ihr seht was ich meine, und könnt mir nen tipp geben.

Danke

[sejuma]

Das resultiert daher, dass die Navi mit 500px breiter ist als der Viewport.
Somit schiebt sie sich über den Rand nach rechts und der body vergrößert sich dadurch.
Das lässt sich m.E. nur vermeiden, wenn du alles in Prozent angibst, einschließlich der margin- und padding-Werte.