vor einiger Zeit habe ich eine E-Mail erhalten mit folgender Frage:
Ich habe auch auf Deiner Seite das entdeckt, was mich vielleicht weiter bringen würde.
Könntest Du mir einen Codeschnoipsel Deines css überlassen, in der das Login und die Suche farblich angepasst sind.
Ich wäre Dir da sehr sehr dankbar. Ich versuche gerade mein erstes Internetprojekt zu gestalten und hänge etwas in den Seilen. Ich bearbeite gerade das CSS von Round.
Ich würde mich sehr über eine Nachricht von Dir freuen.
Liebe Grüsse
Michael
Die Seite um die es ging ist daniel.fuhrmannek.de.
Meine Antwort darauf war:
Hallo Michael,
ich weiss leider nicht wie gut dein wissen in css und html ist, deshalb mache ich es einfach mal eswas ausführlicher.
<!----- Ausschnitt aus der index.php mit dem Suchfeld Teil in meinem Template -------->
<div class="search">
<?php if(SHOW_SEARCH) { /* Wird nur angezeigt wenn die suche eingeschaltet ist */ ?>
<form name="search" action="<?php echo WB_URL; ?>/search/index<?php echo PAGE_EXTENSION; ?>" method="post">
<input type="text" name="string" />
<input class="button" type="submit" name="submit" value="Suchen" />
</form>
<?php } ?>
</div>
<!----- Ausschnitt ENDE ---->Wie Du gut sehen kannst habe ich um das Suchfeld ein div-Tag gebaut, das mit einer Klasse search versehen ist.
Eben so hat das input-Tag mit dem Button eine Klasse button bekommen.
über diese beiden Klasse formatiere ich das Feld und den Button im css.
<!----- Ausschnitt meiner CSS-Datei in dem das Suchfeld formatiert wird ----->
div.search {
padding:5px;
}
input, option, select, textarea {
border: 2px solid #545454;
color: #000000 ;
background-color: #b9b9b9;
font-size:12px;
font-weight:bold;
}
input.button {
font-size:13px;
font-weight:bold;
padding-left:5px;
padding-right:5px;
background-color: #b9b9b9;
border:2px solid #545454;
}
input.button:hover {
background-color: #545454;
}
<!----- Ausschnitt ENDE ---->Hier passiert folgenden:
in div.search Wird der Abstand um das DIV-Tag herum auf 5 Pixel festgelegt.
div.search besagt dabei, dass alle div-Tags mit einer Klasse search sich so verhalten sollen.
input, option, select, textarea
Hier werden alle input, option, select und textarea Tags im gesammte Seitensystem formatiert.
Wenn Du möchtest, dass nur das suchfeld eine bestimmte Formatierung erhält, dann soltest Du
z.B.
div.search input { ..... angeben. dann würde nur das input-Tag in allen div-Tags mit der klasse search formatiert werden.
Bei mir wird in input, option, select, textarea folgendes formatiert:
border: 2px solid #545454;
--> Ein Rand mit solider Linie (also nicht gepunktet oder so) mit 2 Pixel Dicke und der Farbe #545454
color: #000000 ;
--> Die farbe des Textes
background-color: #b9b9b9;
--> die Hintergrundfarbe
font-size:12px;
--> die Schriftgrösse
font-weight:bold;
--> fette schrift
Bei input.button werden alle input-Tags, die eine Klasse Button haben formatiert
und input.button:hover definiert das verhalten von input-Tags mit der Klasse button, wenn die maus darüber ist.
in meinem fall wechselt die farbe. (funktioniert nicht im IE)
Soviel dazu.
Jetzt noch ein paar allgemeine CSS Dinge:
Normale HTML-Tags werden in CSS folgendermaßen formatiert:
HTML:
<h1>Überschrift</h1>CSS:
h1 {
font-size:14px;
font-weight:bold;
color: #ff0000;
}Folgendes passiert: im HTML-Code hast Du ein H1-Tag und im CSS wird festgelegt, dass dieses eine Schriftgrösse von 14 Pixel bekommen soll die fett ist und bitte in roter Farbe.
Klassen:
Klassen in HTML werden in den benötigten Tags mit class="Klassenname" angegeben.
Du möchtest in einer Tabelle alle Tabellenzellen formatieren. Dafür hast Du 2 Möglichkeiten.
1.:
HTML:
<table>
<tr>
<td class="zellen">Tabellenzelle 1</td>
<td class="zellen">Tabellenzelle 2</td>
</tr>
</table>CSS:
.zellen {
background-color: #00ff00;
}
Hier habe ich für jede Zelle die gleiche Klasse vergeben und in CSS eine grüne Hintergrundfarbe formatiert.
.zelle besagt hierbei, dass alle Klassen (egal welche), die zelle heissen so formatiert werden.
genauer wäre natürlich td.zelle, falls Du irgendwo nocheinmal eine Klasse zelle verwenden möchtest.
Du siehst also, Klassen werden in css immer mit einem . (Punkt) angegeben.
Um Quelltext zu spaaren kannst Du die Tabelle natürlich auch so formatieren:2.:
HTML:
<table class="zellen">
<tr>
<td>Tabellenzelle 1</td>
<td>Tabellenzelle 2</td>
</tr>
</table>CSS:
table.zellen td {
background-color: #00ff00;
}
Hier haben die Zellen keine Klasse, aber das Table-Tag.
Auch im CSS hat sich etwas geändet. Du sagst sozusagen, formatiere mir die Tabelle mit der Klasse zelle und zwar nur alle td-Tags da drin.
Wenn Du um Deine Tabelle z.B. ein Div-Tag hättest, dass z.B. eine Klasse xyz hat, dann könnte die Formatierung im CSS auch so aussehen:
div.xyz table td {
background-color: #00ff00;
}Also, CSS ist doch eigentlich ganz einfach, oder?
Zusammenfassend kann man sagen, dass mehrere und verschiedene Angaben, die gleich formatiert werden sollen durch , (Komma) getrennt angegeben werden und wenn irgendetwas formatiert werden soll, was keine eigene Klasse hat, dann sucht man sich einfach ein ausserhalb liegendes Tag und formatiert dieses indem man das gewünschte tag einfach daran hängt.
Jetzt gibt es auch noch IDs
eine ID wird in HTML als id="idbezeichnung" formatiert und in CSS wird eine # (Raute) verwendet anstelle eines punktes. Ansonsten ist die formatierung gleich.
IDs sollten aber in einer HTML-Seite nur ein einziges mal verwendet werden, Klassen können öfter benutzt werden.
Ich hoffe ich konnte Dir etwas weiterhelfen.
Weil eine Email ja keine grosse Masse an Leuten erreicht, dachte ich mir hier ist ihr Inhalt besser aufgehoben.
