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.
Ik ben zó fucking slordig soms. Bedankt voor het aanstippen.
Maar goed. Dan is er het rare probleem dat hij in IE mooie rechte kolommen geeft, maar in Firefox niet...
Maar goed. Dan is er het rare probleem dat hij in IE mooie rechte kolommen geeft, maar in Firefox niet...
Gewoon css gebruiken voor FF, javascript voor IE.
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? |
Hm ja, ik dacht ook: misschien is dat dé oplossing. Maar helaas. Firefox zou het toch gewoon moeten kunnen doen met column-width, column-count en column-gap? Nu geeft hij in Firefox ook geen kolommen meer weer?
Overigens zie ik hetzelfde probleem (de ongelijke kolommen) al in een testcase die ze zelf geplaatst hebben bij CSS Scripting.com. Ik doe niet zozeer iets fout dus.
Overigens zie ik hetzelfde probleem (de ongelijke kolommen) al in een testcase die ze zelf geplaatst hebben bij CSS Scripting.com. Ik doe niet zozeer iets fout dus.
Het is ook allerminst zo dat kolommen door CSS volledig en goed ondersteunt wordt door welke browser dan ook. Geen enkele heeft volledige CSS3 implementatie.
Dat blijkt wel, maar Firefox scheen dat toch wel te hebben, minus die rare 'bug'. Nou ja, dan moet ik maar met divjes of tabellen gaan kloten, denk ik. Of bestaat er een andere handiger manier?
Ik zie dat je de code van je site hebt aangepast?quote:Op dinsdag 16 januari 2007 20:35 schreef BaggerUser het volgende:
bah bah bah! het lukt me niet ben nu al 2 uur er mee bezig maar ik kan niet vinden wat het is...
ben bezig met een website
http://www.esperanza-bolivia.com en heb eerst in paint gemaak thoe ik de website wil hebben.. maa rop een wonderbaarlijke manie rzit er ergens een ruimte van 2 pixel die ik niet gevuld krijg waardoor de hele website lelijk wordt.. ik zal proberen duidelijk te maken wat ik bedoel...
ik heb dit:
http://www.esperanza-bolivia.com
het is de bedoeling dat de site dit wordt:
http://www.esperanza-bolivia.com/voorbeeld.jpg
hier gaat het mis
http://www.esperanza-bolivia.com/mis.jpg
dit zijn de bestanden
http://www.esperanza-bolivia.com/index.zip
iemand enig idee waar die 2 pixels vandaan komen?
Misschien post ik dit op de verkeerde plaats en moet ik het meer op de Javascripttoer gaan. Maar vooruit.
Dit wil ik op een pagina:
Rechts zie je een veldje thumbnails. Rechts staat tekst wat je te zien krijgt als je over de thumbnails gaat met de muis. Daarvoor is het veld leeg.
Die tekst verschilt uiteraard per thumbnail, want het moet uitleggen wat de thumbnail inhoudt. Als je op de thumbnail klikt, ga je naar de desbetreffende pagina, maar dat is logisch.
Hoe kan ik dit het beste uitvoeren?
Dit wil ik op een pagina:
Rechts zie je een veldje thumbnails. Rechts staat tekst wat je te zien krijgt als je over de thumbnails gaat met de muis. Daarvoor is het veld leeg.
Die tekst verschilt uiteraard per thumbnail, want het moet uitleggen wat de thumbnail inhoudt. Als je op de thumbnail klikt, ga je naar de desbetreffende pagina, maar dat is logisch.
Hoe kan ik dit het beste uitvoeren?
Je kunt bv de verschillende teksten in DIV's plaatsen en op visibility:hidden zetten, die DIV's een ID meegeven en dan via onmouseovers en onmouseouts van de thumbnails de style van de DIV's op visible zetten.
bv
Een DIV:
<div id="tekstblok3" style="visibility:hidden;" class="tekstblok">teksttekstteksttekstteksttekstteksttekst</div>
Een thumb:
<img src="thumb-geel.gif" border="0" width="50" height="50" onmouseover="document.getElementById('tekstblok3').style.visibility='visible';" onmouseout="document.getElementById('tekstblok3').style.visibility='hidden';">
bv
Een DIV:
<div id="tekstblok3" style="visibility:hidden;" class="tekstblok">teksttekstteksttekstteksttekstteksttekst</div>
Een thumb:
<img src="thumb-geel.gif" border="0" width="50" height="50" onmouseover="document.getElementById('tekstblok3').style.visibility='visible';" onmouseout="document.getElementById('tekstblok3').style.visibility='hidden';">
Dat klinkt eigenlijk heel logisch. En wat kan ik het beste gebruiken om de thumbnails te positioneren? Tabellen?
tabellen? niet schelden hier he
je kan dit imho het beste doen met een ul met daarin li-elementen die een marge aan rechterkant en onderkant hebben en een vaste breedte en hoogte.
je kan dit imho het beste doen met een ul met daarin li-elementen die een marge aan rechterkant en onderkant hebben en een vaste breedte en hoogte.
Test je filmkennis! Speel mee met FOK! Movie Trivia en win prijzen!
waarom zou je?quote:Op maandag 29 januari 2007 22:35 schreef Geqxon het volgende:
Ik weet dat DIVs netter zijn, maar bij zo'n geval kun je toch prima tabellen gebruiken?
Je hebt alleen maar meer code nodig
Kan
| 1 2 3 4 | <img style="float: right"> tekst.... </div> |
ook niet?
Wacht, zo simpel had ik er nog niet aan gedacht. En dan inderdaad een margin om de plaatjes gooien
Natuurlijk is dit alleen van toepassing als elk plaatje even groot en breed is.
Natuurlijk is dit alleen van toepassing als elk plaatje even groot en breed is.
Ow, ik lees eigenlijk verkeerd...
zijn 9 thumbs met 1 tekstvlak.
Zou met geklooi ook zonder javascript kunnen, via a:hover.
en display: #
kost wat meer geklooi, maar wel leuk geklooi
http://www.howtocreate.co.uk/tutorials/testMenu.html
zijn 9 thumbs met 1 tekstvlak.
Zou met geklooi ook zonder javascript kunnen, via a:hover.
en display: #
kost wat meer geklooi, maar wel leuk geklooi
http://www.howtocreate.co.uk/tutorials/testMenu.html
lol, juist voor deze oplossing heb je een stuk javascript nodig. Daarnaast is de positie van de 'uitklap' in dit geval afhankelijk van het hoofditem. Een stuk lastiger om uit te lijnen.quote:Op maandag 29 januari 2007 23:35 schreef the_disheaver het volgende:
Ow, ik lees eigenlijk verkeerd...
zijn 9 thumbs met 1 tekstvlak.
Zou met geklooi ook zonder javascript kunnen, via a:hover.
en display: #
kost wat meer geklooi, maar wel leuk geklooi
http://www.howtocreate.co.uk/tutorials/testMenu.html
Wat je het best kan doen is 1 container div relatief positioneren, daarbinnen de meerdere tekstlagen (div's) absolute positioneren en zoals ik aangaf de visibility op hidden zetten en via een mouseover/mouseout bij de thumbs op visible of weer op hidden zetten.
quote:Op maandag 29 januari 2007 21:59 schreef hornage het volgende:
tabellen? niet schelden hier he
je kan dit imho het beste doen met een ul met daarin li-elementen die een marge aan rechterkant en onderkant hebben en een vaste breedte en hoogte.
Dat is inderdaad het beste.
Ik ga met haaahaha mee: zo'n uitklap is niet wat ik bedoel. Ik wil gewoon een veld thumbs die als je met de muis over een enkel exemplaar van die thumbs gaat links een tekst te zien krijgt... That's it. Ik moet het nog uitproberen hoor, maar het klinkt logisch.
Beste oplossing is idd gewoon a:hover. Geen gedoe met JS als het niet nodig is.
HTML:
CSS:
Hiermee moet het lukken... Vervang uiteraard de top en left positie voor de correcte waarden voor je eigen site.
HTML:
| 1 |
CSS:
| 1 2 | a:hover span {display:block;position:absolute;top:10em;left;10em;z-index:1;} |
Hiermee moet het lukken... Vervang uiteraard de top en left positie voor de correcte waarden voor je eigen site.
Zijn die spannetjes voor de thumbs of zijn de spannetjes voor de tekstblokken? Want wanneer je de spannetjes in de <a href> van de thumbs zet kun je ze niet daar positioneren waar je de tekstblokken wil hebben.
Ik heb het gedaan zoals haaahaha het heeft voorgesteld en het werkt prima. Eén tekstje schiet echter om een of andere rare reden onder de thumbnails, maar dat zal wel gemakkelijk op te lossen zijn. Misschien zie ik weer iets over het hoofd.
Oké, correctie. Het werkt wel, maar doordat ik de divjes onder elkaar plaats in het HTML bestand, verschijnen de verschillende teksten om beurten ook onder elkaar.
Dus de tekst van de eerste thumbnail verschijnt bovenaan, de tekst van de tweede thumbnail daaronder, etcetera. Kan ik nog iets doen met de positie van die divjes, dat ze op elkaars plaats verschijnen, in plaats van onder elkaar?
Dus de tekst van de eerste thumbnail verschijnt bovenaan, de tekst van de tweede thumbnail daaronder, etcetera. Kan ik nog iets doen met de positie van die divjes, dat ze op elkaars plaats verschijnen, in plaats van onder elkaar?
Da's toch wel subjectief hoor. Ook al zou ik het ook met CSS doen, je kunt ook zeggen dat het veranderen van een element als je er met de muis overheen gaat gedrag is, en het dus door JS gedaan zou moeten worden.quote:Op donderdag 1 februari 2007 02:49 schreef Castor het volgende:
Beste oplossing is idd gewoon a:hover. Geen gedoe met JS als het niet nodig is.
Et voila! Hoe fekkin' simpel.quote:Op donderdag 1 februari 2007 16:11 schreef Geqxon het volgende:
Een position:absolute allicht?
Toch maar eens van tabellen overgestapt naar <div> layouts. Moet zeggen dat 't toch wel een verbetering is. Niet alleen omdat m'n pagina nu semantisch correct is maar het is ook veel beter beheerbaar door middel van de stylesheet waar nu vrijwel alles voor de opmaak in staat.
ik had een vraag mbt de Select element.
als je met de muis over de opties gaat, verkleurt het geselecteerde > blauw.
hoe voorkom ik dat dat gebeurt, dat het kleurloos blijft? als ik de kleur zelf kon instellen zou nog beter zijn.
instellen bedoel ik mee: gebruiker doet dit, gebruik dan *deze* kleur.
CSS heeft selectors en pseudo-selectors. heeft iemand een overzicht?
en graag zou ik die van de Select en Option elementen willen hebben.
zou cool zijn. hier is een testpagina.
alvast bedankt.
als je met de muis over de opties gaat, verkleurt het geselecteerde > blauw.
hoe voorkom ik dat dat gebeurt, dat het kleurloos blijft? als ik de kleur zelf kon instellen zou nog beter zijn.
instellen bedoel ik mee: gebruiker doet dit, gebruik dan *deze* kleur.
CSS heeft selectors en pseudo-selectors. heeft iemand een overzicht?
en graag zou ik die van de Select en Option elementen willen hebben.
zou cool zijn. hier is een testpagina.
alvast bedankt.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <head> <title>Test</title> </head> <body> <select class="colpick" style="width: 70px;"> <option style="background-color: #7BB;" value="#7BB"></option> <option style="background-color: #DDD;" value="#DDD"></option> <option style="background-color: #AA6;" value="#AA6"></option> </select> </body> </html> |
Ik weet niet of je de kleur van een Option kan veranderen. Wel met Javascript geloof ik, maar dat is verre van ideaal. (erg langzaam)
Afgezien daarvan vraag ik me af of gebruikers dan nog weten welke optie ze hebben geselecteerd. Ik zou het dus gewoon zo laten.
Maar hier een link over de pseudo selectors (wat overigens niks met de option heeft te maken)
http://www.w3.org/TR/REC-CSS2/selector.html
Trouwens, waar is je Doctype en waarom geen externe stylesheet?
Afgezien daarvan vraag ik me af of gebruikers dan nog weten welke optie ze hebben geselecteerd. Ik zou het dus gewoon zo laten.
Maar hier een link over de pseudo selectors (wat overigens niks met de option heeft te maken)
http://www.w3.org/TR/REC-CSS2/selector.html
Trouwens, waar is je Doctype en waarom geen externe stylesheet?
het wordt een groot project en HTML in deze is niet boeiend.
ik heb alleen JS en CSS nodig. een onderdeel ervan is een ColorPicker.
als je met de muis een kleur gaat kiezen, zal je altijd blauw zien
en dat moeten we niet hebben.
ik heb alleen JS en CSS nodig. een onderdeel ervan is een ColorPicker.
als je met de muis een kleur gaat kiezen, zal je altijd blauw zien
en dat moeten we niet hebben.
