Får ikke dropdown meny til å virke...

Amento · 14. april 2006

Jeg trenger virkelig denne dropdown menyen fordi jeg har veldigh mange sider og temaer på siden min. Problemet er at jeg suger i HTML osv.

Visually appealing?

If you have previewed the menu above, you’ll see a pretty boring list of items. And I promised you it would be visually appealing! Let’s add some style.

The first step is to remove the indents and bullets from the unordered list and define the width of our menu items.

ul {

margin: 0;

padding: 0;

list-style: none;

width: 150px;

}

Hvor skal det skrives in da?? Bare et eksempel på en del av det som jeg ikke skjønner... i tillegg må jeg ha 3 nivå, altså f.eks. "spill - action - GTA"

Hvis noen kunne hjulpet meg med dette så ville jeg blitt utrolig glad...

Scix · 14. april 2006

De koden som ikke er HTML er CSS. Men det viste du kanskje? uansett så må det lagres i en CSS fil, eller imellom <style type='text/css'>/* CSS her */</style>, som skal ligge i head tagen til siden din

Amento · 14. april 2006

De koden som ikke er HTML er CSS. Men det viste du kanskje? uansett så må det lagres i en CSS fil, eller imellom <style type='text/css'>/* CSS her */</style>, som skal ligge i head tagen til siden din

5917831[/snapback]

Skjønte at noe var CSS, men ikke hva... Tror du du kunne ha satt det sammen slik det skal være for meg fordi jeg skjønner ikke noe av det...

Scix · 14. april 2006

kan prøve å snikre sammen noe. Gi meg noen minutter

Amento · 14. april 2006

kk. Tusen takk!

Scix · 14. april 2006

Egentlig bare copy/paste her da... og to nivåer... Må lese, prøve og feile litt før jeg har en med 3 nivåer

dropdownmenu.zip

Scix · 14. april 2006

Sikkert ikke den beste løsningen, men det funker

HTML

<ul id='menu'>
<li><a href="#">Home</a></li> 
<li id='lvl2About'><a href="#">About</a> 
 <ul> 
 	<li><a href="#">History</a></li> 
 	<li><a href="#">Team</a></li> 
 	<li><a href="#">Offices</a></li> 
 </ul> 
</li> 
<li id='lvl2Services'><a href="#">Services</a> 
 <ul id='lvl2ServicesUl'> 
 	<li><a href="#">Web Design</a></li> 
 	<li><a href="#">Internet Marketing</a></li> 
 	<li><a href="#">Hosting</a></li> 
 	<li><a href="#">Domain Names</a></li> 
 	<li id='lvl3Broadband'><a href="#">Broadband</a>
   <ul>
   	<li><a href="#">Priser</a></li>
   	<li><a href="#">Hastigheter</a></li>
   </ul>
 	</li> 
 </ul> 
</li>
<li id='lvl2Contact'><a href="#">Contact Us</a> 
 <ul> 
 	<li><a href="#">United Kingdom</a></li> 
 	<li><a href="#">France</a></li> 
 	<li><a href="#">USA</a></li> 
 	<li><a href="#">Australia</a></li> 
 </ul> 
</li> 
</ul>

CSS

*
{
padding: 0;
margin: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

/* Denne delen som styrer hvilke som skal vises */
li#lvl2About:hover ul { display: block; }
li#lvl2Services:hover ul#lvl2ServicesUl { display: block; } /* Den med en tredje level */
li#lvl2Contact:hover ul { display: block; }
li#lvl3Broadband:hover ul { display: block; }

Hovedtingen jeg gjorde var å sette en del ider det som det skal skje noe

Amento · 14. april 2006

Bruker DW og WYSIWYG-editor. Kan du forklare hvordan jeg skal gå fram med CSS delen? Har blitt litt bedre i CSS etter å ha fikset på forum med enda skikkelig newbie...

Scix · 14. april 2006

Se på filen jeg lastet opp.

Vet du hvordan du laster inn ett stilark?

<head>
...
<link rel='stylesheet' type='text/css' href='URL_til_CSS_fil.css' />
</head>

uansett kan du bare legge CSS som ligger i posten min over, inn i stilarket, og så bygge om HTML filen slik at den passer for deg.

Du må passe på at id-ene og stildefinisjonene som jeg har brukt, ikke kolliderer med noe du alt har...

edit:

eller du kan laste inn hele dritten i DW, og bygge rundt den

dropdownmenu3niv.zip

Endret 14. april 2006 av Scix

Amento · 14. april 2006

Usikker på hvordan jeg lager et stilark... Jeg har prøvd å trykke på text - CSS styles - new stylesheet, men jeg klarer ikke å finne en plass hvor jeg kan sette in den CSS delen din...

Amento · 14. april 2006

tror jeg har fått til noe mer nå... Men hvor skal jeg plassere denne delen?

<head>

...

</head>

Scix · 14. april 2006

Hvis du bruker design delen, kan du gjøre slik:

1 - Høyreklikk på arket du vil legge css-en inn i.

2 - Velg "CSS Styles" fra menyen som dukker opp.

3 - Da kommer det opp en meny til. Der velger du "Attach Style Sheet..."

4 - I boksen som dukker opp, finner du stilarket du vil laste inn.

Hvis du vil gjøre det gjennom kode, kan du gjøre slik:

1 - Gå inn i kode delen av siden du vil legge css-en inn i.

2 - Finn <head> delen av siden. Hvis ikke HTML siden din er helt på styr, burde

du finne denne helt øverst i koden.

3 - Her legger du til koden <link rel='stylesheet' type='text/css' href='URL.css'>

4 - Gå tilbake til design delen

Hvis du ikke finner noen stilark, kan du opprette ett gjennom:

File -> New

Basic page -> CSS

Edit: Lille leif var her 14. april 2006

Edit 2: Lille leifs venn var også her samme dagen

Endret 14. april 2006 av Scix

Amento · 14. april 2006

Sinnsykt bra! Tusen takk! En ting til... Er det mulig å lage en rollover effekt ved at skriften blir rød?

EDIT: Glemte å spørre om hvor jeg skal sette inn linken som knappene skal sende deg til... Vet ikke det heller...

Endret 14. april 2006 av Zathardor

Scix · 14. april 2006

Det blir på "vanlig" måte. I href parameteret til a tagen

Siden du bruker design kan du vel bare markere aktuell tekst, høyreklikke, og velge Make Link. Hvis du skal endre en gammel link, går du frem på samme måte, men velger Change Link

Edit:

okda. er med på problemet. Du kan deaktivere CSS imens du skal endre URL til linkene. Er ikke helt sikker på hvordan du skal gjør det i design, men i kode kan du bare pakke <link> koden inn i

<!-- <link href="dropdownmenu.css" rel="stylesheet" type="text/css" /> -->

Endret 14. april 2006 av Scix

Amento · 14. april 2006

HVIS du orker, kan du forklare hvordan jeg skal gjøre det? rollover-greia altså... Hadde vært velødig fint om du hadde orket :blush:

Scix · 14. april 2006

ul#menu li a:hover
{
color: #990000;
}

Putt denne koden inn i CSS filen en plass. Da blir alle linkene som ligger inne i li i ul, med id menu *puh, mye i-er der* røde når du holder over de...

Edit:

Hvis du vil ha litt system på det, kan du legge det under denne koden i CSS filen

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

Endret 14. april 2006 av Scix

Amento · 14. april 2006

Funker Igjen, tusen takk Scix Dette forumet trenger flere som deg

Scix · 14. april 2006

Hehe, takk for det.

Scix · 14. april 2006

Btw. Det funker ikke helt i IE. Da må du til med noe JavaScript. Står litt om det på siden du viser til i første post

Amento · 14. april 2006

Det ble helt på tryne i IE... Menyen funka ikke i det hele tatt... Tror du du kan fikse det?

BTW, har lagt til et script for å vise en tilfeldig tekst. En liten del av det:

text[number++] = "Random text string 2."

Hvordan kan jeg faktisk ha tegnet " inni string'en?

Får ikke dropdown meny til å virke...

Anbefalte innlegg

Lenke til kommentar

Videoannonse

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Hvem er aktive 0 medlemmer