Navigation mit CSS formatieren

Dieses Thema im Forum "Web Page Design" wurde erstellt von Mauki, 10.02.2006.

  1. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.739
    Zustimmungen:
    138
    MacUser seit:
    24.07.2002
    Ich habe eine Navigation in meinem Typo3 Web drin. Das ganze ist ne Liste und ich habe das mit CSS formatiert. In

    meinem Template sah das echt gut aus, ich müsste das nun ein wenig anpassen. Jetzt ist das Menü aber total verschoben und es werden Aufzählungspunkte angezeigt. Was ist an meinem CSS nicht korrekt ?

    Webseite

    Typo3 Code

    Code:
    # Navigation links erstellen
    	  navi_links = HMENU
    	  navi_links.special = directory
    	  navi_links.special.value = 2
    	  navi_links.entryLevel = 1
    	  navi_links {
    
    	  1 = TMENU
    	  1.noBlur = 1
    	  1.expAll = 0
    	  1.collapse = 0
    
    	  1.wrap = <ul class="ullevel1">|</ul>
    	  1.NO = 1
    	  1.NO.linkWrap = <li class="level_1_NO">|</li>
    	  1.ACT = 1
    	  1.ACT.linkWrap = <li class="level_1_ACT">|</li>
    	  1.ACTIFSUB = 1
    	  1.ACTIFSUB.linkWrap = <li class="level_1_ACT">|
    
    	  2 = TMENU
    	  2.noBlur = 1
    	  2.expAll = 0
    	  2.collapse = 0	  
    	  2.wrap = <ul class="ullevel2">|</ul></li>
    	  2.NO = 1
    	  2.NO.linkWrap = <li class="level_2_NO">|</li>
    	  2.ACT = 1
    	  2.ACT.linkWrap = <li class="level_2_ACT">|</li>
    	  2.ACTIFSUB = 1
    	  2.ACTIFSUB.linkWrap = <li class="level_2_ACT">|
    	  } 
    
    

    CSS

    HTML:
    * Stylesheets für Navigation */
    
    .ullevel1 {
    	list-style:none;
    	width:160px;
    	color:#FFFFFF;
    	text-decoration:none;
    	padding: 0px;
    		}
    
    
    ul.ullevel1 a {
    	width:160px;
    	display:block;
    	color:#FFFFFF;
    	padding:4px;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    	}
    	
    ul.ullevel1 a:visited {
    	width:160px;
    	display:block;
    	color:#FFFFFF;
    	padding:4px;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    		}
    
    ul.ullevel1 a:hover {
    	width:160px;
    	color:#FFFFFF;
    	background:#00387D;
    	text-decoration:none;
    	}
    
    /* Stylesheets für Submenu */
    
    ul.ullevel2 {
    	color:#FFFFFF;
    	text-decoration:none;
    	padding: 0px;
    		}
    	
    	
    ul.ullevel2 a {
    	display:block;
    	color:#FFFFFF;
    	padding:4px;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    	background:#83B9CD;
    	font-size: 8pt;
    	}
    	
    ul.ullevel2 a:visited {
    	display:block;
    	color:#FFFFFF;
    	padding:4px;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    	background:#83B9CD;
    	font-size: 8pt;
    		}
    
    ul.ullevel2 a:hover{ 
    	width:140px;
    	color:#FFFFFF;
    	background:#00387D;
    	text-decoration:none;
    	font-size: 8pt;
    	}
    
     
  2. acid

    acid MacUser Mitglied

    Beiträge:
    472
    Zustimmungen:
    0
    MacUser seit:
    18.08.2005
    Ich glaube du must das list-style: none; dem li-Elementen in deiner Liste geben, nicht dem ul.

    Code:
    li.ullevel1 {
    list-style: none;
    }

    Damit müsste es gehen
     
  3. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Wenn, dann müsste es ul.ullevel1 li heißen (komische Bezeichner BTW). Sollte aber auch so funktionieren wie ausgezeichnet.

    Du hast außerdem viel zu viele Klassen in deinem Markup. Du kannst doch die erste Liste mit
    Code:
    .box3 ul
    und die zweite mit
    Code:
    .box3 ul ul
    ansprechen, wieso machst du das nicht?

    Wegen den Einzügen: margin's und padding's raus!
    Entweder global
    Code:
    * {
      margin: 0;
      padding: 0;
    }
    
    oder nur für die Liste
    Code:
    ul.ullevel1, ul.ullevel2 {
      margin: 0;
      padding: 0;
    }
    
    Und wegen den Bullet-Points:
    Code:
    * Stylesheets für Navigation */
    
    Da fehlt ein '/' am Anfang

    Matt
     
  4. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.739
    Zustimmungen:
    138
    MacUser seit:
    24.07.2002
    Sieht schon etwas besser aus, was ein Satzzeichen so alles bewirkt :D

    Im Firefox ist es soweit in Ordnung, nur muß das ganze nur noch ein Stückchen höher, fängt irgendwie zu tief an.

    Im IE dagegen, sieht das total übel aus.
     
  5. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Definiere 'zu tief'.

    Den Mac-IE kannst du BTW knicken. Interessiert keinen, nicht mal M$ selbst (siehe www.msn.com). Allerdings zeigt der Win-IE die Navigation gar nicht an. Darüber solltest du nachdenken.

    Matt
     
  6. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.739
    Zustimmungen:
    138
    MacUser seit:
    24.07.2002
    Ich meine den WIN IE. Geh mal auf die Seite, mein Link oben dann siehts du was ich mit zu tief meine. Das sollte Links noch etws höher, sozusagen oben andocken.

    Die Navigation erscheint zur Zeit nur auf der Startseite nicht, das ist mir bekannt. Ist ein Fehler im Typoscript, wo ich noch nicht weiß warum :(
     
  7. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Ich sagt doch, padding's und margin's raus. Dann verschwindet auch der margin im IE. Und damit das mit den Bullets klappt wirst du den list-style: none für alle ul wiederholen müssen (also ul.ullevel1, ul.ullevel2).

    Der Abstand oben verschwindet evtl. auch mit margin: 0.

    Matt
     
  8. Mauki

    Mauki Thread Starter MacUser Mitglied

    Beiträge:
    14.739
    Zustimmungen:
    138
    MacUser seit:
    24.07.2002
    So mit folgendem Code ist jetzt der Abstand oben weg und auch im IE Win sieht das Menü echt gut aus.

    1. Ist der Code jetzt so ok, oder ist noch was überflüssiges drin
    2. Der Hover und die Subnavi sind 1 - 2 Pixel kürzer wie die restliche Navigation. Woran liegt es ? Wenn ich da extra 160 px definiere ist es 1 - 2 Pixel zu breit?


    Code:
    /* Stylesheets für Navigation */
    
    .ullevel1 {
    	list-style:none;
    	width:160px;
    	color:#FFFFFF;
            margin: 0;
            padding: 0;
    	text-decoration:none;
    		}
    
    
    ul.ullevel1 a {
    	display:block;
    	color:#FFFFFF;
    	text-decoration:none;
            font-weight:bold;
    	padding:3px;
    	border-bottom: 1px solid #FFFFFF;
    	}
    	
    ul.ullevel1 a:visited {
    	display:block;
    	color:#FFFFFF;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    		}
    
    ul.ullevel1 a:hover {
    	color:#FFFFFF;
    	background:#00387D;
    	text-decoration:none;
    	}
    
    /* Stylesheets für Submenu */
    
    ul.ullevel2 {
    	color:#FFFFFF;
    	text-decoration:none;
            margin: 0;
            padding: 0;
    		}
    	
    	
    ul.ullevel2 a {
    	display:block;
    	color:#FFFFFF;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    	background:#83B9CD;
    	font-size: 11px;
    	padding:3px;
            }
    	
    ul.ullevel2 a:visited {
    	display:block;
    	color:#FFFFFF;
    	text-decoration:none;
    	border-bottom: 1px solid #FFFFFF;
    	background:#83B9CD;
    	font-size: 11px;
    		}
    
    ul.ullevel2 a:hover{ 
    	color:#FFFFFF;
    	background:#00387D;
    	text-decoration:none;
    	font-size: 11px;
    	}
    
     
    Zuletzt bearbeitet: 13.02.2006
  9. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Dieses css
    Code:
    /* Navi-Container */
    
    .box3{
      float: left;
      width: 164px;
      height: 100%;
      background: #5B91AD;
    }
    	
    /* Stylesheets für Navigation Links */
    
    .box3 ul {
      list-style: none;
      width: 164px;
      margin: 0;
      padding: 0;
    }
    
    
    .box3 ul a, 
    .box3 ul a:visited {
      display: block;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      padding: 3px;
      border-bottom: 1px solid #fff;
    }
    	
    .box3 ul a:hover {
      background: #00387D;
    }
    
    /* Stylesheets für Submenu */
    
    .box3 ul ul {
      margin: 0;
      padding: 0;
    }
    	
    	
    .box3 ul ul a, 
    .box3 ul ul a:visited {
      display: block;
      color: #fff;
      text-decoration: none;
      border-bottom: 1px solid #fff;
      background: #83B9CD;
      font-size: 11px;
      padding: 3px 0px 3px 8px;
    }
    	
    .box3 ul ul a:hover{ 
      background:#00387D;
    }
    
    funktioniert mit diesem Markup:
    HTML:
    <div class="box3">
      <ul>
        <li>
          <a href="index.php?id=17">der Stamm</a>
          <ul>
            <li><a href="">123</a></li>
          </ul>
        </li>
        <li><a href="index.php?id=16">Pfadichor</a></li>
        <li><a href="index.php?id=15">Familienkreis</a></li>
        <li><a href="index.php?id=14">Freundeskreis</a></li>
        <li><a href="index.php?id=13">Termine</a></li>
        <li><a href="index.php?id=12">Bilder</a></li>
        <li><a href="index.php?id=11">Pfadfindertum</a></li>
        <li><a href="index.php?id=10">G&auml;stebuch</a></li>
        <li><a href="index.php?id=9">Links</a></li>
      </ul>
    </div>
    
    Das ist jetzt die verkürzte Version ohne extra Klassen für die Listen.

    Matt
     
Die Seite wird geladen...

Diese Seite empfehlen