Seite 4 von 5

Verfasst: 27.11.2006 00:12
von Kaeru Gaman
@frogger

erstmal zum schmökern:

Standard-Nachschlagewerk HTML:
http://de.selfhtml.org/

Rund um CSS:
http://www.csszengarden.com/
http://intensivstation.ch/
http://css.fractatulum.net/beispiele.htm

Verfasst: 27.11.2006 02:32
von rolaf
@frogger

Sodelle, vorm Zubettgehen hier die Hilfestellung. Eigendlich ganz simpel das Ganze. Hier mal ein einfaches Beispiel:

Code: Alles auswählen

<style type="text/css">
<!--
a.f1       { color: #000080; text-decoration: none; }
a:hover.f1 { color: #0000FF; text-decoration: underline; }

a.f2       { color: #800000; text-decoration: none; }
a:hover.f2 { color: #FF0000; text-decoration: underline; }
-->
</style>


<a href="seite1.html" class="f1">Beispiel-Link 1</a>
<a href="seite2.html" class="f2">Beispiel-Link 2</a>
Link 1 ist dunkelblau, wird durch HOVER beim Überfahren hellblau.
Link 2 ist dunkelrot, wird durch HOVER beim Überfahren hellrot.

Jedem Link der nun Blau sein soll, fügst du im a-Tag class="f1" hinzu, bei Rot dann natürlich class="f2", usw.

So kannst du praktisch unbegrenzt viele Linkfarben auf einer Seite haben. Man kann außerdem mit CSS viele neckische Dinge machen, z.B. einen Border um den Link, die Hintergrundfarbe beim Überfahren ändern, die Schrift ändern, etc. pp. Die Möglichkeiten sind sehr, sehr vielfältig!

>> Und wie man den Zeilenabstand bei <p></p> ändern kann, habe ich auch noch nicht herausgefunden.

Code: Alles auswählen

<style type="text/css">
<!--
p { line-height: 20px; }
-->
</style>
Das Gute liegt manchmal so nah... :wink:

>> Standard-Nachschlagewerk HTML:
>> http://de.selfhtml.org/

Wie von Keru gepostet, das ist das Nachschlagewerk schlechthin auch für CSS und JavaScript, es gibt nichts Besseres. Das ist Dein Helfer in der "Not". Gibts inzwischen auch als kompakte chm-Hilfedatei zum Downloaden = sehr praktisch!

Verfasst: 27.11.2006 18:11
von Alves
HI Falo,

hab sonst nichts gefunden.
Wie kreig ich mir CSS einen gepunkteten Unterstrich hin? Das Gerüst hover etc pp kenn ich, aber genau die Definition eines gpunkteten Unterstrichs. Weißt du da was?

Verfasst: 27.11.2006 18:26
von rolaf
Alves hat geschrieben:HI Falo,

hab sonst nichts gefunden.
Wie kreig ich mir CSS einen gepunkteten Unterstrich hin? Das Gerüst hover etc pp kenn ich, aber genau die Definition eines gpunkteten Unterstrichs. Weißt du da was?
Hallo,

für einen blau gepunktet-unterstrichenen Link, das im css einfügen:

border-bottom: 1px dotted #000080;

Für einen beliebigen Text aus einem Absatz, geht es wie folgt:

<p>Ab <span style="border-bottom: 1px dotted #000080;">hier wirds es blau gepunktet</span>, danach wieder normal.</p>

Verfasst: 27.11.2006 18:36
von Alves
Danke Falo!

Klappt perfekt!

Wo wir grad so schon bei Desgin sind: Ich hab jetzt mal Punktwe reingemacht, sind das gut ausd und was gibt es designtechnisch noch so auszusetzen? (wwwButton unten unterm Post)

Verfasst: 28.11.2006 14:56
von Frogger
Thx an alle.
So langsam begreif ich das mit dem CSS :oops:
Und http://de.selfhtml.org/ ist echt klasse :allright:

Hab jetzt wieder ein paar Änderungen vorgenommen
und ab jetzt geht der Test des Designs auf http://www.onsoftag.de weiter :)

Verfasst: 28.11.2006 14:58
von Kaeru Gaman
zur zeit hab ich nur hellblaue kästchen auf weißem grund...

...aber vielleicht sollte ich nen browser verwenden und keine krücke... :lol:

Verfasst: 28.11.2006 15:07
von Frogger
zur zeit hab ich nur hellblaue kästchen auf weißem grund...

...aber vielleicht sollte ich nen browser verwenden und keine krücke...
oha^^
Wär mal ne Idee :D

Also bei mir läuft die seite mit FF Opera und IE ohne Fehler. Hoffe das wird auch so bleiben.
Hab es mal an die Breite 1024pixel angepasst. Ist das ok?

Verfasst: 28.11.2006 15:27
von Kaeru Gaman
nuja, text hab ich auch drauf, aber es gibt keine 4pix-rahmen mehr..

den IE6 benutz ich noch, weil mir das update auf 7 redundant ist,
dann nehm ich lieber gleich Fifo...

Verfasst: 28.11.2006 15:36
von rolaf
Kaeru Gaman hat geschrieben:nuja, text hab ich auch drauf, aber es gibt keine 4pix-rahmen mehr..

den IE6 benutz ich noch, weil mir das update auf 7 redundant ist,
dann nehm ich lieber gleich Fifo...
Naja, also man sollte schon so arbeiten das das Ergebnis auf den wichtigsten drei Browsern IE, FF, OPERA gleich aussieht. Dies erreicht man meist problemlos, wenn man HTML 4.01 validen Coode produziert.

Übrigens Frogger, ich mache mein Fenster nie auf Vollgröße, daher habe ich jetzt unten einen unschönen Scrollbalken. Besser ein fexibles Layout, wie es vorher war. Damit es nicht komplett zerquetscht werden kann, könnte man z.B. bei 780 px eine Grenze setzen (so daß auch 800 x 600 noch ohne Scrollbalken unten auskommen. Oder gleich auf 780 px festsetzen und zentrieren.