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.
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.
Ik zou haast zeggen dat dat iets is dat in je browser ingebakken zit.
Wat ook mogelijk is, is een plaatje van de kleurtjes op je pagina zetten, een image-map erover, zodat als iemand ergens klikt, er in een hidden input field de kleurcode in word geladen. Een beetje een omweg, maar wel mooier.
Wat ook mogelijk is, is een plaatje van de kleurtjes op je pagina zetten, een image-map erover, zodat als iemand ergens klikt, er in een hidden input field de kleurcode in word geladen. Een beetje een omweg, maar wel mooier.
OS zelfs. ik heb mooie dropdowns gezien.quote:Op woensdag 7 februari 2007 15:52 schreef Geqxon het volgende:
Ik zou haast zeggen dat dat iets is dat in je browser ingebakken zit.
met verschillende stijlen. maar bij allen is het geselecteerde blauw
en ik las zojuist een opmerking hierover.
dan moet ik dus iets anders gaan doen...quote:Actually, that's not necessarily what it defaults to. On my PC, the
highlight color is a lovely light olive green, because that's the color
scheme I set for the OS (can't stand that bright XP blue!). So, the
look of the select box is largely controlled by the OS, and thus there's
not much you can do with CSS to change how it looks.
En mijn methode? Voor elk kleurtje een <span> maken, met een onclick die stiekem in de achtergrond een verborgen <input type="hidden"> invult? Komt er wel wat Javascript bij aan te pas..
Ik kon het overigens niet laten in PHP even een for-lusje te maken, voor 255*255*255 kleuren. En dat vond mijn browser niet zo leuk. Niet doen dus
Stel ik heb een pagina met een 'default' template en een paar Alternate stylesheets. Nu kun je in Firefox fijn naar Beeld > Paginastijl gaan en daar de alternate stylesheets selecteren zodat de pagina die je bekijkt, meteen met de door jouw geselecteerde stylesheet weergeven word zonder refresh.
Is er ook een manier om dit te doen op de webpagina zelf door bijvoorbeeld een OnClick="" event, of in ieder geval iets neutraals wat dus ook onder alle omstandigheden werkt (en dus niet alleen met IE en/of Mozilla)?
Is er ook een manier om dit te doen op de webpagina zelf door bijvoorbeeld een OnClick="" event, of in ieder geval iets neutraals wat dus ook onder alle omstandigheden werkt (en dus niet alleen met IE en/of Mozilla)?
http://www.dzr-web.com/misc/stylesheet-switching/quote:Op donderdag 8 februari 2007 23:45 schreef Tuvai.net het volgende:
Stel ik heb een pagina met een 'default' template en een paar Alternate stylesheets. Nu kun je in Firefox fijn naar Beeld > Paginastijl gaan en daar de alternate stylesheets selecteren zodat de pagina die je bekijkt, meteen met de door jouw geselecteerde stylesheet weergeven word zonder refresh.
Is er ook een manier om dit te doen op de webpagina zelf door bijvoorbeeld een OnClick="" event, of in ieder geval iets neutraals wat dus ook onder alle omstandigheden werkt (en dus niet alleen met IE en/of Mozilla)?
Hope for the best, prepare for the worst.
Nou, hopelijk is er iemand die mij kan helpen met het volgende probleem. Ik heb al een heleboel mogelijkheden geprobeerd, maar ik kom er niet uit.
Klik voor een plaatje.
Het hele idee is dus de site altijd 100% hoogte heeft. De header en footer staan vast, en de content is te scrollen als het groter is dan het content veld. Hetprobleem is echter, dan een td of div met height="100%" geen "overflow: auto;" wil.
Weet iemand hoe ik dit wel voor elkaar kan krijgen?
Klik voor een plaatje.
Het hele idee is dus de site altijd 100% hoogte heeft. De header en footer staan vast, en de content is te scrollen als het groter is dan het content veld. Hetprobleem is echter, dan een td of div met height="100%" geen "overflow: auto;" wil.
Weet iemand hoe ik dit wel voor elkaar kan krijgen?
Gewoon absolute of vaste positionering? Bovenste en onderste div een bepaalde hoogte in pixels meegeven en de middelste geen hoogte, maar slechts een top- en bottomwaarde meegeven afhankelijk van de hoogte van de twee andere divs?quote:Op zondag 11 februari 2007 12:51 schreef fokME2 het volgende:
Weet iemand hoe ik dit wel voor elkaar kan krijgen?
Hoe zag je het voor je met die middelste div? Ik ben inmiddels wat aan het spelen, maar moet de footer-div ook geen bottom waarde hebben?
Edit: Code aangepast, het werkt zo! Dankje AnGabhar!
| 1 2 3 4 5 6 7 8 9 | heading </div> <div style="position: absolute; top: 150px; bottom: 150px; overflow: auto;"> hele lange content </div> <div style="position: absolute; height: 150px; bottom: 0px;"> footer </div> |
Edit: Code aangepast, het werkt zo! Dankje AnGabhar!
Design is inmiddels goed werkende uitgewerkt voor Firefox en Opera.
Maar IE6 werkt niet mee (IE7 weet ik niet).
Weet iemand hoe ik dit kan oplossen?
klikklik
Maar IE6 werkt niet mee (IE7 weet ik niet).
Weet iemand hoe ik dit kan oplossen?
klikklik
IE7 zit in compatibiliteitsmodus. Geef een stricte Doctype mee, dan werkt het wel.quote:Op zondag 11 februari 2007 14:19 schreef fokME2 het volgende:
Maar IE6 werkt niet mee (IE7 weet ik niet).
Of transitional, dan werkt het ook waarschijnlijk.quote:Op zondag 11 februari 2007 14:55 schreef AnGabhar het volgende:
[..]
IE7 zit in compatibiliteitsmodus. Geef een stricte Doctype mee, dan werkt het wel.
En bouwer van die site: lees aub eens een boek over html en css Dit is echt te ranzig, simpelweg tabellen vervangen door divs
Dit is echt te ranzig, simpelweg tabellen vervangen door divs
Nou ja, met 'stricte' bedoelde ik in het algemeen iedere doctype die IE in standaardmodus gooit. Dat is voor zover ik weet iedere doctype met een volledige URI, zelfs een transitional doctype wordt dan nog in standaardmodus weergegeven.quote:Op zondag 11 februari 2007 15:04 schreef CraZaay het volgende:
[..]
Of transitional, dan werkt het ook waarschijnlijk.
@AnGabhar:
Zal eens met doctypes spelen dan, zou het voor IE6 ook werken.
@CraZaay:
Het was aanvankelijk niet de bedoeling dat het er zo uit zou komen te zien(html), maar deze layout met tabellen maken lijkt me ook niet echt de oplossing? Daarbij kreeg ik het probleem met tabellen niet opgelost.
Zal eens met doctypes spelen dan, zou het voor IE6 ook werken.
@CraZaay:
Het was aanvankelijk niet de bedoeling dat het er zo uit zou komen te zien(html), maar deze layout met tabellen maken lijkt me ook niet echt de oplossing? Daarbij kreeg ik het probleem met tabellen niet opgelost.
Nee, een lay-out met tabellen maken is nooit een oplossing. Maar de tabelcellen simpelweg vervangen door divs ook niet.quote:Op zondag 11 februari 2007 17:11 schreef fokME2 het volgende:
@CraZaay:
Het was aanvankelijk niet de bedoeling dat het er zo uit zou komen te zien(html), maar deze layout met tabellen maken lijkt me ook niet echt de oplossing? Daarbij kreeg ik het probleem met tabellen niet opgelost.
CSS en HTML zijn ideaal om presentatie en structuur van je pagina te scheiden. Dat doe je nu dus niet, omdat je structuur voor 90% bestaat uit code om de presentatie te bepalen. Een belangrijke tip in jouw geval: achtergrondafbeeldingen. Afbeeldingen die niets toevoegen (dus die niet illustratief zijn maar de boel alleen opleuken) kun je beter in je CSS plaatsen. Die hebben immers niets met je structuur te maken.
@CraZaay
Met achtergrondafbeeldingen werken kan inderdaad, maar dan krijg je allemaal lege divs? Daarbij werkt mn IE pngfix dan niet
Met achtergrondafbeeldingen werken kan inderdaad, maar dan krijg je allemaal lege divs? Daarbij werkt mn IE pngfix dan niet
Waarschijnlijk kun je die afbeeldingen aan hele andere elementen hangen die je sowieso nodig hebtquote:Op zondag 11 februari 2007 18:07 schreef fokME2 het volgende:
@CraZaay
Met achtergrondafbeeldingen werken kan inderdaad, maar dan krijg je allemaal lege divs? Daarbij werkt mn IE pngfix dan niet
Daarnaast kun je die pngfix ook in je CSS oplossen
http://msdn.microsoft.com(...)s/sizingmethod_1.aspquote:Op zondag 11 februari 2007 21:11 schreef fokME2 het volgende:
Een andere sizingMethod? Heb je nog een hulpvolle suggestie?
Het werd eens tijd voor een structurele verandering van mijn layout.
De pagina: http://buyshit.nl/fok/testlayout.html
Mijn bedoeling is dat het content div wat omhoog gaat. Nu wil ik het zo strak als mogelijk maken, en alles uiteraard volgens het W3 standaard. Ik kan in principe alles een fixed top en left attribuut geven, maar dat vind ik zelf totaal niet netjes. Een float:rigth zou een optie zijn, maar ook daar heb ik twijvels bij. Kan iemand mij misschien een tip geven?
De pagina: http://buyshit.nl/fok/testlayout.html
Mijn bedoeling is dat het content div wat omhoog gaat. Nu wil ik het zo strak als mogelijk maken, en alles uiteraard volgens het W3 standaard. Ik kan in principe alles een fixed top en left attribuut geven, maar dat vind ik zelf totaal niet netjes. Een float:rigth zou een optie zijn, maar ook daar heb ik twijvels bij. Kan iemand mij misschien een tip geven?
Floaten is wat mij betreft de netste oplossing. En je hebt nu al redundante HTML Die id="menu" kun je prima aan de ul hangen, scheelt weer een nutteloze div.
Dat ligt eraan hoe je het bekijkt:quote:Op maandag 12 februari 2007 19:35 schreef CraZaay het volgende:
Floaten is wat mij betreft de netste oplossing. En je hebt nu al redundante HTML Die id="menu" kun je prima aan de ul hangen, scheelt weer een nutteloze div.
-Allereerst vind ik het zoals ik het nu heb gedaan het zelf het netst. Mocht ik een totaal andere menustructuur willen kan ik dat zo omgooien.
-Ten tweede hou ik de opmaak en de inhoud liever gescheiden, aangezien de website dynamisch (AJAX) gaat worden, dit is enkel testdata
Denk bijvoorbeeld aan een klein logo op het menu, een copyrigth tekst, een item buiten de UL, enz. enz
Ik redeneer op basis van wat er nu staat uiteraard
Wat ik alleen niet snap is waarom je dit een andere scheiding vindt van opmaak en inhoud dan mijn suggestie? Ik laat toch nog steeds alle opmaak in de CSS staan?
Wat ik alleen niet snap is waarom je dit een andere scheiding vindt van opmaak en inhoud dan mijn suggestie? Ik laat toch nog steeds alle opmaak in de CSS staan?
Ik doel op het feit dat ik de menu-div als opmaak zie, en de UL als inhoud. Als ik het id "menu" aan de UL hang, word ik enigszins geforceerd de UL te gebruiken voor een menu, en kan ik niet meer met losse links werken
Toch maar voor een alternatieve methode gekozen
Ik wil buttons maken. 300 pixel brede buttons, met een leuke margin. Hoe ik het op het moment heb:
Het enige nadeel is dat ik met paragraphs werk, en die dus niet naast elkaar kunnen. Waar ik mee getoverd heb: Om het in zowel een span als een font-tag te gooien, waar ik helaas het probleem heb dat ik de breedte niet in kan stellen. Hoe kan ik dit het beste nu oplossen?
Ik wil buttons maken. 300 pixel brede buttons, met een leuke margin. Hoe ik het op het moment heb:
| 1 |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | width: 300px; margin: 0 auto; text-align: center; background-color: #424269; padding: 10px; cursor: pointer; } .bigbutton:hover{ background-color: #42425B; } .buttonfont{ font-family: Verdana, Arial; font-size: 12px; color: #FFFFFF; } |
Het enige nadeel is dat ik met paragraphs werk, en die dus niet naast elkaar kunnen. Waar ik mee getoverd heb: Om het in zowel een span als een font-tag te gooien, waar ik helaas het probleem heb dat ik de breedte niet in kan stellen. Hoe kan ik dit het beste nu oplossen?
