Linkvariationen von Maze55, 15.10.2013 11:29

Linkvariationen

Maze55 15.10.2013 11:29

Vielen Dank für deine Antwort, aber ich bin echt nooooob - erklär mir das bitte etwas genauer.

Ja, man muss ihn nur noch verwenden, ...

Wie geht das denn?

...und zwar in deinen CSS-Definitionen, die du hoffentlich an zentraler Stelle (im Idealfall separate Datei) gesammelt und nicht per style Attribut in jedes Element geklatscht hast.

Leider ist zweiteres der Fall! ^^ Wieso ist ersteres besser und wie kann ich die Attribute in eine css-Datei auslagern und diese css-datei dann ansprechen?

Ich klatsch hier einfach mal meinen ganzen code rein, damit es für euch leichter ist mir konkret zu helfen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<style type="text/css">

body {
background-image: url();
}
#container {
height: 720px;
width: 1500px;
background-color: #FFF;
}
img {
}
#boxes {
height: 400px;
width: 150px;
position: absolute;
margin-top: 100px;
margin-right: 0px;
margin-left: 1300px;
margin-bottom: 10px;
left: -13px;
top: 211px;
}
#box1 {
height: 100px;
width: 100px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-align: center;
position: fixed;
background-color: #C60000;
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
margin-top: 25px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 20px;
}
#container #boxes #box2 {
height: 100px;
width: 100px;
margin-right: 10px;
margin-left: 20px;
margin-top: 40px;
position: fixed;
}
box2 {
height: 100px;
width: 100px;
margin-top: 70px;
margin-right: 10px;
margin-left: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 24px;
color: #FFF;
background-color: #C60000;
}
.box2 {
background-color: #C60000;
}
#box2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
background-color: #C60000;
height: 100px;
width: 100px;
margin-top: 70px;
margin-right: 10px;
margin-left: 20px;
}
#box3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 50px;
color: #FFF;
background-color: #C60000;
height: 100px;
width: 100px;
margin-top: 30px;
margin-right: 10px;
margin-left: 20px;
position: fixed;
}
#container p img {
}
img {
}
#logo {
position: fixed;
}
#boxlinks {
height: 800px;
width: 50px;
float: right;
}
#boxlinks {
height: 479px;
width: 55px;
position: absolute;
top: 236px;
left: 183px;
}
#home {
height: 120px;
width: 120px;
position: absolute;
left: 238px;
top: 236px;
}
#topbox {
height: 26px;
width: 998px;
position: absolute;
left: 398px;
top: 269px;
background-color: #7B7D7B;
font-family: Arial, Helvetica, sans-serif;
}
#logo {
height: 100px;
width: 100px;
position: absolute;
left: 48px;
top: 46px;
}
#leftmenue {
height: 100px;
width: 139px;
position: absolute;
left: 240px;
top: 353px;
}
#leftmenue {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#centerbox {
height: 320px;
width: 874px;
position: absolute;
left: 398px;
top: 324px;
background-color: #FFFFFF;
}
#sign {
height: 18px;
width: 203px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
left: 990px;
top: 711px;
}
#welcome {
height: 155px;
width: 438px;
position: absolute;
left: 468px;
top: 413px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFF;
visibility: inherit;
}
#container #welcome p {
}
.toptable {
position: absolute;
}
#tablecontent {
height: 62px;
width: 759px;
position: absolute;
left: 469px;
top: 252px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: bold;
}
a:hover {
color: #FFFFF;
text-decoration: none;
}
a:link {
text-decoration: none;
color: #000;
}
a:visited {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
#textfenster {
position: absolute;
left: 470px;
top: 326px;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
width: 732px;
height: 385px;
line-height: normal;
}

</style>
<style type="text/css">
a:hover {
color: #ffffff;
}
</style>
</head>

<body>
<div id="welcome">
  <p>Willkommen!</p>
  <p>Welcome!</p>
  <p>Bienvenido! </p>
</div>
<p> </p>
<div id="container">
  <div id="logo"><img src="logo.png" width="700" height="258" /></div>
  <div id="boxlinks"><img src="boxlinks.png" width="50" height="467" /></div>
  <div id="topbox"></div>
  <p> </p>
  <p> </p>
  <div id="boxes">
    <p><img src="box1.png" width="110" height="118" /></p>
    <p><img src="box2.png" width="110" height="115" /></p>
    <p><img src="box3.png" width="110" height="115" /></p>
</div>
  <div id="home"><a href="index.html" target="_self"><img src="bhome.png" width="150" height="65" /></a></div>
  <div id="leftmenue">
    <table width="134" border="0" cellspacing="5">
      <tr>
        <td>360° Panroama View</td>
      </tr>
      <tr>
        <td>Bildergalerie</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td>Loggia am Stadthaus</td>
      </tr>
      <tr>
        <td>Heinrich-Lübcke-Ufer</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td>Japanische Botschaft</td>
      </tr>
      <tr>
        <td>Metro Leverkusen</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td>Bonnox</td>
      </tr>
      <tr>
        <td>Basecamp</td>
      </tr>
      <tr>
        <td> </td>
      </tr>
      <tr>
        <td><a href="impressum.html" target="_self">Impressum</a></td>
      </tr>
    </table>
  </div>
  <div id="centerbox"><img src="centerbox.png" width="874" height="379" /></div>
  <div id="sign">2013©Marcel Maurice Vega Valenciano</div>
  <div id="tablecontent">
    <table width="733" border="0" cellspacing="20">
      <tr>
        <td height="20"><div align="center"><a href="profil.hmtl" target="_self">Profil</a></div></td>
        <td><div align="center"><a href="leistungen.html" target="_self">Leistungen</a></div></td>
        <td><div align="center"><a href="projekte.html" target="_self">Projekte</a></div></td>
        <td><div align="center"><a href="referenzen.html" target="_self">Referenzen</a></div></td>
        <td><div align="center"><a href="kontakt.html" target="_self">Kontakt</a></div></td>
      </tr>
    </table>
  </div>
  <div id="textfenster">
    <p> </p>
    <p><strong>Willkommen auf unserer Website<br />
      <br />
      <br />
    </strong>Hier informieren wir Sie über unser Leistungsspektrum und aktuelle Projekte.<br />
    <br />
    <strong>Qualiät, Zuverlässigkeit und Transparenz</strong> - das sind unsere Markenzeichen.<br />
    <br />
    Wir haben uns schon in vielen anspruchsvollen Prestigeobjekten bewährt und stehen für Planungssicherheit und Kompetenz.<br />
    <br />
    Gerne realieren wir auch Ihr Bauprojekt. Setzen Sie sich mit uns in Verbindung und wir werden Sie gerne beraten.<br />
    <br />
    Ihr Andreas Henkel</p>
  </div>
</div></body>
</html>

Im Endeffekt geht es darum, das alle Links in #leftmenue schwarz bleiben sollen. Alle anderen Links sollen einen Rollover-Effekt haben und sich weiss färben.

Schon mal danke für eure Hilfe!

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Maze55: Linkvariationen

Beitrag lesen

Linkvariationen

Linkvariationen