Seite
CSS
Ich habe da ein Problem mit meiner neuen Seite; wie man sieht (wenn man die Schrift größer macht) gibts da einen "overflow", der über die div#container und div#container2 hinausgeht;
ich stell mir das ganze so vor:
oben header, dann menu und content nebeneinander, darunter footer (der en abschluss des menus bildet)
könnt ihr mir vielleicht helfen?
wenn was unklar ist, bitte sagen
BTW, wie taugts design (?)

*hust* So sieht das aus, wenn man seine Schriftart umgestellt hat:

Grr... Wo ist das Bild geblieben..? Siehe hier:
img243.imageshack.us/img243/1508/picture13xb.png

Neum

Neum
Super Beitrag!

nun zum angeblichen Problem.. Ich versteh nicht ganz genau was du meinst. sieht doch ganz net aus so oder? schrift grösser machen? Per safari und apfel + oder wie ist das gemeint? irgend wann ist halt kein Platz für den Inhalt...

Simon Reuteler
Mit dem eigentlichen Problem nichts, aber es deckt ein anderes auf, naemlich, das er kein Font fuer den Text festgelegt hat. Ich hab Monaco 10pt hauptsaechlich fuer Plain Text Files in Safari, aber auf Websites muss das nicht unbedingt sein.

Neum

so sieht das bei mir aus;
das ganze soll folgendermaßen sein: menu und content sollen gleichgroß und nebeneinander sein, im hintergrund sollen die container (hintergründe mitwachsen) und ganz unten soll der footer ran

hier das bild (miese qualität, soll aber nur zeigen was ich meine)
ps: die schriftart ist noch nicht festgelegt, da ich mich erst ims allgemeine layout und gerüst kümmern wollte...

BILD

Pinguin
Ehrlich gesagt, manchmal bin ich schon kurz davor das wieder "wie früher" mit Tabellen zu machen. Mit CSS wachsen mir graue Haare

Hängt auch davon ab, wie man es haben will. Ich hätte halt gerne eine Seitenleiste, die nicht fest in der Breite ist, sondern sich an den Inhalt anpaßt. Wenn der Seitenbereich fest sein darf, dann gehts so: einen Container über die gesamte Breite, da rein zwei Container (Seitenleiste, Inhalt) und beim Inhalt die Breite der Seitenleiste als Margin abziehen, die Seitenleiste mit position:absolute an den Rand pinnen, fertig. Gibt dann nur einen unschönen Effekt, wenn der Inhalt kürzer als die Seitenleiste ist, weil die dann unten raussteht.

gibts da nicht sowas wie einen minimal /maximalwert?
"wächst" das menü denn dann mit?
ich will auch wieder tabellen *duckundweg*
aber wie heißt es : Es lebe der Fortschritt
fragen über fragen

Jo, gibt min-width und max-width. max-width funktioniert bei mir auf einem div, min-width dagegen nicht. Keine Ahnung warum.

Das nützt aber nix für eine in der Breite wachsende/schrumpfende Seitenleiste, denn deren Breite muß du (zumindest in der von mir skizzierten Lösung) im CSS als festen Wert angeben (margin-left/-right).

Ach, da fällt mir grad ein, es geht auch anders, also nur mit einem div und eben dem margin. Ich glaube ich habe da oben etwas durcheinander gebracht. Aber ich habe schon so viele Lösungen probiert und war mit keiner zufrieden..

soll ja in die länge und nciht in die breite wachsen..
und irgendwie klappt das nicht...
rantanplan, wenn du aim hast, kannst du mich mal anschreiben, oder irgendwer anders, der davon nen durchblick hat?

Hatte ich ja geschrieben: der Grund warum ich aufgegeben habe ist, daß ich die Seitenleiste in der Breite variabel haben will. Wenn die fest sein darf, dann findest du aber genügend Beispiele im Web, z.B. hier:

und

Pinguin: Also, ich würde neu anfangen. Das ganze ist schlecht aufgebaut. Es ist unmöglich, dir eine vollständige Analyse zu geben. Nur einige Beispiele:

#container hat position: relative aber leine weiter angaben zu dieser Position – warum? Das wiederholt sich noch mehrmals. Ich würde das Ganze gar nicht mit position machen, sondern mit float und dann denn Hauptcontainer erst zuunterst mit clear schliessen. Dann kommen die container mit ihren Inhalten auch mit.

Oder diese Angabe:
#container2 {width: 700px; position: relative; left: 50px; right: 50px;}

Warum? Zudem geht das doch gar nicht auf. Wie sollen die Angaben eingehalten werden?

Oder:

#content {z-index: 5; position: relative; float: left; margin-left: 200px; margin-top: -500px;}

Z-index für was? Position und float zusammen, warum? Margin-top -500px, für was?

Wie gesagt, ich will dir ja nicht den Mut nehmen, aber beginne von vorne, Schritt für Schritt, und mit weniger containern. Warum den container #text, darin aber keine Absätze?

Und entschuldige, falls ich mich mit all dem was ich da schreibe irren sollte!

Pinguin: Hoffentlich schaffe ich's, diesen zweiten Beitrag ohne weitere, peinliche Fehler (wie sie oben stehen) zu schreiben.

Hier ein Vorschlag, wie ich deine Seite umsetzen würde:

Ein Container in welchem alles andere drinnen ist. Diesem Container teilst du mit CSS ein Hintergrundbild zu, welches 760 Pixel breit (800 Pixel sind zu breit) und z. B. 10 Pixel hoch ist, links und rechts die Schatten abbildet und zwischendrin die Hintergrundfarbe Dunkelbraun hat. Dem Container gibst du entweder ein margin-left, eine Zentrierung oder sonst eine seitliche Zuordnung. Ebenso die Breite 760 Pixel aber keine Höhe.

In diesen Hauptcontainer kommt nun eine h1-Überschrift. Diesem Blockelement teilst du mit CSS die Foto mit der Strasse als Hintergrundbild zu, gibst dem Block eine um die beiden Schatten reduzierte Breite (die Bildbreite sollte dieser Breite entsprechen) und die dem Bild entsprechende Höhe. Zudem ein margin-left für die Richtige Position (neben dem Schatten). Den Text "johannes' blog…" formatierst du nach deinem Gutdünken, Position mithilfe von padding-top und padding-left.

Nun folgen zwei Container, beide mit float: left; und der richtig errechneten Breite. Der erste Container ist für die Navigationsliste (Achtung mit dem margin-left der Schattenbreite und IE, benötigt ziemlich sicher einen * html Hack), der Zweite für den Textinhalt.

Dem folgt ein weiterer Container für das Bild am Fusse der Seiten, richtige Breite und die Höhe des Bildes definieren, per CSS das Bild als Hintergrund und dazu noch clear: left. Das Bild muss so vorbereitet sein, dass es die Schatten des vertikalen Hintergrundbildes des Hauptcontainers überdecken kann. Breite 760 Pixel. Hauptcontainer schliessen. Im Ganzen sind's vier Container.

In den Navigationscontainer (oben erwähnt) kommt nun die Liste so wie du's gemacht hast.

In den Textcontainer mit der Hintergrundfarbe Hellbraun kommt zuerst eine h2-Überschrift "…the webs finest trash" mit Hintergrundfarbe Mittelbraun und den entsprechenden Formatierungen (keine Höhe, Abstände mit padding-top und padding-bottom).

Danach je nach Belieben Absätze, welche die Höhe des ganzen Gebildes fliessend bestimmen

Wenn mir kein Fehler unterlaufen ist, dann sollte diese Art des Aufbaues funktionieren. Die Container sollten mit den Texten wachsen. Kein Text sollte verdeckt werden oder überlaufen. Selbstverständlich braucht es z. T. noch Randabstände mit padding.

wieso sind 800 pixel zu breit?
hier ist mein hintergrundbild:

desweiteren: wenn ich eine hintergrundbild habe, kann ich keine farbe mehr einsetzen, dafür brauch ich doch dann einen weiteren container, oder?
bei weiteren fragen melde ich mich wieder

Bin auch gerade wieder am CSS schreiben.
Könnte es sein das deine Webseite auch so aussehen sollte wie die ich gerade bastle?

Pinguin: Als Hintergrundbild machst du dir einen dünnen Balken, der die Hintergrundfarbe hat und linls und rechts deine Schatten. Diesen Balken repetierst du dann in der Y-Richtung. Und wenn du willst, kannst du noch in der Backgroundangabe vor der url eine Farbe angeben, ist aber nicht nötig.

Zu den 800 Pixeln: Diese Breite wählst du ja, weil du Bildschirme mit 800 Pixeln berücksichtigen willst. Auf diesen Bildschirmen sind dann wegen Fensterrand und Scrollbalken nur etwa 760 Pixel nutzbar.

Übrigens, meines war nur ein Vorschlag um dir bei deiner Anfangsfrage weiter zu helfen. Du kannst selbstverständlich so weiter machen wie bis jetzt …

Claude
wie geb ich dem Container eine zentrierung?
hab da bischer nur textalign gefunden...

tricky, ja sowas in der richtung...
claude
deine methode funktioniert nicht, da das ja beides floats, also unabhängig von der umgebung sind, und sich deshalb auch nicht neide gleich nach unten hin verbreitern...

Pinguin: Warum sollte das nicht funktionieren, habe schon X Seiten so gemacht …

Wenn der Navigationscontainer nicht nach ganz unten kommt, dann ist das ja egal, du hast ja die Hintergrundfarbe über das Hintergrundbild des Hauptcontainers.

Zentrieren, margin: 0 auto 0;

hmmm... ich habs mir ja nicht alles durchgelesen, aber so wie ich das gemacht habe geht das auch...
D.h.: Dass ich einen container genommen habe und drinnen einfach immer
div#id {
float:left
}
gesagt habe und da ich die pixel immer so eingestellt habe das es zusammen genau in die breite des containers passt reiht es sich dann in die nächste reihe oder so...

ich glaube ihr sehts euch besser an...

hi leute, ich hab da jetzt was verändert, bzw, meine pläne anders gemacht, so wie ich es ursprünglich wollte;
jetzt gehen leider die :hovers des menus nicht mehr...
weiß einer abhilfe?

hab das jetzt so geschafft, wie ich es zu anfangs (vor siesem thread) wollte, nur das menu hat de seite gewechselt.
ich danke allen hier für die tatkräftige unterstützung, ihr könnt ja von zeit zu zeit mal vorbeischauen!

Lieber Pinguin, es geht mich ja nichts an, was du machst. Aber, da du schon einmal gefragt hattest, so erlaube ich mir, weiterhin meinen Kommentar zu geben:

Die gegenwärtige Version ist ja nicht besser und ist sicher nicht das, was ich dir vorgeschlagen hatte (dies nur zur Klärung). Dass nun Überschriften und Links im gleichen Container sind, erstaunt mich.

Und zu deiner CSS-Datei: html,body? Hm … Und dass margin: 0 auto 0; dort drinnen ist, gibt auch keinen Sinn. Times New Roman müsste zwischen Hochkommas stehen (dies, sobald der Schriftname aus mehr als einem Wort besteht), die Höhenangabe 100% ist unsinnig.

Ja, und so geht's weiter … Wenn du noch unsicher bist mit HTML und CSS – warum hältst du dich denn nicht an eine Vorgabe?

Entschuldigung, aber ich sag's dir ehrlich, das ist eine Verschlimmbesserung was du da gemacht hast, z. B. deine Überschrift läuft ja über den Schatten raus usw.

Pinguin: Das, was du eigentlich wolltest, das mit dem unten abgerundeten Rahmen, fand ich ganz hübsch. Das wäre mit meinem Vorschlag problemlos umzusetzen. Und mit einem margin-bottom könntest du gegen unten noch Platz schaffen. Übrigens, das margin: 0 auto 0; gehört, wenn schon, falls du den Container zentrieren möchtest, zu diesem, nicht zu body.

Ich habe beim footer mal folgendes angegeben:

#footer {
clear: both;
background: url(images/footer.jpg) no-repeat;
background-color: #134567;
width: 800px;
height: 50px;
position: relative;
bottom: 0px;
left: 0px;
}

Die Farbe ist nur dafür, daß man den Bereich erkennt Wichtig ist das clear.

Die Position des Footers im HTML muß auch geeignet gewählt werden. Eine Möglichkeit ist so:

</div> <!-- text

</div> <!-- content
<div id="footer" />
</div> <!-- container2

</div> <!-- container1