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 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
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
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.
Nee hoor, dat hoort gewoon te werkenquote:Op dinsdag 22 januari 2008 21:53 schreef Geqxon het volgende:
Verder heb je "list-style-type: none;" onder ul.menu, en doet die het waarschijnlijk beter onder .menu li.
Heeft een unordered-list dan een list-style-type? Dat hij de list-item hem erft of dat het enkel voor de unordered-list geldt? Nooit geweten.quote:Op dinsdag 22 januari 2008 22:15 schreef CraZaay het volgende:
[..]
Nee hoor, dat hoort gewoon te werken
Een UL heeft LI's als kinderen, en die erven deze property van de parentquote:Op dinsdag 22 januari 2008 22:19 schreef Geqxon het volgende:
[..]
Heeft een unordered-list dan een list-style-type? Dat hij de list-item hem erft of dat het enkel voor de unordered-list geldt? Nooit geweten.
Ik gebruik altijd "list-style: none" op de UL, en dat werkt prima Ik vind dat ook semantisch beter, aangezien je de look van de list wilt aanpassen (list-style), en niet van de individuele list items. Maar da's persoonlijk misschien.
Om die laatste reden doe ik het ook altijd, maar inderdaad, dat is persoonlijk. Net als dat ik shorthand CSS vrij onhandig vind.quote:Op dinsdag 22 januari 2008 22:22 schreef CraZaay het volgende:
[..]
Een UL heeft LI's als kinderen, en die erven deze property van de parent
Wat ik zelf overigens vaak doe, is twee bestanden aanhouden: stylesheet_xxx.css en stylesheet_xxx_uncompressed.css. De leesbare CSS in stylesheet_xxx_uncompressed.css, vervolgens gooi ik hem door http://www.cleancss.com heen, en gooi ik de ge-"comprimeerde" CSS in stylesheet_xxx.css. Maar net wat je handig vind
Het is gelukt, ik heb de H1 gebruikt voor de titel, h2 voor de blokheadings, h3 verwijderd en gewoon een div van gemaakt. Tevens wat kleine foutjes veranderd
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericbruggema.nl%2Fslice1%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
toch knap voor mijn doen
Geqxon, ben geen linkse lul hoor
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ericbruggema.nl%2Fslice1%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
toch knap voor mijn doen Geqxon, ben geen linkse lul hoor
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
Netjes
Voor een site in productie zou je de CSS in een apart bestand zetten he? Om dataverkeer op de server te sparen en rendering op de client te versnellen (CSS uit cache).
Voor een site in productie zou je de CSS in een apart bestand zetten he? Om dataverkeer op de server te sparen en rendering op de client te versnellen (CSS uit cache).
Waarom is slicen zo belangrijk eigenlijk? Ik maak gewoon losse plaatjes, stel ze in als achtergrond en plaats dan de div.
@CraZaay, tuurlijk extern CSS maar voor testen is dit veel gemakkelijker
@Nashje; omdat je een goede site wil afleveren, dan dien je ook strict te werken! (voor ons, qua bedrijf, is dat erg belangrijk)
@Nashje; omdat je een goede site wil afleveren, dan dien je ook strict te werken! (voor ons, qua bedrijf, is dat erg belangrijk)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
Like trump...
