PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : mehrere CSS-Dateien


Crazy Aimer
2002-11-29, 16:08:44
Hi!
Ich möchte auf meiner Seite (PHP) mehrere CSS-Dateien einbinden.
Dazu hab ich in den Kopf der "index.php" geschrieben:

<link rel=stylesheet type="text/css" media="screen" href="styles/main.css">
<link rel=stylesheet type="text/css" media="screen" href="styles/menu.css">

Das Menu befindet sich in einer externen Datei und wird per include() eingefügt. Dort will ich die Links anders gestalten als auf der Rest der Page. Muss ich die Link-Styles dann in der Datei direkt definieren? Ich wollte das so machen, dass ich in der Datei "menu.css" eine Klasse erstellen...

.menu {
a:link { color:#000000; text-decoration:none; },
a:visited { color:#000000; text-decoration:none; },
a:active { color:#000000; text-decoration:none; },
a:hover { color:#000000; text-decoration:underline; }
}

... und diese dann im Menu bei der Gestaltung der Links verwenden:

print "<div class=\"menu\">home :: <a href=\"$PHP_SELF?page=news\">news</a></div>";


Hab ich da einen Fehler in meinem Syntax oder geht das ganz einfach nicht? Normalerweise müsste man doch Pseudoformate in Klassen definieren können oder? *ratlos*

plz help :)

mictasm
2002-11-29, 20:41:08
Was auch geht, ist die Definition der Klassen in dieser Form.

a.menu:link {....}

Und dann im Link -wie geschrieben- die Klasse definieren.

Du brauchst dann nur eine Datei. Habe ich schon mehrmals benutzt und funktionierte bei mir gut.

MIC

Wudu
2002-11-30, 11:46:29
genau du schreibst einfach verschiedene klassen, damit kannst du dann dein design beliebig anpassen, mit nur einem (wenns zu lang wird, sind mehrere ned schlecht).

zB. hie ein kleiner ausschnitt aus einem meiner CSS files, ich habe die Seite so aufgebaut das jede section ein eigenes Layout hat. jetzt kann ich mittels klassennamen alles schön anfärbeln und umstylen!

btw: werte die ich hier nicht definiere, werden global übernommen!

/*
* Colors for Sections
*/
/* home */
.home
{
color: #D3DA7E;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

TR.home
{
background-color: #D3DA7E;
}

TD.home
{
background-color: #D3DA7E;
}

TD.home3d
{
background-color:#E6EAC2;
}

/* about */
.about
{
color: #9191FF;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #FFFFFF;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

TR.about
{
background: #9191FF;
}

TD.about
{
background: #6465FF;
}

TD.about3D
{
background: #C6C9FF;
}

Crazy Aimer
2002-11-30, 18:19:57
okay das mit den klassen iss mir klar
aber wie binde ich die ein?

Wudu
2002-11-30, 19:38:21
abspeichern in style.css dann


<link rel=stylesheet type="text/css" media="screen" href="/css/style.css">


dann im HTML usen


<table>
<tr class=home>
<td><span class=about>blablabla</span></td>
</tr>
</table


class=klassenname == Zauberwort für dich!

mictasm
2002-12-01, 05:27:18
Das class="klasse" kann auch im td-Tag stehen, dann sparst du dir das span.

Und wenn schon, dann bitte mit Anführungsstrichen. Ohne dies dürfen eigentlich nur ganze Zahlen aufgeführt werden (z.B. width=160). In neueren HTML-Versionen eigentlich nix mehr. *senfdazugeb*

MIC

Wudu
2002-12-01, 13:17:12
jo, kommt drauf an wie du das definierst, der <span> tag muss ned sein, aber das hängt auch schwer von den Klassen ab, im normalfall musst man heute keine "" mehr machen bei den Klassen, aber wenn sie dabei sind machtz auch nix!

Crazy Aimer
2002-12-01, 20:01:13
ich probiers gleich mal aus ... danke leude :D

Rampage
2002-12-09, 20:39:54
Im Prinzip kannst du auch folgendes sagen:

a.menu:link { color:#000000; text-decoration:none; },
a.menu:visited { color:#000000; text-decoration:none; },
a.menu:active { color:#000000; text-decoration:none; },
a.menu:hover { color:#000000; text-decoration:underline; }

Dann gilt der Link-Style nur für ".menu"

Crazy Aimer
2002-12-09, 22:03:54
ahh danke das iss natürlich dann spezieller progtrammierbar ... danke