✔ Links

[oldputz1990]

Folgendes:

Das Menü:

<div class="menu">
			<a href="startseite.html" class="menu2">Home</a> 
			<a href="login.html" class="menu2">Login</a> 
			<a href="registrieren.html" class="menu2">Registrieren</a> 
			<a href="team.html" class="menu2">Team</a> 
			<a href="links.html" class="menu2">Links</a> 
			<a href="fotos.html" class="menu2">Fotos</a> 
			<a href="termine.html" class="menu2">Termine</a> 
			<a href="nickpages.html" class="menu2">Nickpages</a> 
			<a href="einstellungen.html" class="menu2">Einstellungen</a> 
			<a href="nachrichten.html" class="menu2">Nachrichten</a> 
		</div>

Hier die CSS Sachen:

.menu{
	text-align: center;
	padding-top: 125px;
	}
	
	.menu2{
	text-decoration: none;
	color: black;
	padding: 5px;
	margin-top: 125px;
	font-size: 13px;
	}	
	.menu2:visited{
	text-decoration: none;
	color: black;
	padding: 5px;
	margin-top: 125px;
	font-size: 13px;
	}	
	.menu2:hover{
	font-weight:bold;
	text-decoration: none;
	color: black;
}

Jetzt möchte ich dass ich nicht immer bei einem Link "class="link" dazuschreiben muss.

d.h.
ein normaler Link soll so aussehen:
<a href="#"> LINK </a>

Nun habe ich in die CSS Datei noch was dazugeschrieben:

a{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	background-color: #cccccc;
	text-decoration: none;
}

a:visited{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	background-color: #cccccc;
		text-decoration: none;
}

a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: black;
	background-color: #cccccc;
		text-decoration: underline;
}

Jetzt habe ich das Problem, dass das Menü so formatiert wird, wie alle anderen Links auch (background-color: #cccccc

WIe kann ich das ändern?


DANKE!

 

[Maik]

Hi,

du könntest die Regeln auf das umschliessende Element .menu beschränken - also:

.menu a:link, .menu a:visited { /* CSS-Formatierungen */ }
.menu a:hover { /* CSS-Formatierungen */ }

 

[oldputz1990]

Danke für deine Antwort!

Ich habe das gerade ausprobiert...

Funktioniert leider nicht, weil dann das ganze Menü verrutscht!

das "padding-top: 125px" funktioniert irgentwie dann nicht mehr.

 

[Maik]

Ich weiß jetzt nicht, wie du das probiert hast, aber bei mir verrutscht das Menü nicht:

.menu{
text-align: center;
padding-top: 125px;
}

.menu a:link, .menu a:visited {
text-decoration: none;
color: black;
padding: 5px;
margin-top: 125px;
font-size: 13px;
}

.menu a:hover{
font-weight:bold;
text-decoration: none;
color: black;
}

<div class="menu">
                        <a href="startseite.html">Home</a>
                        <a href="login.html">Login</a>
                        <a href="registrieren.html">Registrieren</a>
                        <a href="team.html">Team</a>
                        <a href="links.html">Links</a>
                        <a href="fotos.html">Fotos</a>
                        <a href="termine.html">Termine</a>
                        <a href="nickpages.html">Nickpages</a>
                        <a href="einstellungen.html">Einstellungen</a>
                        <a href="nachrichten.html">Nachrichten</a>
</div>

Was bislang nicht greift, ist die margin-top:125px-Angabe für die Links, da sie derzeit noch als "Inline-Elemente" fungieren.

 

[oldputz1990]

Ich habe vl. nicht den Vollständigen Quelltext geposted:

<div style="width:750px;margin:0px auto;text-align:left;">
      <div id="header">
		<div class="menu">
			<a href="startseite.html">Home</a> 
			<a href="login.html">Login</a> 
			<a href="registrieren.html">Registrieren</a> 
			<a href="team.html">Team</a> 
			<a href="links.html">Links</a> 
			<a href="fotos.html">Fotos</a> 
			<a href="termine.html">Termine</a> 
			<a href="nickpages.html">Nickpages</a> 
			<a href="einstellungen.html">Einstellungen</a> 
			<a href="nachrichten.html">Nachrichten</a> 
		</div>
      </div>

	#header{
	width: 750px;
	height: 150px;
	background-image: url(../images/design/header.png);
	background-repeat: no-repeat;
	background-color: #e1e1e1e;
	}

.menu{
text-align: center;
padding-top: 125px;
}

.menu a:link, .menu a:visited {
text-decoration: none;
color: black;
padding: 5px;
margin-top: 125px;
font-size: 13px;
}

.menu a:hover{
font-weight:bold;
text-decoration: none;
color: black;
}

 

[Maik]

Nicht nur vielleicht - aber es ändert sich dadurch nichts an meiner letzten Aussage - siehe Anhang.

Du solltest mal bei der Hintergrundfarbendefinition für den Header die 7.Stelle des Hex-Codes entfernen, dann klappt's auch mit der Hintergrundfarbe.

 

[oldputz1990]

ah!

habs schon!

DANKE