Bereiche dynamisch verlängern / Menüleiste

[Müller]

Hallo Leute!

Ich habe 2 kleine Fragen.

Also ich habe ein neues Layout, links menüleiste, oben auch menüleiste und in der mitte einen content bereich.

Nun soll der content bereich dynamisch lang sein, also wenn mehr text da ist, soll er halt einfach länger sein als sonst. Das klappt auch da ich einfach die left, right, top, bottom angaben gemacht habe.

Aber, mein Problem:

Das menü links hatt einen grauen hintergrund. Nun hätte ich gerne dass der menühintergrund, also die farbe ebenfalls dynamisch solange wie der content wird.

ich habe es schon mit repeat versucht, hatt aber nicht geklappt.

Wisst ihr eine gute methode wie ich das realisieren kann?

Meine Zweite Frage wäre, verschmelzende Menüs.
Da ich nicht weis wie man das genau besser formulieren soll, habe ich auch bei google nichts wirkliches gefunden.

Was ich damit meine sind die Menüs, wie das waagrechte von wikipedia:

http://de.wikipedia.org/wiki/Wikipedia:Hauptseite

Und zwar die Menüleiste oben welche mit dem weissen content bereich verschmilzt.

Kann mir jemand sagen, wie man sowas realisiert?

Ich bin auf die idee gekommen ein table zu machen, und sobald man drauf klickt die zellen zu verschmelzen. Aber wird das wirklich so gemacht?

[ChrisB]

Hi,

Nun soll der content bereich dynamisch lang sein, also wenn mehr text da ist, soll er halt einfach länger sein als sonst. Das klappt auch da ich einfach die left, right, top, bottom angaben gemacht habe.

Das klingt so, als ob du einfach alles absolut positioniert hättest?

Das solltest du eher vermeiden - es macht das Layout starr und unflexibel, und die meisten Anfänger können die Auswirkungen absoluter Positionierung auch noch gar nicht einschätzen.

Ich empfehle dir, diesen Artikel mal durch zu arbeiten: SELFHTML aktuell Weblog - Grundlagen für Spaltenlayout mit CSS

Das menü links hatt einen grauen hintergrund. Nun hätte ich gerne dass der menühintergrund, also die farbe ebenfalls dynamisch solange wie der content wird.

Wisst ihr eine gute methode wie ich das realisieren kann?

(Such-)Stichworte: Faux Columns, Equal Height Columns

http://de.wikipedia.org/wiki/Wikipedia:Hauptseite

Und zwar die Menüleiste oben welche mit dem weissen content bereich verschmilzt.

Ich bin mir nicht wirklich sicher, ob ich verstehe, was genau du meinst - einfach nur den Farbverlauf des Hintergrundes?
Das macht man, in dem man einfach einen eben solchen einbaut - entweder als Hintergrundbild, oder mit Hilfe von CSS3, Stichwort Gradients.

Ich bin auf die idee gekommen ein table zu machen,

Für eine Menüleiste - bitte nein.
Tabellen sind für die Auszeichnung tabellarischer Daten gedacht, und nicht um als Layoutwerkzeug missbraucht zu werden.
Eine Navigation ist in erster Linie eine Liste von Links, und sollte auch als solche ausgezeichnet werden.

und sobald man drauf klickt die zellen zu verschmelzen.

Was jetzt der Klick mit dem Wikipedia-Beispiel zu sehen hat, vermag ich auch nicht zu erkennen.

MfG ChrisB

[Müller]

http://de.wikipedia.org/wiki/Wikipedia:Hauptseite

Und zwar die Menüleiste oben welche mit dem weissen content bereich verschmilzt.

Ich bin mir nicht wirklich sicher, ob ich verstehe, was genau du meinst - einfach nur den Farbverlauf des Hintergrundes?
Das macht man, in dem man einfach einen eben solchen einbaut - entweder als Hintergrundbild, oder mit Hilfe von CSS3, Stichwort Gradients.

Ich bin auf die idee gekommen ein table zu machen,

Für eine Menüleiste - bitte nein.
Tabellen sind für die Auszeichnung tabellarischer Daten gedacht, und nicht um als Layoutwerkzeug missbraucht zu werden.
Eine Navigation ist in erster Linie eine Liste von Links, und sollte auch als solche ausgezeichnet werden.

und sobald man drauf klickt die zellen zu verschmelzen.

Was jetzt der Klick mit dem Wikipedia-Beispiel zu sehen hat, vermag ich auch nicht zu erkennen.

MfG ChrisB

Danke für deine schnelle Antwort.
Deine Tipps werde ich gleich mal versuchen.

Zu meinem Wikipedia-Beispiel:

Ich meine nicht den Farbverlauf. Sonder wenn Du auf "Projektseite" klickt, verschmilzt der Weisse "Button"-Hintergrund mit dem Weissen Content hintergrund.

Wenn du auf Diskussion klickst, wechselt das und halt der Diskussion-Button verschmelzt mit dem content bereich.

[ChrisB]

Hi,

bitte zitiere sinnvoll, das worauf du dich konkret beziehst - und nicht einfach alles; Danke.

Zu meinem Wikipedia-Beispiel:

Ich meine nicht den Farbverlauf. Sonder wenn Du auf "Projektseite" klickt, verschmilzt der Weisse "Button"-Hintergrund mit dem Weissen Content hintergrund.

Wenn du auf Diskussion klickst, wechselt das und halt der Diskussion-Button verschmelzt mit dem content bereich.

Antwort bleibt die gleiche: Das „verschmilzt“ einfach dadurch, dass entsprechende Hintergrundfarben/-bilder eingesetzt werden.

MfG ChrisB

[Müller]

So, jetzt habe ich mich mit den Spaltenlayouts auseinander gesetzt und bis jetzt siehts so aus:

  
body {  
	font-family: Verdana;  
	font-size: 12px;  
	color: #000000;  
}  
  
#container{  
	left: 0px;  
	top: 0px;  
	height: 100%;  
	width: 100%;  
	background-color: orange;  
}  
  
#head{  
	height: 100px;  
	background-color: red;  
	background-image: url(../img/verlauf.png);  
	  
}  
  
#leftmenue{  
	background-color: yellow;  
	width: 170px;  
	margin-top: 100px;  
	float: left;  
}  
  
#content{  
	margin-left: 170px;  
	background-color: black;  
}  

Es funktioniert auch alles was ich gerne möchte. Allerdings kann ich, da ich jetzt den container nicht mehr absolute positioniert ist, den rand entfernen.

Das heisst jetzt hatt das layout einen kleinen rand. Gibt es eine Möglichkeit diesen wegg zu machen, ohne top: 0px; / left: 0px; ?

[Matthias Apsel]

Om nah hoo pez nyeetz, Müller!

Das heisst jetzt hatt das layout einen kleinen rand. Gibt es eine Möglichkeit diesen wegg zu machen, ohne top: 0px; / left: 0px; ?

Beschäftige dich mit Innen- bzw. Außenabständen.

Matthias