nicht angemeldet
Wechsel vom table-Design zu Layern macht mir Probleme
Hi!
Wollte mal "modernes" Design probieren und ein Problem, welches ich sonst mit vielen verschachtelten Tabellen gelöst hätte mit divs lösen:
---------------------------------------------------------
| Register | Login | Logout Erase |
---------------------------------------------------------
So in etwa soll das aussehen, also einmal ein Layer um den Rahmen zu ziehen, darin ein linksbündiges Layer für die linken Links und ein rechtsbündiges Layer für den rechten Lins.
Unter IE5 sieht es manierlich aus, Opera haut die inneren Layer übereinander und Netscape6 setzt das rechtsbündige Layer außerhalb des umschließenden Layers.
<div style="width:100%;padding-bottom:1px;">
<div style="display:inline> Register | Logout | Login</div>
<div style="display:inline;position:absolute;right:15px;>Erase my data completely!</div>
</div>
Wie mache ich es richtig?
Danke :).
Stefan
-
Nachtrag: class- und id-Angaben, die z.B. einen Rahmen um den äußeren Layer ziehen, habe ich der Übersicht halber weggelassen. Sie enthalten aber nur boder- und Textformat-Angaben.
-
Hi!
dito.
Wie mache ich es richtig?
so:
<div style="text-align:right;"><div style="float:left;text-align:left;"> Register | Logout | Login</div>Erase my data completely!</div>Danke :).
Bitte.
Stefan
Carsten Sebastian Schulze
-
hi
<div style="text-align:right;"><div style="float:left;text-align:left;"> Register | Logout | Login</div>Erase my data completely!</div>
Langweiler ;)
Grüße aus Bleckede
Kai
-
Morgen :).
Danke nochmal.
<div style="text-align:right;"><div style="float:left;text-align:left;"> Register | Logout | Login</div>Erase my data completely!</div>
Langweiler ;)
Diese Lösung funktioniert leider mit dem IE5.01 (noch) nicht, ich denke, aber wenigstens den sollte man noch mit in seine Kompatibiltätsüberlegungen einbeziehen.
Aber Opera und NS6 sind schonmal überzeugt :).
Stefan
-
So geht's:
<div class="shadowDown">
<div id="smalltxt" style="float:left;text-align:left;"> Register | Logout | Login</div>
<div id="verysmalltxt" style="text-align:right;">Erase my data completely!</div>
</div>Aber: Wenn, wie oben, IDs mit Textformatierungen eingebaut werden und die rechte Schrift kleiner ist, dann wird die Größe des äußeren Layers nur an der kleineren Schrift ausgerichtet, d.h. die größere ragt aus dem Rahmen des äußeren Layers heraus.
Sicher gibt's da auch ein Woraround, aber irgendwie nicht so zufriedenstellend.
Stefan
-
-
-
-
hi
<div style="width:100%;padding-bottom:1px;position:absolute;">
Register | Logout | Login
<div style="position:absolute;right:15px;top:0px;width:30%;text-align:right;">
Erase my data completely!
</div>
</div>so geht's..... position:absolute bezieht seine position immer in bezug auf das übergeordnete absolut positionierte Element. Solange keinen genaue Position da ist, bleibt's, wo es ist.
Die Aktion mit width und text-align ist für einen Opera-Bug.Grüße aus Bleckede
Kai
-
hi,
versuchs mal mit InlineTags (span):<div style="width:100%;padding-bottom:1px;top:10px;position:absolute;">
<span style="position:absolute;left:0px;top:0px;width:25%;text-align:right;"> Register</span>|<span style="position:absolute;left:30%;top:0px;width:25%;text-align:right;">Logout</span>|<Span style="position:absolute;left:60%;top:0px;width:15%;text-align:right;"> Login</span>
<span style="position:absolute;right:15px;top:0px;width:30%;text-align:right;">
Erase my data completely!
</span>
</div>-
Hi!
<div style="width:100%;padding-bottom:1px;top:10px;position:absolute;">
<span style="position:absolute;left:0px;top:0px;width:25%;text-align:right;"> Register</span>|<span style="position:absolute;left:30%;top:0px;width:25%;text-align:right;">Logout</span>|<Span style="position:absolute;left:60%;top:0px;width:15%;text-align:right;"> Login</span>
<span style="position:absolute;right:15px;top:0px;width:30%;text-align:right;">
Erase my data completely!
</span>
</div>Haben wir jetzt den Wettbewerb eröffnet, wer die längste und umständlichste Lösung findet? Also dann werde ich gleich mal losmachen, 1KB für die simple Sache schaffen wir auch noch. Zum Vergleich, die Variante oben hat schon 465 KB, meine hatte 140 KB.
Carsten
-
Hoi!
Zum Vergleich, die Variante oben hat schon 465 KB, meine hatte 140 KB.
KiloByte? Du meinst wohl eher nur Byte, oder? :-)
Gruesse
Daniel
-
-
Hallo!
<span style="[...]text-align:right;">
<!ELEMENT span %Inline;>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
5.4.6 'text-align'
Applies to: block-level elements
Das ist also keine sehr gute Idee.
http://www.w3.org/TR/REC-CSS1#text-align
emu
[...]
-
-