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.
Roonaan; maar even dat terzijde. Ik heb geprobeerd dit in mijn 'gedefenieerde' styles te verwerken maar gaat niet helemaal goed... zou ik alles wat jij in STYLE="" hebt gezet ook in mijn css sheet kunnen verwerken of is het af en toe handiger om dit juist niet te doen..
Just say hi!
Nou, wat op zich het makkelijkste is, is om eerst alles in style="" te doen. Als je dat hebt werken kan je beginnen met classes toewijzen, misschien een extra id toevoegen, etc. Voor de overduidelijke layoutelementen "de grote divs" kan je natuurlijk wel meteen id's toekennen en een <style>block maken, maar voor het kleine grut gewoon bij style="" houden totdat het werkt.
Sorry, maar daar ben ik het absoluut niet mee eens;quote:Op woensdag 24 november 2004 10:02 schreef Roönaän het volgende:
Nou, wat op zich het makkelijkste is, is om eerst alles in style="" te doen.
het is een valkuil waarin veel PHP'ers (of andere serverside scripters) snel vallen, omdat het handig lijkt en in eerste instantie veel tijd ermee lijkt te winnen,
immers die inline style-attributen kun je gewoon makkelijk in je bestaande code verweven, en je kunt dan in één file blijven werken,
je hoeft niet met een extern CSS-file of centraal scss-block te werken en daardoor hoef je niet echt overzicht te houden over je HTML-code...
vergelijk het met een serverside scripter die voor alles een soort van lineaire breiwerk-code schrijft, zonder te werken met functies of objecten...
Juist door te werken met verwijzingen, leren elementen te hergebruiken, dwing je zelf af om 'schoon' te werken; zowel met serverside scripting, alswel met HTML+CSS.
Juist door met een extern CSS-file te werken en zoveel mogelijk te streven naar hergebruik van code, blijft je gegenereerde code schoon en overzichtelijk, achteraf blijkt het juist eenvoudiger wijzigingen aan te brengen.
het verdient de voorkeur om te proberen zoveel mogelijk te werken met het toewijzen van css-styles aan complete tags:
eventueel kun je hierin onderverdling aanbrengen door te werken met een overkoepelend ID:quote:P {
font-size: 12px;
}
om misschien wat kleine basis-tests te doen met CSS, kun je met het style-attribuut werken, echter wil je het correct leren is het ook belangrijk dat je zo snel mogelijk overgaat tot het compleet scheiden van layout (CSS) en content (HTML-tag-structuur).quote:DIV#main P {
font-size: 11px;
}
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
Schat, het ging hier om positioning issues, niet om font-sizes.
Als ik bezig ben met positioning, doe ik dat met style attributes.
Je hoeft mij niet te vertellen hoe je css gebruikt aub.
Als ik bezig ben met positioning, doe ik dat met style attributes.
Je hoeft mij niet te vertellen hoe je css gebruikt aub.
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:quote:Op woensdag 24 november 2004 14:02 schreef Roönaän het volgende:
Schat, het ging hier om positioning issues, niet om font-sizes.
Als ik bezig ben met positioning, doe ik dat met style attributes.
Op het moment van schrijven van de code lijkt het misschien handig, maar als je achteraf wijzigingen aanbrengen in een layout, is het prettiger om hiervoor gewoon een gescheiden CSS-bestand te hoeven aanpassen, dan dat je daarbij hele brokken serverside scripting-code moet doorploegen op zoek naar specifieke style-attributen ...
sorry hoor, het spijt me dat ik goedbedoelde raad geef, wat jij kennelijk in je alwetendheid als een belediging van je kunnen aanneemt, dat is echter zo niet bedoeld..quote:Je hoeft mij niet te vertellen hoe je css gebruikt aub.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
Ervanuitgaande dat het bestaan van templates wordt weggedacht heb je wat dat betreft gelijk...
Layouten doe je losstaand van je php code - als je goed bezig bent tenminste.
Layouten doe je losstaand van je php code - als je goed bezig bent tenminste.
Beste Roonaan, bedankt voor je info; ik heb even jou en de reactie van RM-rf gelezen en ben van mening dat ik zelf inderdaad wil werken dmv css in een stylesheet.. (dus extern van het html gebeuren). Dit omdat ik vaak grote zaken aan de layout vervang waardoor bijvoorbeeld een menu van links naar rechts kan verspringen. Dit zal een pokke werk worden wanneer ik bijvoorbeeld alles in style="" ga verwerken.
Nu ben ik al een stukje verder met mijn leersel over CSS maar is nog niet dat je zegt je van het.
maar heb nu al geleerd dat ik met DIV#main de div main kan aanspreken en daar dan de P, etc kan zetten... (beetje vaag verwoord mja dat zijn jullie wel gewend van mij )..
Ik ga lekker verder knutselen..
Ps. Roonaan; als ik die style zaken verplaats naar de stylesheet, doet het opeens vaag qua positioneren... is dit logisch?
Nu ben ik al een stukje verder met mijn leersel over CSS maar is nog niet dat je zegt je van het.
maar heb nu al geleerd dat ik met DIV#main de div main kan aanspreken en daar dan de P, etc kan zetten... (beetje vaag verwoord mja dat zijn jullie wel gewend van mij )..
)..Ik ga lekker verder knutselen..
Ps. Roonaan; als ik die style zaken verplaats naar de stylesheet, doet het opeens vaag qua positioneren... is dit logisch?
Just say hi!
tevens rare zaken.
Footer text gecentreerd in IE maar niet in Mozilla
Padding en margins werken wel in IE voor 'menulink' maar weer niet voor Mozilla.
Div van het plaatje (dat veranderd bij het forumlier staat bij IE in de #data gedeelte maar bij Mozilla er helemaal buiten
Iemand ideeen? (source geupdated)
Footer text gecentreerd in IE maar niet in Mozilla
Padding en margins werken wel in IE voor 'menulink' maar weer niet voor Mozilla.
Div van het plaatje (dat veranderd bij het forumlier staat bij IE in de #data gedeelte maar bij Mozilla er helemaal buiten
Iemand ideeen? (source geupdated)
Just say hi!
Dat is een van de redenen waarom je eerst je layout op orde moet hebben voordat je begint met content te genereren.
En voeg ook even een xhtml doctype toe, dat heeft een huge influence op het gedrag van IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Om te zorgen dat #content de goede hoogte krijgt gebruik je niet height:100% maar zet je voor de </div> van content een clear:both div:
<div style="clear:both;"></div>
Divs met een float hebben geen hoogte voor de container div. Om te zorgen dat de container wel benul van de inhoud heeft moet je er een "vast" element onder kwakken die het floatgedrag opbreekt. Dat is de clear:both div.
<div style="clear:both;"></div>
Divs met een float hebben geen hoogte voor de container div. Om te zorgen dat de container wel benul van de inhoud heeft moet je er een "vast" element onder kwakken die het floatgedrag opbreekt. Dat is de clear:both div.
tnx roonaan; weer wat geleerd; maar toch ben ik nog niet helemaal wijs met clear:both; deze moet dan toch na de 'linker en rechter' cel?... en niet er voor? tevens heb ik in IE nu het juiste resultaat... maar toch blijft het menu (padding niet goed er uit springen...).
Just say hi!
nog iets raars; #content heeft voor 'zowel de divjes' de background op #fff staan, echter is de achtergrond kleur nu in IE wit en in Mozilla (grijs zoals de achtergrond kleur (body))
Just say hi!
Juist, die heb je met IE wel maar in Mozilla nietquote:Op woensdag 24 november 2004 19:58 schreef Roönaän het volgende:
Je bedoelt de enorme whitespaces in het menu?
tevens nog een bugje, ik krijg geen borders bij #content; deze zouden er wel moeten zijn (IE wel Ff niet)
[ Bericht 18% gewijzigd door Chandler op 24-11-2004 22:25:24 ]
Just say hi!
let op het verschil tussen het msie boxmodel, en het standaard boxmodel van w3c, dat toegepast wordt door mozilla, opera en Safari, alswel door msie in non-quirky mode (dus valide code, mét een doctype, ik zou je echter aanraden msie6 gewoon in quirky mode te laten renderen, die is helaas minder buggy, dit kun je doen door en comment boven de doctype te zetten, mozilla negeert die, zoals hoort, maar msie schiet ervan in quirky mode)quote:Op woensdag 24 november 2004 19:56 schreef Chandler het volgende:
tnx roonaan; weer wat geleerd; maar toch ben ik nog niet helemaal wijs met clear:both; deze moet dan toch na de 'linker en rechter' cel?... en niet er voor? tevens heb ik in IE nu het juiste resultaat... maar toch blijft het menu (padding niet goed er uit springen...).
het boxmodel van w3c houdt in dat borders, padding en margin bij de breedte en hoogte opgeteld worden, dus met padding: 5px, margin 5px en 5px border is een div van 100px breed 130px geworden in mozilla en non-quirky msie6, maar in quirky msie6 en msie5.5, msie5 blijft hij 100px, enkel wordt de content steeds verder 'samengedrukt'.
http://webdesign.about.com/cs/css/a/aaboxmodelhack.htm
http://www.quirksmode.org/css/box.html
de snelste oplossing is om de CSS3-propertie box-sizing: border-box; toe te voegen;
Mozilla ondersteund dat als -moz-box-sizing: border-box; en dit zal het boxmodel renderen zoals het oude boxmodel van msie..
dat is een snelle oplossing en zeker als je nog een beetje aan het leren bent best wel aan te raden, het oude msie-boxmodel heeft ook wel zijn prettige kanten:
Zoek je meer een uitdaging kun je echter proberen het w3c boxmodel aan te houden, zeker in zeer scalable fluid designs kan dat meer consistenter werken.
[ Bericht 7% gewijzigd door RM-rf op 25-11-2004 12:12:17 ]
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.quote:Op woensdag 24 november 2004 14:52 schreef RM-rf het volgende:
Ook dat is gewoonweg af te raden, positionering behoort ook tot het 'layouten' (het regelen van de visuele presentatie van een bepaalde structuur) en te prefereren is om dit altijd gescheiden te houden van de HTML-datastruktuur:
Op het moment van schrijven van de code lijkt het misschien handig, maar als je achteraf wijzigingen aanbrengen in een layout, is het prettiger om hiervoor gewoon een gescheiden CSS-bestand te hoeven aanpassen, dan dat je daarbij hele brokken serverside scripting-code moet doorploegen op zoek naar specifieke style-attributen ...
voorbeeldje (pseudo):
Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...quote:<html>
<style>
$color1 = #ff0000;
div.chapter {
background-color = $color1;
}
</style>
<body background-color="$color1">
</body>
</html>
Kijk eens naar JSSS (JavaScript Style Sheets), de tegenhanger van Netscape voor CSS, geimplementeerd in netscape 4, dat had inderdaad die uitgebreidde scripting-mogelijkheden..quote:Op donderdag 25 november 2004 13:04 schreef markvleth het volgende:
[..]
Deze hele idiote gedachtegang (en daarmee de discussie) was er helemaal niet geweest als die kneuzen van W3C gewoon variabelen hadden geintroduceerd.
voorbeeldje (pseudo):
[..]
Ja zo simpel kan het nou zijn, nu moeten de kneuzen van w3c het nog begrijpen...
echter CSS is geen scripting taal, maar een statische vastlegging van properties en waardes,
Door juist je structuur in te delen en vervolgens met goed uitgedachte classes te werken
wat jij wilt is prima te doen door bv
Het heeft weinig zin om CSS als techniek allerlei mogelijkheden te geven die nu al best te doen zijn via javascript, mocht je scripting-elementen willen ..quote:<html>
<style>
.setGlobalBgColor, DIV.chapter {
background-color : #f00;
}
DIV.chapter {
font-size: 11pt;
}
</style>
<body class="setGlobalBgColor">
<div class="chapter setGlobalBgColor"></div>
</body>
</html>
het is een ideeen-gang die voornamelijk komt van het werken met scripting en dan kennlijk verwachten dat CSS ook aan bepaalde scripting-elementen zou moeten voldoen, omdat de auteuren hieraan gewend zijn ...
het zou de interpretatie van Stylesheets door userAgents een stuk zwaarder maken (die hebben dan gelijk ook een scripting-engine nodig), backwards compatibiliteit is een ramp, om maar niet te spreken over potentiele veiligheidslekken ( nu is css absoluut geen security-risico itt tot active scripting en dergelijke )..
het enige voordeel, luie auteuren van stylesheet hebben het dan wat makkelijker, omdat ze dan bij het publiceren van websites niet meer hoeven te vervallen tot preprocesing (wat overigens een veel makkelijkere oplossing is, zo moeilijk is het niet een search&replace All te doen op wat documenten)..
Er is nar ik meen wel een voorstel gedaan voor aliasses of pre-defines in CSS3, mogelijk een sperate module hiervoor (wat dus betekent dat je niet ervan afhankelijk zou moeten willen zijn ...)
Het is erg makkelijk mensen 'kneuzen' te noemen die kennelijk niet exact vanuit jouw gedachtegang werken, en die er daarom bewust voor kiezen om CSS geen scripting taal te laten zijn, ook al komen er ook regelmatig scripters mee in contact, die moeten dan gewoon moeten leren respect te hebben voor een eigen techniek, ipv te gaan 'eisen' dat die techniek zich aan hun gewoontes zou moeten aanpassen.
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
Enige wat ik graag zou zien in css is de ondersteuning voor de verschillende input types, voor de rest kan ik er zo goed als alles verder mee. Wat Markvleth voorsteld toont is nogal simplistisch vind ik. Als je zo graag zulke dingen in je stylesheet wilt, moet je maar een dynamisch serverside gegenereerde css bouwen.
euh neen.
Je gaat direct de fout in, ik stel namelijk geen scripting voor maar puur een globale variabele. De klassen die je nu schrijft zijn ook niets anders dan variabele; je schrijft immers een klasse en past deze op een of meerdere elementen toe. Waarom alleen op klassen niveau en niet op attributen niveau?
Je gaat direct de fout in, ik stel namelijk geen scripting voor maar puur een globale variabele. De klassen die je nu schrijft zijn ook niets anders dan variabele; je schrijft immers een klasse en past deze op een of meerdere elementen toe. Waarom alleen op klassen niveau en niet op attributen niveau?
Dat kan eenvoudig met attribute selectors, maar ja, Internet Explorer bla bla bla...quote:Op donderdag 25 november 2004 13:53 schreef Roönaän het volgende:
Enige wat ik graag zou zien in css is de ondersteuning voor de verschillende input types
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenkleider, und lummel mich in Bars
Ich schlupf in Frauenkleider, und lummel mich in Bars
kleine vraag; je moet dus om zo'n boxmodel hack te hanteren de volgende regel hanteren? = hopelijk de juiste gedachte.
je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
[ Bericht 7% gewijzigd door Chandler op 27-11-2004 11:57:57 ]
je moet de border*2+left&right margins/padding bij elkaar oprekenen en dan appart voor IE5/6 in en zonder quirk mode
goed gedacht, ik zie dingen graag standaard en berekenbaarquote:#divnaam
{
width: 100px;
padding: 5px;
border: 5px solid black;
}
// maakt samen 5*2 + 5*2 = 20 oftewel 100 - 20 = 80.... toch?
* html #divnaam{
width: 100px; // met borders etc
width: 80px;
}
[ Bericht 7% gewijzigd door Chandler op 27-11-2004 11:57:57 ]
Just say hi!
+ 1!!!!
