Forum
Tipps
News
Menu-Icon

Schriftformatierung mit <span>

Hallo,

ich habe gelernt, dass die Schriftformatierung mit <font> ja veraltet ist und man heutzutage <span> verwendet. Ich habe das jetzt auf meinem Entwurf versucht, bin aber nicht zufrieden. Die Links werden nicht mitformatiert ob wohl diese innerhalb des <span> Bereichs liegen. Was mache ich falsch oder ist hier <span> sowieso falsch ?

 Hier der Entwurf

« Letzte Änderung: 09.10.06, 16:02:56 von frank_gayer »

Antworten zu Schriftformatierung mit <span>:

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Die Links musst du gesondert formatieren.
Z.B. indem du diesen (Beispiel-)Code innerhalb des headbereichs einfügst:

<style type="text/css">
a:link {font-size:1em;
             color:#000000;
             text-decoration:none;
             font-weight:bold;}

a:visited {font-size:em;
                text-decoration:none;
                color:#BBBBBB;}

a:hover {font-size:1em;
       color:#FF0000;
       text-decoration:none;}
</style>
Deine Seite lässt sich leider nicht aufrufen.
Falls du eine ausgelagerte CSS-Datei hast, kannst du die Angaben auch darein packen.

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hi |

prm hat es richtig gesagt: Auch wenn Links innerhalb von Spans liegen, werden diese nicht mitformatiert. Das ist manchmal etwas lästig, aber durchaus begründet.

Du kannst übrigens zusätzlich zum angeführten Beispiel auch CSS-Klassen für die Links vergeben, das sieht dann z.B. so aus:

a.eineklasse:link {font-size:1em;
             color:#000000;
             text-decoration:none;
             font-weight:bold;}

Direktformatierung innerhalb des a-Tags geht natürlich auch ;)

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo und vielen Dank für die Antworten,

ich habe den Link im Ausgangsthread geändert. Ist jetzt aufrufbar.

Ich habe eine zentrale .css, kann ich dann dort auch generell das Verhalten bei Links steuern. Ich will Links immer rot und fett haben. Dann müsste das ja so aussehen, oder ?

Zitat
a.eineklasse:link {font-size:1em;
             color:#FF0000;
             text-decoration:none;
             font-weight:bold;}

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Wenn du das Link-Aussehen generell verändern willst, dann wäre die erste Variante (siehe prm) sinnvoll, also ohne Klassenangabe.

Du kannst zwar auch Variante 2 verwenden, müsstest dann aber in jedem Hyperlink die Klasse mit angeben, also z.B.

<a href="http://www.computerhilfen.de" class="eineklasse">Klick</a>

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo,

ich habe jetzt die Links in der zentralen .css eingebunden. Die Schriftgrösse geht aber irgendwie nicht zu regeln. Hier ist die Formatierung:

Zitat
.link1 a, .link1 a:visited{font-size:1.8em;
             color:#FF0000;
             text-decoration:none;
             font-weight:bold;}
.link1 a, .link1 a:hover{font-size:1.8em;
             color:#000000;
             text-decoration:none;
             font-weight:bold;}       

Hier der Link:

Zitat
<a class="link1"  href="www.ebay.com">Ebay.com</a>

Warum geht da die Schriftgrösse nicht ?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Mach's mal so:

a.link1: visited{font-size:1.8em;
             color:#FF0000;
             text-decoration:none;
             font-weight:bold;}

a.link1:hover{font-size:1.8em;
             color:#000000;
             text-decoration:none;
             font-weight:bold;}     

<a href="www.ebay.com" class="link1">Ebay.com</a>

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo,

jetzt wird die Schrift nur grösser, wenn man mit der Maus drüber geht. Auch kein schlechter Effekt, aber nicht das was ich haben wollte.

Aber so geht es:

Zitat
a.link1:link {font-size:1.5em;
             color:#FF0000;
             text-decoration:none;
             font-weight:bold;}

a.link1: visited{font-size:1.5em;
             color:#FF0000;
             text-decoration:none;
             font-weight:bold;}

a.link1:hover{font-size:1.5em;
             color:#FFFFFF;
             text-decoration:none;
             font-weight:bold;}       
« Letzte Änderung: 10.10.06, 07:52:47 von frank_gayer »

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Is wie in der Schule: man muss nur richtig abschreiben ;D

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo,

ich finde es nicht. Ist bei der Rechtschreibung auch der Abstand wichtig ? Vielleicht kannst Du mir nochmals auf die Sprünge helfen

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
ich finde es nicht.

Was findest du denn nicht?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo,

Du hast doch geschrieben, dass ich richtig abschrieben soll, dann muss ich ja einen Fehler in meiner .css haben oder was meinst Du damit ?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Ja, das meinte ich. Es stand ja oben schonmal richtig. Aber deine zuletzt gepostete Lösung hat ja nach deiner Aussage funktioniert, und sie sieht auch syntaktisch richtig aus ;)

greez 8)
JoSsiF

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button

Hallo,

nee, nicht wirklich. Die Schriftgrösse der Links auf der Startseite ist kleiner als der Rest, obwohl dies gleich in der .css steht. Wie kann das sein ?

Hat dir diese Antwort geholfen?

Danke ButtonHilfreiche Antwort Button
Die Schriftgrösse der Links auf der Startseite ist kleiner als der Rest, obwohl dies gleich in der .css steht. Wie kann das sein ?
Du hast die Links ja mit der Klasse ".link1" definiert und dafür eine größere Schriftgröße hinterlegt.
Wenn du diese Klasse bei den Links auf der Startseite nicht angegeben hast, erscheinen sie in der Normalschrift. Überprüfe das mal, indem du für einen Link
<a href="www.ebay.com" class="link1">Ebay.com</a> eingibst und für einen anderen
<a href="www.ebay.com">Ebay.com</a>
Der zweite müsste Normalschrift haben, der erste dagegen größer sein.
Poste ggf. nochmal deinen CSS und HTML-Code oder einen Link zu deiner HP.

« HTML HintergrundsbildKostenlose Homepage erstellen für Präsentation von Bildern »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Quellcode
Ein Quellcode, auch als Quelltext bekannt, bezeichnet den unkompilierten Programm-Code einer Software. Quell- oder Programm-Code ist der auch für Menschen lesbare Co...

Unicode
Unicode ist ein international anerkannter Standard, der als universeller Zeichencode ("Universal Code") dient und durch das Unicode-Konsortium entwickelt und verwaltet wi...

QR-Code
QR-Codes, die Abkürzung für "Quick Response Codes", sind eine Form von zweidimensionalen Barcodes. Damit lassen sich Informationen schnell und effizient speiche...