zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Text ausrichten: links & rechts

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.01.2008, 16:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2008
Beiträge: 10
tekuna befindet sich auf einem aufstrebenden Ast
Standard 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:
<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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.01.2008, 11:57
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 15.01.2008
Ort: Berlin Mitte
Beiträge: 214
netbenni befindet sich auf einem aufstrebenden Ast
Standard

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 11:59 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 30.01.2008, 12:58
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2008
Beiträge: 10
tekuna befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 30.01.2008, 13:30
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 30.01.2008, 13:41
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.844
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 30.01.2008, 13:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2008
Beiträge: 10
tekuna befindet sich auf einem aufstrebenden Ast
Standard

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...?
Mit Zitat antworten
  #7 (permalink)  
Alt 30.01.2008, 13:57
Benutzerbild von LordShadow
:: lord of the web ::
XHTMLforum-Mitglied
 
Registriert seit: 19.12.2007
Ort: Freiburg
Beiträge: 192
LordShadow wird schon bald berühmt werden
Standard

Zitat:
Zitat von mantiz Beitrag anzeigen
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.
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
Mit Zitat antworten
  #8 (permalink)  
Alt 30.01.2008, 14:32
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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 16:09 Uhr) Grund: Hintergrundgrafik bei #last auf "left" gesetzt
Mit Zitat antworten
  #9 (permalink)  
Alt 30.01.2008, 15:52
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.844
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 30.01.2008, 17:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.01.2008
Beiträge: 10
tekuna befindet sich auf einem aufstrebenden Ast
Standard

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; }

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 17:18 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hover effekt auf ganze TD zelle gandalf_hh CSS 27 13.07.2011 19:06
DIV bis GANZ unten burnZ CSS 5 27.07.2008 13:14
Zeilenabstand bei font-Angabe wieder weg nick CSS 7 16.02.2008 14:39
Grafik in einer Tabellenzelle rechts unten ausrichten ? Worance CSS 1 19.11.2006 15:09
Text Position barca CSS 14 10.05.2006 11:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:33 Uhr.