Beiträge von sejuma

Du kannst auch die eckigen Klammer maskieren.
Das sieht dann z.B. so aus (am Beispiel eines meiner Banner):

<p style="border: 1px solid #5A5DA0; padding: 5px; font-size: 0.8em; background: #ccc;">
&lt;a href="http://www.ohne-css.gehts-gar.net" target="_blank"&gt;&lt;img style=&quot;height: 60px; width: 468px; border: none;&quot; alt="www.ohne-css.gehts-gar.net" src="http://www.ohne-css.gehts-


gar.net/img/banner/46803.png"&gt;&lt;/a&gt;
</p>

Das was bei den 100% übersteht sind die Höhen des oberen und unteren Divs zuzüglich padding und margin.

Das Problem ist, dass Pixel und Prozent eben unterschiedliche Einheiten sind und keinen gemeinsamen Nenner haben. Somit macht es auch keinen Sinn irgendeinen Wert unter 100% zu nehmen, da dies je nach Bildschirm unterschiedlich ist.

Vielleicht hilft dir
dieses Layoutbeispiel weiter.

Reine CSS-Variante:
Definiere 5 Divs:
#header1, #header2 ... #header 5
Weise jedem eine andere Hintergrundgrafik zu und rufe auf jeder Seite den entsprechenden header-div auf.

Wie wär's denn damit? Die führenden Nullen können leider IE und ältere Operaversionen nicht.

.code { background-color: #ddffdd;}


ol {list-style-type: decimal-leading-zero;}


li {background-color: #33ff33;}

<div class="code">
[list=1]
[*]Zeile 1
[*]Zeile 2
[*]Zeile 3
[/list]
</div>

Was Highliting betrifft könntest du per CSS einfach ne Klasse mit ner Hintergrundfarbe definieren und die per span aufrufen.

Kannst du mal einen Link posten, damit man das life mit den Grafiken sieht?

Versuch's mal mit

padding-bottom: 2px;

oder einem anderen Wert.
Den Code noch der Klasse .button zuweisen.

#menu und #content in einem wrapper packen. Dem #wrapper eine sich vertikal kachelnde Hintergrundgrafik zuweisen, die dem Querschnitt von #menu und #content entspricht.
Anleitung siehe Link von Billbos.

LinuxMan:
War wirklich kein guter, bzw. bereits schon längst veralteter Vorschlag. Synaptic hat erklärt weshalb.

felixstoessel:

So wie von dir vorgeschlagen geht's natürlich auch.
Aus Faulheit und zwecks Code-Erparnis verwendet man jedoch oft die Kurzschreibweise.
Sieh dir zur Schreibweise mal hier Ziffer 5 an (gilt entsprechend auch für margin).

Zwei mal 10% links und rechts plus 80% Mitte ergibt 100%. Der Rahmen erhöht nach dem CSS-Boxmodell die Gesamtbreite. Also ist die dann mehr als 100%.

Versuchs mal so:

#main {
margin: 0 auto;
width: 80%;
border: 8px solid red;
}

Siehe auch http://www.ohne-css.gehts-gar.net/0001.php

So in etwa sollte es klappen:

#navi { 
background: #36aeff url(../img/navigation/background.png) no-repeat; 
margin: 0 auto; 
width: 600px; 
line-height: 50px;
} 


#navi ul { 
list-style-type: none; 
margin: 0 0 0 10px;
} 


#navi li { 
float: left;
margin-right: 10px;
font-size: 18px; 
} 


#navi li:a { 
background: url(../img/navigation/button_top.png) repeat-x; 
display: block;
width: auto; 
}

Noch nicht überall!

Hier

#header  {
background-image: url(img/header.jpg);
background-repeat: no-repeat;
width: 923px;
height: 139px;
float:left;
padding: 113px;
}

wirkt sich der Paddingwert auf alle Seiten aus. Also auch unten, wo es offensichtlich nicht sein soll.

Hier

#news  {
background-image: url(img/news.jpg);
background-repeat: repeat-y;
width: 549px;
height: 100%;
float:left;
padding: 70px; 
padding: 30px;
padding: 90px;
}

werden die ersten beiden Paddingwerte vom letzten überschrieben. Haben damit keinerlei Wirkung und sind überflüssig.
Ob die unteren 90px auf jeder Seite gewollt sind, mag ich bzweifeln.

Du solltest dir nochmal über den Unterschied von padding und margin klar werden und dich über deren korrekte Schreibweise/Wirkung informieren.

Schließlich verschachtelst du gleich mehrere linksgefloatete Div's. Auch das bringt dich in die Bredouille.

Mein Vorschlag:
Werde dir zunächst erst über die theoretischen Grundlagen klar, bevor du solche Konstruktionen kreiiesrt, die offensichtlich nicht dem entsprechen, was du vor hast.

"maxwurm" war schon mal besser!

Zunächst solltest du mal alle Leerzeichen vor dem Doppelpunkt entfernen.
Falsch:

margin-left : 150px;

Richtig:

margin-left: 150px;

Das ist auch falsch:

#page  {
width : 923px;
height : 100%;
margin-left: 0 auto 0 auto;
;
}

Richtig:

#page  {
width : 923px;
height : 100%;
margin: 0 auto;
}

Dann solltest du sämtliche Style-Angaben in die CSS-Datei packen und nicht im HTML-Code noch zusätzliche angeben.

Bereinige mal diese Punkte, dann lass die Seite validieren und dann sehen wir weiter.

Dodo
Es ist m.E. nicht unbedingt falsch, wenn man nicht cleared. jedenfalls ist es von der Validität her nicht zwingend erforderlich.
Nur sind die Ergebnisse u.U. anders.
Wenn du z.B. keinen Hintergrund hast, dann musst du auch nicht zwingend clearen.
Allerdings bedeutet clearen auch, dass das nächste Element nach dem Clear dann wieder "normal" und ohne Rücksicht auf den vorhergehenden Float wieder angeordnet wird.

So isses.
Merke deshalb folgenden Spruch: "Wer floatet, muss auch clearen"
Wenn der Background nicht "mitwächst" liegt es meist an einem fehlenden Clear-Befehl.
In diesem Beispiel kommt das auch entscheidend auf's clearen an.

clear: left;

hätte auch gereicht.
Die Theorie des Floatens und Clearens findest du hier erklärt: http://css-technik.de/css-examples/219_9/

Möglicherweise fehlt auch lediglich ein qualifizierter Standard-Doctype.
Aber soloange wir keinen Link bekommen, kann es auch keine konkrete Hilfe geben.

Du kannst das so versuchen und einen Prozentwert einsetzen. Ich halte das aber nicht für sinnvoll, da es mittlerweile zu unterschiedliche Bildschirmbreiten gibt und es zu starken Verpixelungen kommen kann.

Zitat

Ein prozentuales (flexibles) Layout passt sich zwar dem Viewport an, es kann aber im Zusammenhang mit fixen Bildern zu unerwünschten Effekten kommen. Ebenso, wenn der Viewport zu breit oder schmal ist.
Aus diesem Grund bevorzuge ich mittlerweile fixe Layouts. Da ist für den Webmaster alles besser kalkulierbar.

Zum Unterschied folgende Beispiele:
http://www.ohne-css.gehts-gar.net/demo/0027.html
http://www.ohne-css.gehts-gar.net/demo/0007.html