• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Die Bildungsoffensive hier im Forum geht weiter! Jetzt sollen Kreativität und technische Möglichkeiten einen neue Dimension erreichen. Das Thema in diesem Monat lautet - Verkehrte Welt - Hier geht es lang --> Klick

Probleme mit CSS

MACRASSI

Gelbe Schleswiger Reinette
Registriert
21.11.04
Beiträge
1.754
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?
 
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. ;)
 
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.
 
<div class="foo"> --> .foo
<div id="foo"> --> #foo

Verwechsel das nicht :)

<div id="foo"><a class="bar"></a></div>
#foo a.test {}
 
"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.
 
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 :(
 
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!