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.
Dat float:right elementen op de volgende regel geplaatst worden als ze niet het eerste element op de regel zijn, is een bekende bug in Internet Explorer en Mozilla-gebaseerde browsers. Je kunt dit proberen te omzeilen door die elementen ook nog een negatieve margin-top mee te geven zodat ze weer omhoog getrokken worden, maar dan veroorzaak je weer problemen met browsers die het wel goed doen zoals Opera en Safari.quote:Op dinsdag 19 juni 2007 11:09 schreef Ewaldus het volgende:
hoe krijg ik het voor elkaar dat meerInformatie.gif rechts in de list komt?
Dus zo: http://www.ewaldvankampen.nl/upload/audio1.jpg
.
Als ik zorg dat de img float:right krijgt, komt hij te laag, en is het ontwerp niet meer zoals het zou moeten
Een andere oplossing is het rechts-zwevende element als eerste in de regel op te nemen. Dan blijft het in alle browsers op dezelfde regel.
Dat plaatje hoort helemaal niet in je html, maar in je css. Het is namelijk geen illustratie maar een element om je link op te leuken.
Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
nee niet, want ik wil van dat plaatje een link maken,quote:Op dinsdag 19 juni 2007 11:36 schreef CraZaay het volgende:
Dat plaatje hoort helemaal niet in je html, maar in je css. Het is namelijk geen illustratie maar een element om je link op te leuken.
Plaatje dus gewoon als achtergrondafbeelding voor je links gebruiken en rechts positioneren (background-position)
maar nu ik het zo type zit ik er ook over te denken het plaatje als achtergrond te doen, de link display:block mee te geven...
niets
Opgelostquote:Een andere oplossing is het rechts-zwevende element als eerste in de regel op te nemen. Dan blijft het in alle browsers op dezelfde regel.
niets
Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de htmlquote:Op dinsdag 19 juni 2007 12:08 schreef Ewaldus het volgende:
[..]
nee niet, want ik wil van dat plaatje een link maken,
maar nu ik het zo type zit ik er ook over te denken het plaatje als achtergrond te doen, de link display:block mee te geven...
Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.quote:Op dinsdag 19 juni 2007 13:29 schreef CraZaay het volgende:
[..]
Precies, 'display: block' erop en dan is dat plaatje ook gewoon klikbaar. Het hoort simpelweg niet in de html
In het voorbeeld staat het binnen de link van de tekst, en hoort het dus in de css (er is al een tekstlink). Los of dit verwarrend is voor gebruiker, ik heb het niet over usability gehad.quote:Op dinsdag 19 juni 2007 14:54 schreef AnGabhar het volgende:
[..]
Naar mijn mening hoort het, zoals het in het voorbeeld getoond is, in de html noch in de css. Ik ging ervan uit dat het een afzonderlijk klikbaar element moet worden met een eigen href (wat Ewaldus ook aangeeft), en dan moet het uiteraard wel in de html worden gezet. Als het dezelfde link is als de tekst ervoor is het plaatje nergens voor nodig en zelfs verwarrend.
Met een eigen href zou het alsnog in de css moeten wat mij betreft, aangezien het geen afbeelding met toegevoegde waarde is. Je zou imo dan een tekstlink moeten maken waarvan je de tekst met css verbergt en het plaatje toont als achtergrondafbeelding. Accessibility enzo.
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.quote:Op dinsdag 19 juni 2007 15:10 schreef CraZaay het volgende:
Met een eigen href zou het alsnog in de css moeten wat mij betreft, aangezien het geen afbeelding met toegevoegde waarde is. Je zou imo dan een tekstlink moeten maken waarvan je de tekst met css verbergt en het plaatje toont als achtergrondafbeelding. Accessibility enzo.
Het plaatje is puur ter decoratie en voegt niets toe aan de content. Het dingetje zou net zo goed in de achtergrond van het li element geplaatst kunnen worden.quote:Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:
[..]
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
Als we ons even limiteren tot screen readers, braille leesregels, zoekmachines en de meeste mobile devices dan is tekst verbergen en een afbeelding tonen middels css de meest ideale oplossing. Die kunnen hier allemaal prima mee overweg namelijk.quote:Op dinsdag 19 juni 2007 15:20 schreef AnGabhar het volgende:
[..]
Dat werkt dan voor mensen die css uit hebben staan. Krijg je het met een achtergrondafbeelding via css ook werkend voor mensen die css aan en afbeeldingen uit hebben staan? Ik noem maar een toegankelijkheidsdwarsstraat.
De mensen die css uit hebben staan en afbeeldingen aan, zien dan gewoon de tekst die anders door de css verborgen zou worden. Dit in tegenstelling tot wanneer je afbeeldingen gebruikt en een bezoeker het tonen van afbeeldingen uit heeft staan. Er is in dat geval dus helemaal geen toegankelijkheidsissue: je ziet altijd de naam van de link, tenzij er door middel van "progressive enhancement" iets met de presentatie gedaan wordt.
Voor mensen met css aan en afbeeldingen uit is er per definitie geen goede oplossing, maar gelukkig betreft dat een miniem aantal gebruikers. Het blijft een kwestie van keuzen, maar de html moet sowieso goed zijn. Als een gebruiker kiest voor css aan en afbeeldingen uit, dan leveren ze bewust een deel van de progressive enhancement in, waardoor de boel minder optimaal kan performen.
Precies. Dan heb je het dus in principe altijd over unieke afbeeldingen (dus geen plaatje wat 10 keer op een pagina staat) die een wezenlijke bijdrage leveren aan het begrijpen van de content. Inhoudelijk, dus niet "omdat mensen anders niet snappen dat het een knopje is".quote:Op dinsdag 19 juni 2007 15:39 schreef Bigs het volgende:
[..]
Het plaatje is puur ter decoratie en voegt niets toe aan de content. Het dingetje zou net zo goed in de achtergrond van het li element geplaatst kunnen worden.
Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
Een uitstekende vuistregel, maar in het voorbeeld waar het hier om gaat (indien en zodra de [ i ] tenminste een aparte link wordt, zoals de bedoeling lijkt te zijn) gaat het juist om een uitermate belangrijk element in je pagina: een link naar extra informatie. Dat is geen decoratie maar een navigatie-element met belangrijke toegevoegde waarde.quote:Op dinsdag 19 juni 2007 15:39 schreef Bigs het volgende:
Mijn vuistregel: Plaatjes waarvoor je geen zinnige alt tekst kunt verzinnen horen niet in de HTML thuis. Die voegen kennelijk niets aan je HTML toe.
Blijkbaar vatten wij het plaatje anders op.
Idem als mijn vorige reactie: wij lijken het plaatje anders op te vatten. Als dit inderdaad een apart element met een eigen link wordt, dan ga je dat niet met allerlei css- of scriptingtruukjes wegwerken of onzichtbaar maken. Een betere oplossing zou dan zijn om er een plaatje met alt-tekst van te maken. Er is dan (zoals het geval kan zijn met decoratie en achtergrondplaatjes) geen sprake van 'progressive enhancement' maar van een essentieel element in je code.quote:Op dinsdag 19 juni 2007 15:45 schreef CraZaay het volgende:
Dit in tegenstelling tot wanneer je afbeeldingen gebruikt en een bezoeker het tonen van afbeeldingen uit heeft staan. Er is in dat geval dus helemaal geen toegankelijkheidsissue
Ok dan begrijp ik het plaatje inderdaad verkeerd. Door de smalheid van het geheel ding ik er vanuit dat het een navigatie iets was.quote:Op dinsdag 19 juni 2007 15:59 schreef AnGabhar het volgende:
[..]
Een uitstekende vuistregel, maar in het voorbeeld waar het hier om gaat (indien en zodra de [ i ] tenminste een aparte link wordt, zoals de bedoeling lijkt te zijn) gaat het juist om een uitermate belangrijk element in je pagina: een link naar extra informatie. Dat is geen decoratie maar een navigatie-element met belangrijke toegevoegde waarde.
Blijkbaar vatten wij het plaatje anders op.
| 1 |
Het plaatje staat gewoon binnen de link en is dus geen belangrijk element. Dat is precies waar al mijn posts hierover op gebaseerd zijn.
En kennelijk hebben wij een elementair andere kijk op plaatjes, want wat mij betreft gebruik je nooit een afbeelding tenzij het illustratief voor de andere content is :) In modern webdev-land is dat ook de gangbare opvatting overigens.
En mijn posts zijn gebaseerd op wat OP heeft gezegd: dat er een eigen link komt voor die afbeelding.quote:Op dinsdag 19 juni 2007 17:41 schreef CraZaay het volgende:
Het plaatje staat gewoon binnen de link en is dus geen belangrijk element. Dat is precies waar al mijn posts hierover op gebaseerd zijn.
Blijkbaar. Het is tamelijk algemeen om iconen te gebruiken naast, maar ook in plaats van tekst, zeker als de iconen duidelijk genoeg zijn. Dat zie je in het verkeer, dat zie je ook op het web. Het teken [ i ] (of het vraagteken) voor "help", "meer informatie" of "inlichtingen" is internationaal alom bekend en behoeft geen tekst.quote:En kennelijk hebben wij een elementair andere kijk op plaatjes, want wat mij betreft gebruik je nooit een afbeelding tenzij het illustratief voor de andere content is In modern webdev-land is dat ook de gangbare opvatting overigens.
En die laatdunkende opmerking over "modern web-dev land" laat ik voor jouw rekening. Ik maak zelf wel uit met welke hype ik meega.
Precies, dat zie je in het verkeer. Dat is ook waarom blinden en zoekmachines geen autorijden.quote:Op dinsdag 19 juni 2007 18:19 schreef AnGabhar het volgende:
Blijkbaar. Het is tamelijk algemeen om iconen te gebruiken naast, maar ook in plaats van tekst, zeker als de iconen duidelijk genoeg zijn. Dat zie je in het verkeer, dat zie je ook op het web. Het teken [ i ] (of het vraagteken) voor "help", "meer informatie" of "inlichtingen" is internationaal alom bekend en behoeft geen tekst.
En die laatdunkende opmerking over "modern web-dev land" laat ik voor jouw rekening. Ik maak zelf wel uit met welke hype ik meega.
Ik heb het niet over een hype, maar geaccepteerde de facto standaarden. En dat zijn ze geworden omdat is gebleken dat dat het meest toegankelijk is voor een zo groot mogelijke doelgroep.
Blinden en zoekmachines lezen alt-teksten, zoals ik een bericht of wat geleden al schreef .quote:Op dinsdag 19 juni 2007 18:33 schreef CraZaay het volgende:
[..]
Precies, dat zie je in het verkeer. Dat is ook waarom blinden en zoekmachines geen autorijden.
.Noch qua visueel ontwerp, noch qua toegankelijkheid is er een reden om in dit geval iconen te mijden.
Even een klein vraagje.
Stel dat ik een link heb "Voorbeeld" en die is in css netjes wit van kleur, maar ik wil de klinkers een andere kleur hebben, hoe kan ik dit het beste oplossen?
Het is natuurlijk mogelijk er verschillende <a tags van te maken en dan 2 stijlen, elk hun eigen kleur, maar vooral in html worden dit ontzettend lange regels dan, elke a moet zijn eigen title hebben en target en href, dat lijkt me niet erg handig.
Gewoon 1 a-tag in html en dan span-tags gebruiken is ook een oplossing maar mag dit volgens de regels, en gaan de meeste browsers daar goed mee om?
Heeft iemand een idee hoe ik dit het makkelijkste kan oplossen?
Stel dat ik een link heb "Voorbeeld" en die is in css netjes wit van kleur, maar ik wil de klinkers een andere kleur hebben, hoe kan ik dit het beste oplossen?
Het is natuurlijk mogelijk er verschillende <a tags van te maken en dan 2 stijlen, elk hun eigen kleur, maar vooral in html worden dit ontzettend lange regels dan, elke a moet zijn eigen title hebben en target en href, dat lijkt me niet erg handig.
Gewoon 1 a-tag in html en dan span-tags gebruiken is ook een oplossing maar mag dit volgens de regels, en gaan de meeste browsers daar goed mee om?
Heeft iemand een idee hoe ik dit het makkelijkste kan oplossen?
-
Afgezien van waarom je het zou willen moet je het inderdaad in spans gaan zoeken. Meerdere links ervan maken is de slechtste optie, en er is geen manier om in CSS aan te geven dat je alle klinkers in een andere kleur wilt
Okee dankje, dan ga ik voor spans.
De reden waarom ik dit wil is omdat ik een fansite voor een band maak en hun logo, de bandnaam, heeft ook gekleurde klinkers, dus dit wil ik terug laten komen in het menu, in photoshop ziet het er al erg mooi uit.
Allemaal plaatjes maken van alle menuitems is ook een oplossing maar dat doe ik toch liever niet, het zijn er redelijk wat en ik wil ze ook bold maken als je op die betreffende pagina bent.
De reden waarom ik dit wil is omdat ik een fansite voor een band maak en hun logo, de bandnaam, heeft ook gekleurde klinkers, dus dit wil ik terug laten komen in het menu, in photoshop ziet het er al erg mooi uit.
Allemaal plaatjes maken van alle menuitems is ook een oplossing maar dat doe ik toch liever niet, het zijn er redelijk wat en ik wil ze ook bold maken als je op die betreffende pagina bent.
-
Beste mensen,
Sinds kort ben ik me gaan verdiepen in div's om mijn huidige site (gemaakt met tabellen :@ ) om te zetten in div. Met een aantal voorbeelden ben ik al redelijk ver geraakt, maar 1 ding wil nog niet lukken. Zie mijn testsite, dan kan ik het wat makkelijker uitleggen.
De CSS code staat ook (nog) gewoon in de broncode.
Het is dus de bedoeling dat de vakken menu, content, en foto allemaal op dezelfde hoogte beginnen, namelijk waar menu en content nu al staan, die staan goed. Foto staat echter een stuk naar beneden, die zou omhoog moeten zodat ie precies naast content staat, maar ik krijg dit niet voor elkaar. Waarschijnlijk doe ik iets fout in de css code, maar ik weet niet precies wat omdat ik nog niet alles exact snap.
Het belangrijkste stuk css code is:
Waarom heb ik bij #main gekozen voor marging? Zodat dat hok flexibel is. Als mensen hun browsergrootte aanpassen, dan verandert dit blok van grootte en blijven menu en foto hun oorspronkelijke grootte houden. Ik vind het belangrijk dat menu en foto altijd even groot blijven. In #main komt toch alleen maar tekst en dat is wat flexibeler dan een menu en plaatjes.
Hoe zou ik dit probleem kunnen oplossen? Is er misschien nog een andere manier om #main 'flexibel' te maken? Of zie ik gewoon iets heel doms over het hoofd??
Alvast bedankt voor jullie reacties!! :s)
Sinds kort ben ik me gaan verdiepen in div's om mijn huidige site (gemaakt met tabellen :@ ) om te zetten in div. Met een aantal voorbeelden ben ik al redelijk ver geraakt, maar 1 ding wil nog niet lukken. Zie mijn testsite, dan kan ik het wat makkelijker uitleggen.
De CSS code staat ook (nog) gewoon in de broncode.
Het is dus de bedoeling dat de vakken menu, content, en foto allemaal op dezelfde hoogte beginnen, namelijk waar menu en content nu al staan, die staan goed. Foto staat echter een stuk naar beneden, die zou omhoog moeten zodat ie precies naast content staat, maar ik krijg dit niet voor elkaar. Waarschijnlijk doe ik iets fout in de css code, maar ik weet niet precies wat omdat ik nog niet alles exact snap.
Het belangrijkste stuk css code is:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | float: left; width: 300px; margin: 0; padding: 0; } #main { margin: 0 300px 0 300px; padding: 0; } #foto { float: right; width: 300px; margin: 0; padding: 0; } |
Waarom heb ik bij #main gekozen voor marging? Zodat dat hok flexibel is. Als mensen hun browsergrootte aanpassen, dan verandert dit blok van grootte en blijven menu en foto hun oorspronkelijke grootte houden. Ik vind het belangrijk dat menu en foto altijd even groot blijven. In #main komt toch alleen maar tekst en dat is wat flexibeler dan een menu en plaatjes.
Hoe zou ik dit probleem kunnen oplossen? Is er misschien nog een andere manier om #main 'flexibel' te maken? Of zie ik gewoon iets heel doms over het hoofd??
Alvast bedankt voor jullie reacties!! :s)
Het werkt beter als je de volgorde Menu -> Foto -> Content aanhoudt in de broncode. Als je eerst content doet zal een float: right geplaatst worden ter hoogte van de laagste regel in je Content, daardoor komen die foto's te ver naar beneden.
Het probleem is al opgelost.
Opdrachtgever kwam er nog eens laat mee, dat het geen list moest zijn, maar het het checkboxes moesten voorstellen.
Heb toen de lists omgehouwd, andere achtergrond, zonder padding.
Plaatje (float:right;), checkbox (margin:0 10px 0 0), text.
Kan niet laten zien wat het geworden is, bepaalde afspraken met de Nederlandse divisie van dit automerk gemaakt.
Opdrachtgever kwam er nog eens laat mee, dat het geen list moest zijn, maar het het checkboxes moesten voorstellen.
Heb toen de lists omgehouwd, andere achtergrond, zonder padding.
Plaatje (float:right;), checkbox (margin:0 10px 0 0), text.
Kan niet laten zien wat het geworden is, bepaalde afspraken met de Nederlandse divisie van dit automerk gemaakt.
niets
Off topic: Neem je niet standaard in je overeenkomsten op dat je je werkzaamheden voor promotionele doeleinden mag gebruiken?quote:Op woensdag 20 juni 2007 22:58 schreef Ewaldus het volgende:
Kan niet laten zien wat het geworden is, bepaalde afspraken met de Nederlandse divisie van dit automerk gemaakt.
Het zit iets moeilijker dan dat. Leg later wel uitquote:Op donderdag 21 juni 2007 09:41 schreef CraZaay het volgende:
[..]
Off topic: Neem je niet standaard in je overeenkomsten op dat je je werkzaamheden voor promotionele doeleinden mag gebruiken?
niets
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?
[ Bericht 70% gewijzigd door -Orion- op 30-06-2007 02:36:46 ]
[ Bericht 70% gewijzigd door -Orion- op 30-06-2007 02:36:46 ]
Hier komt ooit nog iets interessants te staan.
Huh :?.quote:Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?
Als je zoiets hebt:
| 1 2 3 | HOI HOI</div> |
Dan verschijnt er bij mij geen randje om de div als je met de rechtermuisknop erop klikt.
Zou iemand mijn SVP willen helpen? Ik kom er echt niet meer uit
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deel 7
komt door met de muis over de 'menu' buttons te gaan.
haal ik een div weg, dan is het probleem verholpen maar zie ik de nummering niet meer in de comments!
http://www.gfxpoll.com/index.php?page=show&id=2063 is een pagina waar je kunt zien hoe het fout gaat!
ps het werkt perfect in FF maar IE zuigt weer eens
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deel 7
komt door met de muis over de 'menu' buttons te gaan.
haal ik een div weg, dan is het probleem verholpen maar zie ik de nummering niet meer in de comments!
http://www.gfxpoll.com/index.php?page=show&id=2063 is een pagina waar je kunt zien hoe het fout gaat!
ps het werkt perfect in FF maar IE zuigt weer eens
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Heb ik nog nooit gezien, maar "outline: none" zal het iig wel oplossenquote:Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?
Dat voorkom je niet. Er bestaan truuks voor maar daarmee help je toetsenbordnavigatie van je webpagina om zeep, tot helse ergernis van toetsenbordgebruikers. Het uitlijnen van een geselecteerde link is belangrijk voor de toegankelijkheid van webpagina's, daar moet je niet mee prutsen.quote:Op zaterdag 30 juni 2007 00:06 schreef -Orion- het volgende:
Hoe kun je het voorkomen dat wanneer je een in een div rechtsklikt er een selecteerrandje om heenkomt!?
In Mozilla werkt dat, in IE niet. Ik vermoed dat de vraagsteller dat gebruikt.quote:Op zaterdag 30 juni 2007 17:43 schreef CraZaay het volgende:
Heb ik nog nooit gezien, maar "outline: none" zal het iig wel oplossen
Ook die omrandt volgens mij geen div's, en voor een link moet je het inderdaad gewoon aan laten staan.quote:Op zaterdag 30 juni 2007 19:17 schreef AnGabhar het volgende:
[..]
In Mozilla werkt dat, in IE niet. Ik vermoed dat de vraagsteller dat gebruikt.
hoi,
ik probeer de Filmstrip in Windows XP na te maken.
de horizontale scrollbar heb ik voor mekaar en de plaatjes passen erin.
maar als je teveel plaatjes hebt, worden ze gewrapped (zoals de tekst op deze pag).
mijn vraag:
hoe voorkom je dat elementen onder elkaar worden gepositioneerd?
dat ze alleen horizontaal geplaatst worden?
ik probeer de Filmstrip in Windows XP na te maken.
de horizontale scrollbar heb ik voor mekaar en de plaatjes passen erin.
maar als je teveel plaatjes hebt, worden ze gewrapped (zoals de tekst op deze pag).
mijn vraag:
hoe voorkom je dat elementen onder elkaar worden gepositioneerd?
dat ze alleen horizontaal geplaatst worden?
Je kan op een DIV een overflow toekennen, en die laat je dan scrollen.
Als iets dan breder wordt dan die 500 pixels, dan verschijnt er een scrollbar.
| 1 2 3 | HEEL VEEL PLAATJES NAAST ELKAAR </div> |
| 1 2 3 4 | width:500px; height:40px; overflow:scroll; } |
Als iets dan breder wordt dan die 500 pixels, dan verschijnt er een scrollbar.
maar ik wil geen verticale. en ze verschijnen nog steeds onder elkaar.
bij de plaatjes heb ik styles 'clear none' en 'float left' meegegeven.
en 'clear left' & 'float left' geprobeerd.
hier is mijn test-script.
bij de plaatjes heb ik styles 'clear none' en 'float left' meegegeven.
en 'clear left' & 'float left' geprobeerd.
hier is mijn test-script.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Flipmode </title> <style type="text/css"> /*<![CDATA[*/ div.c1 {width: 80%; height: 150px; overflow-x: scroll; overflow-y: hidden; display: block; border-style: solid; border-width: 2px; padding: 5px; } img.c2 {width: auto; height: auto; display: block; border-style: solid; border-width: 2px;} img.c3 {float: left; clear: none; margin: 5px;} /*]]>*/ </style> </head> <body> <div id="flipbar" class="c1"></div><img id="showbase" align="center" class="c2" src= "data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" alt="Image" name="showbase" /> <script type="text/javascript"> var newimg; for (i = 0; i < 10; i++) { newimg = document.createElement('img'); newimg.src = 'http://i1.tinypic.com/47xq6g8.jpg'; newimg.setAttribute('class', 'c3'); document.getElementById('flipbar').appendChild(newimg); } </script> </body> </html> |
div#flipbar {quote:Op zondag 1 juli 2007 17:17 schreef SlimShady het volgende:
maar ik wil geen verticale. en ze verschijnen nog steeds onder elkaar.
bij de plaatjes heb ik styles 'clear none' en 'float left' meegegeven.
en 'clear left' & 'float left' geprobeerd.
hier is mijn test-script.
[ code verwijderd ]
overflow-x:scroll;
}
#flipbar img {
float:left;
}
moet genoeg zijn toch?
Oh ehmmmquote:Op zondag 1 juli 2007 20:22 schreef SlimShady het volgende:
vind ik ook. helaas.
ik bedenk wel iets...
| 1 2 3 4 5 | "data:image/bmp;base64,Qk06AAAAAAAAADYAAAAoAAAAAQAAAAEAAAABABgAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==" alt="Image" name="showbase" /> </div> |
misschien de div ff om de img heen zetten :P
nee! juist niet want het zijn 2 verschillende elementen.
er is een balk met de thumbs en één element (showbase) met de grote foto.
er is een balk met de thumbs en één element (showbase) met de grote foto.
Om te voorkomen dat floats naar een nieuwe regel springen zul je het blok waar ze in staan een breedte moeten geven die genoeg is om alle plaatjes naast elkaar te laten staan. Je zou bijvoorbeeld een blok met width: 4000px kunnen aanmaken waarin je met javascript al die plaatjes zet, en dat blok in je blok met overflow: scroll; width: 80% zetten. Probleem is dat dit wel statisch is dus je moet van tevoren weten hoe breed al je plaatjes zijn. Of nog meer scripting toepassen om dat uit te lezen natuurlijk.quote:Op zondag 1 juli 2007 16:37 schreef SlimShady het volgende:
hoi,
ik probeer de Filmstrip in Windows XP na te maken.
de horizontale scrollbar heb ik voor mekaar en de plaatjes passen erin.
maar als je teveel plaatjes hebt, worden ze gewrapped (zoals de tekst op deze pag).
mijn vraag:
hoe voorkom je dat elementen onder elkaar worden gepositioneerd?
dat ze alleen horizontaal geplaatst worden?
thx. maar dat statische is niet praktisch.
na heel veel probeersels wordt het een verticale bar.
vraagje:
waarom wordt in het volgende voorbeeld geen blok weergegeven?
na heel veel probeersels wordt het een verticale bar.
vraagje:
waarom wordt in het volgende voorbeeld geen blok weergegeven?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Test </title> <style type="text/css"> /*<![CDATA[*/ div.c1 { width: 85%; height: 85%; display: block; border-width: 2px; border-style: solid; } /*]]>*/ </style> </head> <body> <div class="c1" id="flipbar"> </div> </body> </html> |
Misschien verwacht je dat de body minstens zo groot wordt als je browser window, en dat div#flipbar daar dan 85% van wordt. Dat is dus niet zo, de body rekt gewoon mee met de inhoud. Als er niets in de body staat is de hoogte 0.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
Het werkt wel aardig als je in je css body, html {height: 100%} opneemt.quote:Op woensdag 4 juli 2007 19:15 schreef SlimShady het volgende:
vraagje:
waarom wordt in het volgende voorbeeld geen blok weergegeven?
[ code verwijderd ]
Hoe krijg ik een DIV netjes gecentreerd in het midden van het totale beeld?
Ik heb nu
margin-right:auto; margin-left:auto;
en dat werkt in Firefox. Maar IE7 zet het gewoon helemaal links
Ik heb nu
margin-right:auto; margin-left:auto;
en dat werkt in Firefox. Maar IE7 zet het gewoon helemaal links
❤ Rozen zijn rood ❤
❤ Viooltjes zijn blauw ❤
❤ Kristel, ik hou van jou! ❤
❤ Viooltjes zijn blauw ❤
❤ Kristel, ik hou van jou! ❤
quote:Op woensdag 25 juli 2007 14:54 schreef __Saviour__ het volgende:
Hoe krijg ik een DIV netjes gecentreerd in het midden van het totale beeld?
Ik heb nu
margin-right:auto; margin-left:auto;
en dat werkt in Firefox. Maar IE7 zet het gewoon helemaal links
| 1 |
Volgens mij moest je de text-align van de parent op center zetten in IE (ik weet niet of dit ook geldt voor IE7).quote:
| 1 2 | div { margin: 0 auto; } |
je moet de div wel een breedte geven, als je dan margin: 0 auto geeft is het goed.quote:
Dit geeft aan: margin-top: 0 (en tegenovergestelde ook want die is niet aangegeven) en margin-left en margin-right zijn auto.
als je semantisch code schrijft, bijv de margin en dan 4 waarden geeft (bijv. margin: 5px 10px 3px 15px;) dan is dat clockwise: top right bottom left.
Als je invult: margin: 5px 10px 3px; dan is de margin-left 10px, want dat is rechts ook.
niets
