Forum Mjukvara Programmering och digitalt skapande Tråd

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

1
Skriv svar
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

lägg till ul och li i ditt classnamn i css:en

Visa signatur

Hur kan syltkakor överleva i det vilda utan ögon?

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!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>
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

Ännu en webbplats utan innehåll, fast den är ju ganska snygg att kolla på iallafall.

Redigera
Citera flera Citera
Permalänk
Medlem
●
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.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

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;
}
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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{

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

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.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

#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.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara