Wie wil menu helpen?

[Martijnn]

Hi all!

Ik heb een probleem met mijn menu...

Ik probeer een (flash) menu na te maken. Ik ben niet echt goed in dit alles, maar ik google alles bij elkaar en als ik echt vastloop... Well.. Ik ben nu hier...

Hier staat ons flash menu: (coverbandthetour.nl)

en dit is waar ik ben:
(Menu)

Mijn CSS: (Stylesheet)

Zoals je ziet is er een transparante achtergrond in de uitroller (Bij mij is het een semi-transparante afbeelding), maar deze moet weg als de muis erop komt... Dit krijg ik maar niet voor elkaar... Grr %$&@#^$

Iemand?

Thanks!

Martijn

 

[csshunter]

Hoi Martijn,
Voordat er met de css te onderhandelen valt over het show/hiden van een achtergrondkleur, denk ik dat je eerst even de html moet nalopen. Er zitten zo wat rare dingen in, zegt de html-validator. En ik kan 'm geen ongelijk geven: dubbele id's en <span>'s om <div>'s heen.
In de css valt te signaleren:

...
#nav li:hover menu_right { 
...
#nav li a:hover menu_right { 
...

Bedoeld zal zijn de #menu_right (die een class .menu_right hoort te zijn).
Anders zoekt de css een tag <menu_right> die er niet is.

Met vriendelijke groet,
CSShunter
____________
PS: Weet je dat men op een resolutie van 1024*768px tegelijkertijd moet hoveren èn scrollen om de onderste items van het menu te kunnen bereiken?

Dat vraagt wel enige behendigheid!

 

[Martijnn]

Hi Hunter!

Allereerst bedankt voor je reactie! Daar kan ik wat mee. De lelijke HTML heb ik soort van opgelost; ik ben een beginner, maar wat mij betreft kan 'ie d'r mee door nu...
Brengt wel weer gelijk nieuwe issues in mijn menu zoals je kunt zien... (Menu) (nieuwe menu-link)

Ik heb de <span>'s die om de <div>'s stonden vervangen door <div>'s.
Waarheid gebiedt me te zeggen dat ik eigenlijk wel wist dat dit geen net stukje code was, maar ik zat te experimenteren en op deze (lelijke) manier, deed hij opeens wel wat ik wilde. (in de 4 browsers waar ik het in check.)

Ik denk dat in mijn css ook nog wel wat dubbele verwijzingen c.q. slordigheden staan hier en daar, maar ik ben begonnen met een heel simpel menuutje die ik stap voor stap aanpas om te komen tot (iets wat lijkt op) het flash-menu van onze site... Ik zoek alles op op internet en ik kom een heel eind, maar door al dat ge-koppiepeest ben ik een beetje de weg kwijtgeraakt denk ik... Dan zie ik door de code het bos niet meer zegmaar...
Ik begin het wel, stapje-voor-stapje, te snappen en ik vind het leuk! Maar dat terzijde...

Wat betreft de beeldschermresolutie... Ik zag het op je screendumpje inderdaad.. hmm.. In principe maak ik gewoon de flash-site na. Die is ontworpen door iemand anders; ik gebruik dezelfde afmetingen...
Bij mij past het hele menu overigens wél in het scherm op 1024x768 (in de 4 browsers waar ik het in check: IE, FF, Chrome en Safari).
Misschien kan ik als het menu klaar is nog wel een paar pixeltjes sprokkelen, maar dit is wel zo'n beetje wat het moet worden...

Nou, ik ga d'r nog ff aan knutselen, maar nu ik hem door validator heb gehaald, wil je me dan wel helpen? Please, please, pretty please?

Greetz,

Martijn

 

[csshunter]

Hoi Martijnn,

Please, please, pretty please?

Niet op je knieën vragen, hoor! Opstaan!
(Als een vrijwilliger van het forum tijd en zin heeft, gebeurt het vanzelf. En anders niet - dan helpen geen smeekbedes. )

=====

Bij mij past het hele menu overigens wél in het scherm op 1024x768

Nog eens even naar m'n FF gekeken. En ja, dat kan kloppen:

• als je èn geen toolbar in je browser hebt staan,
• èn je statusbar niet aan hebt staan,
• èn je Windows-startbalk op "automatisch verbergen" hebt staan.

Dan komt ie (net) helemaal in beeld.
Maar dit kan je niet van je bezoekers verwachten.
CSShunter heeft bv.:

• altijd de Web Developer Toolbar in beeld staan, omdat die zo ver-schrik-ke-lijk handig is,
• altijd de statusbar aan staan om te zien waar men de brave bezoeker met de links naar toe wil sturen.
• altijd de (WinXP) startbalk aan staan om snel tussen verschillende documenten en programma's te kunnen wisselen.

Zo zullen er meer zijn.
Het origineel heeft trouwens hetzelfde, het is een prima kopie! Maar het probleem is snel opgelost door een iets kleiner letterformaat voor het menu te nemen.

• Met een letterformaat dat een paar tikkies kleiner is, ben je er al.
• Als je de .container en de .content een breedte van 990px geeft en de .content ook een {overflow:hidden;}, dan verdwijnt de overbodige scrollbar onderin (er is bij 1000px net wat breedte tekort op 1024*768px in FF), en dat scheelt ook weer hoogte.
• Als ik het origineel bekijk, zou het verder in mijn ogen een hele verbetering zijn als het menu niet verder komt dan de afbeelding, zodat de inhoud vrij blijft. Het zijn koeien van letters, en wat mij betreft kunnen ze gerust een stuk kleiner om het idee te handhaven en ook uitstekend zichtbaar en bruikbaar te zijn.
  Aan een boom zo vol met pixels mist men 1-2 pixels niet!

=====

De lelijke HTML heb ik soort van opgelost; ik ben een beginner, maar wat mij betreft kan 'ie d'r mee door nu...

Lijkt me ook, hij is nu 100% valid html volgens de html-validator, en 100% valid css2 (op de css3 text-shadow na). :thumb:

• Hoewel html-Tidy (ook al zo handig) bezwaar aantekent tegen de <div>'s binnen de <a>'s; die wil waarschijnlijk dat het allemaal <span>'s zijn, omdat de <a>'s inline elementen zijn die dan geen block-elementen als <div>'s in zich mogen hebben.

=====

Maar nu het ding zelf. Inderdaad, veel bomen om het bos te kunnen zien. Door het script is ook lastig te begaffelen waar wat zit en hoe het precies werkt.
Als ik zoiets moest bouwen, zou ik met een schone lei beginnen, ook stapje voor stapje werken, en dan:

• om te beginnen jQuery uitzetten,
• het menu als css drop-down menu aanmaken (dat ook gewoon zonder javascript werkt; nu komt er helemaal geen menu als javascript uit staat),
• met eerst de hover-status uitgeschakeld, zodat je ziet waar je met de vormgeving mee bezig bent,
• de linkerkant-gegevens van de items als css pop-ups maken, zodat je van het menu af kunt komen als je met je muis naar naast het menu-gedeelte gaat,
• dan het hoveren regelen,
• en pas op het laatst het uitrollen gaan implementeren via jQuery, of met een veel eenvoudiger scriptje.

Dwz mijn advies zou zijn: niet rechtstreeks verder borduren op wat er nu is, maar dat goed bewaren. In een verse start kan je dan die eigenschappen invoegen die al goed werken. Dat werkt waarschijnlijk veel sneller dan bijsturen van het al zeilend schip.
(zie ook deze)

Met vriendelijke groet,
CSShunter

 

[Martijnn]

Hi!

Ok, ik heb je verhaal gelezen (thanks trouwens!), alle links bekeken en ben opnieuw begonnen met mijn menu. (zie hier)

Ik heb er even wat elementen van de pagina omheen gezet, zodat ik een beetje kan zien hoe-of-wat en om de eigenschappen van de links te kunnen aanpassen, aangezien deze afwijkend zijn van de rest van de site...

Uiteindelijk wordt het menu waarschijnlijk een php pagina die ik ga includen in de menudiv. (Kleine vraag daarover: moet deze menupagina dan ook voorzien zijn van head, html en body tags e.d.? Of kan alleen het menu erin staan?)

Zou je een blik willen werpen op wat ik tot dusver geknutseld heb en me kunnen zeggen wat ik goed- of niet goed gedaan heb?
Obviously zijn er dingen niet goed, want de zwarte balk op de voorgrond... en hoe kan ik de hoogte van de "home-li" aanpassen?

Is toch lastiger dan ik dacht om het zelf te doen...
OK, het wordt een zooitje en zo leer ik het nooit, maar met koppiepeesten van internet en dan tweaken heb ik een stuk sneller resultaat...

Laters!

Martijn

Oja.. en je punt over de hoogte van het menu, ben ik het mee eens, maar ik neem aan dat ik dat aan het eind ook nog redelijk makkelijk kan aanpassen? Er zijn namelijk nog 6 mensen die zich vreselijk bezig hebben gehouden met het ontwerp van onze huidige site, dus als ik iets wil wijzigen, moet ik dat ff in de groep gooien
Ik wil het menu eigenlijk eerst zoals 'ie nu is en dan kan ik ze daarna laten zien hoe het beter kan...

Thanks again!