Rik oefent hier met XHTML
STARTPAGINA
| START | TABELLEN | NOG NIKS | NOG NIKS | NOG NIKS |
De opmaak van deze pagina gebeurd met CSS
Het opzetten van de opmaak
gebeurt hier niet in-line maar staat allemaal onder de <Style type="text/css"> opener in de head van de site.
Het moet mogelijk zijn het uiterlijk van de ganse site te bepalen zonder in te grijpen in de HTML code maar alleen in de CSS code in de head.
Ik doe mijn best hier om dit te bekomen. Moet er wel serieus het hoofd bij houden of het lukt niet.. Misschien is mijn geest niet flexibel genoeg meer.
Er zou meer geoefend moeten worden
om dit beter onder de knie te krijgen.
Mijn Vader:
Hij mag
er ook bij zijn, dit maakt het gezellig. Hij is 83 jaar en leert ook nog graag bij.
En nu ik:
Op de foto, in mijn luie stoel, met alles rondom mij, de reden dat ik niet genoeg beweeg. Teveel met computer bezig zijn bevorderd nu niet echt het "gezond bewegen".
De plaatsing van de foto hier links is gedaan in een aparte class, genoemd voorstellen img met de nodige border-elementen een marge rondom van 10px, en ook een float:left om deze tekst ernaast mogelijk te maken.
Deze tekst wordt ook opgemaakt in de style sectie tussen de <head> en de </head> . Enerzijds in de class voorstellen p; en gedeeltelijk gewoon de <p> waarden voor de marges, tegelijk met de h2, h3 en h4.
Ik test hier even iets :
Om dit volgende prentje aan de andere kant te hebben ben ik gewoon een volledig nieuwe class begonnen, aansluitend op de eerste, met het enige verschil tussen beide dat voor de img waarden een float:right is opgegeven,
Ik vind het nogal omslachtig aangezien ik de hele style opnieuw moet opgeven doch er slechts een enig verschil is en dat is de float van het plaatje. Later in de cursus leren we waarschijnllijk dit op een andere, eenvoudiger manier te doen.
En nu, dankzij de raad van Hugosu ben ik eruit. Ik hoefde de nieuwe class niet, heb ik dan ook verwijderd en gewoon verder gegaan met die ene class.. alleen, het prentje heeft een inline style meegekregen : "float:right". En dat was het.
Hier onder nu gaan we iets oefenen met links:
Ik ben nog maar pas bezig en heb er al moeilijkheden mee. Ik zou graag die links zich zien centreren en het lukt me niet op deze manier. Ik heb ze gezet als unordered list en het lukt me niet in te grijpen in de code om dat boeltje in het midden te zetten... ik heb al vanalles geprobeerd met de marges.. tot nu toe: noppes! Ik probeer verder...
Hier even verder tikken....
Ik moest eerst twee line breaks invoegen om weg te raken van de link-lijst maar na wat spelen met padding en margin bij de div.menu ul geraakte ik daar al vanaf. Ik zoek nog wat verder wat ik kan doen aan dat centreren.
Vandaag, 2 mei 2007 heb ik iets geleerd omdat ik de tabel met de links hier wat verder wilde positioneren. In de style class van de tabel, maar dan ook in de style class van de unordered list heb ik position:relative gezet en daarna opgegeven hoeveel pixels of % de positie moest afwijken van de normale positie en zo ben ik al wat verder gekomen... nog steeds geen code gevonden om te centreren, tenzij ik buiten de div, in gewone html de <div align="center"> code inbreng... maar dan is het geen CSS meer....denk ik... Ik zoek nog verder....
Heden 4 mei, ben ik weer aan het werk gegaan hiermee na een post van Hugosu op de mailgroep HTML... hij had gelijk mij te zeggen de float:left weg te laten bij de class-menu-il. Dat maakte wel dat nu de lijst niet meer naast mekaar staat maar onder mekaar... geeft niet... maar nu gaat tenminste de tekst in de paragraaf niet meer naast de lijst staan. Daarom heb ik nu twee dezelfde lijsten naast mekaar geplaatst en ik heb die ook een achtergrond gegeven zodat ik beter kon zien wat er binnen de lijst gebeurd. Het heeft me er meer begrip van gegeven. Toch, met het centreren heb ik nog steeds inline moeten ingrijpen. Ik werk er nog verder aan.
Nu wat nieuws: die tabel vol aanklikbare plaatjes: Hetzelfde probleem hier, het centreren doe ik weer met de inline html code. Ik kan het niet... moet nog verder zoeken.
 |
   |
   |
    |
| Om nog wat te oefenen | |||
Vandaag 18 augustus, de vakantie is voorbij.
Ik werk al een paar dagen aan de opbouw van een tabel die ik opzettelijk nogal (voor mij toch) ingewikkeld wou samenstellen. Een paar vragen aan Hugosu en wat tips van hem hebben me op het goede spoor gezet en hetvolgende is eruit gekomen:
| A1 B1 C1 A2 B2 C2 |
D1 | E1 F1 E2 F2 E3 F3 |
|||
| D2 D3 D4 D5 |
|||||
| A3 B3 A4 B4 A5 B5 |
C3 | ||||
| C4 C5 |
E4 F4 | ||||
| E5 | F5 | ||||
| A6 | B6 | C6 D6 | E6 | F6 | |
Onderstaande tabel toont de blokken waaruit bovenstaande is opgebouwd.
| A1 | B1 | C1 | D1 | E1 | F1 |
| A2 | B2 | C2 | D2 | E2 | F2 |
| A3 | B3 | C3 | D3 | E3 | F3 |
| A4 | B4 | C4 | D4 | E4 | F4 |
| A5 | B5 | C5 | D5 | E5 | F5 |
| A6 | B6 | C6 | D6 | E6 | F6 |
Nog veel te leren :
Er is inderdaad nog veel te leren wat tabellen betreft. In het voorgaande ben ik erin geslaagd een (zoals ik al zei: voor mij toch) ingewikkelde tabel samen te stellen. Ze heeft randen, achtergronden, uitlijning(binnen en buiten de cellen)... allemaal in kleur en vorm zoals ik opgaf in de Style-sheet. Maar er is nog veel meer te doen met tabellen en daar ga ik de komende week aan werken.
Laatste aanpassing: 5 september 2007, 16:00 uur.
