DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Oh nee wacht, ik zie nu pas wat je wilt bereiken. Dat kan inderdaad niet, en daar heb je inderdaad Javascript voor nodig.
Nee.
Ik heb hem nu in een losse div staan. Ik krijg het alleen nog niet voor elkaar om hem helemaal bovenaan te krijgen in die navigation div.quote:Op zaterdag 11 juni 2011 09:48 schreef Mirel het volgende:
Probeer het vlaggetje in een div te zetten ipv een img src tag. Die houden zich niet altijd aan de regels. Die div margin 0 auto geven.
[ afbeelding ]
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam. 
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
When all else fails, you always have delusion.
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.quote:Op maandag 13 juni 2011 13:47 schreef Tazar_Yoot het volgende:
[..]
Hij stond nog nergens online
Nu wel.
klik
Nee.
Aangezien ik het liever gelijk goed wil doen dan, hoe positioneer ik hem absoluutquote:
[..]
Geef #flag maar een negatieve margin-top, dan werkt het. Hoewel ik dit typisch een voorbeeld vind van iets wat ik absoluut zou positioneren.
?edit: met margin-top:-150px; is het gelukt. alleen ben nu benieuwd naar hoe ik hem absoluut zou posioneren (link updated dus).
Koop maar een groot schermquote:
Ik mis sowieso de "This website is best viewed with Google Chrome on a 1200x1024 or larger screen resolution" disclaimer op die website.
When all else fails, you always have delusion.
Ahh, een nieuw probleem. De shadow functie in css werkt dus niet op afbeeldingen. Nu kan ik die shadow handmatig toevoegen in photoshop. Of kan ik het ook op een of andere manier zo doen dat hij de shadow wel op de buttons werkt?
linkje
linkje
shadows op een div (of een div eronder), en niet op het plaatje zelf?
When all else fails, you always have delusion.
Hoe gooi ik er een div op? Ik ben nog niet zo heel ver kwa kennis van html/css ehquote:
shadows op een div (of een div eronder), en niet op het plaatje zelf?
Worked out pretty neat so far right?quote:
Ik weet wel het een en ander, maar dingen als div's over elkaar? shoot me.
Als ik het zou weten zou ik het niet vragen eh
?so, can you help me?
Ok, ik zal stoppen trots zijn dat ik iets heb kunnen leren met een shitload aan tutorials en andere websites. Zou jij dan kunnen stoppen met m'n code kunnen afkraken en of feedback geven met verbeteringen, of gewoon niks? Dat werkt een stuk makkelijker.quote:
Al je content in een <nav> zou ik niet 'pretty neat' noemen.
[ Bericht 0% gewijzigd door Tazar_Yoot op 13-06-2011 15:07:47 ]
Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):quote:
Is er een manier om een fix te zetten in Google Chrome voor een css probleem? Als je background: 100%; doet dan scrollt Chrome erg langzaam.
http://1586563.huweb.nl/ hier bij body{
De hele site is gedurende het ontwikkelen naar de klote gegaan in verschillende browsers. We hebben besloten om het in Chrome te presenteren maar dat scrollen doet dus erg irritant.
| 1 2 3 4 | @media screen and (-webkit-min-device-pixel-ratio:0) { #div { color:red; } } |
Ehm?quote:
[..]
Bij mij heeft de volgende fix gewerkt (#div en color:red is even ter illustratie):
[ code verwijderd ]
Hoe moet ik dit hierin doen:| 1 2 3 4 5 6 7 8 9 10 11 | body { background-image: url('img/bgtest2.jpg'); background-size: 100%; background-repeat:no-repeat; background-position:center; height: inherit; font-family: arial; font-size: 13px; color: #242424; background-attachment: fixed; } |
When all else fails, you always have delusion.
Zo dus:quote:
[..]
Ehm?
[ code verwijderd ]
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-image: url('img/bgtest2.jpg'); background-size: 100%; background-repeat:no-repeat; background-position:center; height: inherit; font-family: arial; font-size: 13px; color: #242424; background-attachment: fixed; } } |
Al zou ik alleen de elementen erin zetten die je voor Chrome gefixed wil hebben. Font-family is bijvoorbeeld (neem ik aan) het zelfde voor alle browsers, en hoeft er hier dus niet in.
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:
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.quote:
[..]
nice
jammer dat dit niet kan
[ code verwijderd ]
When all else fails, you always have delusion.
quote:
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.
“Specialization is for insects”.—Robert Heinlein
ehm wat 'css binnen css'?! Is dat nieuw?quote:
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.
ik gebruik zelf de hack om een invoerveld op de goede plek te positioneren, en het werkt prima!
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?
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?
Kan je doen met javascript, jQuery Expander lijkt me wat je zoekt.quote:
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:
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?
js
css
correct me if i'm wrong js is nieuw voor me.
| 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'; } |
css
| 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> |
correct me if i'm wrong js is nieuw voor me.
“Specialization is for insects”.—Robert Heinlein
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:
En hoe kan ik nu nog een 'active' class inbouwen.
!weer iets anders,
waarom werkt de hover van portfolio niet. code heb ik al 6x overgelezen:
| 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) ; } |
En hoe kan ik nu nog een 'active' class inbouwen.
1) Eerst zet je de achtergrondafbeelding op de li maar bij :hover op de a-tag.quote:
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.
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.
“Specialization is for insects”.—Robert Heinlein
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 avontuurquote:
[..]
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.
.Verder je andere tips opgevolgd (die text indent ga ik er zometeen instoppen)
Al heb ik het nog niet echt kunnen werkend krijgen met die active class: KLIK
Ik heb het idee dat ik veel nutteloze code erin heb gezet nu.
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
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:
Ben er al uit, kwam door de gebruikte spaties. css en spaties gaan niet goed samen blijkbaar. vervangen door _'s
Weet iemand hier hoe ik een afbeelding op een pagina kan zetten die de hele achtergrond bezet en meescaled met grotere resoluties? Repeat wil dus niet, en als ik een hele grote afbeelding als achtergrond doe dan laat hij maar een klein stuk van die afbeelding zien op een kleine resolutie.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ding absoluut positioneren. Maar dan krijg je wel problemen met de ratio.
In je HTML:
In je CSS:
Of met media-queries voor de verschillende resoluties een andere afbeelding gebruiken. Er zullen vast ook nog wel andere manieren zijn.
In je HTML:
| 1 | <img id="bg" src="lalala.jpg" alt="" /> |
In je CSS:
| 1 2 3 4 5 6 | #bg { left: 0; position: absolute; top: 0; width:100%; } |
Of met media-queries voor de verschillende resoluties een andere afbeelding gebruiken. Er zullen vast ook nog wel andere manieren zijn.
Nee.
Hmm. Nog niet echt goed nu. Ik heb een afbeelding van 1920x1280. Ik wil dat als ik de website bekijk op een resolutie van 1024x768 of 1336x768 dat hij hem dan ook in zijn geheel laat zien. Of tenminste grotendeels.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Laat die achtergrond eens zien dan. Ik denk niet dat er een oplossing is die gaat doen wat jij wilt. CSS3 heeft een background-size property waar je naar zou kunnen kijken, maar ik durf zo 1-2-3 eigenlijk niet te zeggen of dat goed werkt. Ik gok dat dat nog wel problemen gaat opleveren in bijv. IE8.
Nee.
Via PM een url gekregen, maar het voorbeeld wat ik geef van absoluut positioneren/width:100% werkt bij mij gewoon prima hoor met die afbeelding. Eventueel aangevuld met bottom:0 - hoewel je dan dus wel je aspect ratio verliest (hoewel ik me afvraag of dat a) zal opvallen b) hoeveel mensen een browservenster gebruiken dat heel hoog is, maar wel heel smal).
Nee.
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?
Een else if in de head of werkt dat niet?
Betere/Andere manieren?
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:
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:
[..]
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.
Ik wil dat de gebruiker kan switchen tussen 2 lettertypes eigenlijk, meer als geintje eigenlijk
1 is een strak lettertype
ander is een vrolijk lettertype
ik doe dat met @font-face (is wel traag trouwens)
je kunt toch gewoon een onclick-event maken die bijv. de body-style verandert?
Lijkt me meer een javascript vraag dit.
Lijkt me meer een javascript vraag dit.
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.
dus waarschijnlijk tot later in het js forum
Voor een lap tekst, moet ik een Meer/minder-knop hebben. Dat je een klein stuk tekst hebt dus, je klikt op Meer en dat het dan uitschuift (Dus geen nieuwe pagina)(Waarom geen nieuwe pagina, omdat de tekst waar het om gaat al in een aparte pagina staat), en het mag ook weer inschuiven.
Is dit mogelijk met alleen CSS? Of moet je hiervoor gelijk naar de javascript grijpen?
Thanks
Is dit mogelijk met alleen CSS? Of moet je hiervoor gelijk naar de javascript grijpen?
Thanks
Met javascript. Ik zoek voorbeeld, momento.
CSS:
Javascript:
HTML:
[ Bericht 0% gewijzigd door #ANONIEM op 23-06-2011 11:10:16 ]
CSS:
| 1 2 3 4 5 6 7 8 9 | #layer1 { visibility : visible; position : relative; } #layer2 { visibility : hidden; position : absolute; } |
Javascript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> function opendiv() { document.getElementById('layer2').style.visibility ='visible'; document.getElementById('layer2').style.position ='relative'; document.getElementById('layer3').style.visibility='hidden'; } function closediv() { document.getElementById('layer2').style.visibility ='hidden'; document.getElementById('layer2').style.position ='absolute'; document.getElementById('layer3').style.visibility='visible'; } </script> |
HTML:
| 1 2 3 4 5 6 7 | <div id="layer1"> <a href="#" onclick="opendiv();" id="layer3">Toon melding</a> </div> <div id="layer2"> Lorum text <br> <a href="#" onclick="closediv();" id="layer3">Verberg melding</a> </div> |
[ Bericht 0% gewijzigd door #ANONIEM op 23-06-2011 11:10:16 ]
