html - menu problem - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #12118 @ 03.09.10 17:14

Hej udviklere,

jeg er igang med at sætte en menu op som skal se sådan her ud: http://img411.imageshack.us/f/menufi.png/

men jeg ved ikke helt hvordan det skal gøres, jeg har prøvet med

HTML kode

 <div id="menu"> 
         <ul> 
             <li>Forside</li> 
             <li class="menuUndertekst">Det store overblik</li> 
             <li>Nyheder</li> 
             <li class="menuUndertekst">Seneste nyt</li> 
             <li>Forum</li> 
             <li class="menuUndertekst">Det her det starter</li> 
             <li>Anmeldelser</li> 
             <li class="menuUndertekst">Godt eller skidt</li> 
             <li>Links</li> 
             <li class="menuUndertekst">Den store database</li> 
             <li>Tekster</li> 
             <li class="menuUndertekst">Følg med i teksten</li> 
             <li>Kontakt</li> 
             <li class="menuUndertekst">Kontakt os</li> 
         </ul> 
     </div><!-- menu -->

min CSS

CSS kode

 #menu {
     width:953;
     height: 64px;
     background-image: url(menu.png);
     background-repeat: no-repeat;
     margin-bottom: 5px;
 }
 
 #menu ul li {
     list-style-type: none;
     float: left;
     font-weight: bold;
     color: #cccccc;
 }
 
 .menuUndertekst {
     color: blue;
     float: left;
 }

Håber i kan hjælpe

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

Sorter efter stemmer Sorter efter dato

Bruger #3143 @ 03.09.10 17:37

1.965

Det virker forkert at placere hoved-teksten og underteksten i hver deres <li>-element. Jeg ville nok placere dem begge i samme element, og så putte underteksten ind i en span eller div.

(jeg kommenterer ikke på hvordan siden ser ud med din css da du ikke har givet noget link til et fungerende eksempel, så jeg kan ikke undersøge koden)

Bruger #15754 @ 03.09.10 17:55

989

Præcis, du kan ikke få 2 li til at lægge sig under hinanden uden at hacke dig for sygt ud af det. Smid dem i samme li tag.

Så har jeg lige en lille optimering af dit css:

CSS kode

 #menu {
 width:953;
 height: 64px;
 background: url(menu.png)  no-repeat;
 margin-bottom: 5px;
 }
 
 #menu ul li {
 list-style-type: none;
 float: left;
 font-weight: bold;
 color: #ccc;
 }
 
 .menuUndertekst {
 color: blue;
 float: left;
 }

Indlæg senest redigeret d. 03.09.2010 17:56 af Bruger #15754

Bruger #10216 @ 03.09.10 20:03

4.283

Jeg ville nok gøre det på en anden måde:

Kode

<div id="menu"> 
         <ul> 
             <li>
             	<a href="#"><b>Forside</b>Det store overblik</a>
             </li> 
             <li>
             	<a href="#"><b>Tekster</b>Følg med i teksten</a>
             </li> 
             <li>
             	<a href="#"><b>Kontakt</b>Kontakt os</a>
             </li> 
         </ul> 
     </div>

CSS:

Kode

#menu ul li {
	font-family: Times New Roman;
	float: left;
	text-align: left;
}

#menu ul li a {
	display: block;
	padding: 5px 10px;
	color: #aaa;
	text-decoration: none;
}
#menu ul li b {
	display: block;
	text-transform: uppercase;
}

Og så selvfølgelig de andre nødvendige CSS regler.

Bruger #10216 @ 03.09.10 20:03

4.283

... en for meget ...

Indlæg senest redigeret d. 03.09.2010 20:04 af Bruger #10216

Bruger #12118 @ 04.09.10 16:45

Tusind tak for hjælpen

havde slet ikke tænkt på jeg kunne gøre det sådan michael

har delt point mellem jer alle for jeres hjælp

menu problem

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler