nicht angemeldet
div rechts ausrichten, Opera straeubt sich
Hallo Forum,
ich habe hier Text, den ich am rechten Rand ausrichten will.
Mit div umschlossen und per CSS position:absolute; top:0px; right:10px; funktioniert das auch gut.
Nur Opera ist das egal, der klatscht ihn links hin. Gut, es funktioniert, wenn ich eine width angebe. Bloß ist das dann wieder eine recht fixe Sache die nicht nur bei geändertem Inhalt, sondern auch bei anderen Schriftgrößen schon nicht mehr stimmt. Der Spielraum ist ja nicht groß, ein paar Pixel zu breit und schon wandert der Bereich wieder zu weit nach links.
Ist das die einzige Möglichkeit?
Jürgen
-
Hallo Forum,
ich habe hier Text, den ich am rechten Rand ausrichten will.
Mit div umschlossen und per CSS position:absolute; top:0px; right:10px; funktioniert das auch gut.right gibts doch gar nicht...
veruch es mal mit <div align="right">tabelle</div>
und die tabelle dann wie gewünscht formatieren...
alex
-
Hallo Forum,
ich habe hier Text, den ich am rechten Rand ausrichten will.
Mit div umschlossen und per CSS position:absolute; top:0px; right:10px; funktioniert das auch gut.right gibts doch gar nicht...
veruch es mal mit <div align="right">tabelle</div>
naja oder text-align:right; in Css
aber wenn du den ganzen DIv unbedingt nach rechts haben willst musst du
left:Xpx oder left:X% machen - logo?und die tabelle dann wie gewünscht formatieren...
alex
-
Hi TOM,
naja oder text-align:right; in Css
aber wenn du den ganzen DIv unbedingt nach rechts haben willst musst du
left:Xpx oder left:X% machen - logo?Was noch übler ist als width und right weil es keine Rechtsausrichtung, sondern eine Linksausrichtung mit fixem Rand links ist.
Jürgen
-
Hi TOM,
naja oder text-align:right; in Css
aber wenn du den ganzen DIv unbedingt nach rechts haben willst musst du
left:Xpx oder left:X% machen - logo?Was noch übler ist als width und right weil es keine Rechtsausrichtung, sondern eine Linksausrichtung mit fixem Rand links ist.
logisch aber du kansnt doch die Breite einfach minus machen -> geht nach links
Jürgen
-
-
-
Hi
right gibts doch gar nicht...
Klar gibts right... nur kennts der Opera ned...
Gruss Christoph
-
Hi,
Klar gibts right... nur kennts der Opera ned...
du hast das Ausgangsposting gelesen? Wenn ja, wüsstest du, dass Opera sehrwohl right: versteht, lediglich width: wird zusätzlich benötigt.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
-
-
Hi
Musst Du irgendwie anders lösen. Mit Tabellen oder was weis ich was. Opera kann CSS nur halbpatzig...
Oder Du verzichtest halt drauf dass es unter Opera läuft... fallen ahlt 2% User weg. Ab Opera 7 koennen dies dann auch sehen ^^Christoph
-
Hi
Musst Du irgendwie anders lösen. Mit Tabellen oder was weis ich was. Opera kann CSS nur halbpatzig...
Oder Du verzichtest halt drauf dass es unter Opera läuft... fallen ahlt 2% User weg. Ab Opera 7 koennen dies dann auch sehen ^^Hey du Mozilla-Junkey gggg
ich will die Page auch sehen :-P
MfG TOM
-
Hi
Hey du Mozilla-Junkey gggg
Ich surf ned mit Mozilla ^^
Gruss Christoph
-
-
-
Hi Jürgen,
position:absolute; top:0px; right:10px;
Nur Opera ist das egal, der klatscht ihn links hin. Gut, es funktioniert, wenn ich eine width angebe. Bloß ist das dann wieder eine recht fixe Sache die nicht nur bei geändertem Inhalt, sondern auch bei anderen Schriftgrößen schon nicht mehr stimmt. Der Spielraum ist ja nicht groß, ein paar Pixel zu breit und schon wandert der Bereich wieder zu weit nach links.
Ist das die einzige Möglichkeit?
text-align:right richtet alles innerhalb des DIVs rechtsbündig aus, egal, wie groß es ist. http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#text_align
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi Orlando
text-align:right richtet alles innerhalb des DIVs rechtsbündig aus, egal, wie groß es ist. http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#text_align
Er will das DIV ausrichten.. nicht den inhalt des DIV...
Was nutzt ihm text-align wenn er z.B ein 50 pixel breites div hat mit Rahmen e.t.c und das 10 pixel vom rechten Fensterrand weg haben will...
Genau... nix..Gruss Christoph
-
Hi Christoph,
text-align:right richtet alles innerhalb des DIVs rechtsbündig aus, egal, wie groß es ist.
Er will das DIV ausrichten.. nicht den inhalt des DIV...
falsch. Er will die Breite nicht ändern müssen, falls er ein DIV an den rechten Rand stellt und sich die Breite des Inhalts ändert. Daraus kann man schließen, dass er zusätzlich noch text-align:right benötigt. Damit wird der Rand auf der rechten Seite verhindert.
Dass dieses Vorhaben so ohnehin nicht funktioniert, weil ich jederzeit skalieren kann und dies auch mache, sei nur nebenbei erwähnt.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
-
Tag Orlando,
Ist das die einzige Möglichkeit?
text-align:right richtet alles innerhalb des DIVs rechtsbündig aus, egal, wie groß es ist. http://selfhtml.teamone.de/css/eigenschaften/ausrichtung.htm#text_align
Äh, naja. Da hatte ich in meiner Mail wohl zu sehr simplifiziert.
Der Inhalt des DIV besteht aus mehreren <a></a>, je ein Wort die dann per float:left auf eine Zeile gebracht werden. Das muß es (zumindest nach meinem aktuellen Kentnissstand), weil jeder Link eine feste Breite haben soll (und width wirkt sich nur aus wenn float gesetzt ist).Und wegen dieser Tatsache funktioniert leider text-align nicht.
Kurz ausgeschnitten
<style type="text/css">
.menu {text-align:right;}
.menu a {border:1px solid red; width:90px; float:left; text-align:center;}
</style>
<title>navtest2</title>
</head><body>
<div class="menu">
<a href="eins.html">eins</a>
<a href="zwei.html">zwei</a>
<a href="drei.html">drei</a>
</div>Nimmt man den float raus, stehen die rechts, aber nicht mehr mit der width.
Gruß,
Jürgen-
Hi Jürgen,
Der Inhalt des DIV besteht aus mehreren <a></a>, je ein Wort die dann per float:left auf eine Zeile gebracht werden. Das muß es (zumindest nach meinem aktuellen Kentnissstand), weil jeder Link eine feste Breite haben soll (und width wirkt sich nur aus wenn float gesetzt ist).
das ist korrekt.
Und wegen dieser Tatsache funktioniert leider text-align nicht.
Was hältst du davon?
<style type="text/css">
<!--.menu { text-align:right; margin-right:10px;}
.menu a { border:1px solid red; width:90px; float:right; text-align:center; }-->
</style>Du kannst natürlich zusätzlich noch positionieren, eventuell ist es sogar besser, hier nur mit positon:relative zu verschieben.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi Orlando,
Was hältst du davon?
<style type="text/css">
<!--
.menu { text-align:right; margin-right:10px;}
.menu a { border:1px solid red; width:90px; float:right; text-align:center; }
-->
</style>Auf die Idee bin ich auch schon gekommen. Nur ist halt die Reihenfolge der Links jetzt genau verkehrt herum.
Und wenn ich die andersrum in der Source stehen habe, stimmt's in anderen Styles (beispielsweise untereinander) wieder nicht.Du kannst natürlich zusätzlich noch positionieren, eventuell ist es sogar besser, hier nur mit positon:relative zu verschieben.
Äh, was wohin zu schieben? Gibt's damit nicht wieder das anfängliche Opera-Problem?
Gruß,
Jürgen-
Hi Jürgen,
.menu { text-align:right; margin-right:10px;}
.menu a { border:1px solid red; width:90px; float:right; text-align:center; }Auf die Idee bin ich auch schon gekommen. Nur ist halt die Reihenfolge der Links jetzt genau verkehrt herum.
Du kannst natürlich auch float:left verwenden, ich hatte nur vergessen, float:right wieder herauszunehmen. Kann man sich die Seite mal online ansehen? So ist das Problem nur schwer nachzuvollziehen.
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hi Orlando,
Auf die Idee bin ich auch schon gekommen. Nur ist halt die Reihenfolge der Links jetzt genau verkehrt herum.
Du kannst natürlich auch float:left verwenden, ich hatte nur vergessen, float:right wieder herauszunehmen. Kann man sich die Seite mal online ansehen? So ist das Problem nur schwer nachzuvollziehen.
Momentan nicht, aber heut' Nacht kann ich sie noch hochladen.
Wäre super, wenn Du Dir die mal ansehen könntest.
Ich schreib' nochmal, wenn es soweit ist.Gruß,
Jürgen -
Hallo nochmal,
Kann man sich die Seite mal online ansehen? So ist das Problem nur schwer nachzuvollziehen.
Jep, ist jetzt online unter angegebener URL.
Ciao,
Jürgen-
rehi nochmal,
so, jetzt habe ich in deinem Quelltext gewütet, ziemlich sogar, aber das gewünschte Layout hinbekommen. Einen Schönheitswettbewerb gewinnst du damit garantiert nicht, aber es funktioniert...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Testseite</title><style type="text/css">
<!--
body { margin:0; padding:0; }
#menulinks { color:#fff; background-color:#000; width:100%; text-align:right; font-family:sans-serif; font-size:9pt; }
#menulinks a { color:#fff; background-color:#000; text-decoration:none; border-left:1px solid #fff; width:90px; text-align:center; float:left; line-height:1.5em; }
#menulinks a:visited { color:#fff; text-decoration:none; }
#menulinks a:hover { color:#fff; text-decoration:none; font-weight:bold; }
#menulinks a:active { color:#fff; text-decoration:none; }
.menulinks { float:right; width: 455px; }
.bg {display:none;} /* M$IE stellt den Hintergrund ohnehin schwarz dar */
div[class="bg"] { position:absolute: top:0; left:0; width:100%; color:#fff; background-color:#000; display:block; } /* Opera und Mozilla benötigen den Hintergrund extra */
h1 { color:#000; background-color:#ddd; margin:0; clear:right; font:normal 22pt serif; }
#menubottom { color:#fff; background-color:#000; width:100%; }
#text {position:absolute; top:70px; padding:10px;}
-->
</style></head>
<body>
<div id="menulinks">
<span class="menulinks">
<a href="eins.html">eins</a>
<a href="zwei.html">zwei</a>
<a href="drei.html">drei</a>
<a href="vier.html">vier</a>
<a href="fuenf.html">fünf</a>
</span>
</div><div class="bg"> </div> <!-- für Opera und Mozilla -->
<h1>Überschrift</h1>
<div id="menubottom"> </div>
<div id="text">
<p>Testtest</p>
</div></body>
</html>Die Aufteilung der Links übernimmt jetzt border-left, weil mir <span>|</span> einfach nicht gefallen wollte und die Klasse "menulinks" war nötig, weil sonst die Links in der falschen Reihenfolge angezeigt werden. Ich hoffe, du kannst es brauchen. Manchmal denke ich übrigens, dass Tabellen gar nicht *pöse* genug sein können, um sie nicht einzusetzen ;)
LG Orlando
--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html-
Hallo Orlando,
so, jetzt habe ich in deinem Quelltext gewütet, ziemlich sogar, aber das gewünschte Layout hinbekommen. Einen Schönheitswettbewerb gewinnst du damit garantiert nicht, aber es funktioniert...
Herzlichen Dank dafür vorab. Und das Ganze auch noch mitten in finsterer Nacht.
.bg {display:none;} /* M$IE stellt den Hintergrund ohnehin schwarz dar */
div[class="bg"] { position:absolute: top:0; left:0; width:100%; color:#fff; background-color:#000; display:block; } /* Opera und Mozilla benötigen den Hintergrund extra */Das da verwunderte mich schon, bis ich's begriffen hatte.
Das funktiniert aber nur solange bis der IE Selektoren versteht, oder?
Warum ist das überhaupt drin?Die Aufteilung der Links übernimmt jetzt border-left, weil mir <span>|</span> einfach nicht gefallen wollte und die Klasse "menulinks" war nötig, weil sonst die Links in der falschen Reihenfolge angezeigt werden.
Naja, die | haben den Grund, weil border-left von oben bis unten gehen, ich wollte über und unter den Strichen etwas Platz haben. aber das ist ja leicht zu ändern, mal sehen.
Ich hoffe, du kannst es brauchen.
Ja, sehr! Auf den Trick mit float:left und dann übergeordnet float:right bin ich natürlich nicht gekommen.
Manchmal denke ich übrigens, dass Tabellen gar nicht *pöse* genug sein können, um sie nicht einzusetzen ;)
Da hast Du natürlich recht. Früher war's auch eine Tabelle. Die ist aber zu starr wenn es darum geht, über alternative Stylesheets das Design umzukrempeln.
Und eine gute Übung war und ist es auch. ;)Den Vorteil, auch die Überschrift in menu zu klammern sehe ich darin, mit einer einzigen Angabe im CSS das ganze Ding zu verschieben.
Ciao,
Jürgen-
Hi Jürgen,
Herzlichen Dank dafür vorab. Und das Ganze auch noch mitten in finsterer Nacht.
naja, jeder definiert "Urlaub" wohl auf seine Art ;)
.bg {display:none;} /* M$IE stellt den Hintergrund ohnehin schwarz dar */
div[class="bg"] { position:absolute: top:0; left:0; width:100%; color:#fff; background-color:#000; display:block; } /* Opera und Mozilla benötigen den Hintergrund extra */Das funktiniert aber nur solange bis der IE Selektoren versteht, oder?
Korrekt. Das wird wohl noch länger dauern...
Warum ist das überhaupt drin?
Weil im M$IE in der Zeile mit den fünf Links der gesamte Hintergrund schwarz dargestellt wird, in Opera und Mozilla korrekterweise nicht (nur bei den Links selbst). Also musste ich ein zusätzliches DIV absolut positionieren, das den schwarzen Hintergrund erzeugt. Im M$IE macht das aber wiederum Probleme, daher display:none. Über den Attribut-Selektor zeigen es nur bessere Browser. Das ist an sich nicht wirklich sauber, aber es erfüllt den Zweck.
Naja, die | haben den Grund, weil border-left von oben bis unten gehen, ich wollte über und unter den Strichen etwas Platz haben. aber das ist ja leicht zu ändern, mal sehen.
Das kannst du auch mit line-height: bei den Links anpassen, dann wird der Rahmen etwas kleiner.
Viel Spaß beim Basteln,
LG Orlando--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html
-
-
-
-
-
-
-
-