...und es am Ende doch umfärben! (CSS)

_julius · 20.03.2006

Hey Leute,

hab ne Frage: hab ein Menü komplett aus Text bestehend! Selbstverständlich färben sich die Menüelemente nach den globalen Hover etc Einstellungen ein. Ich möchte aber, dass der Text im Menü oben eine andere Farbe hat als die anderen 0815-Links in meiner Seite. Wie kann ich das Menü umfärben und es trotzdem als Link belassen?

Machts gut

Julius

simusch · 20.03.2006

das geht, indem du den menulink speziell definierst.
du hast ja wohl das menu als class definiert (.menu) oder so

dann einfach:

.menu a {....}
.menu a:hover {....}

und für die normalen links

a {....}
a:hover {....}

_julius · 20.03.2006

danke! in firefox klappts nur leider reagiert unser lieber internet explorer schon wieder nicht drauf

was tun?

_julius · 20.03.2006

hat irgendjemand eine idee wie ich den ie auch dort überlisten kann?

msslovi0 · 20.03.2006

Der IE kann zwar vieles nicht, aber das kann er.

Gib mal Code, ohne ist schwer zu sagen, wo du den Fehler hast.

Matt

_julius · 20.03.2006

HTML:

/*Layout beginnt*/

body {
	margin:0px;
	padding:0px;
	background-color:#e2e2e2;
	background-image:url(images/background.jpg);
	background-attachment:fixed;
	background-repeat: repeat-x;
}

#mainframe {
	width:645px;
	height:551px;
	border-bottom:1px;
	border-left:1px;
	border-right:1px;
	border-top:0px;
	border-style:solid;
	border-color:#999999;
	background-color:#FFFFFF;
}

#header {
	background-image:url(images/header.jpg);
	height:102px;
	width:645px;
	}
	
#menu {
	background-image:url(images/menu.jpg);
	background-attachment:scroll;
	background-repeat:repeat-x;
	height:19px;
	width:645px;
	border-bottom:1px;
	border-left:0px;
	border-right:0px;
	border-top:1px;
	border-style:solid;
	border-color:#999999;
	
	}
	

#firstline {
	height:20px;
	background-color:#FFFFFF;
	background-image:url(images/topborder.jpg);
	background-attachment:scroll;
	background-repeat:repeat-x;
	text-align:left;
	}

#content {
	height:396px;
	width:633px;
	background-color:#FFFFFF;
	background-image:url(images/contentbackground.jpg);
	background-attachment:scroll;
	background-position:left bottom;
	background-repeat:no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:left;
	margin: 5px;
	}
	
#bottomborder {
	height:20px;
	width:645px;
}

.menulinks {
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#999999;
	font-size:12px;
	margin-left:5px;
	padding:2px;
}
	
.menurechts {
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:12px;
	margin-left:2px;
	margin-right:5px;
	padding-top: 2px;
}

/*Layout endet*/


/*Formatierungs-Tags beginnen*/

.headline {
	font-size:16px;
	color:#666666;
	}

a:link {
	color: #0079FF;
	text-decoration: none;
}

a:visited {
	color: #0066FF;
	text-decoration: none;
}

/* Menü Formatierung */

.menurechts a {
	color:#666666;
	}
.menurechts a:hover {
	color:#0079FF;
	}
	
.menulinks a {
	color:#999999;
	}
.menulinks a:hover {
	color:#0079FF;
	}

/* Ende Menü Formatierung */

Und natürlich die Seite selbst:

HTML:

<!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=iso-8859-1" />
<meta name="description" content="Die offizielle Webseite der Parkresidenz Klünderberg des Ostseebad Binz auf der Insel Rügen." />
<meta name="keywords" content="Rügen, Webseite, Homepage, Klünderberg, Ostseebad Binz, Nordsee, Ostsee, Wasser, Immobilien, Ferien, Wohnung" />

<!-- TemplateBeginEditable name="doctitle" -->
<title>Bitte Eingeben</title>
<!-- TemplateEndEditable -->
<link href="../design.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>
<div align="center">
		<div id="mainframe">
				<div id="header"></div>
					<div id="menu">
						<div class="menulinks"><a href="#">Impressum</a></div>
						<div class="menurechts">
<a href="#">Home</a> | <a href="#">Anfahrt</a> | <a href="#">Kontakt</a> | <a href="#">Infos</a> | <a href="#">Wohnung</a> | <a href="#">R&uuml;gen</a></div>
		 			 </div>
				<div id="firstline"></div>
		<div id="content"><!-- TemplateBeginEditable name="Inhalt" -->Inhalt<!-- TemplateEndEditable --></div>
		</div>
	</div>
</div>

</body>
</html>

msslovi0 · 20.03.2006

Mach mal

Code:

/* Menü Formatierung */

.menurechts a, .menurechts a:visited {
	color:#666666;
	}
.menurechts a:hover {
	color:#0079FF;
	}
	
.menulinks a, .menulinks a:visited {
	color:#999999;
	}
.menulinks a:hover {
	color:#0079FF;
	}

/* Ende Menü Formatierung */

draus.

Du hast in deiner div-Suppe übrigens irgendwo einen schließenden div zu viel. Und du solltest ernsthaft darüber nachdenken, andere Elemente, die semantisch sinnvoller sind, zu benutzen. Das heilt auch die ausgeprägte divitis.

Du bist ja auf dem richtigen Weg, aber warum machst du nicht

HTML:

<div align="center">

auch mit css?

Matt

_julius · 20.03.2006

zu letzterem: wie schaut die css-alternative zum mittigmachen aus?

hast du gute alternativen zum <div>en?

_julius · 20.03.2006

*LACH*

nachdem ich ein div entfernt habe, dass auch eigentlich nicht hingehört geht das mit dem formatieren des menüs!!! selbst die margin-anpassung der menüelemente geht... geil

aber die frage: ist div nicht schick?

alternativen schauen wie aus?

msslovi0 · 20.03.2006

Mit css zentrieren:

HTML:

body {
  text-align: center;
}

#center {
  margin: 0 auto;
  text-align: left;
}

Das ist doppelt gemoppelt, allerdings bekommen ältere IE-Versionen das ganze sonst nicht gebacken.

Wegen Alternativen zu <div>: Kommt immer drauf an. Für Menüs <ul> und <li>, das habe ich aber heute morgen schon mal geschrieben.

Schau dir mal http://bartelme.at/articles/34/ an.

Matt

_julius · 20.03.2006

ich danke dir, ich werde das an dem Menü umarbeiten! Und das div fürs layout an sich is auch nciht gut? also andere elemente der page wie den header, was soll ich da nehmen?

msslovi0 · 20.03.2006

div's sind nicht generell böse, für die Strukturierung einer Seite sind sie genau das richtige. Wenn es aber semantisch sinnvollere Tags gibt, dann nimmt man die und eben nicht div.

Siehe dazu auch http://www.bs-markup.de/blog/archiv/2006/01/23/divlos-sinnlos/

Matt

_julius · 21.03.2006

danke ich werde dementsprechend die seite mal umfuchsen! ich danke für die hilfe!

dennoch: ich würde gerne die abstände zwischen den wörtern verändern, wie gehe ich da vor?

m0mo · 21.03.2006

mal bei www.css4you.de nachschauen, da stehen so ziemlich alle css eigenschaften schoen unter Themen sortiert. Welche Woerterabstaende willst du veraendern?
Die im Menue? Oder im normalen Text?

bei normalen Text bietet sich word-spacing: an, wuerde es aber nicht benutzen, weiss nicht ob der text dadurch besser lesbar wird.

beim menue musst du eigentlich nur mit margin bei den li Elementen rumbasteln.

Wenn es nicht geholfen haben sollte, dann schreib dein problem nochmal ausfuehrlicher.

mfg
m0mo

_julius · 21.03.2006

doch das hat mir schon groß weitergeholfen nur hab ich ein problem: (wieder)

seitdem ich meine menüs also auf listen umgestellt habe sind die abstände zum zellenrand so klein geworden und nahezu verschwunden. nicht dumm ich bin und deswegen margin-right auf 3px gestellt, was geschieht? er verzieht mir die zelle! warum und vor allem, was tun?

_julius · 21.03.2006

HTML:

<!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=iso-8859-1" />
<meta name="description" content="Die offizielle Webseite der Parkresidenz Klünderberg des Ostseebad Binz auf der Insel Rügen." />
<meta name="keywords" content="Rügen, Webseite, Homepage, Klünderberg, Ostseebad Binz, Nordsee, Ostsee, Wasser, Immobilien, Ferien, Wohnung" />

<!-- TemplateBeginEditable name="doctitle" -->
<title>Bitte Eingeben</title>
<!-- TemplateEndEditable -->
<link href="../design.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>
		<div id="mainframe">
				<div id="header"></div>
					<div id="menu">
						<ul class="menulinks">
						<li><a href="#">Impressum</a></li>
						</ul>
						<ul class="menurechts">
						<li><a href="#">Home</a></li> | 
						<li><a href="#">Anfahrt</a></li> | 
						<li><a href="#">Kontakt</a></li> | 
						<li><a href="#">Infos</a></li> | 
						<li><a href="#">Wohnung</a></li> | 
						<li><a href="#">R&uuml;gen</a></li>
						</ul>
		  </div>
				<div id="firstline"></div>
		<div id="content"><!-- TemplateBeginEditable name="Inhalt" -->Inhalt<!-- TemplateEndEditable --></div>
</div>

</body>
</html>

und die css

HTML:

/*Layout beginnt*/

body {
	margin:0px;
	padding:0px;
	background-color:#e2e2e2;
	background-image:url(images/background.jpg);
	background-attachment:fixed;
	background-repeat: repeat-x;
	text-align: center;
}

#mainframe {
	width:645px;
	height:551px;
	border-bottom:1px;
	border-left:1px;
	border-right:1px;
	border-top:0px;
	border-style:solid;
	border-color:#999999;
	background-color:#FFFFFF;
	margin: 0 auto;
  	text-align: left;
}

#header {
	background-image:url(images/header.jpg);
	height:102px;
	width:645px;
	}
	
#menu {
	background-image:url(images/menu.jpg);
	background-attachment:scroll;
	background-repeat:repeat-x;
	height:19px;
	width:645px;
	border-bottom:1px;
	border-left:0px;
	border-right:0px;
	border-top:1px;
	border-style:solid;
	border-color:#999999;
	
	}
	

#firstline {
	height:20px;
	background-color:#FFFFFF;
	background-image:url(images/topborder.jpg);
	background-attachment:scroll;
	background-repeat:repeat-x;
	text-align:left;
	}

#content {
	height:396px;
	width:623px;
	background-color:#FFFFFF;
	background-image:url(images/contentbackground.jpg);
	background-attachment:scroll;
	background-position:left bottom;
	background-repeat:no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000000;
	text-align:left;
	margin: 10px;
	}
	
#bottomborder {
	height:20px;
	width:645px;
}

.menulinks {
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#999999;
	font-size:12px;
	margin:0px;
	padding:2px;
	list-style:none;
}

.menulinks li {
	display:inline;
	margin-left:2px;
	margin-right:2px;
	}
	
	
.menurechts {
	float:right;
	font-family:Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	font-size:12px;
	margin:1px;
	padding-top:1px;
	page-break-after: always;
	list-style:none;
}

.menurechts li {
	display:inline;
	margin-left:2px;
	margin-right:2px;
	}
	
/*Layout endet*/


/*Formatierungs-Tags beginnen*/

.welcome {
	font-size:24px;
	font-style:italic;
	color:#666666;
	}

.headline {
	font-size:16px;
	color:#666666;
	}

a:link {
	color: #0079FF;
	text-decoration: none;
}

a:visited {
	color: #0066FF;
	text-decoration: none;
}

.bilder {
	border:0px;
	float:right;
	margin:5px;
	}
/* Menü Formatierung */

.menurechts a, .menurechts a:visited {
	color:#666666;
	}
.menurechts a:hover {
	color:#0079FF;
	}
	
.menulinks a, .menulinks a:visited {
	color:#999999;
	}
.menulinks a:hover {
	color:#0079FF;
	}

/* Ende Menü Formatierung */

leider sind die abstände zwischen den strichen und den menüpunkten im IE ungleichmäßig, nennt mich penibel aber das teil ist für einen wichtigen kunden...

msslovi0 · 21.03.2006

Nimm auch hier mal alle Umbrüche und Whitespaces im Quelltext raus.

Matt

2nd · 21.03.2006

Nimm geschützte Leerzeichen:  

Hier der Code:

PHP:

<ul class="menurechts">
<li><a href="#">Home</a></li>&nbsp;|&nbsp;
<li><a href="#">Anfahrt</a></li>&nbsp;|&nbsp;
<li><a href="#">Kontakt</a></li>&nbsp;|&nbsp;
<li><a href="#">Infos</a></li>&nbsp;|&nbsp;
<li><a href="#">Wohnung</a></li>&nbsp;|&nbsp;
<li><a href="#">R&uuml;gen</a></li>
</ul>

Frank

msslovi0 · 21.03.2006

Dank Franks Beispiel erst gesehen: Du kannst natürlich die | nicht hinter den <li> stellen, das führt zu Validierungsfehlern!

Aber selbst Nonbreaking Spaces werden den IE nicht davon abhalten, dir Leerzeichen da reinzuknallen, die du nicht haben willst, solange Umbrüche und Whitespaces im Quelltext innerhalb des <ul> sind.

Matt

_julius · 21.03.2006

das heißt ich soll das in eine zeile tun? bzw eine zeile für alle li's machen? sollte man das im code nicht in mehrere zeilen machen um den überblick zu behalten?

...und es am Ende doch umfärben! (CSS)

_julius

Aktives Mitglied

simusch

Aktives Mitglied

_julius

Aktives Mitglied

_julius

Aktives Mitglied

msslovi0

Aktives Mitglied

_julius

Aktives Mitglied

msslovi0

Aktives Mitglied

_julius

Aktives Mitglied

_julius

Aktives Mitglied

msslovi0

Aktives Mitglied

_julius

Aktives Mitglied

msslovi0

Aktives Mitglied

_julius

Aktives Mitglied

m0mo

Aktives Mitglied

_julius

Aktives Mitglied

_julius

Aktives Mitglied

Anhänge

msslovi0

Aktives Mitglied

2nd

Aktives Mitglied

msslovi0

Aktives Mitglied

_julius

Aktives Mitglied