CSS Text anordnen ?

PuITutorials · 10. Mai 2012

Hallo,

Ich habe mal eine kleine Frage und zwar wie ich auf dieser Seite http://dont-cry.de/kategorie-v5.html unten den Text 1-9 1-9 10-18 anordnen kann und zwar so ...

das erste 1-9 soll neben den Linken Pfeil das zweite 1-9 in die Mitte ( Is derzeit ja schon richtig) und das 10-18 neben den rechten Pfeil. Hoffe ihr habt verstanden was ich meine!

Vielen Dank schonmal, Gruß

Daaron · 10. Mai 2012

So wie ich das sehe: klappt nicht, ohne auch die HTML-Struktur umzuschreiben.

PuITutorials · 10. Mai 2012

Wäre das schwer die Html Struktur umzuschreiben ?

chris2603 · 11. Mai 2012

HTML:

<p id="content-v2">
<a class="pfeil_links" href="videos.html">&nbsp;</a>
<a class="pfeil_rechts" href="videoss.html">&nbsp;</a>
<a href="dein_link.html" style="float:left">1-9</a>
<a href="dein_link2.html">1-9</a>
<a href="dein_link3.html" style="float:right">10-18</a>

du solltestest darunter ein

HTML:

<div style="clear:both"></div>

ein bauen damit dir der float nicht die seite zersprengt.

alternative kannst du auch so arbeiten:

HTML:

<p id="content-v2">
<a class="pfeil_links" href="videos.html">&nbsp;</a>
<a class="pfeil_rechts" href="videoss.html">&nbsp;</a>
<a href="dein_link.html" [B]id="navzurueck"[/B]>1-9</a>
<a href="dein_link2.html">1-9</a>
<a href="dein_link3.html" id="navvor">10-18</a>
<div class="clear"></div>

dein css teil sieht dann so aus

Code:

#navzurueck{
float:left;
}
#navvor{
float:left;
}
.clear{
clear:both;
}

Eventuell interessant für dich:

de.selfhtml.org/index.htm

css4you.de/

Keine sehr saubere lösung aber sollte helfen ohne das du viel ändern musst.

Gamer Xy1 · 18. Mai 2012

Deutlich auberere Lösung:
Du sagst dem #content-v2, dass es seinen Text zentriert anordnen soll:

Code:

#content-v2{
sonstige CSS-Angaben...
text-align: center;
}

Jetzt werden alle 3 Textlinks zentriert angeordnet.
Danach schreibst du in die beiden äußeren Links rein:

Code:

<a href="dein_link.html" style="float:left;">1-9</a>
<a href="dein_link2.html">1-9</a>
<a href="dein_link3.html" style="float:right;">10-18</a>

Der erste Link floatet dann nach links an den Pfeil und der dritte nach rechts zu dem anderen Pfeil, der zweite bleibt stehen, weil er sich immer noch unter dem Einfluss von "text-align: center;" befindet...

Das clear:both; solltest du trotzdem einfügen, da es sonst Komlikationen geben würde...

Im Prinzip ist das ja auch die Lösung von chris2603, du solltest aber IMMER darauf achten, dass du keinen center-HTML-Tag verwendest, sondern die CSS-Variante...

Was mir beim Durchsehen noch aufgefallen ist:
1. Du hast die ID content-v2 mehrfach für Elemente vergeben, IDs (sagt ja schon der Name: Identifikation) sollten einmalig vergeben werden, für deine Art der Anwendung gibt es Klassen...
2. Die Bilder oben.png und unten.png brauchst du nicht... Das gibt nur unnötigen Traffic, der die Ladezeit deiner Site verlängert... setz einfach an der richtigen stelle dafür einen padding-Wert ins Stylesheet, dann siehts genauso aus und geht schneller...

Hoffe ich konnte helfen

Grüßle
Game Xy1

Suche

CSS Text anordnen ?

PuITutorials

Ensign

Daaron

Fleet Admiral

PuITutorials

Ensign

chris2603

Lieutenant

Gamer Xy1

Cadet 3rd Year

Ähnliche Themen