[CSS] navigations-problem

Dieses Thema im Forum "Webdesign" wurde erstellt von juppwatis, 15. Juli 2011 .

  1. 15. Juli 2011
    navigations-problem

    hallo zusammen,

    ich baue gerade mit dem cms contao eine website:

    http://www.drinkinggames.de/test/

    beim menü habe ich aber probleme:

    * wie kann ich bei den untermenüpunkte es machen, dass jeder pkt in einer zeile ist?
    * wie schaffe ich es, dass jeder untermenüpunkt komplett weiß gefärbt wird?
    * wie bekomme ich den dickeren rahmen weg bei dem ersten untermenüpunkt?

    kann mir da jmd helfen? wäre super. vll auch so noch schauen ob der code gut ist oder eher schlecht. bin anfänger in css / contao
     
  2. 15. Juli 2011
    AW: navigations-problem

    Deine Width anweisung vererbt sich weiter auf dein ul.level_2

    (Ungetestet)
    Code:
    [S]ul.level_2 {
    width: 100px;
    }
    ul.level_2 a { display:block; width: auto; }[/S]
    

    (Getestet)
    Code:
    ul.level_2 {
     width: 130px;
     overflow: hidden;
    }
    
    ul.level_2 a {
     width: 130px;
     display: block;
    }
    
    ul.level_2 .first {
     border: none;
    }
     
  3. 15. Juli 2011
    AW: navigations-problem

    hab das ganze nochmal neu aufgebaut. kann mir jmd sagen, warum die untermenüpunkte nicht nach links floaten? was ist am code falsch? versteh das nicht :/
     
  4. 15. Juli 2011
    AW: navigations-problem

    Guck dir am besten Fertige Menüs an
    Stu Nicholls | CSSplay | A drop/flyout menu for IE7 and non-IE browsers
     
  5. 18. Juli 2011
    AW: navigations-problem

    so bin jetzt recht weit, so wie ich es will:

    http://www.drinkinggames.de/test/

    allerdings habe ich jetzt noch drei kleine probleme:

    1. wie schaffe ich es, dass auch der hauptmenüpunkt weiß bleibt, wenn ich mit der maus über einem untermenüpunkt bin?

    2. wie geht die schwarze rahmenlinie bei den untermenüpunkten weg, bleibt aber bei den hauptmenüpunkten?

    3. wie schaffe ich es, dass die roten rahmenlinien der untermenüpunkte bündig unter den schwarzen rahmenlinien der hauptmenüpunkte anfangen?

    soll dann ungefähr so sein wie hier:

    BPONG | Beer Pong Tables, Beer Pong Tournaments

    oder muss ich das ganze anders angehen, damit ich es wie bei der site realisieren kann?
     
  6. 21. Juli 2011
    AW: navigations-problem

    versuch mal jeden link einzeln zu formatieren ;-)


    z.b ul ul level_2 { ect}
    ul li li{ ect}

    sonst vererbt sich der kram vom hauptmenü aufs untermenü selbe prob. hatte ich auch mit joomla
    hoffe ich habs verständlich ausgedrückt, is noch zu früh ;-)


    bei dem roten rahmen würde ich mal margin: -20px versuchen; ;-)
    was du mit schwaze rahmenlinie meinst ist mir gerade nich klar...
    (text-decoration:none ??
    shalom

    hier mein code
    Spoiler

    .navi li
    {
    padding-bottom:20px;

    }
    .navi li li{
    padding:0px;
    }


    .navi ul li
    {
    line-height:20px;
    margin-left:-20px;

    display:block;


    }
    .navi ul li a:link,
    .navi ul li a:visited
    {

    font-size: 1.0em;
    font-weight:bold;
    color:#C44316;
    text-transform:uppercase;
    text-decoration:none;

    }

    .navi ul li.active a:link,
    .navi ul li.active a:visited,
    .navi ul li a:hover,
    .navi ul li a:active,
    .navi ul li a:focus,
    .navi ul li.active a:hover,
    .navi ul li.active a:active,
    .navi ul li.active a:focus
    {

    color:#8AB846;
    text-decoration:none;
    outline: none;
    }



    .navi ul li ul li
    {
    line-height:24px;
    margin-left:-66px;
    color:#8AB846;

    }


    .navi ul li.active ul li a:link,
    .navi ul li.active ul li a:visited
    {
    padding: 0px 0px 0px 33px;
    font-size: 1.0em;
    font-weight:normal;
    color:#C44316;
    text-transform:none;
    text-decoration:none;

    }
    .navi ul li.active ul li.active a:link,
    .navi ul li.active ul li.active a:visited,
    .navi ul li.active ul li a:hover,
    .navi ul li.active ul li a:active,
    .navi ul li.active ul li a:focus
    {
    color:#8AB846 !important;
    text-decoration:none;

    }

    vieleicht hilft dir der weiter
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.