CSS- verschiedene text-align in einer Zeile

[gaby]

Hallo Forum,

ich habe ein Problem, bei dem ich nicht weiterkomme.

Es soll bei jeder Datei am unteren Bildschirmrand eine link-Zeile erscheinen. Das habe ich bisher so gelöst:

<TABLE width="100%" border="0" >
  <TR>
     <TD style="width:44px"> </TD>
     <TD  align="left"> Inhaltsverzeichnis</TD>
     <TD  align="right"> anzeigen..........zurück.........
          weiter</TD>
     <TD style="width:44px"> </TD>
  </TR>
</TABLE>

(die Punkte bedeuten * *

Der link "Inhaltsverzeichnis" soll linksbündig stehen mit einem Abstand von 44px zum linken Bildschirmrand.
Die links "anzeigen" "zurück" und "weiter" stehen rechtsbündig mit einem Abstand von 44px zum rechten  Bildschirmrand und zueinander.

Da ich in Zukunft auf Tabellen als Layoutmittel verzichten möchte, soll das auf CSS umgeschrieben werden.
hier noch 'mal zwei Versuche, die nicht funktioniert haben:

<STYLE type="text/css">
<!---
.re-space {  margin-right: 44px;    }
.li-space {  margin-left: 44px;    }
.li-abstand {  position:absolute;  left:44px;    }
.w-abstand  {  word-spacing: 44px    }
--->
</STYLE>

..............

<br>
<DIV>
<SPAN style class="li-space">Inhaltsverzeichnis</SPAN>
<SPAN style class="w-abstand">anzeigen zurück weiter</SPAN>
</DIV>
<BR>
<br>
<DIV>
<SPAN style class="li-abstand">Inhaltsverzeichnis</SPAN>
<SPAN style="text-align:"right"; word-spacing:"44px"">anzeigen zurück weiter</SPAN>
</DIV>
<BR>
<br>
<DIV>
<SPAN style class="li-space">Inhaltsverzeichnis</SPAN>
<SPAN style="text-align:"right"; word-spacing:"44px"">anzeigen zurück weiter</SPAN>
</DIV>

Ich möchte gerne _alle_ Angaben als Klasse auslagern, weil diese link-Zeile bei mir ungefähr 90mal vorkommt.

Habe aber absolut keine Idee mehr :-(
Ihr vielleicht?

Grüße
gaby

[shevegen]

i weiss nit ob i es richtig verstanden habe
aber du brauchst
das hier
<SPAN style="text-align:"right"; word-spacing:"44px"">
als klasse definiert?

dann mach z. bsp eine css datei wie
span.tar { text-align:"right";
           word-spacing:"44px"
         }

und
in der html datei

<SPAN class="tar">anzeigen zurück weiter</SPAN>

dies is auf selfhtml ah zu finden btw, i weiss halt nit ob es das is, was du brauchst :)

[Heiner]

<SPAN style="text-align:"right"; word-spacing:"44px"">

Die Anführungszeichen um die Wertangaben sind falsch!

span.tar { text-align:"right";
           word-spacing:"44px"
         }

Hier auch! Unbedingt weglassen!

Heiner

[gaby]

Danke an alle, die sich meinen Kopf zerbrochen haben.

Ich habe alle Eure Antworten kombiniert und jetzt läuft es prima:

<style>
.links
{
    float:left;
    text-align:left;
    margin-left:22px;
}
.rechts
{
    float:right;
    text-align:right;
    margin-right:22px;
    word-spacing:22px;
}
</style>

................
<span class="links">Inhaltsverzeichnis</span>
<span class="rechts">anzeigen zurück weiter</span>

schönes Wochenende
Grüße
gaby

[Heiner]

Hallo,

Schau Dir mal das CSS-Element text-align an! Du musst es angeben und Deinen span- und div-Bereichen mit width: Breiten zuweisen.

Heiner

[gaby]

Hallo,

Schau Dir mal das CSS-Element text-align an! Du musst es angeben und Deinen span- und div-Bereichen mit width: Breiten zuweisen.

Heiner

Ich wollte eigentlich vermeiden, feste Breiten zuzuweisen, damit das Layout bei verschiedenen Auflösungen noch gleich aussieht.
d.h.: der Abstand zwischen dem link "Inhaltsverzeichnis" und dem link "anzeigen" soll variabel sein.
Hingegen der Abstand von Inhalsverzeichnis zum linken Bildschirmrand soll 44px sein und
der Abstand des äußeren der 3 anderen links (also der link "weiter" soll 44px Abstand zum rechten Bildschirmrand haben.

der Div-Bereich hat die Breite des Bildschirms des Users.

Wenn ich dem Span-Bereich (der die 3 rechten links incl dem Abstand zueinander umfasst),eine feste Breite zuordne, denn muss ich sogar wenn ich einen linktext ändere
(z.B. "anzeigen" -->  "Bild anzeigen", auch die Breite des span-Bereichs anpassen. Das ist ziemlich aufwendig.
Ich wollte eigentlich nur die _Abstände_ der links zueinander und die Position des links "Inhalt" mit CSS festlegen.

Grüße
gaby

[MudGuard]

Hi,

Schau Dir mal das CSS-Element text-align an! Du musst es angeben und Deinen span- und div-Bereichen mit width: Breiten zuweisen.

bei span hat das Zuweisen von width nur dann einen Sinn, wenn man display:block setzt - für inline-Elemente ist width nicht zulässig.
Aber dann kann man gleich ein div statt span benutzen...

cu,
Andreas

[Struppi]

Der link "Inhaltsverzeichnis" soll linksbündig stehen mit einem Abstand von 44px zum linken Bildschirmrand.
Die links "anzeigen" "zurück" und "weiter" stehen rechtsbündig mit einem Abstand von 44px zum rechten  Bildschirmrand und zueinander.

Da ich in Zukunft auf Tabellen als Layoutmittel verzichten möchte, soll das auf CSS umgeschrieben werden.
hier noch 'mal zwei Versuche, die nicht funktioniert haben:

Möchtest du sowas:
<style>
#links
{
    float:left;
    text-align:left;
    margin-left:44px;
}
#rechts
{
    float:right;
    text-align:right;
    margin-right:44px;
}
</style>

<span id="links">Inhaltsverzeichnis</span>
<span id="rechts">anzeigen..........zurück.........weiter</span>

Struppi.

[Heiner]

Nein, er wollte Klassen, aber ansonsten war der Ansatz nicht schlecht. Statt # einfach . nehmen und statt id= einfach class=

Die Angabe width: sollte jedoch noch ergänzt werden.

Heiner

[Heiner]

... er ... muss natürlich ... sie ... heißen! Sorry gaby.

[Struppi]

Nein, er wollte Klassen, aber ansonsten war der Ansatz nicht schlecht. Statt # einfach . nehmen und statt id= einfach class=

Klassen verwendet man, wenn man Attribute mehrmals wiederverwenden möchte, für mich sieht es aber so aus, als ob diese 2 Bereiche nur jeweils einmal im Dokument vorkommen, dann sollte man id's verwenden.

Die Angabe width: sollte jedoch noch ergänzt werden.

wozu?

Struppi.

[Heiner]

Die Verwendung von Klassen und Ids ist mir schon klar. Im Ausgangsbeitrag heißt es aber gerade: "Ich möchte gerne _alle_ Angaben als Klasse auslagern, weil diese link-Zeile bei mir ungefähr 90mal vorkommt."

[Struppi]

du hast recht, hatte ich überlesen ;-)

Struppi.

[Heiner]

du hast recht, hatte ich überlesen ;-)

Kann ja mal passieren. Hier muss ja niemand jemandem etwas beweisen. Hauptsache gaby kann uns noch folgen (-:

[gaby]

du hast recht, hatte ich überlesen ;-)

Kann ja mal passieren. Hier muss ja niemand jemandem etwas beweisen. Hauptsache gaby kann uns noch folgen (-:

In der Geschwindigkeit, in der Ihr antwortet, habe ich schon einige Mühe, Euch zu folgen *g*
Ich muss ja Eure Tips auch noch ausprobieren (und mit CSS bin ich noch ziemlich am Anfang).

Vielen Dank allen Helfern schon 'mal an dieser Stelle.

Grüße
gaby

[gaby]

Klassen verwendet man, wenn man Attribute mehrmals wiederverwenden möchte, für mich sieht es aber so aus, als ob diese 2 Bereiche nur jeweils einmal im Dokument vorkommen, dann sollte man id's verwenden.

Nein, es kommt mehrmals vor. ich habe eine ewig-lange Datei. Die links aus der Navi-Leiste verweisen dann immer auf einen Anker in dieser Datei.
Nun soll immer diese Link-Zeile am unteren Bildschirmrand erscheinen (also nicht nur am Ende der Datei)

Grüße
gaby