CSS Superclub

Afb.: http://www.brainjar.com/css/positioning/default.asp
http://www.hicksdesign.co.uk/boxmodel/
+ 2 print afb.
Wat zijn blocklevel elementen? En Waarom zijn blocklevel elementen zo belangrijk?
CSS gaat om het bepalen van je layout. En dan vooral om het positioneren van verschillende elementen.
In principe worden alle elementen in je html document gezien als box met een content area, padding, margin en border. Wanneer we deze elementen gaan toepassen op een div bijvoorbeeld dan spreken we over een BOXMODEL.

Er bestaan 2 soorten boxen: inline boxes en block boxes. Block boxes zijn de elementen in je HTML die visueel een blokvorm aan kunnen nemen.
Terwijl inline elementen ook als boxes benadert worden maar dat visueel niet altijd zijn. (maar wel kunnen zijn, fijn complex he?!)
Of zoals W3C het formuleert: “Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs).”
http://www.w3.org/TR/CSS21/visuren.html#q5

Blocklevel elementen beginnen altijd op een nieuwe regel. Inline elementen bestaan altijd binnen een stuk tekst, komen voor binnen lopende regels.
Alle inhoud die na een blocklevel element voorkomen zullen ook altijd op de volgende regel beginnen. Blocklevel hebben een zogezegd harde return ofwel een enter. Blocklevel elementen zijn bijvoorbeeld: [p] een paragraaf, [div] maar ook de [h1] header tags. Zoals je misschien wel weet hoef je na een [h1] nooit een [br] tag te plaatsen.

Inline elementen zijn bijvoorbeeld: span. Elementen die dus altijd binnen een stuk tekst leven. Echter je kunt inline elementen wel opdragen zich te gedragen als blocklevel element. Dit doe je met de ‘display: block’ property.
Het tegenovergestelde kan ook met blocklevel elementen. Je kan een blocklevel elementen vragen zich te gedragen als een inline element. In het volgende voorbeeld laat ik zien hoe dat werkt.
“Several values of the ‘display’ property make an element block-level: ‘block’, ‘list-item’, and ‘run-in’ (part of the time; see run-in boxes), and ‘table’.”
http://www.w3.org/TR/CSS21/visuren.html#q5

Er zijn uiteraard uitzonderingen op de regel bij blocklevel elementen zoals bijvoorbeeld in het geval van een img. Is visueel gezien blocklevel element, maar heeft niet vanzelfsprekend een harde return.
In mijn voorbeeld: paragraaf als blocklevel box, span als inline en block box, etc.

Descendent betekent aflopend. Met descendent selectors bepaal je met 1 type selector een stijl voor meerdere selectors tegelijk.

Voorbeeld:
De HTML:
Optie 1
[div]
h1Dit is de titel van mijn pagina!/h1
[p] en een kleinere subtekst, als intro over wie ik ben, etcetra, dat ik in de toekomst dit en dat van plan ben te gaan doen. Mooi gezegd zo he. [/p]

[/div]

Optie 2
[div]
[h1 class="titel”]Dit is de titel van mijn pagina![/h1]
[p class="tekst”]en een kleinere subtekst, als intro over wie ik ben, etcetra, dat ik in de toekomst dit en dat van plan ben te gaan doen. Mooi gezegd zo he. [/p]

[/div]

Optie 1 is de meest lichte en beste oplossing met contextual selectors, optie 2 is een oplossing met classes.

Bijbehorende CSS:

optie 1:
#header h1 { }
#header p { }

Optie 2:
.titel { }
.tekst { }

Optie 1, met de contextual selector is de beste keuze omdat je hiervoor minder code hoeft te schrijven.

Voor eens en altijd op een rij; wanneer gebruik je CLASS, wanneer gebruik je ID.

* betekenis is voor class en id belangrijk.
Geef met je css regels altijd een naam die staat voor het soort content en niet voor het soort stijl.Gebruik code namen wat vertelt wat voor soort content je mee te maken hebt.

* naamgeving en betekenis helpt in keuze voor id of class.
Als ik een onderdeel in mijn html benome met de stijl regel ‘navigatie’ dan weet ik wat voor soort content dit is en hoe vaak dit in mijn document voor zal komen.
Een ander voorbeeld is ‘header’. Een header is een element wat maar een keer in je document voor zal komen, gebruik dan ook een div.

* groepslook vs unieke identiteit. (class vs id)
Classes bepalen de stijl van een reeks, een klasse, elementen.
Class= .class (punt)
Je geeft een id alleen aan unieke elementen, elementen met een unieke identiteit.
ID= #id (hekje)

* conclusie
Kan je dus aan een naam/css regel (#header bijvoorbeeld) logischerwijs afleiden dat zo’n soort element maar 1 keer voor zal komen; gebruik ID. Zal het een herhalend element zijn; gebuik CLASS. (.box bijvoorbeeld)

Link over benoemen van een class of id:
http://css-discuss.incutio.com/?page=ClassesVsIds

OPFRISSEN VOOR VANDAAG

SELECTORS

CSS stylesheets zijn regels die bepalen hoe geselecteerde elements moeten worden gepresenteerd. Selectors zijn de namen die je geeft aan een bepaalde stijl. Bijvoorbeeld #navigatie, een naam voor een bepaalde stijl.
Het woord geselecteerde linkt dus naar selectors.

CSS regel of rule bestaat uit twee onderdelen:
SELECTORS { DECLARATIES }
p {color:: #090; }

DECLARATIES bestaan op hun beurt weer uit twee delen:
{ PROPERTY: VALUES; }
{color: #090; }

PROPERTIES
Oftewel in Nederlands, bezit. Wat is de inhoud die zo’n selector bezit.

VALUES:
de waarden van deze inhoud. is het geel, rood, dik dun of groot.

TYPE SELCTORS & HTML SELECTORS
HTML selectors zijn HTML tags die gebruikt worden in het stylesheet om de stijl van die specifieke tag te bepalen.
Bijvoorbeeld:
body { color: #234556; }
of
p { line-height: 10px; }
of
li { font-size: 10px; }

TYPE selectors zijn nieuwe termen die worden gecreeerd om stukken HTML een stijl te geven. Handige aan TYPE selectors is dat je zelfde stuk HTML een andere stijl kan geven. Je breidt je mogelijkheden uit. Je wilt paragrafen misschien niet altijd zelfde eruit laten zien. Maar ook veel invloed hebben op elke klein detail van je website.
bijvoorbeeld:
#header
#content
of
#rechterblokje { hiermee kan je dus in detail delen van je HTML stylen }

TYPE SELECTORS = ID & CLASS SELECTORS
.content { color: #090; }

#content { font: helvetica; }

Gebruik ID’s voor unieke vormgeving oftewel, zet deze maar 1 keer in.

SPAN’s
Span’s gebruik je echt voor detail styling. Bijvoorbeeld:
he first layer represents the formal scientific structure, a structure in search of objective values and a level of knowledge that delivers theorems that can be proved entirely right or entirely wrong at any given time. These are, after all, criteria that are no longer relevant in deciding what is true or important (level 3).

GROUPING & NESTING
grouping:

h1, h2, h3, p {
color: #000000;
}

nesting: descendant (alle paragrafen onder body)

body p {
color: #000000;
}

ID SELECTORS = (meestal gebruikt voor) DESCENDANT & CHILD SELECTORS

#content ul li { font: helvetica; }

Aan dit voorbeeld zie je duidelijk, dat terwijl je een id maar 1 keer gebruikt, je de stijl van de inhoud nog heel specifiek kan bepalen door middel van NESTING. Het voorbeeld wordt ook wel DESCENDANT SELECTOR genoemd. Descendant betekent aflopend, in dit geval referereet het weer aan inheritance ofwel erven. De onderdelen ul en li binnen content.

VOLGENDE WEEK: child selectors

INSPIRATIE HTML WEBSITES:
http://www.design.nl/designnl/

http://q2design.com/en/news.htm

http://www.7×11.nl/index.html

TYPISCH GEBRUIK VAN BOXES:
http://maxbruinsma.nl/index1.html

MOOI VOLLEDIG GEBRUIK VAN BROWSER, EEN MAPPING
http://www.7×11.nl/project_moorenvandervelden.html

http://pieratt.com/the_gutter.html

handige links van afgelopen les:

Arno:
http://www.meyerweb.com
http://www.meyerweb.com/eric/css/edge
http://www.meyerweb.com/eric/css/edge/menus/demo.html

Wouter:
eigen project:
http://www.worldworld.eu/chrisbragg

dragable div:
http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm

hallo allemaal,

genieten jullie morgen van jullie vrije donderdagavond of wordt er gewoon hard doorgewerkt zodat iemand van jullie de wedstrijd zal winnen…!!

Nog even als opfrisser de opdrachtomschrijving voor volgende week donderdag 2 november:

In de afgelopen 5 lessen zijn een aantal CSS tricks en algemene info over CSS langsgekomen. Zoals bijvoorbeeld rollovers en dropdown menu’s maar ook, Hoe zet ik de basis structuur van mijn website op met behulp van CSS.
Nu is de opdracht: Daag mij uit met een waanzinnig uitgewerkt nieuw geleerd onderwerp van een van de lessen. Dit kan een waanzinnig gaaf menu zijn, opgedirkt met kleur of beeld bijvoorbeeld of qua positionering heel opvallend… Het kan ook zijn dat je een super achtergrond afbeelding hebt ontworpen in photoshop en die wil gaan gebruiken in je toekomstige website. Het is natuurlijk niet verplicht om je alleen te houden bij de nieuwe onderdelen van de lessen. Ga jezelf te buiten zou ik zeggen!

Om jullie er een beetje bij te helpen mail ik jullie een pakketje van materiaal wat een verzameling is van de documenten die ik in de lessen heb gebruikt.

Succes allemaal en tot volgende week.

By the way: check this
http://www.webrarians-practice.info
ik doe ook mee aan de wedstrijd en ben alvast begonnen…

Vandaag wil ik beginnen met het opzetten van een dropdown menu met CSS. Hier komt dan nog even iets uitgebreider de list tag langs.
dan laat ik nog even het overflow voorbeeld zien van vorige week, wat nu wel klopt.

Verder wil ik jullie laten beginnen aan je eigen website. Dit betekent wat meer 1 op 1 werk.

over video:
Vraag van Akko over video.
De volgende code gebruik ik om video op een website te zetten: (met haakjes eromheen natuurlijk)
embed src=”video/video.mp4″ autostart=”false” loop=”false” width=”190″ height=”200″ controller=”true” bgcolor=”"

Dit embed voorbeeld houdt in dat je je video met scherm en player in je pagina ziet staan.
Je kan video ook als een link in je html zetten maar dan ga je naar een apart pagina waar dan een player verschijnt.

Wat betreft format raad ik mpeg4. .mov of .wmv voor windows aan, die zijn lichter dan avi. mpeg4 is een apple quicktime format. Voor windows heb je Windows Media Video. Achter de bestandsnaam van de video staat dan .wmv

Op de volgende websites kan je meer info over video vinden:
http://havovwo.kennisnet.nl/opdrachtvormen/video
http://www.surfkit.nl/info/video/video_publiceren.jsp

vraag elijan:
overzicht alle properties mogelijk in CSS. Zie deze link:
http://www.w3.org/TR/REC-CSS2/propidx.html

over selectors:
http://www.w3.org/TR/REC-CSS2/selector.html

over property values, Cascading, and Inheritance:
http://www.w3.org/TR/REC-CSS2/cascade.html

over de boxmodel,margin en padding en borders:
http://www.w3.org/TR/REC-CSS2/box.html

over akko’s vraag van vorige week, de overflow!!
http://www.w3.org/TR/REC-CSS2/visufx.html

LET OP: VOLGENDE WEEK 26-10 HERFSTVAKANTIE !!

In les 4 zullen we met elkaar de ideeen voor de verschillende website indelingen en onderwerpen bespreken.

Naar aanleiding van de vragen van vorige week heb ik somminge mensen een kleine opdracht/taak bedacht voor deze les.
Elijan: heeft gevraagd naar de mogelijkheden van het exporteren van Photoshop handelingen als CSS. Nu wil ik Elijan vragen of hij aan de groep wil laten zien hoe hij zijn dropdown menu’s heeft opgezet in Fireworks.

Wouter: Targeting zoals met frames maar dan met css?
Ben ik zelf nog niet helemaal achter gekomen maar heb wel een mooi ander voorbeeld van targeting met CSS gevonden. Een tab interface! jawel. Dit zal ik in de les laten zien.

Rondom targeting wil ik aan Arno vragen of hij wil uitleggen aan de groep hoe hij zijn website foefje heeft gemaakt met de foto’s die zich in het centrum openen via een link. (1e les laten zien)

Akko had een vraag over de combinatie van een menu of andere tekst die blijft staan terwijl er rechts tekst scrollt.
De oplossing hiervoor zit em in het gebruiken van ‘overflow’. Dit zal ik laten zien in de les.

Eerder in les 2 vroeg iemand zich af hoe je iets gemakkelijk kan centreren in CSS?
Oplossing is, geef een margin-left en een margin-right aan op ‘auto’. Ook dit zal ik nog laten zien in de les.

kgroot@gmail.com

Zoals gezegd, mail mij wensen of “hoe doe je dit met css?” vragen.

en onthoud voor volgende week donderdag!
Laat een voorbeeld website zien waarvan je iets opvalt of bevalt. Welke onderdelen zou je ervan willen overnemen.
Bedenk een onderwerp/concept voor je site en begin met het opzetten van de structuur op papier m.b.v. de basiselementen header, content, navigatie, footer.

groeten Kim

Hallo allen van de CSS Superclub,

Zoals ik al in de eerste les heb aangegeven wil ik met jullie naar een eigen website met persoonlijk onderwerp en concept toewerken. Het zou mooi zijn als iedereen na de herfstvakantie dit concept heeft bedacht en in een korte omschrijving weergeeft. (donderdag 26 okt geen les, 1e les na vakantie is 2 november)

De volgende punten zijn een soort huiswerk punten waar je thuis aan kan werken maar waar we natuurlijk ook in de lessen mee verdergaan. Dit is niet alleen huiswerk voor volgende week maar huiswerk voor de langere termijn. 

>>Wat is het onderwerp van je website.

>>Wat is het concept, het idee achter je website.
>aanknopingspunten voor t bedenken van je concept.
>Hoe wil je je informatie aanbieden? opvallend, informatief, uitdagend, leesbaar etc.
> Hoe maak je duidelijk wat voor soort informatie je aanbiedt?
> In welke context ga je werken dus onder welke categorie websites valt jouw website?
Een handig startpunt is de sfeer te schetsen van je homepage, aangezien dit het portaal is naar de rest van je website. Door bepaalde beelden en teksten te verzamelen die samen jouw website representeren.

>>Maak een begin met het bedenken van de structuur die jij wilt gaan opzetten voor je website (in CSS).
 Verwerk de termen die les 2 de revue gepasseerd zijn, te verwerken in je eigen structuur. Dat zijn: header/kop, content, navigatie en staart/footer. Het kan natuurlijk zo zijn dat je meerdere onderdelen wilt toevoegen, geef die dan ook alvast een heldere naam.

>>Bedenk waar je je navigatie elementen zoals het menu plaatst, boven, onder of aan de zijkant.

In volgende les wil ik graag met jullie een aantal punten van dit lijstje doornemen. Horen of jullie al een idee hebben voor een onderwerp. En ook met zn allen kijken naar de eerste schetsen van de structuur van ieders website. Hoeft niet ingewikkeld, kan gewoon n schets met pen en papier zijn, maar je mag het natuurlijk ook in photoshop of een ander programma maken!
Daarnaast zou ik graag willen dat iedereen een of meerdere voorbeelden van je favoriete websites laat zien. Een website waarin bijvoorbeeld de navigatie op een interessante manier wordt vorm gegeven en wat je zelf ook in je website zou willen verwerken. Of andere elementen die je wel aanstaan en zou willen recyclen op je eigen website.

Groeten Kim