Forum > Mjukvara > Programmering och digitalt skapande

Göra om CSS för en menu (div->ul)

Skriv svar
 
Verktyg Visningsval
Gammal 2010-02-04, 18:43   #1 (länk)

Cloudburst

Medlem

Registrerad: apr 2006

Göra om CSS för en menu (div->ul)

Jag vill göra om en meny gjord med divs till en lista. Först lite kod, vi börjar med html:

<div id="sidebar">
<div class="box sidebarMenu top"> <a href="#"> Meny1 </a></div>
<div class="box sidebarMenu middle"> <a href="#">Meny2 </a> </div>
<div class="box sidebarMenu bottom"> <a href="#">Meny3</a> </div>
</div> 
och nu CSS:

.box {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-color:#D1D1D1;
    border-style:solid;
    border-width:1px 1px;
    background-color: #F4F4F4;
    margin-bottom: 18px;
    font-size: 11px;
    line-height: 15px;
}

.box.sidebarMenu {
    background-image: url(../images/sprites/gradients.png);
    background-position: bottom;
    background-color: #fff;
    font-size: 12px;
    padding: 7px 12px;
    margin-bottom: 0px;
}

.box.sidebarMenu.top {
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-radius-bottomleft:0px;
    -webkit-border-radius-bottomright:0px;
    border-bottom: 0px;
}

.box.sidebarMenu.middle {
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-radius-bottomleft:0px;
    -webkit-border-radius-bottomright:0px;
    -webkit-border-radius-topleft:0px;
    -webkit-border-radius-topright:0px;
    border-bottom: 0px;
}

.box.sidebarMenu.bottom {
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-radius-topleft:0px;
    -webkit-border-radius-topright:0px;
    margin-bottom: 18px;
} 
Den nya html kommer se ut (notera class):

<div id="sidebar">
<ul class="sidebarMenu">
<li class="leaf first"><a href="#">Meny1</a></li>
<li class="leaf"><a href="#">Meny2</a></li>
<li class="leaf last"><a href="#">Meny3</a></li>
</ul>
</div> 
Hur skulle ni lösa detta smidigast? Jag har klurat lite men är intresserad av andras lösningar.
Cloudburst är inte uppkopplad Anmäl Citera
Gammal 2010-02-04, 19:21   #2 (länk)

JesperA

Medlem

JesperAs avatar

Plats: Halmstad

Registrerad: apr 2003
lägg till ul och li i ditt classnamn i css:en
JesperA är inte uppkopplad Anmäl Citera
Gammal 2010-02-04, 20:04   #3 (länk)

You

Medlem

Yous avatar

Plats: Göteborg

Registrerad: jan 2007

 
<!doctype html>
<style>
  nav>ul{
    list-style: none;
    padding: 0;
    font-size: 12px;
  }
  nav>ul>li{
    display: block;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border: 1px solid #D1D1D1;
    border-bottom-color: transparent;
    padding: 7px 12px;
    margin: 0;
  }
  nav>ul>li:last-child{		
    border-bottom-color: #D1D1D1;
  }
  nav>ul>li>a{
    display: inline-block;
    width: 100%;
  }
</style>

<nav>
  <ul>
    <li><a href="#">Meny1</a></li>
    <li><a href="#">Meny2</a></li>
    <li><a href="#">Meny3</a></li>
  </ul>
</nav>
__________________
Blogg. Webboken. DWWS. del.icio.us, twitter, dopplr, flickr, last.fm, Kongregate. Validera din HTML, men skryt inte om att du gör det.
HTML är oftast ett bättre val än XHTML, och semantik är mycket viktigt!
You är inte uppkopplad Anmäl Citera
Gammal 2010-02-04, 20:31   #4 (länk)

cic

Medlem

cics avatar

Registrerad: jan 2005
Citat:
Ursprungligen inskrivet av You 
[...]
nav>ul
[...]
Ja, fast alla > i selektorerna är onödiga. Fungerar inte heller i bl.a. ie6 om det är viktigt.
__________________
Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.
cic är inte uppkopplad Anmäl Citera
Gammal 2010-02-05, 01:02   #5 (länk)

You

Medlem

Yous avatar

Plats: Göteborg

Registrerad: jan 2007
Citat:
Ursprungligen inskrivet av cic
Ja, fast alla > i selektorerna är onödiga. Fungerar inte heller i bl.a. ie6 om det är viktigt.
Sant.
__________________
Blogg. Webboken. DWWS. del.icio.us, twitter, dopplr, flickr, last.fm, Kongregate. Validera din HTML, men skryt inte om att du gör det.
HTML är oftast ett bättre val än XHTML, och semantik är mycket viktigt!
You är inte uppkopplad Anmäl Citera
Gammal 2010-02-05, 14:02   #6 (länk)

Cloudburst

Medlem

Registrerad: apr 2006
Jag gjorde såhär, men har problem att värderna i "#menu ul.menu li.leaf" inte overridas av "#menu ul.menu li.leaf.last" och "#menu ul.menu li.leaf.first". Tex så är bottom-border transparent på "last".

#menu ul.menu{
    list-style: none;
    padding: 0;
    font-size: 12px;
    margin-bottom: 0px;
}

#menu ul.menu li{
    background-image: url(../images/sprites/gradients.png);
    background-position: bottom;
    background-color: #fff;
    display: block;
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border: 1px solid #D1D1D1;
    border-bottom-color: transparent;
    padding: 7px 12px;
    margin: 0;
    width: 155px;
}

#menu ul.menu li.leaf{
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-radius-bottomleft:0px;
    -webkit-border-radius-bottomright:0px;
    -webkit-border-radius-topleft:0px;
    -webkit-border-radius-topright:0px;
    border-bottom: 0px;
}

#menu ul.menu li.leaf.first{
    -moz-border-radius-bottomleft:0px;
    -moz-border-radius-bottomright:0px;
    -webkit-border-radius-bottomleft:0px;
    -webkit-border-radius-bottomright:0px;
    border-bottom: 0px;
}

#menu ul.menu li.leaf.last{
    -moz-border-radius-topleft:0px;
    -moz-border-radius-topright:0px;
    -webkit-border-radius-topleft:0px;
    -webkit-border-radius-topright:0px;
    margin-bottom: 18px;
    border-bottom-color: #D1D1D1;
} 
Cloudburst är inte uppkopplad Anmäl Citera
Gammal 2010-02-05, 18:41   #7 (länk)

Teknocide

Medlem

Plats: kungshamn

Registrerad: sep 2007
Det är vad du säger till den. Du säger att alla li.leaf ska ha 0px border (varför px förresten? 0 elefanter är lika mycket som 0 myror.. enhet onödig)

Har aldrig sett nån skriva CSS på ditt sätt, för mig ser klasserna grötiga ut. Men i vilket fall som helst, du får ingen border för <li class="leaf last"> innebär att elementet har "border-bottom: 0". Detta är definierat i stycket #menu ul.menu li.leaf{
Teknocide är inte uppkopplad Anmäl Citera
Gammal 2010-02-06, 12:31   #8 (länk)

Cloudburst

Medlem

Registrerad: apr 2006
px står kvar på 0 eftersom jag ändrat på siffrorna fram och tillbaka. Sen så har jag intr gjort orginal css, jag försökte bara enklast göra om detta stycke så snabbt som möjligt (helst använda samma struktur för att minska risken att man pajar något annat).

Men även border-radius används inte på first och last. De får vinkelräta hörn i första och sista li-elementet. Fast i Safari så blir alla hörn runda.
Cloudburst är inte uppkopplad Anmäl Citera
Gammal 2010-02-06, 15:12   #9 (länk)

Teknocide

Medlem

Plats: kungshamn

Registrerad: sep 2007
#menu ul.menu li.leaf.first påverkar element med klass "first" som finns inuti li.leaf-element. Du har li.leaf som sista nivå så klassdefinitionen aktiveras aldrig. Då webkit inte använder samma syntax för hörnen som mozilla så gäller definitionen som du gör i #menu ul.menu li, dvs 5px rundade hörn.
Teknocide är inte uppkopplad Anmäl Citera
Notiser och pressmeddelanden
Tipsa redaktionen
Nytt i forumet
Senaste privatannonserna

Prylar säljes, köpes, bytes och skänkes

Säljes
Köpes
Externa nyheter

Senaste nyhetsrubrikerna

Spelnyheter från FZ
Prylnyheter från Prylportalen
Androidnyheter från Swedroid