Probleme mit CSS

MACRASSI · 13.09.08

Hi!
Ich hab ein Menu mit css gebaut aber das klappt alles nicht so ganz.
Also mein code sieht so aus

Code:

<div id="menu">
    <a class="menu_item" href="bla">test</a>
   
    <div id="submenue">
         <a class="test" href="bla">test</a>
    </div>

</div>

Css:

Code:

#menu_item a {
	font-size: 13px;
	font-family: Arial;
	color: #fefefe;
}
#test a {
	margin-bottom: 1px;
	font-style: normal;
	font-weight: normal;
	font-size: 15px;
	line-height: 28px;
	padding-left: 8px;
	margin-right: 1px;
	margin-top: 1px;
	background-color: #163d8d;
	color: white;
	margin-left: 0px;
	z-index: 0;
	width: 155px;
	height: 28px;
}

(Kann sein das es nicht ganz so ist wie auf der page, aber sollte ca ne vorstellung geben was ich mache.)

Jetzt das Problem:
Bei dem test Hyperlink mit der class="test" wird die höhe und breite des Stylesheets nicht übernommen.

Warum?

MasterofDistres · 13.09.08

Erstmal solltest du anstatt der Raute (steht für ID) einen Punkt (für Klasse) nehmen, aber ich würde dir folgendes empfehlen: „a.test“, gilt dann nur für Links, die die Klasse „test“ besitzen.

MACRASSI · 13.09.08

Und wie mache ich das das ein Link nur für eine Id gültig sind.
Ich hab ja das eine <div> in dem anderen gekapselt.
Klappt leider nicht so ganz, muss aber bis morgen Abend klappen.

kauan · 13.09.08

<div class="foo"> --> .foo
<div id="foo"> --> #foo

Verwechsel das nicht

<div id="foo"><a class="bar"></a></div>
#foo a.test {}

Toddy · 13.09.08

"MasterofDistres" hat dir die Lösung bereits verraten, im CSS

Code:

#menu_item a {

und

Code:

#test a {

gegen

Code:

a.menu_item {

bzw.

Code:

a.test {

tauschen und schon gehts.

LG T.

MACRASSI · 14.09.08

Also, die Style classe findet er, der zext ist in der richtigen farbe, die hintergrundfarbe stimmt, nur die größe stimmt nicht

Wenn ich das mit <div class="test"> mache klappts, aber sobald ich <a class="test"> nehme übernimmt er die breite nichtmehr

mschoening · 14.09.08

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	
	<title>untitled</title>
	
	<style type="text/css" media="screen">
		* {
			border: 0;
			margin: 0;
			padding: 0;
		}
		
		ul, li { list-style: none; }
		
		body {
			padding-top: 30px;
		}
		
		#wrapper {
			margin: 0 auto;
			width: 300px;
		}
		
		h2 {
			margin-bottom: 10px;
		}
		
		ul {
			background: #909090;
			padding: 10px;
		}
		
		#menu li a {
			color: #333;
			font-size: 20px;
		}
		
		#submenu li a {
			color: #555;
			font-size: 13px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<h2>Das ist eine Navigation</h2>
		
		<ul id="menu">
			<li>
				<a href="http://some-site.com/">Test 1</a>
			</li>
	
			<li>
				<ul id="submenu">
					<li>
						<a href="http://some-site.com/">Sub-Test 2</a>
					</li>
					
					<li>
						<a href="http://some-site.com/">Sub-Test 2</a>
					</li>
					
					<li>
						<a href="http://some-site.com/">Sub-Test 3</a>
					</li>
				</ul>
			</li>

			<li>
				<a href="http://some-site.com/">Test 2</a>
			</li>
			
			<li>
				<a href="http://some-site.com/">Test 3</a>
			</li>
		</ul>
	</div>
</body>
</html>

Für eine Navigation solltest du "fast" immer eine <ul /> oder <ol /> verwenden!

Suche

Suche

Probleme mit CSS

MACRASSI

Gelbe Schleswiger Reinette

MasterofDistres

Kleiner Weinapfel

MACRASSI

Gelbe Schleswiger Reinette

kauan

Stina Lohmann

Toddy

Wohlschmecker aus Vierlanden

MACRASSI

Gelbe Schleswiger Reinette

mschoening

Gelbe Schleswiger Reinette

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)