nicht angemeldet
2 Fragen: Layouteinteilung und verlinkte Liste
Hallo.
Ich beschäftige mich nun seit mittelkurzer Zeit damit, ein Layout ohne Tabellen und mit CSS zu erstellen und nicht mehr mit Tabellen und Nvu.
Zuerstmal die Frage zu meinem Layout. Ich möchte so ein Layout wie bei diesem hier (http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm) auf meiner Seite haben, also mit einer Navigation und einem Bereich für den Inhalt. Allerdings hätte ich es gerne so, dass ich für die Navigation gar keine Breite festlege (sie sich also nach dem Inhalt richtet und zu lange Zeilen nicht umgebrochen werden) und sich der Inhaltsbereich dementsprechend anpasst, also von der Navigation bis zum rechten Seitenrand reicht. Das Beispiel in dem Link oben ist gut, aber wenn man da einen der Punkte in der Navigation sehr lang macht, dann wird dieser Punkt umgebrochen. Wie kann ich erreichen, dass der Text nicht umgebrochen wird, sondern sich die Navigation verlängert und der Inhaltsbereich dafür schrumpft (aber immer bis ganz an den rechten Seitenrand geht)?
Die zweite Frage ist zu einer Liste.
Ich habe so einen Quelltext für meine Navigation:
<ul>
<li><a href="linkziel">Navigationspunkt_1</a></li>
<li><a href="linkziel">Navigationspunkt_2</a></li>
<li><a href="linkziel">Navigationspunkt_3</a></li>
</ul>
Nun möchte ich erreichen, dass sich beim Hinüberfahren über einen Listenpunkt die Farbe von Listenpunkt ändert und der Hintergrund auch.
Das habe ich so gemacht: ul li:hover { color:... usw. }
Die Hintergrundfarbe ändert sich genau so, wie ich es möchte. Die Farbe der Schrift ändert sich aber nur, wenn ich direkt über den Link fahre und nicht daneben:
-------------------
l Navipunkt_1 X l
-------------------
Wenn jetzt die Maus da ist, wo ich das "X" gemacht habe, färbt sich die Schriftfarbe von Navipunkt_1 nicht. Was muss ich machen, damit sie sich verfärbt?
Und das letzte: Ich möchte auch, dass man nicht direkt auf den Navigationspunkt klicken muss sondern wie oben auch etwas neben die Schrift, um auf die neue Seite zu kommen. Wie kann ich das machen? Ist CSS denn das richtige für sowas?
Bitte helft mir!
Freundliche Grüße.
-
Bin mir grad nicht sicher, ob li ein block oder inline-Element ist, aber ich nehme an, letzteres. Dann müsstest du folgendermaßen formatieren:
<a href="linkziel"><li>Navigationspunkt_1</li></a>
-
Bin mir grad nicht sicher, ob li ein block oder inline-Element ist, aber ich nehme an, letzteres. Dann müsstest du folgendermaßen formatieren:
<a href="linkziel"><li>Navigationspunkt_1</li></a>
Nein <li> ist ein Blockelement. Daher ist diese Schachtelung nicht zulässig. <ul> und <ol> dürfen im übrigen eh nur <li>-Element enthalten.
Der Trick ist einfach, den <a>-Elementen innerhalb eines <li> im CSS display:block zu geben. Dann bekommt man schön Kästen ;-)
Gruß
Stareagle
-
-
Hi,
Wie kann ich erreichen, dass der Text nicht umgebrochen wird, sondern sich die Navigation verlängert
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
MfG ChrisB
-
Hi,
Wie kann ich erreichen, dass der Text nicht umgebrochen wird, sondern sich die Navigation verlängert
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space
Wenn ich "white-space: nowrap;" verwende, dann dehnt sich aber das <div> ,in dem die Navigation ist, nicht mit aus.
Ich glaube ich werde doch wieder Tabellen dafür benutzen.
-
Hi,
Wenn ich "white-space: nowrap;" verwende, dann dehnt sich aber das <div> ,in dem die Navigation ist, nicht mit aus.
Natuerlich nicht, wenn du dem eine feste Breite zuweist.
Wozu ueberhaupt noch ein Div drumherum? Formatiere doch direkt die Liste.
MfG ChrisB
-
Hi,
Wenn ich "white-space: nowrap;" verwende, dann dehnt sich aber das <div> ,in dem die Navigation ist, nicht mit aus.
Natuerlich nicht, wenn du dem eine feste Breite zuweist.
Eben und das tue ich nicht. Die Navigation soll sich einfach dem Inhalt anpassen (d.h. ich gebe gar keine Breite an). Und der Inhaltsteil (das <div> rechts daneben) soll dann den restlichen Platz der Seite bis zum Rand einnehmen.
Wenn ich dafür eine Tabelle nehmen, die 100% breit ist, dann nimmt die zweite Zelle auch den Platz bis ganz rechts ein und die erste Zelle mit der Navigation ist so klein wie nötig.Wozu ueberhaupt noch ein Div drumherum? Formatiere doch direkt die Liste.
In dem <div> befinden sich aber noch 2 weitere Listen und Überschriften.
-
-
-