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.
Dan ben je die "position: relative" vergeten voor het element waarbinnen je het absoluut gepositioneerde element zet. Het werkt echtquote:Op dinsdag 8 januari 2008 14:22 schreef wobbel het volgende:
[..]
werkt niet...dan komt ie op de bodem van de pagina
Zo, want kan font-scaling doormiddel van em-en toch vervelend zijn! Heb je alles perfect, maar doordat net dat ene element in het andere genest zit mag je weer de helft omgooien. Maar wel erg leuk. 
Jawel hoor. Er is nergens gedefinieerd waarvoor ze bedoeld zijn, dus dit is volledig conform specs & breed geaccepteerd.quote:Op vrijdag 11 januari 2008 14:44 schreef mcDavid het volgende:
Nouja, ik vind het gewoon een stom idee om een achtergrond afbeelding te gebruiken als border. Daar zijn ze volgens mij niet voor bedoeld. Maar het werkt prima inderdaad dus waarom niet.
clear: bothquote:Op dinsdag 8 januari 2008 14:22 schreef wobbel het volgende:
[..]
werkt niet...dan komt ie op de bodem van de pagina
Inderdaad, ik heb veel ergere hacks gezien.quote:Op zaterdag 12 januari 2008 12:15 schreef CraZaay het volgende:
[..]
Jawel hoor. Er is nergens gedefinieerd waarvoor ze bedoeld zijn, dus dit is volledig conform specs & breed geaccepteerd.
Het is niet eens een hack wat mij betreft. Het is geen work around voor een browser quirk en geen invalide CSSquote:Op zaterdag 12 januari 2008 12:50 schreef Geqxon het volgende:
[..]
Inderdaad, ik heb veel ergere hacks gezien.
Correctie, "hacks". Puntjes waar een reguliere programeur toch wel even zijn wenkbrauw bij optrekt.quote:Op zaterdag 12 januari 2008 15:45 schreef CraZaay het volgende:
[..]
Het is niet eens een hack wat mij betreft. Het is geen work around voor een browser quirk en geen invalide CSS
weet ik, weet ik.. Maar dan nog vind ik het stom dat ik een plaatje moet gebruiken terwijl er border specificaties bestaan. Gewoon, omdat. Maargoed het werkt dus ik hou het maar zo.quote:Op zaterdag 12 januari 2008 12:15 schreef CraZaay het volgende:
[..]
Jawel hoor. Er is nergens gedefinieerd waarvoor ze bedoeld zijn, dus dit is volledig conform specs & breed geaccepteerd.
De site waarmee ik bezig ben doet trouwens nog iets raars: in IE7 krijg ik een horizontale scrollbar en een heul end lege ruimte aan de rechterkant..
andere browsers hebben er geen last van. De site staat met het openen in IE7 wel gewoon netjes gecentreerd, maar kan daarna dus opzij gescrolld worden.
Iemand een idee waar zoiets aan kan liggen, zonder dat ik gelijk de site moet posten?
-edit-
ik weet niet wat ik gedaan heb, maar nu is'ie weg
Opgelost dus.[ Bericht 6% gewijzigd door mcDavid op 13-01-2008 15:11:38 ]
Hallo Mensen,
Momenteel ben ik hier bezig met ene site. En ik wil het volgende. Ik heb een kolom met sponsorlogo's erin, deze sponsorlogos schuiven in verticale richting. gedaan in php, werkt prima.
Nu wilde ik echter hierachter images plaatsen, die ik eenvoudig met een cms kan toevoegen/verwijderen. Ik wil dus images achter images (van de sponsorbalk). Dit dus níet met de background-image functie. Ziet iemand mogelijkheden?
Momenteel ben ik hier bezig met ene site. En ik wil het volgende. Ik heb een kolom met sponsorlogo's erin, deze sponsorlogos schuiven in verticale richting. gedaan in php, werkt prima.
Nu wilde ik echter hierachter images plaatsen, die ik eenvoudig met een cms kan toevoegen/verwijderen. Ik wil dus images achter images (van de sponsorbalk). Dit dus níet met de background-image functie. Ziet iemand mogelijkheden?
quote:Op zondag 13 januari 2008 20:45 schreef Fatality het volgende:
Hallo Mensen,
Momenteel ben ik hier bezig met ene site. En ik wil het volgende. Ik heb een kolom met sponsorlogo's erin, deze sponsorlogos schuiven in verticale richting. gedaan in php, werkt prima.
Nu wilde ik echter hierachter images plaatsen, die ik eenvoudig met een cms kan toevoegen/verwijderen. Ik wil dus images achter images (van de sponsorbalk). Dit dus níet met de background-image functie. Ziet iemand mogelijkheden?
| 1 2 3 4 | top: ...; left: ...; z-index: ...; |
Moet er wel bijzeggen: ik weet niet wat je precies van plan bent, maar volgens mij kan dit veel netter opgelost worden.
Wat mcDavid zegt. Beide punten 
Dit lijkt mij een oplossing voor een probleem wat "by design" ontstaan is, terwijl het design gewoon mis is
Dit lijkt mij een oplossing voor een probleem wat "by design" ontstaan is, terwijl het design gewoon mis is
Nee echt niet. Ik loop momenteel stage bij een professioneel bedrijf. Mijn begeleider is de programmeur hier en toen ik nog weinig van CSS afwist legde hij mij uit, met een door hem ontworpen site, dat dit gewoon een simpele manier is om je layout te bepalen. Dus een plaatje van 1px hoog verticaal laten herhalen.quote:Op zaterdag 12 januari 2008 16:50 schreef Geqxon het volgende:
[..]
Correctie, "hacks". Puntjes waar een reguliere programeur toch wel even zijn wenkbrauw bij optrekt.
Dat is een veelgebruikte techniek, ik duidde op het gebruiken van een afbeelding als border, dat kan ietwat vreemd over komen.quote:Op maandag 14 januari 2008 09:56 schreef Nashje het volgende:
[..]
Nee echt niet. Ik loop momenteel stage bij een professioneel bedrijf. Mijn begeleider is de programmeur hier en toen ik nog weinig van CSS afwist legde hij mij uit, met een door hem ontworpen site, dat dit gewoon een simpele manier is om je layout te bepalen. Dus een plaatje van 1px hoog verticaal laten herhalen.
Weet iemand ook of er een site is die linkt naar sites die gemaakt zijn in (x)HTML & CSS zonder gebruik te maken van afbeeldingen? 
Just say hi!
http://www.w3schools.com/quote:Op maandag 14 januari 2008 13:08 schreef Chandler het volgende:
Weet iemand ook of er een site is die linkt naar sites die gemaakt zijn in (x)HTML & CSS zonder gebruik te maken van afbeeldingen?
alleen de header is een image.
Help!! Mijn site doet het alleen in MSIE (Internet Explorer), dat heb ik op deze link gecheckt > http://browsershots.org/http://www.dumpzooi.nl/v1/layout.html
Hoe los ik dat op? Heeft te maken met #content_wrap, als ik die een vaste hoogte opgeef gaat het wel goed...maar content_wrap moet automatisch meegroeien met de groote van content_links of content_menu...
hoe los ik dat op? Gr. Roy
Linkje naar HTML + CSS: http://www.dumpzooi.nl/v1/layout.html
Hoe los ik dat op? Heeft te maken met #content_wrap, als ik die een vaste hoogte opgeef gaat het wel goed...maar content_wrap moet automatisch meegroeien met de groote van content_links of content_menu...
hoe los ik dat op? Gr. Roy
Linkje naar HTML + CSS: http://www.dumpzooi.nl/v1/layout.html
een minheight instellen?quote:Op dinsdag 15 januari 2008 20:31 schreef wobbel het volgende:
Help!! Mijn site doet het alleen in MSIE (Internet Explorer), dat heb ik op deze link gecheckt > http://browsershots.org/http://www.dumpzooi.nl/v1/layout.html
Hoe los ik dat op? Heeft te maken met #content_wrap, als ik die een vaste hoogte opgeef gaat het wel goed...maar content_wrap moet automatisch meegroeien met de groote van content_links of content_menu...
hoe los ik dat op? Gr. Roy
Linkje naar HTML + CSS: http://www.dumpzooi.nl/v1/layout.html
float: left eruit halen, content_menu vóór content_left zetten in de html-code.quote:Op dinsdag 15 januari 2008 20:31 schreef wobbel het volgende:
Help!! Mijn site doet het alleen in MSIE (Internet Explorer), dat heb ik op deze link gecheckt > http://browsershots.org/http://www.dumpzooi.nl/v1/layout.html
Hoe los ik dat op? Heeft te maken met #content_wrap, als ik die een vaste hoogte opgeef gaat het wel goed...maar content_wrap moet automatisch meegroeien met de groote van content_links of content_menu...
hoe los ik dat op? Gr. Roy
Linkje naar HTML + CSS: http://www.dumpzooi.nl/v1/layout.html
En er staan nergens <p> tags om je tekst!
En het menu kun je ook net zoals bij Tweakers.net doen:
| 1 2 3 4 5 6 7 8 9 10 | <legend>Channels</legend> <ul> <li><a class="main active" href="http://tweakers.net/" title="Main-channel"><span>Main</span></a></li> <li><a class="core" href="http://core.tweakers.net/" title="Core-channel"><span>Core</span></a></li> <li><a class="pro" href="http://pro.tweakers.net/" title="Pro-channel"><span>Pro</span></a></li> <li><a class="life" href="http://life.tweakers.net/" title="Life-channel"><span>Life</span></a></li> </ul> </fieldset> |
oops dat was niet de bedoeling...mijn CMS systeem filter zelfs <p> tagsquote:Op dinsdag 15 januari 2008 20:52 schreef mcDavid het volgende:
[..]
float: left eruit halen, content_menu vóór content_left zetten in de html-code.
En er staan nergens <p> tags om je tekst!
maar ik ga je oplossing ff proberen
[edit]
Het werkt!! Prima oplossing...en toch snap ik nog niet wát er fout was
[edit2]
Ik heb geen <p> tags
volgens mij heeft een object met een float per definitie geen hoogte. Normaalgesproken gebruik je dan ook niet op alle objecten een float, er kan er altijd minstens eentje gewoon aansluiten.quote:Op dinsdag 15 januari 2008 20:59 schreef wobbel het volgende:
[..]
oops dat was niet de bedoeling...mijn CMS systeem filter zelfs <p> tags
maar ik ga je oplossing ff proberen
[edit]
Het werkt!! Prima oplossing...en toch snap ik nog niet wát er fout was
[edit2]
Ik heb geen <p> tags
En anders gebruik je de position tag. ben je er helemaal vanaf.
kquote:Op dinsdag 15 januari 2008 21:05 schreef mcDavid het volgende:
[..]
volgens mij heeft een object met een float per definitie geen hoogte. Normaalgesproken gebruik je dan ook niet op alle objecten een float, er kan er altijd minstens eentje gewoon aansluiten.
En anders gebruik je de position tag. ben je er helemaal vanaf.
daar kan i kwat meer mee
Een gefloat object heeft wel een hoogte (al dan niet expliciet gedefinieerd), maar zit niet meer "in de flow". Je had #content_wrap ook "overflow: auto" mee kunnen geven (zonder hoogte te definieren), dan was het ook opgelost.
Verrek!quote:Op dinsdag 15 januari 2008 23:58 schreef CraZaay het volgende:
Een gefloat object heeft wel een hoogte (al dan niet expliciet gedefinieerd), maar zit niet meer "in de flow". Je had #content_wrap ook "overflow: auto" mee kunnen geven (zonder hoogte te definieren), dan was het ook opgelost.
Maar mijn oplossing kost minder digits!
Aangezien ik hier denk ik wel goed zit...
Is het semantisch incorrect om een anchor om een list-element te wrappen? Zodat het complete list-element klikbaar word in plaats van enkel de tekst? Of mag dit eigenlijk niet?
Is het semantisch incorrect om een anchor om een list-element te wrappen? Zodat het complete list-element klikbaar word in plaats van enkel de tekst? Of mag dit eigenlijk niet?
Het is in ieder geval niet toegestaan in html. Het enige toegestane child element van <ul> is <li>, dus er mag geen <a> om een <li> staan.
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? |
Gewoon de <a> binnen de <li> zetten, en de <a> "display: block" geven (eventueel nog de gewenste hoogte en breedte; standaard de hoogte van de inhoud en 100% breedte (block-level element)). Tadaaquote:Op woensdag 16 januari 2008 00:52 schreef Geqxon het volgende:
Aangezien ik hier denk ik wel goed zit...
Is het semantisch incorrect om een anchor om een list-element te wrappen? Zodat het complete list-element klikbaar word in plaats van enkel de tekst? Of mag dit eigenlijk niet?
[ Bericht 8% gewijzigd door CraZaay op 16-01-2008 09:56:39 ]
Ik heb divs die ik laat verdwijnen en terugkomen. Ik heb er iets van 8. Hoe kan ik op een slimme manier zorgen dat ik niet 8 divs hoef aan te maken? Want al deze divs hebben dezelfde eigenschappen, ik wil alleen niet dat ze tegelijk verdwijnen. Dus hoe kan ik het beste 8 divs aanmaken met zo minmogelijk code? Kan je iets doen dat je zegt van deze div is hetzelfde als die?
Je zou een Javascript-functie kunnen maken die een div aan de DOM toevoegt (of cloned). Da's eigenlijk de enige andere optie dan gewoon 8 div's in je code opnemen.
Verkeerde topic, heeft niets met CSS te maken
Verkeerde topic, heeft niets met CSS te maken
Hoe kun je een hoogte aan een <p> toevoegen? Ik wil niet meer met <br>'s werken. Heb al eens geprobeerd .p { line-height: ..px } maar heeft niet echt effect.
Tussen regels of paragrafen? Tussen regels: gebruik line-height (met een relatieve waarde ipv px!) en anders margin-top/margin-bottom.quote:Op vrijdag 18 januari 2008 16:29 schreef Nashje het volgende:
Ik vind de ruimte tussen tekst met <p> nu in ieder geval veel te ruim.
kan jeniet vanquote:Op vrijdag 18 januari 2008 16:17 schreef CraZaay het volgende:
Je zou een Javascript-functie kunnen maken die een div aan de DOM toevoegt (of cloned). Da's eigenlijk de enige andere optie dan gewoon 8 div's in je code opnemen.
Verkeerde topic, heeft niets met CSS te maken
style.ding1 = style.ding2 oid?
en kan je ook een div achter een andere doen? zegmaar als bg?
quote:Op vrijdag 18 januari 2008 16:43 schreef Flaccid het volgende:
[..]
kan jeniet van
style.ding1 = style.ding2 oid?
| 1 2 3 | width: 3em; } |
Met z-index bepaal je in welke "laag" je DIV terecht komt.quote:Op vrijdag 18 januari 2008 16:51 schreef Flaccid het volgende:
[..]
die zocht ik. thanks.
nu nog uitvissen hoe ik een div achter een andere krijg...
owja, helemaal vergetenquote:Op vrijdag 18 januari 2008 16:56 schreef Geqxon het volgende:
[..]
Met z-index bepaal je in welke "laag" je DIV terecht komt.
Zie Geqxon, maar dan heb je het over CSS en niet over de div's zelfquote:Op vrijdag 18 januari 2008 16:43 schreef Flaccid het volgende:
[..]
kan jeniet van
style.ding1 = style.ding2 oid?
Ik zou graag comments willen krijgen op mijn eerste echte slice ja ik heb er wel meer gemaakt maar deze vond ik toch leuk om te laten checken, ben zelf namelijk nog niet helemaal tevreden.
Comments? (zodat ik er van kan leren!)
http://www.ericbruggema.nl/slice1
ja ik heb er wel meer gemaakt maar deze vond ik toch leuk om te laten checken, ben zelf namelijk nog niet helemaal tevreden.Comments? (zodat ik er van kan leren!)
http://www.ericbruggema.nl/slice1
Just say hi!
1 error volgens de validator, die dus sowieso even fixen. Ik weet niet of het de bedoeling was, maar in Firefox zie ik nog list bullets voor de list items.
Check iig even je CSS even, sommige zaken zijn dubbel gedefinieerd. Daarnaast zou ik persoonlijk voor sommige zaken de shorthand notatie gebruiken (background properties bijvoorbeeld), maar jouw manier is net zo goed uiteraard. Wel is het zo netjes om de elementen in je CSS ook lowercase te schrijven (dus geen LI).
Je gebruik van headers vindt ik niet echt super. "<h2>header</h2>" zegt echt helemaal niks, die kan dus weg Daarnaast is de naam van de site nergens terug te vinden. Wat ik zou doen is één h1 gebruiken (ook beter voor SEO) en hier de naam van de site in zetten. Al je h1's kun je dan veranderen naar h2's. Waar je die lege h3's voor gebruikt weet ik niet, maar het is extreem ranzig Ten eerste kun je wat je doet vast zonder extra element oplossen, en ten tweede is een header zonder inhoud gewoon onzinnig. Heb je wel een extra element nodig, neem dan iets zonder expliciete semantische waarde (zoals div of span).
Zorg ook dat de naamgeving van je classes e.d. semantisch correct is. Een class genaamd "orange" zegt helemaal niks over de inhoud van het element. Erg vervelend als je straks een template maakt voor dezelfde html waarbij die kop blauw moet zijn Noem het dan liever "naam_van_kop" als class name.
Voor het copyright symbool hebben we het prima bruikbare ©
Niet erg opbouwend misschien, laat ik daarom afsluiten met te zeggen dat dit een factor 1000 beter is dan de code die je voorheen schreef en dat ik allang blij zou zijn als alle front-end devvers het zo zouden doen.
Check iig even je CSS even, sommige zaken zijn dubbel gedefinieerd. Daarnaast zou ik persoonlijk voor sommige zaken de shorthand notatie gebruiken (background properties bijvoorbeeld), maar jouw manier is net zo goed uiteraard. Wel is het zo netjes om de elementen in je CSS ook lowercase te schrijven (dus geen LI).
Je gebruik van headers vindt ik niet echt super. "<h2>header</h2>" zegt echt helemaal niks, die kan dus weg
Daarnaast is de naam van de site nergens terug te vinden. Wat ik zou doen is één h1 gebruiken (ook beter voor SEO) en hier de naam van de site in zetten. Al je h1's kun je dan veranderen naar h2's. Waar je die lege h3's voor gebruikt weet ik niet, maar het is extreem ranzig Ten eerste kun je wat je doet vast zonder extra element oplossen, en ten tweede is een header zonder inhoud gewoon onzinnig. Heb je wel een extra element nodig, neem dan iets zonder expliciete semantische waarde (zoals div of span).Zorg ook dat de naamgeving van je classes e.d. semantisch correct is. Een class genaamd "orange" zegt helemaal niks over de inhoud van het element. Erg vervelend als je straks een template maakt voor dezelfde html waarbij die kop blauw moet zijn
Noem het dan liever "naam_van_kop" als class name.Voor het copyright symbool hebben we het prima bruikbare ©
Niet erg opbouwend misschien, laat ik daarom afsluiten met te zeggen dat dit een factor 1000 beter is dan de code die je voorheen schreef en dat ik allang blij zou zijn als alle front-end devvers het zo zouden doen.
Je kunt ook alle div's dezelfde class geven, maar een ander ID.quote:
Gebruik je de class in de css, en het ID voor het verschijnen/verdwijnen.
Pas op, je achtergrond herhaalt zich. Op een hoge resolutie (1200 pixels hoog bij mij) zie je de fade dus twee keer. "background-repeat: repeat-x" should do the trick.quote:Op dinsdag 22 januari 2008 21:07 schreef Chandler het volgende:
Ik zou graag comments willen krijgen op mijn eerste echte slice
Comments? (zodat ik er van kan leren!)
http://www.ericbruggema.nl/slice1
Verder heb je "list-style-type: none;" onder ul.menu, en doet die het waarschijnlijk beter onder .menu li.
je moet proberen die bullets weg te halen, vink niet zo mooi!quote:Op dinsdag 22 januari 2008 21:07 schreef Chandler het volgende:
Ik zou graag comments willen krijgen op mijn eerste echte slice
Comments? (zodat ik er van kan leren!)
http://www.ericbruggema.nl/slice1
een tip voor je layout:quote:Op dinsdag 22 januari 2008 21:07 schreef Chandler het volgende:
Ik zou graag comments willen krijgen op mijn eerste echte slice
Comments? (zodat ik er van kan leren!)
http://www.ericbruggema.nl/slice1
geef de links naar de spelletjes een afwijkende :hover opmaak, zodat je kunt zien op welke link je muis staat. Het lijkt nu net alsof de div klikbaar is ipv de links.
en een tip voor de code: de css kan een stuk korter! kijk even hier hoe je bepaalde dingen handiger kunt defineren: http://www.gigadesign.be/2005/05/css-shorthand-properties/
Kijk verder even welke definities er eigenlijk niets doen en er dus uit kunnen.
En als je bovenaan * {margin:0;padding:0;} zet, wordt dat op alle elementen toegepast dus hoef je de margins en paddings alleen nog te defineren als ze níét 0 moeten zijn. Sowieso is dit handig om het gedrag in IE en andere browsers een beetje glad te trekken.
-edit-
ohja en je weet dat een tekstgrootte aangeduid in px niet schaalbaar is in IE6?
Het wordt aangeraden daarom em of % te gebruiken voor de teksthoogte.
[ Bericht 4% gewijzigd door mcDavid op 22-01-2008 22:10:21 ]
Puur als designtip: Misschien de menupunten (onder Orange / Green / Blue) om-en-om donker- en lichtgrijs maken, met iets van lichtblauw als je er overheen hovert? Dat maakt het duidelijk wat het voor iets is, een lijst met punten.
En als puristentip: "0px" kan ook gewoon als "0", dan is het niet nodig neer te zetten over welke eenheid we het hebben.
En als puristentip: "0px" kan ook gewoon als "0", dan is het niet nodig neer te zetten over welke eenheid we het hebben.
