XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Text ausrichten: links & rechts (http://xhtmlforum.de/showthread.php?t=50139)

tekuna 29.01.2008 17:39

Text ausrichten: links & rechts
 
Hallo,

ich möchte den Text so anpassen, wie auf dem Bild hier dargestellt:

http://img101.imageshack.us/img101/5831/333mf8.jpg

Der eine Text soll ganz link stehen (mit kleinem Bild)
und der andere Text soll ganz rechts stehen (mit kleinem Bild).
In der Mitte sollen ein Paar Punkte erscheinen. (siehe Bild).

Momentan stehen die beiden Texttitel rechts nebeneinander angeordnet. Der Quellcode sieht folgendermaßen aus:

PHP-Code:

<table class="forumline" width="100%" cellspacing="1" cellpadding="3" border="0">
    <
tr align="right">
        <
td class="catHead" colspan="2" height="28"><span class="prev"><p align="left">
        <
a href="{U_VIEW_OLDER_TOPIC}" class="next">{L_VIEW_PREVIOUS_NAME}</a>
        
        <
a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_NAME}</a>
 &
nbsp;</span></td>
    </
tr

CSS


Code:

/* nächsten Beitrag anzeigen */
.next                        { font-weight: bold; font-size: 11px; color : #000000; text-align:right; }
a.next                        { text-decoration: none; color : #000000; text-align:right; }
a.next:hover                { text-decoration: none; text-align:right; }


/* vorherigen Beitrag anzeigen */
.prev                        { font-weight: bold; font-size: 11px; color : #000000; text-align:left; }
a.prev                        { text-decoration: none; color : #000000; text-align:left; }
a.prev:hover                { text-decoration: none; text-align:left; }

Ich bin über jede Antwort sehr dankbar.

netbenni 30.01.2008 12:57

nimm doch drei td-Elemente.
- Beim ersten align="left".
- Beim zweiten align="center".
- Beim dritten align="right".

tekuna 30.01.2008 13:58

Hallo,

ich habe es bereits so in der Art versucht:

Code:

<tr>
            <td class="catHead"><span align="left"><a href="{U_VIEW_OLDER_TOPIC}" class="nav">{L_VIEW_PREVIOUS_NAME}</a></span></td>
            <td class="catHead"><span align="center">:::</span></td>
            <td class="catHead"><span align="right"><a href="{U_VIEW_NEWER_TOPIC}" class="nav">{L_VIEW_NEXT_NAME}</a>&nbsp;</span></td>
         
        </tr>

hat leider nicht geklappt :?

LordShadow 30.01.2008 14:30

mhmmm .. ich würd mich erstmal für ein modell entscheiden,
entweder eine tabelle verwenden, oder das css box-modell ..

falls du dich für eine tabelle entscheiden solltest, verwende align="xxx"
falls css, dan den div-tag,

gruß LordShadow

mantiz 30.01.2008 14:41

Man könnte hier auch eine Liste nehmen.

Code:

<ul>
  <li id="back">Börse bricht ein</li>
  <li id="next">Es gibt keine ...</li>
</ul>

li#back links floaten lassen, mit nem padding-left von 20px, dann per background-image das Icon anzeigen lassen. Für li#next das gleiche andersherum, also rechts floaten lassen, padding-right von 20px.
Für die Grafik in der Mitte könnte man dem ul dann einen Hintergrund mit background-position 50% 50% verpassen.

Clearen nicht vergessen. :)

Ob eine Liste hier die richtige Wahl ist, da bin ich mir nicht 100%-ig sicher, aber ich finde es immer noch besser als eine Tabellen-Lösung. :D

tekuna 30.01.2008 14:52

Danke für eure Antworten. Hier mal ein Beispiel:

So soll es aussehen - So sieht es bisher aus.

(Relevant ist der Text über: Autor & Nachricht)

Vielleicht hilft das...?

LordShadow 30.01.2008 14:57

Zitat:

Zitat von mantiz (Beitrag 369602)
Man könnte hier auch eine Liste nehmen.

...

Ob eine Liste hier die richtige Wahl ist, da bin ich mir nicht 100%-ig sicher, aber ich finde es immer noch besser als eine Tabellen-Lösung. :D

So würde ich das nich sehen, ...
Wenn die Webseite beireits ein Tabellensayout ist, ist die variante mit den Spalten besser.

Alternativ div-tags nehmen, ..
div tags sind im gegebsatz zu den span-tags keine inline elemente, und können per float value nebenerinader gesetzt werden ...

Listen wprde ich nicht verwenden

gruß LordShadow

inta 30.01.2008 15:32

Eine Tabelle ist an dieser Stelle falsch. Wenn die Seite auf einem Tabellenlayout basiert, dann wird es höchste Zeit dies zu ändern.

Ich bin unentschlossen, ob diese beiden Links eine Liste darstellen oder nicht.
Also entweder Mantiz Lösung, oder:
Code:

<p>
    <a href="" id="last">Börse...</a>
    <a href="" id="next">Es gibt...</a>
</p>

Code:

p {
    text-align: right;
    background: url(dots.png) no-repeat center center;
}

#last {
    float: left;
    background: url(last.png) no-repeat left center;
    padding-left: 1em;
}

#next {
    background: url(next.png) no-repeat right center;
    padding-right: 1em;
}


mantiz 30.01.2008 16:52

OK, in nem Absatz geht's auch, war mir ja wie gesagt nicht 100%-ig sicher mit der Liste. 8)

@LordShadow:
Auch valides Tabellen-Layout ist absolut nicht mehr zeitgemäß und als solches nicht mehr zu empfehlen.
Auch spans (wie jedes andere Element auch) kann man floaten, dafür braucht man keine divs.

tekuna 30.01.2008 18:06

Hallo,

vielen dank an euch alle. ich habe es jetzt so gelöst und bin ganz zufrieden damit:

> So sieht es jetzt aus


PHP-Code:

<td align="center" class="catHead" colspan="2" height="28">
      
         <
span id="prev">   <&nbsp;  </span>
      <
a id="prev" href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_NAME}</a>
        <
span id="next">  &nbsp;>  </span
      <
a id="next" href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_NAME}</a>
         

    </
td


Code:

/* vorherigen Beitrag anzeigen */
#prev                        { padding-left: 0,5; float: left; font-weight: bold; font-size: 11px; color : #000000; text-align:left; }
a#prev                        { padding-left: 0,5; float: left; text-decoration: none; color : #000000; text-align:left; }
#prev:hover                { padding-left: 0,5; float: left; text-decoration: none; text-align:left; }

/* nächsten Beitrag anzeigen */
#next                        { padding-right: 0,5; float: right; font-weight: bold; font-size: 11px; color : #000000; text-align:right; }
a#next                        { padding-right: 0,5; float: right; text-decoration: none; color : #000000; text-align:right; }
a#next:hover        { padding-right: 0,5; float: right; text-decoration: none; text-align:right; }


:arrow: Kann mir vielleicht noch jemand erklären, wieso Firefox mir die Forenbreite zerreißt, wenn ein langer link gepostet wird: so wie hier. Die Tabellengröße scheint sich hier dem Inhalt anzupassen. Im IE ist allerdings alles okay. Habt ihr da vielleicht Tipps, was ich dagegen machen kann?

Edit: Hab gerade gesehen, dass der IE auch die Breite verändern, wenn der Tabelleninhalt eine bestimme breite erreicht (siehe hier).


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020