I want a postsheet and I want it now! >:c

Onderwerp: I want a postsheet and I want it now! >:c za jan 28, 2012 9:39 am

Gezien aardig wat mensen interesse hebben in een postsheet maar soms niet goed weten hoe ze die moeten maken, heb ik besloten om de code die ik gebruik ervoor vrij te geven met een tutorial zodat je weet waar alles voor staat enzo. :3

Spoiler:

Voor de meeste mensen die niet erg bekend zijn met HTML zal dit wellicht een 'wow'-momentje zijn, maar schijn bedriegt - er is niets moeilijks aan het maken van een postsheet. Kopieer de bovenstaande code en vul met behulp van deze tutorial de puntjes in.

Zorg ervoor dat je een plaatje klaar hebt liggen met aan de onderkant een overloop in de kleur die je wilt gebruiken. Een soortgelijk iets als:

Spoiler:

Veel succes!

----------

<div align="...">
Div align zorgt ervoor waar de postsheet zich in de post zal bevinden. Geschikte waardes hiervoor zijn left, right en center. Aangezien de meeste mensen een gecentreerde postsheet het mooist vinden, gebruiken we nu center.

<div style="background-image: url(...);
We gaan je plaatje in de postsheet verwerken. Plak de link van je plaatje op de puntjes.

background-repeat: ...;
De code vraagt of je je achtergrond wil herhalen. Dit willen we niet, dus we vullen no-repeat in.

background-position: ...;
Waar wil je het plaatje hebben? Er zijn meerdere waardes mogelijk, maar de meeste mensen houden het op top-center.

background-color: #...;
Vul op de puntjes de kleur van je overloop in, de achtergrondkleur dus.

width: ...px;
Vul de breedte van je plaatje in.

border: ...px ... #...;">
Met het randje van je postsheet kun je pas echt leuk gaan knutselen. Vul op de eerste puntjes de dikte van het randje in. Op de tweede puntjes kun je een stijl invoeren, bijvoorbeeld solid voor een niet onderbroken lijntje, dashed voor een lijn met streepjes en dotted voor een stippellijntje. Er zijn nog meer dingen mogelijk, maar deze drie vind ik persoonlijk de mooiste. Op de laatste puntjes kun je de kleur van je randje invoeren.

<div align="..."
Div align zal dit keer aangeven op welke plaats je je text wil hebben. Dit kan zowel left, center, right als justify zijn.

style="margin-top: ...px; margin-left: ...px; margin-right: ...px; margin-bottom: ...px;">
Leuk en aardig allemaal, maar we moeten nog zorgen dat de text niet door het plaatje heenloopt. Margins verschuiven de text. Vul bij margin-top minimaal de lengte van je plaatje in, zodat de text niet meer door je plaatje heenloopt. Meer mag altijd. Margin-left, right en bottom zijn niet noodzakelijk, maar het ziet er netter uit als je het een pixel of 10 ruimte geeft.

<font style="font-size: ...; font-color: #...; font-family: ...">
Hier kun je je text aanpassen. Bij font-size kun je de grootte aangeven, font-color de kleur en font-family het lettertype.

Et voila! Hierna kun je je text gaan typen in je postsheet! Zorg ervoor dat je je codes afsluit met </font></div></div>, anders zal het niet werken.

Als je nog vragen hebt, voel je vrij om in dit topic te reageren!

Wauw, bedankt Doowr! =D

Onderwerp: Re: I want a postsheet and I want it now! >:c do feb 16, 2012 6:34 am

Hee Doowr, ik loop tegen een probleempje aan. Ik heb namelijk wel de marges ingevuld, maar toch loop de tekst aan de rechterkant door, over de hele webpagina heen. Zit er een fout in de code? Of heb iets verkeerd ingevult?

Mijn postsheet:

Code:: <div align="center">
<div style="background-image: url(http://img855.imageshack.us/img855/8662/matsuipostsheetpng.png);background-repeat: no-repeat;background-position: top-center;background-color: #f8f8f8; width: 700px; border: 1px solid #252421;">
<div align="justify" style="margin-top: 470px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px;">
<font style="font-size: 12; font-color: #252421; font-family: Georgia">
Tekst
</font></div></div>

Onderwerp: Re: I want a postsheet and I want it now! >:c do feb 16, 2012 7:08 am

Jee, snap er niks van...Maar zo ben ik....