nicht angemeldet
(oder CSS?) Listenpunkte horizontal/vertikal auf 100% verteilen
Hi Forumsleser,
irgendwie habe ich gerade ein Brett vorm Kopf, denn ich krieg's einfach nicht hin. Kundenwunsch sieht ungefähr so aus:
|--------------------------------|
| PunktA |
| PunktB |
| PunktC |
| PunktD |
| PunktE |
|---|
Bei breiterem Browserfenster soll es dann so aussehen:
|--------------------------------------------|
| PunktA |
| PunktB |
| PunktC |
| PunktD |
| PunktE |
|---|
An anderer Stelle soll mit einer Auflistung der verfügbare Platz im Fenster vertikal ausgefüllt werden, das gleiche also in grün.
Ich habe da schon mit verschachtelten div's experimentiert, aber, wie gesagt, irgendwie habe ich da wohl ein Brot vorm Kopf (Bernd lässt grüßen).
Oder geht das vielleicht gar nicht und ich habe mir umsonst den Kopf zerbrochen?
Schönen Sonntag noch!
O'Brien
--
Frank und Buster: "Heya, wir sind hier um zu helfen!"
Frank und Buster: "Heya, wir sind hier um zu helfen!"
-
Hi,
Ich habe da schon mit verschachtelten div's experimentiert, aber, wie gesagt, irgendwie habe ich da wohl ein Brot vorm Kopf (Bernd lässt grüßen).
wegen dem Brot? ;-)
Wenn den einzelnen Punkten jeweils gleiche Breiten zugewiesen werden können, wäre das recht einfach.
PunktA { width:20%; }
PunktB { width:20%; margin-left:20%; }
...Ansonsten dürfte wohl nur eine Tabelle die erforderliche Flexibilität bieten.
freundliche Grüße
Ingo-
Hi Ingo,
vom Ansatz her ist das schon prima. Ich habe allerdings in meiner Anfrage einen Fehler gemacht, denn die einzelnen Punkte sind nicht so schmal wie im oberen Beispiel, sondern (je nach Fenstergröße) können sie sich auch unterschneiden:
|------------------------|
| PunktA |
| PunktB |
| PunktC |
| PunktD |PunktE Und dann bekomme ich leider ein Problem mit den 20% Breite; die Listenpunkte werden dann umgebrochen, und das sieht nicht wirklich gut aus.
Aber ich danke dir trotzdem ganz herzlich für die Lösung (die ich jetzt sicher nicht wieder vergessen werde und für andere Fälle jederzeit parat habe :-).
Schönen Sonntag noch!
O'Brien--
Frank und Buster: "Heya, wir sind hier um zu helfen!"-
Hallo,
probier das mal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Seitentitel</title>
<style type="text/css">
div.listen { width:99%; }
div.listen div { position:relative; white-space:pre; }
</style>
</head>
<body>
<div class="listen">
<div style="left:0; margin-right:auto;">Punkt A mit viel text</div>
<div style="margin-left:20%; margin-right:auto;">Punkt B mit viel text</div>
<div style="text-align:center">Punkt C mit viel text</div>
<div style="text-align:right; right:20%">Punkt D mit viel text</div>
<div style="text-align:right; right:0;">Punkt E mit viel text</div>
</div>
</body>
</html>white-space:pre; verhindert den Umbruch, an den anderen Werten kannst du ja noch schrauben.
Wichtig für IE6: der DOCTYPE.
In IE 5/5.5 wird's wohl krachen, oder du baust "IE7" ein:
http://dean.edwards.name/IE7/Viel Spaß,
CirTap--
You can have programs written fast, well, and cheap, but you only get to pick 2 ...
"Jeder der noch keinen Fehler gemacht hat, hat noch nie etwas Neues ausprobiert." (A. Einstein)-
Hi CirTap,
probier das mal:
[...]
Viel Spaß,
vielen Dank, werde es in Kürze ausprobieren. Aber heute Abend nicht mehr |-0 zZZZ
Schönen Sonntag noch!
O'Brien--
Frank und Buster: "Heya, wir sind hier um zu helfen!"
-
-
-