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.
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
Just say hi!
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)
Just say hi!
Alleen als je weet dat de code semantisch correct en accessible is. Als deze 2 termen niet allebei gesneden koek voor je zijn, dan garandeer ik je dat het geen goede site isquote:Op woensdag 23 januari 2008 09:44 schreef Nashje het volgende:
Maar wat is er zo strict aan dan? Met losse plaatjes kun je ook een goede site afleveren
En waarom is het dan geen goede site? Ik wil leren van maestro's zoals jullie. Vertel het me, leg uitquote:Op woensdag 23 januari 2008 09:50 schreef CraZaay het volgende:
[..]
Alleen als je weet dat de code semantisch correct en accessible is. Als deze 2 termen niet allebei gesneden koek voor je zijn, dan garandeer ik je dat het geen goede site is
.
Omdat als je een goede site ontwikkeld met duidelijke code (html, css, javascript, etc) dat je dan ook beter gevonden wordt door zoekmachines, maar ook is je site beter te bekijken in alle brouwsers en ga zo maar door.
Een duidelijke structuur is het grootste belang van de onderliggende code (vroeger was het anders, als de site er maar gelikt uitzag was het goed, nu doen we dat graag beiden!)
Een duidelijke structuur is het grootste belang van de onderliggende code (vroeger was het anders, als de site er maar gelikt uitzag was het goed, nu doen we dat graag beiden!)
Just say hi!
Maar je krijgt alleen een duidelijke code als je de boel sliced? Dat de code netjes moet zijn snap ik, maar daar heeft slicen verder toch weinig mee te maken?
Definieer anders slicen eens, want volgens mij praten we langs elkaar heen. Voor mij is slicen niets anders dan het omzetten van een grafisch ontwerp naar html/css.
mss ziet hij het als slicen vanuit photoshop naar tabellen?quote:Op woensdag 23 januari 2008 11:35 schreef CraZaay het volgende:
Definieer anders slicen eens, want volgens mij praten we langs elkaar heen. Voor mij is slicen niets anders dan het omzetten van een grafisch ontwerp naar html/css.
[ Bericht 9% gewijzigd door Flaccid op 23-01-2008 16:38:37 ]
Onder slicen versta ik het hakken van plaatjes. Dus je hebt een lay-out gemaakt in Photoshop, die hak je naar losse plaatjes.quote:Op woensdag 23 januari 2008 11:35 schreef CraZaay het volgende:
Definieer anders slicen eens, want volgens mij praten we langs elkaar heen. Voor mij is slicen niets anders dan het omzetten van een grafisch ontwerp naar html/css.
Ik vraag me dus af waarom je zoiets zou doen. Maar ik zal de definitie wel verkeerd hebben.
Zo ben ik ook beginnen. Maar nu doe ik photoshop + handmatig divs maken enzo. Photoshop zet ze gewoon allemaal in een tabel. Makkelijk om mee t e beginnen.quote:Op woensdag 23 januari 2008 16:35 schreef Nashje het volgende:
[..]
Onder slicen versta ik het hakken van plaatjes. Dus je hebt een lay-out gemaakt in Photoshop, die hak je naar losse plaatjes.
Ik vraag me dus af waarom je zoiets zou doen. Maar ik zal de definitie wel verkeerd hebben.
Zo deed ik het ook, maar tegenwoordig knip ik gewoon de onderdelen zelf uit met Photoshop waarna ik deze ga inweven in een div, ul en weet ik veel wat voor headings allemaal tot een compleet XHTML documentquote:Op woensdag 23 januari 2008 16:39 schreef Flaccid het volgende:
Zo ben ik ook beginnen. Maar nu doe ik photoshop + handmatig divs maken enzo. Photoshop zet ze gewoon allemaal in een tabel. Makkelijk om mee t e beginnen.
Just say hi!
Zeker makkelijk, zo deed ik het ook eind jaren '90quote:Op woensdag 23 januari 2008 16:39 schreef Flaccid het volgende:
[..]
Zo ben ik ook beginnen. Maar nu doe ik photoshop + handmatig divs maken enzo. Photoshop zet ze gewoon allemaal in een tabel. Makkelijk om mee t e beginnen.
Feit is natuurlijk wel dat je op die manier nooit een website krijgt die het niveau "ziet er goed uit" ontstijgt Ik zou daarom ook een beginner aanraden om het meteen goed te doen. Ik heb genoeg boekentips in dat geval
CraZaay, doe mij eens een boekentip op "Ik kan semantisch correct (X)HTML typen, maar weet niet goed hoe ik er een strakke layout / typografie op toe kan passen".
Niet echt relevant uiteraard, we hadden het over het omzetten van een design naar HTML/CSS. Da's ook de scope van dit topic, het gaat alleen over het technische deel wat mij betreft.quote:Op woensdag 23 januari 2008 19:04 schreef Geqxon het volgende:
CraZaay, doe mij eens een boekentip op "Ik kan semantisch correct (X)HTML typen, maar weet niet goed hoe ik er een strakke layout / typografie op toe kan passen".
Om je toch tegemoet te komen: The Principles of Beautiful Web Design
Goeie inderdaad. Correct met HTML en CSS om kunnen gaan is één ding, maar dat betekent nog niet dat je een mooie site kunt bouwenquote:Op woensdag 23 januari 2008 19:04 schreef Geqxon het volgende:
CraZaay, doe mij eens een boekentip op "Ik kan semantisch correct (X)HTML typen, maar weet niet goed hoe ik er een strakke layout / typografie op toe kan passen".
Dat is ook een combinatie die ik nog nooit samen heb zien gaan in de professionele wereld. Grafisch design, interaction design én front-end devver in één op een hoog niveau is een uiterst zeldzame combinatie. Onder een "goede website" versta ik in dit topic dan ook een website die qua code goed in elkaar zit en wat mij betreft verder afschuwelijk mag zijnquote:Op woensdag 23 januari 2008 20:04 schreef mcDavid het volgende:
[..]
Goeie inderdaad. Correct met HTML en CSS om kunnen gaan is één ding, maar dat betekent nog niet dat je een mooie site kunt bouwen
Om maar een inhoudelijke post te posten. In FireFox heb je in het menu View > Pagestyle de keuze uit "Basic Page Style" of "No style". Ooit heb ik een tutorial gelezen hoe je de gebruiker via dit menu de keuze uit diverse stylesheets kon geven. Weet iemand misschien waar ik het over heb?
Help, mijn achtergrondkleur van "content_wrap" loopt niet goed door in onderstaande layout:
http://www.dumpzooi.nl/v2/layout.html
Ik heb het truukje van pagina 3 van dit topic al geprobeerd, maar dat werkt helaas ook maar half!
In IE7 gaat alles goed, maar in FF kapt de achtergrondkleur
http://www.dumpzooi.nl/v2/layout.html
Ik heb het truukje van pagina 3 van dit topic al geprobeerd, maar dat werkt helaas ook maar half!
In IE7 gaat alles goed, maar in FF kapt de achtergrondkleur
Je #content_right is gefloat en dus uit de flow. De makkelijkste oplossing is om je footer binnen #content_wrap te zetten onder je kolommen en deze "clear: both" mee te geven. Hij komt dan onder de kolommen te staan en alles is ok
Sterk staaltje divitus trouwens (tig onnodige divs) Je moet je denk ik gaan realiseren dat het "structure first, styling later" is. Div's met classes als "header_login_spacer" zijn totaal overbodig en puur gericht op het visuele aspect. Anders kun je net zo goed spacer.gif weer uit de kast trekken
Sterk staaltje divitus trouwens (tig onnodige divs)
Je moet je denk ik gaan realiseren dat het "structure first, styling later" is. Div's met classes als "header_login_spacer" zijn totaal overbodig en puur gericht op het visuele aspect. Anders kun je net zo goed spacer.gif weer uit de kast trekken
Photoshop zet ze in een tabel? Oke, dat is dan nieuw voor mijquote:Op woensdag 23 januari 2008 16:39 schreef Flaccid het volgende:
[..]
Zo ben ik ook beginnen. Maar nu doe ik photoshop + handmatig divs maken enzo. Photoshop zet ze gewoon allemaal in een tabel. Makkelijk om mee t e beginnen.
. Kun je uitleggen hoe en met welke tool? Dan ga ik dat toch eens testen.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Ja dat kan wel, alleen heb je dan alleen de lay-outquote:Op vrijdag 25 januari 2008 12:07 schreef donroyco het volgende:
» Zoiets « kan dat ook met xHTML icm CSS
wil een gastenboek/berichtenpost maken voor mijn site
.En het is trouwens gewoon van WordPress.
Die site bestaat ook gewoon uit HTML/CSS, dus dat lijkt me welquote:Op vrijdag 25 januari 2008 12:07 schreef donroyco het volgende:
» Zoiets « kan dat ook met xHTML icm CSS
wil een gastenboek/berichtenpost maken voor mijn site
Met alleen HTML/css kun je hooguit een statische site maken. Als je dynamische of interactieve content wilt, (zoals het in laten sturen van berichtjes door bezoekers) moet je er een scripttaal bijpakken. Zoals Javascript, PHP, ASP, of noem maar op.quote:Op vrijdag 25 januari 2008 12:07 schreef donroyco het volgende:
» Zoiets « kan dat ook met xHTML icm CSS
wil een gastenboek/berichtenpost maken voor mijn site
Idd.quote:Op donderdag 24 januari 2008 08:51 schreef CraZaay het volgende:
Je #content_right is gefloat en dus uit de flow. De makkelijkste oplossing is om je footer binnen #content_wrap te zetten onder je kolommen en deze "clear: both" mee te geven. Hij komt dan onder de kolommen te staan en alles is ok
Sterk staaltje divitus trouwens (tig onnodige divs)
Ik durf de uitdaging wel aan te gaan om die site exact na te bouwen, met maximaal 7 divs.
-edit-
oh en als je geen gebruik maakt van frames, gebruik dan ook de strict variant van (X)HTML
Met 4 moet zelfs kunnen denk ik (wrapper, header, menu, content). Footer als paragraaf, omdat het imo niets anders is dan een gestylde copyright notice.quote:Op vrijdag 25 januari 2008 12:34 schreef mcDavid het volgende:
Idd.
Ik durf de uitdaging wel aan te gaan om die site exact na te bouwen, met maximaal 7 divs.
-edit-
oh en als je geen gebruik maakt van frames, gebruik dan ook de strict variant van (X)HTML
Voor frames zou je sowieso het frameset doctype moeten gebruiken. Waarom raad je echter strict aan ipv transitional? Mijn ervaring is dat veel mensen het knap lastig vinden als ze attributen als "target" ed niet meer kunnen gebruiken
Wat voegt strict toe in jouw optiek?
Zelf gebruik ik divs om secties af te scheiden, een div als opmaak heb ik op mijn hobbyproject maar eentje. Dat is omdat ik met een two-column layout werk.
Dummy-tijd.
Mijn tagcloud heb ik op de volgende manier een style gegeven:
So far so good. Wat op het moment echter faalt is dat ik met (*ril*) absolute waarden voor de height, line-height en margin zit. Wanneer ik deze door relative waarden, EM, vervang, gaat het hopeloos fout. Doordat elke "populariteit" een andere font-size heeft, word hier dus ook de height en de margin op aangepast.
Dus stel dat elke tag een height van 2.5em heeft, dan is die 25px bij pop1, 30px bij pop2 en 50px bij pop4 en pop5. Hoe kan ik dit nu oplossen? Elke cloud-tag moet exact dezelfde hoogte hebben, en dit wil ik dus via EM instellen. Als ik dit niet doe kunnen mensen niet op mijn tag-cloud inzoomen... alvast bedankt voor alle hulp. :)
Mijn tagcloud heb ik op de volgende manier een style gegeven:
| 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 31 32 33 | height: 25px; float: left; margin: 5px; font-family: Tahoma; font-size: 1em; /* = 10 px, fix voor de overerving */ line-height: 25px; white-space: nowrap; list-style-type: none; } ul.cloud li.pop5, ul.cloud li.pop4{ font-size: 2em; } ul.cloud li.pop5{ font-weight: 700; } ul.cloud li.pop3{ font-size: 1.8em; } ul.cloud li.pop2{ font-size: 1.2em; } ul.cloud li.pop1{ font-size: 1em; } |
So far so good. Wat op het moment echter faalt is dat ik met (*ril*) absolute waarden voor de height, line-height en margin zit. Wanneer ik deze door relative waarden, EM, vervang, gaat het hopeloos fout. Doordat elke "populariteit" een andere font-size heeft, word hier dus ook de height en de margin op aangepast.
Dus stel dat elke tag een height van 2.5em heeft, dan is die 25px bij pop1, 30px bij pop2 en 50px bij pop4 en pop5. Hoe kan ik dit nu oplossen? Elke cloud-tag moet exact dezelfde hoogte hebben, en dit wil ik dus via EM instellen. Als ik dit niet doe kunnen mensen niet op mijn tag-cloud inzoomen... alvast bedankt voor alle hulp. :)
Als je geen (i-)frames gebruikt, heb je het target object ook niet nodig. En verder voegt transitional niets toe en is strict gewoon net even netter.quote:Op vrijdag 25 januari 2008 13:35 schreef CraZaay het volgende:
[..]
Voor frames zou je sowieso het frameset doctype moeten gebruiken. Waarom raad je echter strict aan ipv transitional? Mijn ervaring is dat veel mensen het knap lastig vinden als ze attributen als "target" ed niet meer kunnen gebruiken
Het attribuut target semantisch incorrect en wordt daarom afgeraden om te gebruiken. Laat de gebruikers a.j.b. zelf bepalen wat hij met een link wilt doen.
Ondanks dat de site nog niet af is, heb ik hulp nodig.. In FF staat alles goed op zijn plek, alleen in IE staat alles verkeerd, weet iemand wat er verkeerd is (gegaan)? En natuurlijk hoe ik het kan verbeteren.. bij voorbaat dank
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
begin er eens mee de bugs uit je HTML te halen.quote:Op maandag 28 januari 2008 12:07 schreef donroyco het volgende:
Ondanks dat de site nog niet af is, heb ik hulp nodig.. In FF staat alles goed op zijn plek, alleen in IE staat alles verkeerd, weet iemand wat er verkeerd is (gegaan)? En natuurlijk hoe ik het kan verbeteren.. bij voorbaat dank
Daar was ik ook al mee bezigquote:Op maandag 28 januari 2008 12:12 schreef mcDavid het volgende:
[..]
begin er eens mee de bugs uit je HTML te halen.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Wat voegt strict dan precies wél toe?quote:Op maandag 28 januari 2008 11:43 schreef mcDavid het volgende:
[..]
En verder voegt transitional niets toe en is strict gewoon net even netter.
"Netter" is te subjectief; als het valideert en semantisch correct is, is het nette code.
Het komt er op neer dat je me wilt horen zeggen dat een code die HTML4.0 strict goedgekeurd is, ook HTML4.0 transitional goedgekeurd is, en dat het in zo'n geval niet uitmaakt watvoor doctype je er boven zet.quote:Op maandag 28 januari 2008 18:07 schreef CraZaay het volgende:
[..]
Wat voegt strict dan precies wél toe?
En dat klopt, maar dan zou ik er persoonlijk dus strict boven zetten.
Vandaar de "semantisch correct" en "validerend" in mijn post; dat zijn voor mij persoonlijk de twee zaken waar "goede HTML" aan moet voldoenquote:Op maandag 28 januari 2008 18:47 schreef super-muffin het volgende:
Semantisch correct kan ook met transitional en een niet valid document.
