1. Lieber Benutzer,

    Du musst bei uns registriert sein, um an den Diskussionen teilzunehmen. Melde dich jetzt an - kostenfrei und unverbindlich. Und stelle Deine eigenen Fragen oder gib uns hilfreiche Antworten

CSS Einbindung

Dieses Thema im Forum "CSS" wurde erstellt von Piiit, 6 Mai 2009.

  1. Piiit

    Piiit Neues Mitglied

    Registriert seit:
    6 Mai 2009
    Beiträge:
    2
    Punkte für Erfolge:
    0
    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">&nbsp;</td>
    <td width="643" height="434" align="center" rowspan="12" bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000" bgcolor="#FFFFFF">&nbsp;</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:
    <!--
    A.menulink {
    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;
    }
    -->
    </style>
    <table border="0" width="110" align="center">
    <tr>
    <td><a href="#" class="home">&nbsp;Home</a></td>
    </tr>
    <tr>
    <td><a href="#" class="ubermich">&nbsp;Über mich</a></td>
    </tr>
    <tr>
    <td><a href="#" class="zucht">&nbsp;Zucht</a></td>
    </tr>
    <tr>
    <td><a href="#" class="hengste">&nbsp;hengste</a></td>
    </tr>
    <tr>
    <td><a href="#" class="impressum">&nbsp;Impressum</a></td>
    </tr>
    <tr>
    <td><a href="#" class="ausbildungsstall">&nbsp;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
     
    Werbung: Jetzt registrieren, damit diese Werbung verschwindet
  2. prm

    prm Aktives Mitglied

    Registriert seit:
    30 Juni 2008
    Beiträge:
    2.062
    Punkte für Erfolge:
    38
    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 (text):
    1. A.menulink {
    richtig:
    Code (text):
    1. a.menulink:link {
    Wenn du mit Klassen arbeitest, dann müssen sie auch den Bezug über HTML bekommen:

    Code (text):
    1. <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.
     
  3. Piiit

    Piiit Neues Mitglied

    Registriert seit:
    6 Mai 2009
    Beiträge:
    2
    Punkte für Erfolge:
    0
    Hallo,
    erstschonmal danke für die schnelle Antwort.

    CSS sieht jetzt so aus:

    <!--
    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;
    }
    -->
    </style>
    <table border="0" width="110" align="center">
    <tr>
    <td><a href="#" class="home">&nbsp;Home</a></td>
    </tr>
    <tr>
    <td><a href="#" class="ubermich">&nbsp;Über mich</a></td>
    </tr>
    <tr>
    <td><a href="#" class="zucht">&nbsp;Zucht</a></td>
    </tr>
    <tr>
    <td><a href="#" class="hengste">&nbsp;hengste</a></td>
    </tr>
    <tr>
    <td><a href="#" class="impressum">&nbsp;Impressum</a></td>
    </tr>
    <tr>
    <td><a href="#" class="ausbildungsstall">&nbsp;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
     
    Zuletzt bearbeitet: 7 Mai 2009
  4. iplay

    iplay Neues Mitglied

    Registriert seit:
    4 November 2008
    Beiträge:
    116
    Punkte für Erfolge:
    0
    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 (text):
    1.  
    2. [SIZE=2][COLOR=black]A.menulink:link {
    3.  display: block;
    4.  width: 220px;
    5.  text-align: center;
    6.  text-decoration: none;
    7.  font-family: Arial;
    8.  font-size: 10px;
    9.  color: #000000;
    10.  font-weight: bold;
    11.  background-color: #BDAF80;
    12.  border-style: ;
    13.  border-width: px;
    14.  border-color: #;
    15.  }
    16.  A.menulink:hover {
    17.  border-style: ;
    18.  border-width: px;
    19.  border-color: #;
    20.  color: #000000;
    21.  background-color: #FF0000;
    22.  }[/COLOR][/SIZE][COLOR=black]
    23. [/COLOR]
    muss richtig so sein:

    Code (text):
    1.  
    2. [SIZE=2][COLOR=black]a.menulink:link {
    3.  display: block;
    4.  width: 220px;
    5.  text-align: center;
    6.  text-decoration: none;
    7.  font-family: Arial;
    8.  font-size: 10px;
    9.  color: #000000;
    10.  font-weight: bold;
    11.  background-color: #BDAF80;
    12.  border-style: ;
    13.  border-width: px;
    14.  border-color: #;
    15.  }
    16.  a.menulink:hover {
    17.  border-style: ;
    18.  border-width: px;
    19.  border-color: #;
    20.  color: #000000;
    21.  background-color: #FF0000;
    22.  }[/COLOR][/SIZE][COLOR=black]
    23. [/COLOR]
    In deiner Tabelle (Tabellenlayout Bäh!!!:| --> wie es sein sollte siehe prm) muss du deine klasse ".menulink" eintragen.

    Deine:

    Möglickeit:

    Liebe Grüße [​IMG]

    iplay
     
  5. prm

    prm Aktives Mitglied

    Registriert seit:
    30 Juni 2008
    Beiträge:
    2.062
    Punkte für Erfolge:
    38
    So ist das auch falsch, denn es ist ja keine Klasse "home menulink" usw. definiert.

    Es muss bei jedem Link heißen:
    Code (text):
    1. <a href="#" class="menulink">Home</a>
    2. <a href="#" class="menulink">Über mich</a>
    Zur Sicherheit lass im CSS-Teil auch mal sämtliche Eigenschaften ohne Werte komplett weg.
     
  6. iplay

    iplay Neues Mitglied

    Registriert seit:
    4 November 2008
    Beiträge:
    116
    Punkte für Erfolge:
    0
    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
    [​IMG]

    iplay
     
  7. Efchen

    Efchen Guest

    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.
     

Diese Seite empfehlen