Ergebnis 1 bis 3 von 3

Thema: Wieso übernimmt der Code die .Centered Angabe nicht?

  1. #1
    Teeny
    Registriert seit
    06.03.2012
    Ort
    Oldenburg
    Beiträge
    26
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Beitrag Wieso übernimmt der Code die .Centered Angabe nicht?

    Guten Tag liebe Community,

    Ich habe mir eine Multi Level Dropline Navigation auf : http://www.cssplay.co.uk/menus/ angesehen.
    Wurde dort ebenfalls fündig. Dennoch war diese Dropline Navigation dort nicht in das Center gesetzt.

    Nun habe Ich Sie soweit auf meine Bedürfnisse Angepasst :

    - 100% Breite Hinzugefügt.
    - Background Ebenen editiert.
    - Die Schritte zur dritten Navigation entfernt.

    Dennoch stehe Ich vor einem Problem. Un zwar soll die Untere Navigations Ebene ( Dropline ) erst angezeigt werden, wenn über den ersten Navigationspunkt Gehovert wird.
    Dies tut es auch dank folgenden Css Einstellungen :

    Code:
    #Mainnavigation li ul{    position:absolute; 
        top:42px; 
        left:-9999px;  
    }
    
    
    #Mainnavigation :hover ul{
        left:0; 
        width:100%;
        height:31px;
        background:#b9babc;
        opacity:0.72;
        z-index:6;
    }
    Nun kommt dennoch das Problem auf, dass mein Code bezüglich des Befehles :

    Code:
    .Centered{    
        width:1000px;
        margin:0 auto;
    }
    nicht funktionieren will. Die Obere Navigation setzt er ins Center.
    Die untere dennoch nicht! Sobald Ich versuche nun unten nochmals den .Centered Befehl einzubringen, stellt sich der Code dank Mainnavigation :hover ul schräg und erstellt 2 Subnavigationen.
    Was natürlich ebenfalls nicht mein Ziel ist. Soweil Ich dies mit <li></li> versuche funktioniert es nicht.

    Hier das Live Beispiel :

    http://my-alina.de/anpassung/1/Sitrion.html

    Hier nochmals der Code der Navigation :

    Html Code :

    Code:
    
    <ul id="Navigation">
        <ul class="Centered">
            <ul id="Mainnavigation">
                <li><a class="Mainnavigation-Punkte" href="#">What we do</a>
                    <ul class="Subnavigation">
                        <ul class="Centered">
                             <li><a href="#" class="Subnavigation-Punkte">Why us?</a></li>
                        </ul>
                    </ul>
                </li>
            </ul>
        </ul>
    </ul>
    Centered Rot markiert, zweite Centered blau markiert.

    Css Code :

    Code:
    .Centered{
        width:1000px;
        margin:0 auto;
    }
    
    ul{
        margin:0px;
        padding:0px;
        list-style:none;
    }
    
    
    li{
        float:left; 
        height:42px;
    }
    
    #Navigation{
        width:100%;
        height:42px;
        background:#d0d2d4;
        position:relative;
    }
    
    
    #Mainnavigation{
        width:1000px;
        float:left; 
        display:block;  
        line-height:42px; 
        margin-left:219px;
    }
    
    
    .Mainnavigation-Punkte{
        padding:0 15px 0 15px; 
        font-family:arial; 
        font-size:14px; 
        color:#4e5059; 
        height:42px;
        text-decoration:none;
    }
    
    
    .Mainnavigation-Punkte:hover{
        color:#79844f;
    }
    
    
    .Subnavigation{
        float:left; 
        display:block; 
        line-height:31px;  
        padding-left:227px;
    }
    
    
    .Subnavigation-Punkte{
        font-family:arial; 
        font-size:12px; 
        color:#4e5059; 
        float:left;
        text-decoration:none;
        padding:0 10px 0 10px;
    }
    
    
    .Subnavigation-Punkte:hover{
        font-weight:bold;
        position:absolute;
    }
    
    
    #Mainnavigation li ul{
        position:absolute; 
        top:42px; 
        left:-9999px;  
    }
    
    
    #Mainnavigation :hover ul{
        left:0; 
        width:100%;
        height:31px;
        background:#b9babc;
        opacity:0.72;
        z-index:6;
    }
    Hoffe Ihr könnt mir hierbei helfen.

    Freundliche Grüße
    Azr
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    461
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Wieso übernimmt der Code die .Centered Angabe nicht?

    Versuch mal so
    Code:
    #navigation ul { 
      padding: 0;
      z-index: 999;
    
    text-align:center; /* NEU */
    
    }
    
    #navigation li {
      list-style-type: none;
    
    display:inline-block; /* NEU aber dafür   float:left  entfernen */
    
    }
    
    
    #navigation ul li    {
        
                                /* Hier auch float:left entfernen */
        list-style: none;
        margin: 0px;
        position: relative;
        z-index: 999;
        
    }
    Nun sollte die Zentrierung funktionieren.

    @edit: Dein Klasse Centered kannst du entfernen. Dein Menü kannst du auch so zentrieren.
    Geändert von djheke (29.03.2012 um 20:50 Uhr) Grund: Ergänzung

  3. #3
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Wieso übernimmt der Code die .Centered Angabe nicht?

    Und zu deinem .Centered-"Problem": das liegt daran, dass eine Klasse weniger wertig ist als eine ID. Die Angaben zur ID haben Vorrang. Wenn Du das umgehen willst, gibt vor .Centered auch die ID an (wäre optimal) oder verwende !important (nicht empfehlenswert).

Ähnliche Themen

  1. Problem mit Centered Div (!)
    Von Suicide Clown im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 30.10.2011, 19:05
  2. Wieso ist die Konstante nicht bekannt?
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 21.08.2008, 20:46
  3. wieso funktioniert der code nicht?
    Von davidos_no.1 im Forum HTML & CSS Forum
    Antworten: 21
    Letzter Beitrag: 14.05.2007, 12:30
  4. Antworten: 3
    Letzter Beitrag: 12.02.2007, 16:54
  5. wieso klappt das nicht
    Von Lion im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 27.03.2005, 22:04

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •