Hjälp med listmeny ev. annan lösning

9 svar · 420 visningar · startad av nummersju 23 juli 2006

nummersjuMedlem sedan aug. 2005198 inlägg

Frågan23 juli 2006 16:07#1

Hej hej wF'are!
Jag skulle vilja ha hjälp med en listmeny. Jag hade tänkt att den ska se ut så här:
MENY 1 - MENY 2 - MENY 3 - MENY 4
Dvs. det ska vara ett bindestrek mellan menyvalen. Men inte innan första och efter sista.
Går detta att lösa med lista? Eller finns det något annat bra knep?

Tack på förhand.

tantenMedlem sedan nov. 20051 596 inlägg

23 juli 2006 17:41#2

Har du tänkt att det ska hända något mer med din meny, sådant som att bakgrunden ändras eller att du kommer vilja ha en dropdownmeny på någon av länkarna. I så fall ska du nog göra en lista av det.
Meningarna är lite olika om ifall man alltid ska ha lista eller inte, men om man har en avdelare, mellan länkarna som gör att det inte blir en enda lång länk av alltihop i vissa webläsare, så som du har den nu, så kan du väl ha menyn som den är.
typ <a href="#">meny 1</a> -
och i css
a {text-transform: uppercase;} för att få stora bokstäver...
Kanske kommer det höras lite märkligt vid uppläsning... men med fyra länkar kanske det inte gör så mycket.

K@llenMedlem sedan mars 20032 667 inlägg

23 juli 2006 17:51#3

Kan denna listversionen vara något om du modifierar bort nestlingen samt byter skiljetecken?
http://www.webforum.nu/showthread.php?p=1213737#post1213737

jarvkloMedlem sedan juli 20013 378 inlägg

23 juli 2006 19:02#4

Hmm...
Det är svårt att göra på ett sätt som funkar överallt med enbart listor pga begränsat CSS-stöd i IE6...

Men om du kan acceptera att strecken saknas helt i IE så kan du till exempel göra såhär (kanske lite enklare än koden som K@llen länkar till ;) ):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>An example by Jarvklo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css">
		ul.nav, ul.nav li {
			display: inline
		}
		ul.nav li+li:before { content:" - "; }
		</style>
	</head> 
<body>
<ul class="nav">
	<li>Fee</li>
	<li>Fie</li>
	<li>Foe</li>
	<li>Fum</li>
</ul>
</body>
</html>

zcorpanMedlem sedan dec. 20042 245 inlägg

23 juli 2006 19:35#5

jarvklo skrev:

li+li:before

Smart! (y)

OkkidoMedlem sedan maj 20007 492 inlägg

23 juli 2006 19:38#6

annars kan du göra om ditt bindestreck till en bild och lägga som bakgrund i din li, och sen sätta en class på den sista li:en att den inte ska ha någon bakgrundsbild.

nummersjuMedlem sedan aug. 2005198 inlägg

23 juli 2006 20:35#7

Härligt, massa sköna lösningar!
Jag kommer nog att prova jarvklos och okkidos lösningar. Återkommer med vilken jag väljer! :D

nummersjuMedlem sedan aug. 2005198 inlägg

23 juli 2006 20:38#8

Tack alla andra också :)

seattlegrungeMedlem sedan juli 200653 inlägg

23 juli 2006 20:43#9

Okkidos lösning ser jag som den bästa och den brukar jag använda mig av. Då kan du samtidigt se till att det fungerar snyggt i de flesta webbläsare på olika plattformar.

nummersjuMedlem sedan aug. 2005198 inlägg

23 juli 2006 21:00#10

tnx; då använder jag det då! :) tackar tackar!