1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Probleme mit CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von MACRASSI, 13.09.08.

  1. MACRASSI

    MACRASSI Gelbe Schleswiger Reinette

    Dabei seit:
    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?
     
  2. MasterofDistres

    MasterofDistres Kleiner Weinapfel

    Dabei seit:
    07.12.06
    Beiträge:
    1.139
    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. ;)
     
  3. MACRASSI

    MACRASSI Gelbe Schleswiger Reinette

    Dabei seit:
    21.11.04
    Beiträge:
    1.754
    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.
     
  4. kauan

    kauan Stina Lohmann

    Dabei seit:
    31.12.05
    Beiträge:
    1.043
    <div class="foo"> --> .foo
    <div id="foo"> --> #foo

    Verwechsel das nicht :)

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

    Toddy Wohlschmecker aus Vierlanden

    Dabei seit:
    10.05.04
    Beiträge:
    240
    "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.
     
  6. MACRASSI

    MACRASSI Gelbe Schleswiger Reinette

    Dabei seit:
    21.11.04
    Beiträge:
    1.754
    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 :(
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    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!
     

Diese Seite empfehlen