Hoi allemaal!

Ben een website aan het maken (hangt hier even achter www.yormartens.nl/tts/ ), bijna klaar en helemaal tevreden, alleen het bovenste menu...

1. Graag zou ik hier rollover images van maken op een desktop.

(heb uiteraard gezocht, moet kunnen met CSS, maar ik snap er vaak helemaal niks van... :mad:)

2. Daarnaast zou ik graag de images alleen op een desktop zien en zodra men hem op een tablet of smartphone bekijkt alleen de tekst wordt weergegeven...

Is dit mogelijk? En zo ja, kan iemand mij in Jip en Janneke taal uitleggen hoe ik dat kan doen?

Alvast bedankt voor alle hulp!!

Gr. Yor

Onderwerp is gesloten.

Gast
Gebruiker

Meer

11 nov 2014 10:50 #11075 door Gast

Beantwoord door Gast in topic Menu

De basis zou als volgt moeten zijn:

Tekst-links gebruiken als menu-items (je gebruikt nu afbeeldingen als links, zou je eigenlijk nooit moeten doen)
Via css de tekst verbergen (text-indent:-9999px;}, de link als block (display:block) weergeven, een hoogte en breedte geven en voorzien van een achtergrond-afbeelding (background-image:url(../images/menu/service.png), gebruik daarvoor de afbeeldingen die je nu gebruikt als link
Bij mouse-over een andere achtergrondafbeelding gebruiken (li.item-125 a:hover {background-image:url(../images/menu/service-hover.png);})

Tablet/smartphone:

In de code voor tablet en smartphone kun je de eerder gemelde 'text-indent' weer verwijderen, alsmede de code voor de achtergrondafbeelding. De tekst zal dan weer tevoorschijn komen.

Je zou een aparte mobiele stylesheet kunnen maken of zoiets tussen je bestaande css kunnen plaatsen:

Code:

/* Alle Smartphones in portrait and landscape ----------- */
@media screen and (max-width:600px) {
[I]hier je aangepaste code[/I]
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
[I]hier je aangepaste code[/I]
}

Ik besef dat het bovenstaande nog niet geheel Jip & Janneke-proof is, maar wellicht helpt het je wat op weg. Ik ken jouw template niet en weet verder niet hoe jij je menu gemaakt hebt. Er is je vast al door iemand verteld dat Firebug een goede plugin is om de css- en html-code van je website te bekijken. Gebruik dan ook deze plugin en probeer wat wijzigingen aan je website toe te passen.

Succes! Laat maar weten hoe het vordert.

Onderwerp is gesloten.

Gemaakt door Kunena