Css Problemchen... - Übersicht schaffen

[Julian Ulrich]

Hallo,

Wenn ich mit Css arbeite, dann lautet mein Motto: "Lieber probieren, als studieren".
Das funktioniert auch ganz gut und meist kommt was nettes dabei raus.

Leider war das diesmal nicht ganz so:

CODE <div class="header">
 <h1 id="title"><a href="index.php"><img src="headerneu.jpg" alt="DerWebmaster - Webmaster Tricks, Tutorials, Links" /></a></h1>
 <div id="menu"> <a  href="index.php">STARTSEITE</a><a href="news.php">NEWS</a><a href="artikel.php">ARTIKEL</a><a href="verzeichnis.php">VERZEICHNIS</a><a href="lexikon.php">LEXIKON</a><a href="linktipps.php">LINKTIPPS</a>
 </div>
 <div style="background-color: #FA7821; padding: 5px; border-top: 1px dashed #ffffff;">
   <div class="menu2"><a href="index.php">Startseite</a> »</div>
 </div>
 <div id="content">    <p><a href="index.php">»Internet</a>
     dewdwedewde</p>
<a href="javascript:history.back();">Zurück</a>
 </div>
 <div style="background-color: #F94F06; border-bottom: 1px dashed #ffffff; padding-top: 5px;"></div>
 <div style="background-color: #FA7821; border-bottom: 1px dashed #ffffff; padding: 5px;">
   <div class="menu2"><a href="impressum.php">»Impressum</a> <a href="kontakt.php">»Kontakt</a>
     <a href="presse.php">»Presse</a> <a href="sitemap.php">»Sitemap</a>
     || <a href="http://www.wcheck.com" target="_blank">Geld</a> | <a href="http://www.iralo.de" target="_blank">Iralo</a>
     | <a href="http://www.computer-tipps.net" target="_blank">XP Tipps</a></div>
 </div>
 <div style=" background-image: url(bg.gif); border-top: 2px solid #000000;">
     </div>
 <div style="position:absolute;left:105%; top:40px; margin:0px auto;">
cdscdscsd
 </div>
</div>



CODE /* CSS Document */
body
{
font-family:Verdana;
font-size:12px;
background-color:#efdfd6;
background-image: url(bg.gif);
background-repeat:repeat;float:left;
}

h1 {font-size:18px;color:#000000;margin:0px;}
h2 {font-size:14px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin-top:0px;}


a:link{color:#000;text-decoration:none;font-weight:bold;}
a:visited{color:#000;text-decoration:none;font-weight:bold;}
a:hover{color:#fff;text-decoration:underline;font-weight:bold;}
a:active{color:#fff;text-decoration:underline;font-weight:bold;}

#menu2 a:link, a:visited {
 color:#000000;
 text-decoration:none;
}

#menu2 a:hover, .menu2 .aktiv {
 text-decoration:underline;
 color:#000000;
}


#menu a:link, #menu a:visited {
 color:#000000;
 text-decoration:none;
padding:10px;
background-color:#FA7821;
}

#menu a:hover, #menu .aktiv {
background-color:#003366;
 text-decoration:underline;
 padding:10px;
 color:#ffffff;
}


/* Die Titelzeile */
#title {
height:120px;
padding:0px;
background-image: url(verlauf.jpg);
border-bottom:1px solid #000000;
}

/* Das Menü */
#menu {
color:#ffffff;
background-color:#FA7821;
text-align:left;
padding:10px 0px;
}

/* Der Inhalt */
#content {
border-top:1px solid #000000;
background-color:#e7d3bd;
padding:5px;
color:#000000;
}

.header {
position:absolute;left:0px; top:0px; width:80%;
margin:0px auto; text-align:left;
border-right:solid 1px #ffffff;
}

img {
border: 0;
}


Nun funktioniert z.B. der hover von normalen Links nicht...
Außerdem ist alles etwas seltsam und umständlich, oder?

Bitte um Hilfe!
Was soll ich optimieren?

Hier übrigens die Seite (Testphase&#33:
http://www.wcheck.com/derwebmasterneu/

mfg, julian

 

[Jörg Kruse]

QUOTE (Julian Ulrich @ Di 24.5.2005, 21:49) Nun funktioniert z.B. der hover von normalen Links nicht...

In welchem Browser? Bei mir funktionieren die Hover Effekte

 

[Kooistra]

Bei mir auch - Firefox mit XP.

 

[Julian Ulrich]

Ja, die im Menü funktionieren perfekt.
Aber geh mal auf "Internet" im Content.

mfg, julian

 

[Jörg Kruse]

Auch bei dem Link gibt es einen Hover Effekt (weiß + unterstrichen)

 

[Guest]

im ie 6.x und nn funktionierts auch

gruss

 

[Guest]

QUOTE (Julian Ulrich @ Di 24.5.2005, 20:49)

h2 {font-size:14px;color:#000000;}
h3 {font-size:14px;color:#000000;}
p {margin-top:0px;}



statt dessen kann man auch schreiben:

h2, h3 {font-size:14px;color:#000000;}

aber ob's das bringt?

Sonst schau doch mal bei http://www.w3.org/TR/REC-CSS2/syndata.html
Ist ganz interessant.

gruss

 

[Julian Ulrich]

Ach ja plötzlich funktioniert es, hat man aber schon einmal drauf geklickt, geht der hover Effekt nicht mehr bei einem erneuten Klick. Was muss ich ändern? Einfach das a:visited wegstreichen?

 

[Joel]

Julian

Bin mir nicht sicher, aber etvl. solltest du visited vor dem hover definieren?

 

[Jörg Kruse]

An dieser Stelle geht es recht durcheinander:

QUOTE ("Code&quot
#menu2 a:link, a:visited {
color:#000000;
text-decoration:none;
}

#menu2 a:hover, .menu2 .aktiv {
text-decoration:underline;
color:#000000;
}



Zweimals #menu2, einmal .menu2

Letzteres ist wohl richtig:


CODE
<div class="menu2">



und ".aktiv" sollte wohl eigentlich "a:active" heißen

?

 

[Julian Ulrich]

So nun schaut es gut aus, habe einfach a:menu2 ganz weggelassen und so greift die Standardlinkformatierung auch im Footer - passt!

Der Quellcode hat auch eine Schlankheitskur erhalten

--> alles in die Css Datei ausgelagert.

Danke!

 

[Kooistra]

Jo, geht jetzt alles (Firefox und XP).