Design

[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

[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...

>> 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!

[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?

[rolaf]

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>

[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)

[Frogger]

Thx an alle.
So langsam begreif ich das mit dem CSS
Und http://de.selfhtml.org/ ist echt klasse

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

[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...

[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

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?

[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...

[rolaf]

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.