CSS meny på bästa sätt

5 svar · 420 visningar · startad av Emil RT 26 sep. 2007

Emil RTMedlem sedan feb. 2004200 inlägg

Frågan26 sep. 2007 06:47#1

Har följande CSS:

* {margin: 0; padding: 0;}

#navBar {
  margin:10px 0px 0px 10px;
  width:120px;
}
ul.leftNavBarSub {
  padding-bottom:5px;
}

li.leftNav1 {
  list-style:none;
  border-bottom: 1px solid #000000;
  padding:1px 0px 3px 0px;
}
li.leftNav1 a {
  font-family: Verdana,sans-serif;
  font-size: 70%;
  text-decoration:none;
}
li.leftNav2 {
  list-style:none;
}
li.leftNav2 a {
  font-family: Verdana,sans-serif;
  font-size: 60%;
  text-decoration:none;
}

med tillhörande HTML ...

<div id="navBar">
  <ul>
    <li class="leftNav1"><a href="#">Head1</a></li>
    <li class="leftNav1"><a href="#">Head2</a>
      <ul class="leftNavBarSub">
        <li class="leftNav2"><a href="#">-Sub1</a></li>
        <li class="leftNav2"><a href="#">-Sub2</a></li>
        <li class="leftNav2"><a href="#">-Sub3 har dubbla rader</a></li>
      </ul>
    </li>
   <li class="leftNav1"><a href="#">Head3</a></li>
   <li class="leftNav1"><a href="#">Head4</a></li>
  </ul>
</div>

Anledningen till att jag petat in en ul i en li är att jag inte vill att border-bottom ska komma förrän efter undermenyn är klar.

Känns som menyn är lite omständig ...

Sen har jag problem men att tvåradiga undermenyelement får för stort mellanrum mellan raderna. har testat med line-height men det blir inge vidare.

Vad sägs?

tantenMedlem sedan nov. 20051 596 inlägg

26 sep. 2007 07:57#2

Vet inte riktigt varför du tycker menyn är omständig :)
Men undermenyn bör ha en ny ul om det är en undermeny eller var det så att du inte vill ha det?
Däremot kan jag tycka att dina classer är lite onödiga.
Så här kan du också göra för att få så lite kod som möjligt i html.

<div id="navBar">
  <ul>
    <li><a href="#">Head1</a></li>
    <li><a href="#">Head2</a>
      <ul>
        <li><a href="#">-Sub1</a></li>
        <li><a href="#">-Sub2</a></li>
        <li><a href="#">-Sub3 utan dubbla streck</a></li>
      </ul>
    </li>
   <li><a href="#">Head3</a></li>
   <li><a href="#">Head4</a></li>
  </ul>
</div>

och tillhörande css om det är den enda listan du har, annars får man ändra lite med att skriva vart li ul ska gälla med #navbar framför.

* {margin: 0; padding: 0;}

#navBar {
  font-family: Verdana,sans-serif;
  margin:10px 0px 0px 10px;
  width:120px;
}
li {
  list-style:none;
  border-bottom: 1px solid #000000;
  padding:1px 0px 3px 0px;
}
li a{
  font-size: 70%;
  text-decoration:none;
}
ul li ul li{
  list-style:none;
  border: none;
  padding:0px;
}
ul li ul li a {
  font-size: 60%;
  text-decoration:none;
}

Tror det ska bli lika din men med lite mindre mellanrum i submenyn och utan dubbla streck...

Emil RTMedlem sedan feb. 2004200 inlägg

26 sep. 2007 08:11#3

Tack för tillsnyggningen! :e

Angående ul i en li så var jag osäker på om det var att föredra bara ...

Avståndet på dubbla rader är fortfarande lite stort. Alltså på undermeny 3... :(

tantenMedlem sedan nov. 20051 596 inlägg

26 sep. 2007 09:16#4

Personligen har jag ingen aning om hur man ska kunna få kortare radavstånd utan att det blir väldigt tokigt om användaren ändrar fontstorleken. Men kanske med någon span på bara den långa texten så det inte påverkar resten av listan.
Men det finns förmodligen någon annan som vet här...
Själv försöker jag undvika långa urler genom att skriva in information i en title i urlen i stället, men det kanske inte passar ditt syfte... men då skulle det se ut så här
<li><a href="#" title="isället för en lång rad som bryts">Sub3 </a></li>

Emil RTMedlem sedan feb. 2004200 inlägg

26 sep. 2007 10:51#5

Okidoki ... Ska fundera på saken. Tack för tipset. Lämnar tråden halvolöst ifall någon har nåt bra tips på radavståndet. (kommer iof att använda px isf %).

tantenMedlem sedan nov. 20051 596 inlägg

26 sep. 2007 11:00#6

px hindrar bara de som sitter vid IE6 och äldre att ändra textstorleken, relativa sorlekar är att föredra... tycker jag... :)