webdesign - UL/LI Navigation - Udvikleren.dk - Programmering, webdesign og grafik

Tags: webdesign kodedesign

Bruger #17390 @ 21.02.13 16:48

Hej alle.

Jeg skal til at lave en ret simpel navigationsbar via html/css, men hader at arbejde med ul og li.

Har så en navBG, som faktisk bare er en kasse med en bestemt størrelse med farve på.

Den er 100% centreret horisontalt, findes der ikke en commando til at 100% specificere den i højden i boksen, istedet for at jeg skal bruge padding-top:14px; og er der en måde at få padding imellem de forskellige links uden at bruge padding-left:6px; padding-right:6px; ?

Synes altid der er bøvl når jeg skal sidde og arbejde med UL lister

Ønsker bare en mere simpelt kode til at centrere min menu, med padding på, istedet for alt det paddin left, right og margin top

HTML kode

 <div id="navbg">
         <ul id="ulnav">
               <li id="linav"><a href="#" class="nav">Forside</a></li>
               <li id="linav"><a href="#" class="nav">Om Firma</a></li>
               <li id="linav"><a href="#" class="nav">Priser</a></li>
               <li id="linav"><a href="#" class="nav">Kontakt</a></li>
         </ul>
     </div>

CSS kode

 #ulnav{
     list-style-type:none;
     margin:0;
     padding:0;
     text-align:center;
 }
 
 #linav{
     display:inline-block;
 }
 
 a.nav:LINK, a.nav:VISITED, a.nav:HOVER, a.nav:ACTIVE{
     display:inline-block;
     font-size:14px;
     font-family:Arial, Helvetica, sans-serif;
     color:#FFF;
     font-weight:bold;
     text-decoration:none;
     padding-top:14px;
     padding-left:6px;
     padding-right:6px;
 }

8 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #17081 @ 06.03.13 07:53

1.258

^ ikke for at skulle sige nogen imod, men hvorfor ikke søgemaskineoptimere et website med det samme, når man nu kan? Der er da ikke grund til at lade dette gå til spilde. Bare min personlige mening.

At arbejde med liste-menuer er nu egentlig nemt nok. Specielt hvis du skal lave det med undermenuer. Jeg kan klart anbefale det.

HTML kode
 <ul class="menu">
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a>
         <ul>
             <li><a href="#">Link 2.1</a></li>
             <li><a href="#">Link 2.2</a></li>
         </ul></li>
     <li><a href="#">Link 3</a></li>
 </ul>
Dejlig nemt at konstruere. Uden tvivl kan jeg sagtens se idéen i at droppe liste-menu, men når fremtiden nu ligger med meget søgemaskineoptimering kan man jo ligeså godt allerede begynde nu. Bare min personlige mening .

For, at gøre det endnu sejere gør man selvfølgelig sådan her:

HTML kode

 <nav roll="navigation">
   <ul class="menu">
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a>
       <ul>
         <li><a href="#">Link 2.1</a></li>
         <li><a href="#">Link 2.2</a></li>
       </ul>
     </li>
     <li><a href="#">Link 3</a></li>
   </ul>
 </nav>

Indlæg senest redigeret d. 06.03.2013 07:55 af Bruger #17081

Bruger #5789 @ 21.02.13 16:54

640

Der er ingen der tvinger dig til at benytte en unordered list,

<div id="ulnav">
<a href="#" class="nav">Forside</a>
<a href="#" class="nav">Om Firma</a>
<a href="#" class="nav">Priser</a><
<a href="#" class="nav">Kontakt</a>
</div>

Du kommer ikke uden om padding/margin hvis vi taler afstand mellem andre elementer eller i et.

Bruger #17390 @ 21.02.13 16:58

Der er ingen der tvinger dig til at benytte en unordered list,

<div id="ulnav">
<a href="#" class="nav">Forside</a>
<a href="#" class="nav">Om Firma</a>
<a href="#" class="nav">Priser</a><
<a href="#" class="nav">Kontakt</a>
</div>

Du kommer ikke uden om padding/margin hvis vi taler afstand mellem andre elementer eller i et.

Hvad kunne jeg ellers bruge?

Jeg synes ellers at en unordered list er det mest normale at bruge til en navigations bar

Bruger #5789 @ 06.03.13 07:28

640

Ja det er bedst practice, men kun når vi taler menuer med undermenuer i (sitemaps, flere "level" menuer etc), her giver et nestet ul hieaki fordele mht til wcag 2.0.

I ovenstående eksempel ville jeg holde en ul langt væk, den er ikke nødvendig, så hvorfor ligge unødvendigt markup omkring hvert link, når dun kan style dig fra det i et css ark.

Venligst

Bruger #16025 @ 06.03.13 07:49

442

^ ikke for at skulle sige nogen imod, men hvorfor ikke søgemaskineoptimere et website med det samme, når man nu kan? Der er da ikke grund til at lade dette gå til spilde. Bare min personlige mening.

At arbejde med liste-menuer er nu egentlig nemt nok. Specielt hvis du skal lave det med undermenuer. Jeg kan klart anbefale det.

HTML kode

 <!-- hele menuen styles ud fra klassen -->
 <ul class="menu">
     <!-- en overmenu skrives bare således... -->
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a>
         <!-- her laver vi et break til vores undermenu -->
         <!-- denne styles naturligvis, og sættes til display:block; -->
         <ul>
             <!-- her er vi inde i undermenu.. ganske simpelt -->
             <li><a href="#">Link 2.1</a></li>
             <li><a href="#">Link 2.2</a></li>
         </ul></li>
     <li><a href="#">Link 3</a></li>
 </ul>

Dejlig nemt at konstruere. Uden tvivl kan jeg sagtens se idéen i at droppe liste-menu, men når fremtiden nu ligger med meget søgemaskineoptimering kan man jo ligeså godt allerede begynde nu. Bare min personlige mening

Indlæg senest redigeret d. 06.03.2013 07:51 af Bruger #16025

Bruger #5789 @ 06.03.13 07:59

640

hvornår har unødvendigt markup været med at til hjælpe på søgemaskiners egenskaber til at vurdere og vægte ? jeg ved godt de acceptere næsten alt, men det vil ikke hjælpe at smide en "flad" menu i en ul.

Som sagt viser du jo selv et nested eksempel, som jeg også selv kraftigt anbefaler i ovenstående tråd til nestede menu struktur, men 6 links ved siden af hinanden kræver ingen ul (med mindre man har brug for extra markup mht til advanceret design).

"...Fremtiden ligger i søgemaskineoptimering", så lever resten af verden vist i fremtiden

Bruger #17081 @ 06.03.13 08:08

1.258

tjo, HTML5 er baseret på man skal lave ekstra markup af rent semantiske årsager. Men ja eksemplet kan sagtens laves uden UL, jeg ville dog stadig have <nav> tag'et med

Desuden er <a> tag'et et inline element, så du kan ikke style det med margin og padding.

Indlæg senest redigeret d. 06.03.2013 08:09 af Bruger #17081

Bruger #16025 @ 06.03.13 08:21

442

@Dan - ja, "nav"-tagget er super godt at bruge. Tænkte ikke lige på den :-).

Jeg har lavet research på SEO, og fundet ud af at UL-lister er det mest optimale, ihvertfald indenfor SEO og menuer. Men selvfølgelig kan man undlade dem i dette eksempel. Syntes bare ikke man skal lade det gå til spilde når nu det giver bonus hos søgemaskinerne

UL/LI Navigation

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler