CSS Einbindung

Druckbare Version

06.05.2009, 21:56
Piiit

CSS Einbindung

Hallo,
ich will mir eine Homepage erstellen und für das Menü ein onmouse Effekt mit CSS erstellen. Ich habe versucht, wie hier schon mehrfach beschrieben die Datei folgendermaßen einzubinden, aber es tut sich nichts.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>Neue Seite 1</title>
<link rel="stylesheet" type="text/css" href="css/style.css" title="Standard-Layout">
</head>
<body bgcolor="#BDAF80">
<div align="center">
<center>
<table border="2" width="819" height="623" bordercolorlight="#FF0000" bordercolordark="#FF0000" bordercolor="#FF0000">
<tr>
<td width="825" height="177" align="center" colspan="2" bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000"></td>
</tr>
<tr>
<td width="182" height="156" align="center" bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000" bgcolor="#BDAF80"> </td>
<td width="643" height="434" align="center" rowspan="12" bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="182" height="1" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top">Home</td>
</tr>
<tr>
<td width="182" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top" bgcolor="#BDAF80" height="1"><b><font face="Arial" size="2"><img border="0" src="img/roterstrich.JPG"></font></b></td>
</tr>
<tr>
<td width="182" height="19" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"></td>
</tr>
<tr>
<td width="182" height="1" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"><b><font face="Arial" size="2"><img border="0" src="img/roterstrich.JPG"></font></b></td>
</tr>
<tr>
<td width="182" height="19" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"></td>
</tr>
<tr>
<td width="182" height="5" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"><b><font face="Arial" size="2"><img border="0" src="img/roterstrich.JPG"></font></b></td>
</tr>
<tr>
<td width="182" height="26" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"></td>
</tr>
<tr>
<td width="182" height="5" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"><b><font face="Arial" size="2"><img border="0" src="img/roterstrich.JPG"></font></b></td>
</tr>
<tr>
<td width="182" height="26" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"></td>
</tr>
<tr>
<td width="182" height="5" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"><b><font face="Arial" size="2"><img border="0" src="img/roterstrich.JPG"></font></b></td>
</tr>
<tr>
<td width="182" height="155" align="center" bordercolor="#BDAF80" bordercolorlight="#BDAF80" bordercolordark="#BDAF80" valign="top"></td>
</tr>
</table>
</center>
</div>
</body>
</html>
Die CSS lautet:

</style>
<table border="0" width="110" align="center">
<tr>
<td><a href="#" class="home"> Home</a></td>
</tr>
<tr>
<td><a href="#" class="ubermich"> Über mich</a></td>
</tr>
<tr>
<td><a href="#" class="zucht"> Zucht</a></td>
</tr>
<tr>
<td><a href="#" class="hengste"> hengste</a></td>
</tr>
<tr>
<td><a href="#" class="impressum"> Impressum</a></td>
</tr>
<tr>
<td><a href="#" class="ausbildungsstall"> Ausbildungsstall</a></td>
</tr>
</table>
Nun weiß ich nicht weiter, da sich nichts ändert.
Wäre super, wenn Ihr mir helfen könnt - bitte in Laiensprache, da ich in diesen Themen blutiger Anfänger bin.
Danke
VG
07.05.2009, 06:23
prm

Wenn der Pfad zur CSS-Datei stimmt, dann sollte das auch grundsätzlich klappen.
Allerdings musst du dann auch die Angaben korrekt vornehmen:

bisher:

Code:

A.menulink {

richtig:

Code:

a.menulink:link {

Wenn du mit Klassen arbeitest, dann müssen sie auch den Bezug über HTML bekommen:

Code:

<a href="#" class="menulink">Link</a>

Siehe Links unterschiedlich gestalten

Wenn du dann schon anfängst, die Seite neu zu erstellen, dann verzichte auf den ganzen Tabellenkram, beschäftige dich zwecks Formatierung mit CSS, schreibe dann konsequenter Weise auch alle Style-angaben in deine CSS-Datei und entsorge Frontpage von deiner Festplatte.
Das ist insgesamt der zwar etwas mühsamere Weg; er wird sich aber allemal lohnen, wenn du dauerhaft Spaß an deiner Seite haben willst.
07.05.2009, 07:32
Piiit

Hallo,
erstschonmal danke für die schnelle Antwort.

CSS sieht jetzt so aus:


</style>
<table border="0" width="110" align="center">
<tr>
<td><a href="#" class="home"> Home</a></td>
</tr>
<tr>
<td><a href="#" class="ubermich"> Über mich</a></td>
</tr>
<tr>
<td><a href="#" class="zucht"> Zucht</a></td>
</tr>
<tr>
<td><a href="#" class="hengste"> hengste</a></td>
</tr>
<tr>
<td><a href="#" class="impressum"> Impressum</a></td>
</tr>
<tr>
<td><a href="#" class="ausbildungsstall"> Ausbildungsstall</a></td>
</tr>
</table>

leider tut sich aber absolut nichts....

Woher weiß das programm eigentlich, wo das menü hinsoll?

Für weitere Hilfe bin ich dankbar
07.05.2009, 08:17
iplay

Das kann auch nicht klappen.
Schau dir noch mal an, was prm geschrieben hat. Er hat es dir schon erklärt.

Aber nochmal:

Deine css:

Code:

A.menulink:link { display: block; width: 220px; text-align: center; text-decoration: none; font-family: Arial; font-size: 10px; color: #000000; font-weight: bold; background-color: #BDAF80; border-style: ; border-width: px; border-color: #; } A.menulink:hover { border-style: ; border-width: px; border-color: #; color: #000000; background-color: #FF0000; }

muss richtig so sein:

Code:

a.menulink:link { display: block; width: 220px; text-align: center; text-decoration: none; font-family: Arial; font-size: 10px; color: #000000; font-weight: bold; background-color: #BDAF80; border-style: ; border-width: px; border-color: #; } a.menulink:hover { border-style: ; border-width: px; border-color: #; color: #000000; background-color: #FF0000; }

In deiner Tabelle (Tabellenlayout Bäh!!!:| --> wie es sein sollte siehe prm) muss du deine klasse ".menulink" eintragen.

Deine:

Zitat:

<table border="0" width="110" align="center">
<tr>
<td><a href="#" class="home"> Home</a></td>
</tr>
<tr>
<td><a href="#" class="ubermich"> Über mich</a></td>
</tr>
<tr>
<td><a href="#" class="zucht"> Zucht</a></td>
</tr>
<tr>
<td><a href="#" class="hengste"> hengste</a></td>
</tr>
<tr>
<td><a href="#" class="impressum"> Impressum</a></td>
</tr>
<tr>
<td><a href="#" class="ausbildungsstall"> Ausbildungsstall</a></td>
</tr>
</table>

Möglickeit:

Zitat:

<table border="0" width="110" align="center">
<tr>
<td><a href="#" class="home menulink"> Home</a></td>
</tr>
<tr>
<td><a href="#" class="ubermich menulink"> Über mich</a></td>
</tr>
<tr>
<td><a href="#" class="zucht menulink"> Zucht</a></td>
</tr>
<tr>
<td><a href="#" class="hengste menulink"> hengste</a></td>
</tr>
<tr>
<td><a href="#" class="impressum menulink"> Impressum</a></td>
</tr>
<tr>
<td><a href="#" class="ausbildungsstall menulink"> Ausbildungsstall</a></td>
</tr>
</table>

Liebe Grüße http://www.html.de/images/icons/icon12.gif

iplay
07.05.2009, 10:27
prm

So ist das auch falsch, denn es ist ja keine Klasse "home menulink" usw. definiert.

Es muss bei jedem Link heißen:

Code:

<a href="#" class="menulink">Home</a> <a href="#" class="menulink">Über mich</a>

Zur Sicherheit lass im CSS-Teil auch mal sämtliche Eigenschaften ohne Werte komplett weg.
07.05.2009, 10:34
iplay

Nicht ganz...

Es kann ja sein, das er klassen mit den Namen "home" "ubermich" ... hat.
Wenns so ist, kann man es so schreiben class="home menulink" ... .
Er nimmt damit die klasse "home" und die klasse "menulink".

Liebe Grüße http://www.html.de/images/icons/icon12.gif

iplay
07.05.2009, 12:14
Efchen

Besser wäre es aber auch der Tabelle (Yuck!) die Klasse "menulink" (oder "menu") zuzuweisen, und die einzelnen Links dann z.B. über "#menulink a" (bzw. "#menu a") anzusprechen. Da muss man nicht so eine lange Klasse bei jedem Link hinschreiben.

Aber es hat mir den Tag gerettet, dass auch prm noch was in bezug auf CSS lernen kann :-) Es ist tatsächlich so, dass man einem Element so mehrere Klassen zuweisen kann, getrennt durch Leerzeichen.