Design
Er zijn nog een paar extra html codes om je profiel mooier de maken.  Dit zijn dingen als de achtergrondkleur van je profiel, een randje om je profiel en je plaatjes vergroten en verkleinen. Hieronder vind je een paar tips:

 

Design - Een achtergrond kleur op je profiel zetten
Je kan met html de achtergrondkleur van je profiel aanpassen. Het is ook mogelijk een deel de ene kleur te doen en een deel de andere kleur:

<div style="background-color: orange"> tekst etc.. </div>
Zet deze op de plek waar je wil dat de achtergrondkleur begint ! Je kan orange natuurlijk veranderen in de kleur die jij wil. Je kan met </div> aangeven waar de achtergrond kleur moet stoppen.

Opmerkingen: Maak je de achtergrond zwart moet je natuurlijk ook je letterkleur veranderen.
Moeilijkheid: Vragen over Design? Lees de FAQ!

Design - Een rand om je profiel maken

Het is niet alleen mogelijk een rand om een plaatje te doen, het is ook mogelijk om een randje om heel je profiel te maken:

<div style="background-color: orange; border: 3px ridge white">
Zet deze code helemaal aan het begin van je profiel. De 3 staat voor de dikte van de rand. Je kunt de rand dus zelf breder of smaller maken. Je kan een andere rand krijgen door ridge te vervangen door outset, inset, solid, dotted, dashed, double of groove. White kan je veranderen in elke kleur.

Opmerking: Het is ook mogelijk een randje op een deel van je tekst te doen. Zet de code op de goede plek en sluit af met </div>. De 'width' kan je zelf veranderen.
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Hokjes in je profiel maken

Heb je html op cu2 al een beetje onder de knie is dit de volgende stap. Begin hier dus nog maar niet aan als je de rest nog niet helemaal door hebt :)

Het is mogelijk om hokjes in je profiel te zetten. Daar kan je dan weer tekst of plaatjes inzetten. Ook is het mogelijk die hokjes een achtergrond kleur te geven en er een randje omheen te doen.

<div style="background-color: orange; width:500px; height:300px; border: 1px solid black">
Hier alles wat je in het hokje wil hebben
</div>

Zoals je misschien wel ziet is de code bijna hetzelfde als die voor de achtergrond kleur van je profiel + rand. Nu maak je hem alleen een stuk smaller en je geeft de hoogte aan. Voor de verschillende randjes kan je het stukje hierboven lezen "een rand om je profiel maken".

Het is ook mogelijk 2 of meer vakjes naast elkaar te zetten. Hiervoor moet je wel een beetje weten waar je mee bezig bent. En zijn een aantal codes die je in bovenstaande code kan verwerken op je hokje de goede positie te geven.

Voorbeelden daarvan zijn: "margin-top: 100px", "float:right;margin-right: 100px", "float:left;margin-left: 100px", en "margin-bottom: 100px"

Je zou nu zo'n code kunnen maken:

<div style="background-color: orange; width:200px; height:100px;border: 1px solid black;float:left;margin-left:40px">Hier de inhoud van hokje 1</div><div style="background-color: orange; width:200px; height:100px;border: 1px solid black; float:right;margin-right:40px">Hier de inhoud van hokje 2</div>

Dit gaat er ongeveer zo uitzien:

Hier de inhoud van hokje 1
Hier de inhoud van hokje 2


Zorg ervoor dat je de 2e div meteen achter het afsluiten van de 1e div zet anders komen ze niet op de zelfde hoogte. Als je onder de hokjes verder gaat met een tekst zal je merken dat het tussen de hokjes begint. Dat is natuurlijk niet de bedoeling. Een truckje om dit te verkomen is door een lijn onder de hokjes te plaatsen in de kleur van je achtergrond. Zo heb je een onzichtbare scheiding gemaakt. Bij een zwarte achtergrond:

<hr width="638" size="1" color="black">

Lees onderaan deze pagina meer informatie over lijnen op je profiel.
 

Opmerking: Dit is een zeer ongebruikelijke methode. Op normale websites word zoiets dus heel anders gedaan. Gebruik de manier dus alleen voor je profiel.
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Scrollbalk in je tekstvak

Als je tekst en/of plaatjes in een tekstvak wil met een scrollbalk doe je dit op zelfde manier als hierboven. Alleen is er nu nog een extra code die je moet toevoegen:

<div style="background-color: orange; width:500px; height:300px; border: 1px solid black;overflow:auto">
Hier alles wat je in het hokje wil hebben
</div>

Opmerking: Let op! Dit zal alleen werken in Internet Explorer
Let op! De scrollbalk is natuurlijk alleen te zien als hij nodig is. Als er dus niet veel in je hokje staat zie je ook geen scrollbalk
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Een gekleurde Scrollbalk

Als je een gekleurde scrollbalk wil gebruik je weer dezelfde code als hierboven. Alleen zij er nu nog een paar extra codes die je moet toevoegen:

<div style="background-color: white; width:200px; height:450px; border: 1px solid black; overflow:auto; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #000000; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #000000; scrollbar-base-color: #FDFBFF">
Hier alles wat je in het hokje wil hebben
</div>

Zoals je ziet bestaat de scrollbalk uit verschillende delen die je ieder een eigen kleur kan geven. Ga er gewoon eens mee spelen en maak een originele scrollbalk!

Opmerking: Let op! Dit zal alleen werken in Internet Explorer 6.0
Let op! De scrollbalk is natuurlijk alleen te zien als hij nodig is. Als er dus niet veel in je hokje staat zie je ook geen scrollbalk
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - uitlijnen

Je kan je tekst ook gewoon tegen de linker kant aan 'plakken'. Hiervoor moet je de tekst uitlijnen:

<p align="left"> tekst </p>
'left' kan je ook vervangen door 'right'.

Opmerking: Hetzelfde is ook mogelijk bij plaatjes.
Moeilijkheid: Vragen over Design? Lees de FAQ!

Design - Tekst naast een plaatje
Stel je wil naast je plaatje typen:
Hier komt de tekst
Hier komt de tekst
Hier komt de tekst
Dit doe je op de volgende manier:
Je zet in de code van je plaatje align="left" (of right). Dus:
<img src="http://www.voorbeeld.nl/plaatje.gif" align="left">

Dan type je direct daarachter <p align="left"> met daarachter weer de tekst. Achter de tekst komt </p>:

<img src="http://www.voorbeeld.nl/plaatje.gif" align="left"><p align="left">Hier de tekst</p>

Opmerking: Geen
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Centreren
Stel je hebt een stuk van je profiel links op rechts uitgelijnd maar je wil tussendoor tekst of een plaatje in het midden weergeven. Dit kan je op de volgende manier doen.

Alles tussen de tags <center> en </center> komt in het midden van je profiel.

Opmerking: Geen
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Plaatjes naast elkaar

Stel je wil 2 plaatjes naast elkaar. Dit kan erg gemakkelijk door de codes gewoon achter elkaar te typen. Je kan ze dan doormidden van spaties verder uit elkaar zetten.

De totale breedte van je profiel is 640 pixels. Zorg er dus voor dat de foto's die je naast elkaar wil hebben samen niet breder zijn dan ongeveer 550 pixels.

Ook voor de spatie is een code nodig namelijk &nbsp;. Het gaat er dus zo uitzien:

<img src="http://www.voorbeeldje.nl/plaatje.jpg">&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://www.voorbeeldje.nl/plaatje.jpg"> 

Hoe meer spaties je tussen de codes zet des te meer ruimte komt er tussen. Natuurlijk kan dit ook met meer dan 2 plaatjes


Opmerking: Dit is maar een alternatieve oplossing. Bij een normale website gebeurd dit op een hele andere manier die op cu2 niet mogelijk is.
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Plaatjes groter/kleiner maken

Mocht je plaatje te breed zijn voor je profiel kan je met html het plaatje kleiner laten weergeven. 

<img src="http://voorbeeld.nl/plaatje.jpg" width="640" height="400">
width staat voor de breedte van het plaatje. 640 kan je dus veranderen in een ander aantal. Je profiel is 640 pixels breed dus dan kan je een beetje inschatten wat je in moet vullen. Het zelfde geldt voor height alleen is dat natuurlijk de hoogte.
Wel moet je er op letten dat de verhoudingen blijven kloppen! Stel je hebt een plaatje van 250 bij 300 (dit zie je door: rechterklik op het plaatje en te kiezen voor "eigenschappen") en je wil het plaatje 2 keer zo groot maken. Het wordt dan 500 bij 600.

Opmerking: Hou er rekening mee dat wel het 'grote' plaatje geladen wordt. Gebruik daarom bij voorkeur een fotobewerkingsprogramma om je plaatjes van formaat te veranderen:
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Links een andere kleur geven

Als je een blauwe achtergrond hebt of heel je profiel in dezelfde kleuren hebt is het handig om zelf de kleur van je links te bepalen. Dit doe je op de volgende manier:

<a href="http://www.mycu2.nl"><font color="orange">Klik hier voor Mycu2!</font></a>

Typ dus eerst de code van de link en dan de code van je tekstkleur. Sluit daarna eerst de kleur af en dan pas de link.

Opmerking: Als je deze manier gebruikt is er aan de links niet meer te zien of ze al eerder bezocht zijn. Bezochte en onbezochte links zijn dus altijd dezelfde kleur.
Moeilijkheid: Vragen over Design? Lees de FAQ!

 

Design - Een lijn

Het kan wel eens mooi zijn je tekst te scheiden door een lijn. Dit kan je heel makkelijk doen met html:

<hr width="300" size="3" color="red">
De basis is gewoon <hr>. Hieraan kan je nog een paar eigenschappen geven zoals de breedte, lengte en de kleur. Deze waarden kan je dus zelf veranderen.

Opmerking: Je hoeft deze code niet af te sluiten.
Moeilijkheid: Vragen over Design? Lees de FAQ!