Ergebnis 1 bis 2 von 2

Thema: Problem mit css-Klasse für Untermenü

  1. #1
    HTML Newbie
    Registriert seit
    08.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Problem mit css-Klasse für Untermenü

    Hallo zusammen!

    Ich möchte den Menüpunkt Archiv zusammen mit seinen beiden Unterpunkten formatieren. In diesem Fall "Archv" = Level 1, "Laufendes Jahr" und "Zurückliegende Jahre" = Level 2.

    Das ausgewählte (class="active") Listenelement soll hervorgehoben sein durch weiße Fettschrift, Hintergrund #BEBEBE und blauen Rand auf der rechten Seite. In Level 1 (wenn z.B. "Archiv" ausgewählt ist) klappt das wie gewünscht.

    Bei dem Untermenü jedoch erfolgt (und das verstehe ich nicht) weder eine Zuweisung aus der class="active", noch erhalten die inaktiven Unter-Listenelemente der Gruppe Archiv den dunklen (#666666) Rand auf der rechten Seite.

    Einstiegsseite unter http://www.imovel24.com/fau-btb-nrw.html

    Auszug aus der basemod.css:

    .
    Code:
    vlist {
        width:100%;
        overflow:hidden;
        margin:0 0 1.5em 0;
        list-style-type:none;
        /* border-bottom:0px #ddd solid; */
      }
    
      .vlist ul {
        list-style-type:none;
        margin:0;
        padding:0;
      }
    
      .vlist li {
        float:left; /* LTR */
        /* width:100%; */
        /* changed 20110512 */
        width:197px;
        background-color:#FFFFFF;
        margin:0;
        padding:0;
        border-right-width: 6px;
        border-right-style: solid;
        border-right-color: #666666;
      }
    
      /* fuer IE 6 fuer die Anzeige des rechten Rahmens bei den Listenelementen */
      .vlist a {
        float:left;
        /* added 20110513 */
        width:197px;
        background-color:#FFFFFF;
        margin:0;
        padding:0;
        border-right-width: 6px;
        border-right-style: solid;
        border-right-color: #666666;
      }
    
      .vlist a,
      .vlist strong,
      .vlist span {
        display:block;
        padding:3px 0px 3px 10%;
        text-decoration:none;
        /* border-bottom:0px #ddd solid; */
      }
    
      .vlist a,
      .vlist a:visited {
        color:#444;
      }
    
      .vlist li span {
        display:block;
        font-weight:bold;
        /* border-bottom:0px #ddd solid; */
      }
    
      /* active list element */
    .vlist li.active {  
        color:#fff;
        background-color:#BEBEBE;     
        border-right-color: #0000FF;  
      }
      
      /* list element which is found in the rootLine and has one active subpage at least */
    .vlist li.actifsub a {  
        width:197px;
        color:#000;
        background-color:#E0E0E0;  
        font-weight:normal;
        border-right-width: 6px;
        border-right-style: solid;
        border-right-color: #666666;  
      }
    
      /* Level 1 */
      .vlist li a,
      .vlist li strong,
      .vlist li span { width:90%; padding-left:10%; } /* LTR */
    
      .vlist li a:focus,
      .vlist li a:hover { background-color:#DBDBDB; color:#000; text-decoration:none; }
      .vlist li a:active { background-color:#0000FF; color:#fff; outline: 0 none; }
    
      /* Level 2 */
      .vlist li ul li a,
      .vlist li ul li strong,
      .vlist li ul li span { width:88%; padding-left:12%; background-color:#E0E0E0; } /* LTR */  
    
      .vlist li ul li a,
      .vlist li ul li a:visited { color:#333; }
      .vlist li ul li a:focus, 
      .vlist li ul li a:hover { width:88%; padding-left:12%; background-color:#DBDBDB; color:#000; text-decoration:none; }
      .vlist li ul li a:active { background-color:#0000FF; color:#fff; }
    
      /* Level 3 */
      .vlist li ul li ul li a,
      .vlist li ul li ul li strong,
      .vlist li ul li ul li span { width:70%; padding-left:30%; } /* LTR */
    
      .vlist li ul li ul li a,
      .vlist li ul li ul li a:visited{ background-color:#f0f0f0; color:#222; }
      .vlist li ul li ul li a:focus,
      .vlist li ul li ul li a:hover { background-color:#DBDBDB; color:#000; text-decoration:none; }
      .vlist li ul li ul li a:active { background-color:#0000FF; color:#fff; }
    
      /* Level 4 */
      .vlist li ul li ul li ul li a,
      .vlist li ul li ul li ul li strong,
      .vlist li ul li ul li ul li span { width:60%; padding-left:40%; } /* LTR */
    
      .vlist li ul li ul li ul li a,
      .vlist li ul li ul li ul li a:visited { background-color:#e8e8e8; color:#111; }
      .vlist li ul li ul li ul li a:focus,
      .vlist li ul li ul li ul li a:hover { background-color:#DBDBDB; color:#000; text-decoration:none; }
      .vlist li ul li ul li ul li a:active { background-color:#0000FF; color:#fff; }
    }
    Die 90 Fehler aus der CSS-Validierung dürften mit dem Problem nichts zu tun haben.

    Die wichtigsten beteiligten css-Dateien:

    http://www.imovel24.com/css/layout_fau-btb-nrw.css
    http://www.imovel24.com/css/basemod.css
    http://www.imovel24.com/css/basemod_faux_columns.css
    http://www.imovel24.com/css/content.css
    http://www.imovel24.com/css/patch_vertical_listnav.css
    http://www.imovel24.com/css/base.css
    http://www.imovel24.com/css/print_003_draft.css

    Die drei letzten Dateien inkl. Einbindungen befinden sich im Originalzustand.

    Danke im Voraus.

    Rolf
    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
    HTML Newbie
    Themenstarter

    Registriert seit
    08.07.2011
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem mit css-Klasse für Untermenü

    Okay. Not macht erfinderisch. Ich habe eine neue HTML-Seite erstellt, das betreffende DIV isoliert und bei der entsprechenden Klasse das overflow:hidden auf sichtbar gestellt. Dadurch konnte ich sehen dass der rechte, 6 Pixel breite border einfach nur durch das padding-right nach rechts versetzt worden war. Ein max-width hätte das Problem für die neueren Browser gelöst, aber ich denke mir jetzt einfach eine browserübergreifende Variante aus. Ich gehe davon aus, dass dann auch das background-color Problem gelöst ist. Im Moment ist nur die "Notreparatur" online.

    Gruß, Rolf

Ähnliche Themen

  1. Problem mit dem MySql-connect in einer Klasse
    Von heyudo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 8
    Letzter Beitrag: 18.10.2010, 16:16
  2. Problem mit MySQL Klasse (Doppelte Ausgabe)
    Von reggit im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 09.07.2008, 00:32
  3. Problem mit Klasse
    Von renhe78 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 29.10.2006, 14:47
  4. Problem mit Datenbank-Klasse
    Von daydreamer im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.08.2006, 23:39
  5. Untermenü
    Von Jürgen im Forum Script-Archiv
    Antworten: 1
    Letzter Beitrag: 16.01.2005, 18:02

Stichworte

Berechtigungen

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