posisjonere en drop down menu

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012

Hei igjen smil

Jeg lurere på hvordan jeg får posisjonert en enkel drop down menu på et bestemt sted på siden.

La  oss si at jeg ønsker å ha den 500px fra bånn av siden og 300px fra venstre.

Når jeg prøver dette så får jeg ikke til å flytte hele men kun deler av den :S

Her er kodene jeg knoter med:

CSS-kildekode:

  1. #nord {
  2. margin: 0px;
  3. padding: 0px;
  4. width: 150px;
  5. font-size: 18px;
  6. text-decoration: none;
  7. }
  8. #nord ul {
  9. margin: 0px;
  10. padding: 0px;
  11. text-decoration: none;
  12. position: static;
  13. }
  14. #nord ul li {
  15. list-style-type: none;
  16. text-decoration: none;
  17. position: static;
  18. }
  19. #nord ul li a {
  20. font-family: "Comic Sans MS", cursive;
  21. font-size: 18px;
  22. color: #000;
  23. text-decoration: none;
  24. display: block;
  25. list-style-type: circle;
  26. }
  27. #nord ul ul {
  28. visibility: hidden;
  29. position: absolute;
  30. }
  31. #nord ul li:hover ul {
  32. visibility: visible;
  33. }
  34. #nord ul li a:hover {
  35. color: #3CF;
  36. }
  37. #nord ul li ul li a {
  38. font-size: 13px;
  39. background-color: #903;
  40. }

HTML-kildekode:

  1. <div id="nord">
  2. <ul>
  3. <li><a href="#">Nord-Norge</a>
  4. <ul>
  5. <li><a href="#">blabla</a></li>
  6. <li><a href="#">blabl</a></li>
  7. <li><a href="#">blabl</a></li>
  8. <li><a href="#">blabl</a></li>
  9. </ul>
  10. </li>
  11. </ul>
  12. </div>

HjemmesideEdit: Jeg formaterte koden din. Når du skal legge inn f.eks. CSS: Klikk "code", deretter "css" og paste innholdet. Husk å klikke "code" før du velger hva slags kode du skal legge inn.

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
Svar til kommentaren

Jeg la enkelt og greit til følgende kode:

  1. #nord {
  2. position: absolute;
  3. bottom: 500px;
  4. left: 300px;
  5. }

Dette kommer i tillegg til de instillingene du allerede har satt på dette elementet (div#nord).

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

aaah! fantastisk! Hva skulle jeg gjort uten deg glis

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Hehe, bare hyggelig det (og tusen takk for enda en donasjon!). Du trenger ikke å donere hver gang altså, selv om jeg blir veldig glad for det! Det er veldig få som pleier å donere, men du har donert nok i massevis nå. smil Jeg vil ikke at folk skal tro at jeg krever donasjoner for å hjelpe til. Jeg hjelper uavhengig av om jeg får donasjon eller ikke – du skal ikke føle noe press til å donere med andre ord.

Angående bruk av position: absolute i CSS

Husk at når du posisjonerer elementer med absolute, så vil posisjoneringen gjelde dersom du gjør vinduet større/mindre også (prøv det). Dette kan gjøre at elementet du posisjonerer vil gå over andre elementer (siden position: absolute tar elementet ut av den naturlige posisjonen relativt til de andre elementene).

Du kan lese mer om positioning i CSS her – og så er det selvfølgelig bare å spørre hvis det er noe som er uklart. smil

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

når jeg nå åpner og ser på det i safari eller chrome så er posisjonene forskjellige?

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Ok, hvordan ser det annerledes ut? Her ser det likt ut i Safari (på Windows), Chrome og Firefox.

Har du validert HTML-koden din hos W3C? Hvis ikke; gjør det og rett opp eventuelle feil. Grunnen til dette er at feil blir behandlet litt forskjellig i forskjellige nettlesere, og dette kan ofte gi forskjellig output. Hvis du har 0 feil, så er det enklere å finne ut hva som kan være årsaken til at du får forskjellig output.

Jeg legger ved filen jeg brukte for å prøve meg frem – denne validerer og jeg vil gjerne at du prøver denne i nettleserne dine for å se om den også skaper forskjellig output. Høyreklikk og last ned eksempelfil for plassering av dropdown i zip-format.

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

ja, din står støtt som et fjell.

"ingen" feil ellers på siden.

Det ser annerledes ut ved at menyen er plassert forskjellig i forhold til safari og chrome.

Siden ellers er laget ut i fra en template, "body" ikke er gitt størrelse på i høyden slik at jeg kan fylle de forskjellige sidene ut i fra hva jeg ønsker.

Har et bagrundsbilde som er i en div tag som er deler at et kart, så det syn godt når menyen ikke beholder posisjonen sin, det andre på siden forandrer seg ikke i safari/chrome.

?

 

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Det du limte inn fra validatoren var ikke så lett å tolke, så jeg fjernet den. Det så ut til at du hadde noen feil. Kan du gjøre en av disse tingene;

  • Gi link til siden din, da kan jeg validere og sjekke den selv.
  • Kopiere og lime inn hele kildekoden for én webside hvor dette er et problem

Det første er det beste, men om du gir meg kildekoden så kan jeg lage et dokument med den i og se om jeg ikke får det på stell her.

Det er veldig vanskelig å hjelpe til når jeg ikke ser selve kildekoden.

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

*slettet*

 

(kan du slette linken etter du har sett den, ønsker helst ikke at noen skal rote seg inn på siden føre den er ferdig)

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Jeg slettet den med en gang – stilig side forressten smil

Det første du må gjøre er å endre litt på "index.html". I toppen av denne fila står det:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!-- BC_OBNW -->
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Erstatt dette med

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!-- BC_OBNW -->
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

til å begynne med og si fra. Den vil nemlig ikke la seg teste av validatoren, siden den klager på disse linjene.

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

da har jeg endret, men ser ikke feilen jeg.

Kan det ha noe med elementet (div#nord) med posisjonen på den eller noe, siden det er den som flyter ut og ikke andre ting?

hva kan en teste/legge til....eller?

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Nei, du har ikke endret alt jeg sa, for hvis du ser i kildekoden din, så er det fortsatt feil på linje 2.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml">

Hvis du ser på den linjen der, så har du xmlns="..." to ganger, men den skal bare være der én gang. Du må ha doctype i orden for å i det heletatt få validert siden, så når du har endret den, så kan du sjekke om siden din validerer eller ikke.

Det jeg prøver på er å;

  1. Få deg til å sette riktig doctype
  2. Validere siden
  3. Finne og ordne opp eventuelle valideringsfeil

Først når siden validerer, så kan vi begynne se hva som kan gjøre at siden oppleves forskjellig på tvers av nettlesere.

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

sånn?

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Ja, sånn nå validerer siden din, og det var ingen andre feil på den, så gratulerer med det.

Når jeg ser på siden din, så ser det ut som om menyen står likt i Chrome og Safari, mens menyen er noe lenger til venstre i Firefox – er det dette som er problemet?

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

smil

ja, når jeg ser på menyen i Chrome og Safari så er de på to forskjellige steder.

Ønsker den skal ha samme posisjon i begge (eller alle nettlesere)....

For ønsker å ha flere menyer og da kan ikke nord-norge menyen stå over "vest-norge"....

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Jeg skjønner. Jeg foreslår at du lager alle menyene ferdig før du begynner å plassere dem. Da blir det enklere å posisjonere dem slik at de blir stående noen lunde likt på tvers av nettlesere.

Det er dessverre slik at forskjellige nettlesere tolker kode litt forskjellig, og det gir opphav til små variasjoner i måten elementer blir rendert på. Dette gjelder ikke bare på tvers av nettlesere, men også for forskjellige versjoner av nettleserne. Posisjonering er en av de tingene webdesignere må slite litt med.

Nå som koden din er validert, så har du et i alle fall et godt utgangspunkt.

Når du har laget alle menyene, så kan du plassere dem slik du vil at de skal være i en nettleser. Ta så screenshot av hvordan det ser ut i den nettleseren som viser det korrekt, samt i de andre nettleserne. Da kan vi prøve å ta det derfra, ok?

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

finnes det en bedre måte en å bruke css til å plasere menyer, siden det blir så ulikt i forhold til nettleserne.

Mulig jeg må tenke helt nytt.....og eventuelt få noen til å lage en slik kart meny løsning.

Vet du hvilket "språk" det hadde hvert best, slik at det blir likt i forhold til nettleserne?

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

CSS er den beste måten å gjøre det på. Problemet er at ingenting blir helt likt på tvers av nettlesere, det vil alltid være små variasjoner. Man kan gjøre disse variasjonene små og insignifikante, men da må jeg vite eksakt hva du ser.

Kan du poste et bilde av hvordan du vil at det skal se ut, samt hvordan det faktisk ser ut? Her ser du hvordan man laster opp bilder i forumet.

Grunnen til at jeg må se screenshot, er fordi jeg ikke ser spesielt stor variasjon her. Du har ikke forklart eksakt hvordan det ser ut hos deg, så derfor vil jeg se skjermdump.

Tante grønn
Tante grønns bilde
Avlogget
Donator
Ble med: 07.03.2012
posisjonere en drop down menu

Oj, det jeg ser nå når jeg skulle ta skjermdump er jo at menyen forandrer seg i forhold til om siden er stor eller liten.

Om du tar foreksempel forminsker siden eller forstørrer siden så ser du at den er "festet feil" smil

Vet du hvordan en fester den til selve siden og ikke nettsidevinduet? glis

Kan filme siden om du ikke skjønner hva jeg mener....

((lurer egentlig også på....men det behøver du ikke svare på nå altså. Slang ut en meny til og når du går på den øverste så "ødelegger" den som er under...med at ikke drop down menu legger seg over menyteksten på meny 2(midt-norge).))

Hjemmeside
Hjemmesides bilde
Avlogget
Bidragsyter
Ble med: 17.06.2008
posisjonere en drop down menu

Se der, ja. At elementer med position: absolute forandrer seg i forhold til størrelsen på vinduet sa jeg forøvrig i post #3, haha. Der ga jeg også en link til W3Schools hvor temaet er posisjonering av elementer. Les om posisjonering der!

Et hint om hva du må lese på: Det du er ute etter er position: relative. Denne posisjonerer elementer relativt til hvor de er plassert i selve HTML-koden (altså ikke absolutt i forhold til karmene i nettleseren).

Prøv deg litt med position: relative, og hvis du ikke får det til så skal jeg hjelpe deg. smil

Svar på forumemnet

(If you're a human, don't change the following field)
Your first name.
Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.