Transformation HTML vers CSS

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Transformation HTML vers CSS

Message par Mitsoky Jeu 13 Sep 2012 - 15:23

Bonjour. J'ai actuellement cette fiche de présentation pour mon forum. Cependant, pour des raisons de facilitée et d'esthetique, j'aimerais la transformer en css. Ainsi les membres ne peuvent la prendre pour leur forum et j'aurais plus de faciliter de changer toutes les couleurs, que de devoir modifier les fiches a chaques themes. J'ai deja modifier la fiche pour qu'elle colle avec mon design :
Code:

<center><div style="border-radius:20px; border-left: 5px solid #AF8865; border-right: 5px solid #AF8865; background-image:url('http://obsession27.free.fr/divers/fonds/pfo.gif'); width:650px;text-align:center; align:center;">
[img]http://nsa29.casimages.com/img/2012/06/11/120611014329658924.png[/img]<div style="font-size:40px; letter-spacing:5px; font-family:Georgia;padding:5px; text-transform:uppercase; font-weight:lighter;text-align:center;">Prénom</div>
[center][size=12]Age - Meute - Rang - Pouvoir.[/size][/center]<br>
[left]<span style="font-family:Georgia;font-size:25px;color: beige;  text-align:left; border-bottom: 3px dotted #AF8865;margin-left:15px;">[b]I-[/b] Personality & Tastes</span>[/left]
<br><center>
<blockquote style="width: 450px;background-color:#AF8865;padding:10px;">
[center][color=beige][b]JE SUIS CE QUE JE SUIS ...[/b][/color]<br> [justify][i]Minimum 5 Lignes[/i]. ECRIRE ICI[/justify]
  <br> [/center]</blockquote><blockquote style="width: 450px;background-color:#AF8865;padding:10px;">
[center][color=beige][justify][b]Ҩ[/b] Chose qu'il/elle aime [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'il/elle aime [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'il/elle aime [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'il/elle aime [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'il/elle aime [b]Ҩ[/b] Chose qu'il/elle aime pas [b]Ҩ[/b] Chose qu'...[/justify] <br>[/color] [/center]</blockquote></center>

[left]<span style="font-family:Georgia;font-size:25px;color: beige;  text-align:left; border-bottom: 3px dotted #AF8865;margin-left:15px;">[b]II-[/b] Once upon a time ...</span>[/left]
<br><center>
<blockquote style="width: 450px;background-color:#AF8865;padding:10px;">
[center][color=beige][b]VOICI MON HISTOIRE ...[/b][/color]<br>[justify][i]Minimum 10 Lignes[/i]. ECRIRE ICI[/justify]
  <br>[/center] </blockquote></center>

[left]<span style="font-family:Georgia;font-size:25px;color: beige;  text-align:left; border-bottom: 3px dotted #AF8865;margin-left:15px;">[b]IV-[/b] Who am I ?</span>[/left]
<br><center>
<blockquote style="width: 450px;background-color:#AF8865;padding:10px;">
[center][justify][color=beige][b]Prénom/Pseudo:[/b][/color] ECRIRE ICI<br>[color=beige][b]Age:[/b][/color] ECRIRE ICI
[color=beige][b]Sexe:[/b][/color] ECRIRE ICI<br>[color=beige][b]Où as-tu trouver le forum ?:[/b][/color] ECRIRE ICI
[color=beige][b]Si tu devais ajouter quelque chose au forum ?:[/b][/color] ECRIRE ICI
[color=beige][b]Code:[/b][/color] ECRIRE ICI
[/justify] [/center]</blockquote></center>

<span style="font-size: 8px; line-height: normal">Fiche codée par Umi.</span>
</div></center>
Merci beaucoup, et en espérant que ce soit possible ^^.


Dernière édition par Mitsoky le Ven 14 Sep 2012 - 17:48, édité 1 fois
Mitsoky

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

http://jewelsdream.forumgratuit.org/
Mitsoky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation HTML vers CSS

Message par Naruhiko Jeu 13 Sep 2012 - 17:54

Bonjour,

Avant de me lancer dans la conversion de votre code, j'aimerais savoir deux, trois choses :
- Voulez-vous des titres CSS spécifique ? (si oui, lesquelles ?)
- Voulez-vous que je rajoute certaines valeurs à votre CSS pour que par exemple les coins arrondis sont visibles par le maximum de navigateurs ?
- Vous avez mis dans votre code des balises telles que par exemple : "[justify]", voulez-vous que je mette cela dans votre CSS ? (remplacé par "text-align: justify", cepandant pas modifiable par les membres ?)

Cordialement, Naruhiko !
Naruhiko

Naruhiko
****

Masculin
Messages : 201
Inscrit(e) le : 21/06/2012

http://naruto-the-destiny.forumactif.com
Naruhiko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation HTML vers CSS

Message par Mitsoky Jeu 13 Sep 2012 - 18:36

Tout d'abord, merci de vous proposer.
Je n'ai pas de titres spéciales, mêmes des mots etranges me conviennent xD.
J'aimerais bien car c'est vraiment désagreable de savoir que des gens ne voient pas la meme chose que vous, juste parce qu'ils ont IE.
Et si tu veux.
Merci beaucoup.
Mitsoky

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

http://jewelsdream.forumgratuit.org/
Mitsoky a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation HTML vers CSS

Message par Naruhiko Jeu 13 Sep 2012 - 19:33

Voilà, j'ai essayé de corriger le plus d'erreur possible, rien de bien grave ^^. Donc voici le code HTML :
Code:
<center><div class="imagefond">
[img]http://nsa29.casimages.com/img/2012/06/11/120611014329658924.png[/img]<div class="prenom">Prénom</div> [center][size=12]Age - Meute - Rang - Pouvoir.[/size][/center]<br /> [left]<span class="titre">[b]I-[/b] Personality & Tastes</span>[/left]
<br /><center>
<blockquote class="backgroundcontenu"> [center][color=beige][b]JE SUIS CE QUE JE SUIS ...[/b][/color]<br />[justify][i]Minimum 5 Lignes[/i]. ECRIRE ICI[/justify]
<br />[/center]</blockquote><blockquote class="backgroundcontenu"> [center][color=beige][justify][b]?[/b] Chose qu'il/elle aime [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'il/elle aime [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'il/elle aime [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'il/elle aime [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'il/elle aime [b]?[/b] Chose qu'il/elle aime pas [b]?[/b] Chose qu'...[/justify][/color][/center]<br /></blockquote></center>
 
[left]<span class="titre">[b]II-[/b] Once upon a time ...</span>[/left]
<br /><center>
<blockquote class="backgroundcontenu">
[center][color=beige][b]VOICI MON HISTOIRE ...[/b][/color]<br />[justify][i]Minimum 10 Lignes[/i]. ECRIRE ICI[/justify][/center]<br /></blockquote></center>

[left]<span class="titre">[b]IV-[/b] Who am I ?</span>[/left]
<br /><center>
<blockquote class="backgroundcontenu">
[center][justify][color=beige][b]Prénom/Pseudo:[/b][/color] ECRIRE ICI<br />[color=beige][b]Age:[/b][/color] ECRIRE ICI
[color=beige][b]Sexe:[/b][/color] ECRIRE ICI<br />[color=beige][b]Où as-tu trouver le forum ?:[/b][/color] ECRIRE ICI
[color=beige][b]Si tu devais ajouter quelque chose au forum ?:[/b][/color] ECRIRE ICI
[color=beige][b]Code:[/b][/color] ECRIRE ICI
[/justify][/center]</blockquote></center>
 
<span class="credit">Fiche codée par Umi.</span>
</div></center>
Ainsi que celui du CSS :
Code:
/* Début du CSS pour la fiche de présentation */
.imagefond{
 border-radius: 20px;
 -moz-border-radius: 20px;
 -webkit-border-radius: 20px;
 -khtml-border-radius: 20px;
 -o-border-radius: 20px;
 border-left: 5px solid #AF8865;
 border-right: 5px solid #AF8865;
 background-image: url('http://obsession27.free.fr/divers/fonds/pfo.gif');
 width: 650px;
 text-align: center;
}

.titre{
 font-family: Georgia;
 font-size: 25px;
 color: beige;
 text-align: left;
 border-bottom: 3px dotted #AF8865;
 margin-left: 15px;
}

.prenom{
 font-size: 40px;
 letter-spacing: 5px;
 font-family: Georgia;
 padding: 5px;
 text-transform: uppercase;
 font-weight: lighter;
 text-align: center;
}

.backgroundcontenu{
 width: 450px;
 background-color: #AF8865;
 padding: 10px;
}

.credit{
 font-size: 8px;
 line-height: normal;
}
/* Fin du CSS pour la fiche de présentation */
J'ai mis tous les "border-radius" que je connaissais, logiquement 99% des navigateurs devrait pouvoir lire les bordures arrondies (bien qu'il y en a pas beaucoup dans votre code), probablement à l’exceptions des anciennes versions de Internet Explorer, mais je n'ai pas essayé.

Voici un shema vite fait des titres de CSS utilisé : Transformation HTML vers CSS 120913074414218503Transformation HTML vers CSS 120913074348409998
Suffit de petites connaissances en CSS pour changer le titre, il faudra changer également le titre dans le contenu HTML.

PS : Pour les retour à la ligne en HTML, <br> fonctionne, mais la balise est incorrecte car elle n'est pas fermée, il faut donc mettre <br /> ! Smile

Cordialement Naruhiko.
Naruhiko

Naruhiko
****

Masculin
Messages : 201
Inscrit(e) le : 21/06/2012

http://naruto-the-destiny.forumactif.com
Naruhiko a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transformation HTML vers CSS

Message par Mitsoky Ven 14 Sep 2012 - 17:47

Merci enormement, c'est exactement ce que je voulais *-*
Et les renseignements en plus.
Merciii !
Mitsoky

Mitsoky
***

Féminin
Messages : 127
Inscrit(e) le : 15/08/2011

http://jewelsdream.forumgratuit.org/
Mitsoky a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum