|
|||
Text ausrichten: links & rechts
Hallo,
ich möchte den Text so anpassen, wie auf dem Bild hier dargestellt: 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:
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; } |
Sponsored Links |
|
|||
nimm doch drei td-Elemente.
- Beim ersten align="left". - Beim zweiten align="center". - Beim dritten align="right".
__________________
„Tu soviel Gutes, wie Du kannst, und mache so wenig Gerede wie nur möglich darüber.“ C.D. Geändert von netbenni (30.01.2008 um 12:59 Uhr) |
Sponsored Links |
|
|||
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> </span></td> </tr> |
|
||||
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> 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. |
|
||||
Zitat:
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 |
|
||||
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; } Geändert von inta (30.01.2008 um 17:09 Uhr) Grund: Hintergrundgrafik bei #last auf "left" gesetzt |
|
||||
OK, in nem Absatz geht's auch, war mir ja wie gesagt nicht 100%-ig sicher mit der Liste.
@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. |
Sponsored Links |
|
|||
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:
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; } 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). Geändert von tekuna (30.01.2008 um 18:18 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hover effekt auf ganze TD zelle | gandalf_hh | CSS | 27 | 13.07.2011 20:06 |
DIV bis GANZ unten | burnZ | CSS | 5 | 27.07.2008 14:14 |
Zeilenabstand bei font-Angabe wieder weg | nick | CSS | 7 | 16.02.2008 15:39 |
Grafik in einer Tabellenzelle rechts unten ausrichten ? | Worance | CSS | 1 | 19.11.2006 16:09 |
Text Position | barca | CSS | 14 | 10.05.2006 12:25 |