nicht angemeldet
dynamische horizontale Navigationsleiste
0 0 0 0 
Gernot Back
0 Gernot Back
0
0
dynamische horizontale Navigationsleiste
StruppiHallo!
Ich suche nun schon so lange eine Lösung für mein Problem und bin doch nicht fündig geworden.
Ich habe eine horizontale Box mit 5 kleineren Boxen, die als Buttons definiert sind. Die große Box, in der die kleineren drin sind, ist bei width auf 100% gesetzt.
Nun will ich das so haben, dass sich in diesen 100% die 5 kleineren Boxen den Platz aufteilen, also alle die gleiche Breite haben.
Diese sollte wenn möglich errechnet werden, damit ich nicht den ganzen Quellcode verändern muss, sondern nur die Anzahl der kleineren Boxen einzugeben brauch.
Ist so etwas, wie ich mir das vorstelle, überhaupt mit JavaScript zu verwirklichen?
Es sollte, wenn möglich, auch im FF und IE funktionieren.
Ich hoffe, Ihr könnt mir helfen!!!
-
Moin,
nur mal so eben hingeworfen:Du könntest ein table mit 5 td's nehmen. Diese td's teilen sich automatisch auf die Tabelle auf. In diese td's kannst du dan wieder deine "Boxen" packen (evtl. mit width=100%).
Paul
-
Du könntest ein table mit 5 td's nehmen. Diese td's teilen sich automatisch auf die Tabelle auf. In diese td's kannst du dan wieder deine "Boxen" packen (evtl. mit width=100%).
Mein Problem ist aber, dass ich genau das nicht machen darf (aus Auftragstechnischen Gründen). Es sollte wenn möglich ohne Tabellen funktionieren.
-
Du könntest ein table mit 5 td's nehmen. Diese td's teilen sich automatisch auf die Tabelle auf. In diese td's kannst du dan wieder deine "Boxen" packen (evtl. mit width=100%).
Mein Problem ist aber, dass ich genau das nicht machen darf (aus Auftragstechnischen Gründen). Es sollte wenn möglich ohne Tabellen funktionieren.
Du könntest jeder Box 20% Breite geben.
html und body bekommen dann 100% Breite.
Grüße
gaby-
Hallo gaby,
Du könntest jeder Box 20% Breite geben.
html und body bekommen dann 100% Breite.
und margin:0 sowie padding:0
Dabei kann es aber, wenn der in Pixeln zur Verfügung stehende Platz nicht glatt durch 5 teilbar ist, im IE zu Aufrundungsfehlern kommen, sodass der letzte BUTTON in die nächste Zeile umbricht.
Mein Lösungsvorschlag ist daher der folgende, bei dem du dir aussuchen kannst, ob du server- oder clientseitig den gedrückten Submit-BUTTON ermittelst und wie du dann entsprechend reagierst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Fünf Buttons</title> <meta name="author" content="Gernot Back"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <style type="text/css"> [code lang=css] html, body, form, #MainNav { width:100%; margin:0; padding:0; } #MainNav button { width:20%; padding:0; margin:0; }</style>
<!--[if IE]>
<style type="text/css">#MainNav button:first-child { margin-left:-2px; }</style>
<![endif]-->
</head>
<body>
<form method="get" action="#" >
<div id="MainNav">
<button type="submit" name="bt1" value="clicked">1. Punkt</button><!--
--><button type="submit" name="bt2" value="clicked">2. Punkt</button><!--
--><button type="submit" name="bt3" value="clicked">3. Punkt</button><!--
--><button type="submit" name="bt4" value="clicked">4. Punkt</button><!--
--><button type="submit" name="bt5" value="clicked">5. Punkt</button>
</div>
</form>
</body>
</html>
[/code]
Du kannst also auch ohne Tabelle und ohne Javascript auskommen.Gruß Gernot
--
super me-
Hallo nochmal,
> <!--[if IE]> > <style type="text/css">[code lang=css] > #MainNav button:first-child { > margin-left:-2px; > }</style>[/code]
Habe gerade noch einmal im IE6 getestet. Da der die Pseudoklasse :first-child anders als IE7 nicht versteht, sollte man dem ersten LI-Element wohl doch besser explizit eine richtige Klasse .firstChild verpassen, die dann dasselbe tut.
Auch mit dem serverseitigen Auslesen, welcher Button denn nun eigentlich gedrückt wurde, ist es Essig, denn der IE6 übermittelt die Wertepaare _aller_ Submit-BUTTON-Elemente, auch die der Nicht-Gedrückten. Mit Input-Elementen vom Typ "Image" tut er das nicht, aber die lassen sich ja nicht über CSS in der Weite gestalten, ohne dass sie pixelig verzerrt werden!
Da bleibt für den IE6 dann wohl doch nur Javascript oder die Tabelle!
Gruß Gernot
--
super me-
Kann ich den Quellcode auch so umwandeln, dass es wieder eine Liste, statt Buttons wird???
Oder funktioniert dann die Aufteilung der Breite nicht mehr???Gruß Dina
-
Kann ich den Quellcode auch so umwandeln, dass es wieder eine Liste, statt Buttons wird???
Was heißt wieder eine Liste? War es mal eine?
Struppi.
-
Kann ich den Quellcode auch so umwandeln, dass es wieder eine Liste, statt Buttons wird???
Was heißt wieder eine Liste? War es mal eine?
Ja, aber es hat sich schon erledigt. Das Problem hab ich gelöst bekommen. Hab um den Button einfach eine weiße Linie gesetzt und schon sah der Button aus wie eine Linkliste.
Trotzdem herzlichen Dank an alle!!!
-
-
-
Da bleibt für den IE6 dann wohl doch nur Javascript oder die Tabelle!
oder:
#MainNav { white-space:nowrap; }Struppi.
-
-
Wow danke, genau nach so was hab ich gesucht! Hast was gut bei mir ;-))
-
-
-
Mahlzeit,
Mein Problem ist aber, dass ich genau das nicht machen darf (aus Auftragstechnischen Gründen). Es sollte wenn möglich ohne Tabellen funktionieren.
Löblich. Genau dafür ist ja auch http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal@title=CSS da.
Was ich mich allerdings frage: wieso hast Du als Themenbereich "JAVASCRIPT" gewählt? :-)
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Was ich mich allerdings frage: wieso hast Du als Themenbereich "JAVASCRIPT" gewählt? :-)
Das hab ich gemacht, da mein Chef sagte, dass JavaScript in der Lage sein soll, diese Breiten der Boxen im Bezug auf die Größe des Bildschirms zu berechnen, nur habe ich bisher noch nicht herausgefunden, wie :-(
-
-
-