quote:Op maandag 13 juni 2011 21:16 schreef Mirel het volgende:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
[..]
Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
ehm wat 'css binnen css'?! Is dat nieuw?quote:Op maandag 13 juni 2011 21:16 schreef Mirel het volgende:
Dat had ik al geprobeerd en het werkte niet. Ook met dingen los zetten maar erg verfijnd deed ik het niet, was alleen heel snel dingen aan het testen. Ik weet niet of je achter pixel-ratio:0 de ; vergat maar met en zonder was er geen verschil.
Een paar posts terug had n8n het erover dat je niet css binnen css kon doen:
[..]
Ik zie dan geen reden dat hij deze code dan wel zou kunnen lezen.
Kan je doen met javascript, jQuery Expander lijkt me wat je zoekt.quote:Op donderdag 16 juni 2011 13:19 schreef Tazar_Yoot het volgende:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
Met javascript is het een eitjequote:Op donderdag 16 juni 2011 13:19 schreef Tazar_Yoot het volgende:
Ik kwam net dit voorbeeld tegen:
http://trailers.apple.com(...)bestandthebrightest/
Onder het plaatje bij de synopsis, staat onderin het linkje "more" en als je erop klikt staat er "less"
hoe moeilijk is dit om in te bouwen?
1 2 3 4 5 6 7 8 9 | function expander(id) { var e = document.getElementById(id); if (e.className == 'contracted') e.className = 'expanded'; else (e.className == 'expanded') e.className = 'contracted'; } |
1 2 3 | .hidden, p#moreoreless.contracted .less, p#moreoreless.expanded .more { display: none; } |
1 | <p id="moreorless" onclick="expander('moreorless');" class="contracted"><span class="more"><span class="hidden"> or </span><span class="less"></p> |
1 2 3 4 5 6 7 8 | <nav> <ul class="menu"> <li class="home"><a href="#"> </a></li> <li class="portfolio"><a href="#"> </a></li> <li class="info"><a href="#"> </a></li> <li class="contact"><a href="#"> </a></li> </ul> </nav> |
1 2 3 4 5 6 7 8 9 | .home{background-image:url(images/home-a.jpg);} .portfolio{background-image:url(images/portfolio-a.jpg);} .info{background-image:url(images/info-a.jpg) ; } .contact{background-image:url(images/contact-a.jpg); } .home a:hover{background-image:url(images/home-b.jpg) ; } .portfolio a:hover{background-image:url(images/home.b.jpg) ; } .info a:hover{background-image:url(images/info-b.jpg) ; } .contact a:hover{background-image:url(images/contact-b.jpg) ; } |
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.quote:Op donderdag 16 juni 2011 15:16 schreef Tazar_Yoot het volgende:
Oeh, ziet er simpel uit inderdaad. even inbouwen zo. is wel sjiek !
weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
[ code verwijderd ]
[ code verwijderd ]
En hoe kan ik nu nog een 'active' class inbouwen.
Woah, het probleem met de hover img is verholpen, hij doet het nu. En het idee van de sprite drong pas echt tot me door toen ik hem online zetten. Offline testing heb je er geen last van. ik ga er eens induiken. de volgende fase van mijn html avontuur .quote:Op donderdag 16 juni 2011 15:28 schreef n8n het volgende:
[..]
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.
2) een active class maak je door naast de naam van class een extra classname toe te voegen.
html: <li class="portfolio active">
css: li.portfolio.active {
wat je ook kan doen is de naam van de actieve pagina als class bij de ul opgeven.
<ul class="portfolio">
<li class="home"></li>
<li class="portfolio"></li>
</ul>
css: ul.portfolio li.portfolio {
met de laatste manier kan je ook invloed uitoefenen op alle andere li's
nog een paar tips:
- maak sprites van je afbeeldingen, dit kost minder bandbreedte maar belangrijker is dat de manier die je nu gebruikt een optische vertraging kan veroorzaken bij een :hover. De afbeelding moet nog laden en je ziet heel even niks.
- zet de naam van de link met tekst in de link en gebruik text-indent: -9999px;. Dit is beter voor de toegankelijkheid en indexatie van je website.
- kleintje: bij een afbeelding als achtergrond is "-image" overbodig.
Class is gewoon een spatiegesepareerde lijst van classnames. class="portfolio active" is dus in css te selecteren met zowel .portfolio als .active. Of .portfolio.active als je alleen objecten met beide classnames wilt selecteren.quote:Op donderdag 16 juni 2011 21:39 schreef Tazar_Yoot het volgende:
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
1 | <img id="bg" src="lalala.jpg" alt="" /> |
1 2 3 4 5 6 | #bg { left: 0; position: absolute; top: 0; width:100%; } |
Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.quote:Op donderdag 23 juni 2011 07:49 schreef MrNiles het volgende:
Ik kan het beste een gebruiker laten switchen tussen 2 verschillende CSS
Een else if in de head of werkt dat niet?
Betere/Andere manieren?
ik snap m niet helemaal, misschien heb ik het ook niet helemaal goed uitgelegt.quote:Op donderdag 23 juni 2011 07:59 schreef Light het volgende:
[..]
Ik zou serverside regelen welke css bestanden er worden geladen. Dat kan bijvoorbeeld met een cookie of een sessie. Afhankelijk van wat er wijzigt, is een volledige refresh misschien nodig als de bezoeker een andere css wil.
als dat een goede oplossing is dan ga ik daar eens op zoekenquote:Op donderdag 23 juni 2011 08:37 schreef KomtTijd... het volgende:
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?
Lijkt me meer een javascript vraag dit.
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |