Hab ne kurze Frage zu nem CSS Design.
Es handelt sich dabei um diese Seite: http://aschachinger.bplaced.net/beachunion/index.php
CSS: http://aschachinger.bplaced.net/beachunion/css/style.css
Ich möchte, dass der div „main“ (rot) nicht so unter den div „nav“ (da wo „home“ drinnen steht) „hineinrutscht“. Also so, dass er gerade bis unten durchgeht. Weiß aber nicht wirklich wie ich das machen soll…
Ich hoffe ich hab mich einigermaßen verständlich ausgedrückt 
#main ein entsprechendes margin geben
Versteh ich jetzt nicht wie das geht.
Wenn ich dem div main jetzt zb ne margin-left von 10px gebe dan rückt ja dieser einfach nur um 10px nach rechts. Oder wo soll ich hier ne margin machen?
mfg
#nav hat eine breite von 100px, also gibts du #main ein margin-left von 100px
natürlich musst du dann auch die breite von #main um 100px verringern, damit es wieder passt
nun, du solltest schon ein margin-left für #main nehmen, was
breiter als als dein #nav ist ;o)
Das sollte eigentlich funktionieren.
Eleganter kann es auch sein, die Navigation zusätzlich absolut
zu positionieren, statt ein float zu verwenden, aber das ist
teilweise Geschmacksache. Eric Meyer hatte damals mal eine
ganz dekorative Anwendung für float gefunden, wo jedes der
Bilder in #nav unterschiedlich breit ist und mit float positioniert
wurde, wenn es sich aber immer um dasselbe Bild handelt, kommt
da nichts besonderes bei heraus …
thx so funktionierd es.
Ich dachte margin würde sich dan auf das div nav beziehen…
Ich hab jetzt nochmal ne Frage:
Und zwar bin ich gerade dabei die Buttons der Navigation zu erstellen. Mit Text und einem Bild als Hintergrund, der beim hovern wechselt.
Das ganze könnt ihr euch wieder hier http://unionried.bplaced.net/index.php anschaun.
Die css: http://unionried.bplaced.net/css/style.css
Ich möchte das die Schrift des Buttons so wie hier 
links unten mit ein paar px Abstand vom Rand steht.
Doch immer wenn ich eine margin oder padding versuche, verschieben sich die gesamten buttons und nicht nur die Schrift.
Es gibt wahrscheindlich wieder so ne einfache Lösung wie vorher, aber ich komm einfach nicht drauf
mfg
schonmal versucht a.button mit padding-left ein wenig einzurücken?
dann musst du aber die breite dementsprechend auch verkleinern.
width ist ja 200px, wenn du padding-left auf 5px machst, musst du breite auf 195px runtermachen.
(Da du einen Doctype hast, wird der Internet Explorer es theoretisch auch so machen, ohne Doctype würde er es falsch umsetzen)
mfg Balmung
So funktionierd es thx.
Aber ich versteh nicht warum man die padding immer von width/height abziehen muss.
Der Text befindet sich ja im a.button drinnen…
schau mal da:
de.selfhtml.org/css/formate/box_modell.htm
vielleicht hilft das ja, um zu verstehen wie width/height, padding, border und margin zusammenhängen.
width ist nicht die Gesamtbreite des Elements, sondern nur die Breite welches für den Inhalt reserviert wird.
Wenn die Gesamtbreite von a.button nicht größer sein darf als 200px, muss padding (left+right), border (left+right), margin (left+right) und width zusammen 200px ergeben.
margin kann ja mit dem margin von benachbart angezeigten
Elementen zusammenfallen, weswegen man das nicht eindeutig
einem Element zuordnen kann, das ist mehr sowas wie ein
Mindestaußenabstand.
Wie herum die anderen Angaben zu verstehen sind, ist ja eine
reine Definitionssache, nichts, was man tiefgründig verstehen
könnte oder müßte …
Bei anderen Sprachen oder Konstruktionen kann das auch
wieder anders sein, etwa liegt bei SVG der Rahmen/gemalte
Rand (stroke) immer mittig auf dem Rand des Elementes,
das Element rect hat da auch width und height und die Breite
des Randes wird mit stroke-width angegeben, da kommt man
dann offenbar auf eine Gesamtbreite von width + stroke-width,
während die Breite innerhalb des Rahmens nur width - stroke-width
ist, da gibt es auch nichts tiefgründig zu verstehen, ist eben eine
andere Definition.
Bei der CSS-Eigenschaft outline liegt die Sache auch bereits
anders, auch da wird anders mit der Breite des outline gerechnet
als mit der Breite von border.
Also ich find die Grafik von Selfhtml ziemlich verständlich. 
Nachdem ich nun das Problem von vorher gelöst habe, hänge ich schon beim nächsten fest.
Und zwar geht es darum, dass, wenn der Inhalt des divs #main niedriger ist als der des divs #nav, so „rutscht“ der div #nav immer über die unteren Bereiche darüber.
Zur bessern Verständlichkeit: http://unionried.bplaced.net/index.php?option=spot
Ich glaube, dass es da irgendwas mit overflow auf sich hat, weiß aber nicht wo ich das anwenden soll.
Also ich möchte, dass sich die Höhe der Seite logischerweise immer nach dem höheren der beiden divs richtet.
thx im voraus 
der footer und trenner…
Sollte eigentlich ausreichen wenn du mindestens den #trenner mit clear:both; versiehst
mehr dazu
darauf das ich hier clear:both anwenden muss wär ich nie gekomme 
obwohl eigentlich im nachhinein ist es ja logisch