Hallo Filip,
De opmaak kan je (naast het voorzien van de nodige structuur in je pagina) bepalen met
CSS. CSS zorgt ervoor dat je de opmaak van een pagina volledig gescheiden kan houden van de inhoud, dus dat betekent ook dat het simpel wordt om over de ganse site dezelfde layout te hanteren. Ik zie dat je zelf al hierin aangepast hebt, maar de structuur is dus als volgt:
selector
{ attribuut1
: attribuutwaarde; attribuut2
: attribuutwaarde2; ...
}Alle opmaak gebeurt nu met CSS.
Concreet zou je dus dit:
<br><br><br><br><br><br><br><br>
<HR ALIGN=left|right|center WIDTH=100% SIZE=1 NOSHADE>
...
<br><br><br><br><br><br><br><br>
<HR ALIGN=left|right|center WIDTH=100% SIZE=1 NOSHADE>kunnen vervangen door dit (de waarde van margin-top is maar een voorbeeld):
hr { margin-top: 10%; width: 100%; height: 1px; border: 0; color: gray; background-color: gray; }
<hr>
...
<hr>
ik wil de tekst "zelfportret" ...in het midden of lager ,maar dan schuift mijn foto mee naar beneden
Je hebt de margin van art-display aangepast, maar niet de breedte van art-links
. Als je de width van art-links aanpast van 50% naar 20% dan komt de foto mooi naast de links te staan. Hier vind je een
verduidelijking van marges en padding volgens het zogenaamde 'box-model' dat gebruikt wordt.
Wat gebeurt er dus eigenlijk met volgende twee lijnen en structuur:
#art-links { float: left; width: 20%; }
#art-display { margin-left: 20%; }
<div id="art-links"></div>
<div id="art-display"></div>Een div is een 'blok', een rechthoek, waar iets kan in staan. Hier laten we de art-links div zweven, zodat het boven andere elementen staat en geen invloed heeft op hen, en we geven het ook een breedte van 20% van de pagina. De art-display div heeft een linkermarge van 20%, zodat het 20% witruimte zal voorzien links van zichzelf: exact plaats genoeg voor de art-links div
. Het resultaat? Tekst links, afbeelding rechts.
Ik kom straks terug op het verticaal centreren.
en de kleur veranderen van tekst "zelfportret" .
Kleur veranderen doe je met het css-attribuut 'color' of 'background-color'. Nu kan je het kleur van hyperlinks (anchor-tags, <a>...</a> dus) niet zomaar veranderen
. Je moet de kleuren definiëren voor de verschillende 'statussen' die ze kunnen hebben. Je weet dat een link van kleur verandert wanneer je ze al bezocht hebt? Dit kan je zelf instellen voor een niet bezochte link, een bezochte link, een link waar je met je muiscursor over zweeft of de link die je laatst aangeklikt hebt. Het toeval wil nu dat we al een class 'art-link' op elke link geplaatst hebben, die we kunnen gebruiken als selector:
.art-link:link { color: blue; }
.art-link:visited { color: purple; }
.art-link:hover { color: red; }
.art-link:active { color: yellow; }
..en de grootte afbeelding..moet ik deze op voorhand of kan ik het nog in editor aanpassen?
Je kan een maximum hoogte instellen, bijvoorbeeld als volgt:
#art-display img { max-height: 600px; }Een max-width instellen kan natuurlijk ook.
je ziet dat ik ook een lijn gemaakt hebt boven en onder de afbeeldingen,ik wil dat de afbeelding getoond wordt tussen die twee lijnen??
Zoals de opmaak nu is zal dat al in orde zijn, hoewel je de tweede <hr> een andere margin-top zal willen geven.
Er zijn nog alternatieven voor de <hr>'s: je kan bijvoorbeeld een een border bovenaan en onderaan instellen op de art-container (die zowel de tekst als de afbeelding bevat), en wat padding (= witruimte binnenin, zie boxmodel eerder) toevoegen:
#art-container { border-style: solid; border-color: gray; border-width: 1px 0; padding: 5px 0; }
Verticaal centreren:
Er zijn een aantal manieren om verticaal te centreren (
voorbeeld), hoewel geen enkele echt ideaal is, en je verschillende aanpassingen moet maken hiervoor. Zo moet je bijvoorbeeld een hoogte instellen op het element waarbinnen gecentreerd moet worden. Zonder de aanpassingen in detail te bespreken heb ik gekozen voor de aanpak die hierboven beschreven wordt.
Je vind het aangepaste document in bijlage.
Een hele klus, maar hopelijk kan je hiermee verder
. Ik heb het getest in Chrome en IE9.
