Décryptage

13531
Graphiste
Dragon Quest SlimeDragon Quest SlimeDragon Quest SlimeDragon Quest Slime
Mercredi 13 Juillet 2011 à 18:52
Citation


margin: 0;
padding: 0;
}

body {
margin: auto;
background-color: #5b5a5b;
width: 1000px;
font-family: "arial";
font-size: 10pt;
color: white;
}

#header C'est le LOGo, la bannière quoi !{
background-image: url("design/header.png");
width: 1000px;
height: 200px;
}

#page C'est la page d'accueil avec la galerie défilante !{
margin: auto;
width: 1000px;
clear: both;
overflow: auto;
background: url("design/background.png") repeat;
}


#bloc_menu Bloc menu... je pense que ça doit être les news !{
width: 165px;
float: left;
margin-left: 15px;
text-align: center;
}


#menu ul { J'sais pas...
background: url("design/menu.png") no-repeat;
width: 126px;
padding: 45px 32px 50px 0;
list-style-type: none;
text-align: right;
float: left;
margin-bottom: 20px;
}

#bloc_central J'sais pas...{
width: 635px;
float: left;
margin-top: 20px;
}

#navigation { ca, c'est les boutons Accueil, Galerie etc...
width: 150px;
float: left;
}



#footer J'sais pas... {
background: url("design/footer.png") no-repeat;
clear: both;
width: 1000px;
height: 50px;
padding-top: 25px;
text-align: center;
font-size: 0.9em;
}

/* ICI ON MET TOUT LES GENERIQUES */

a img L'image de la galerie la plus grande de ton folio !{
border: 0;
}

a {
color: white;
text-decoration: none;
}
a:hover {
color: #a5a5a5;
text-decoration: none;
}

p {
margin: 5px 0 10px 0;
text-indent: 5px;
font-size: 0.9em;
}

p.center {
text-align: center;
width: 100%;
font-size: 0.9em;
}

.center {
text-align: center;
}


p.upper {
text-transform: uppercase;
font-size: 0.8em;
}

.clear {
clear: both;
}

.color2 {
color: #d2d2d2;
}
.color3 {
color: #c96d1b;
}

.jaimeFB Le bouton "J'aime" de Facebook en dessous de la créa{
margin: -30px 0 0 17px;
position: relative;
}

/* Bloc_normal */
.bloc_normal {
width: 590px;
margin: 30px 0 0 15px;
clear: both;
}
.bloc_normal h3 {
font-size: 11pt;
background: url("design/titre_bloc.png") no-repeat;
width: 100%;
height: 10px;
padding: 16px 0 25px 0;
text-indent: 35px;
clear: both;
font-weight: bold;
}
.bloc_normal .contenu {

}

.bloc_normal .footer {
}

.bloc_normal .legende {
width: 95%;
text-align: right;
clear: both;
font-size: 0.8em;
}


/* bloc petit */ Miniature de la créa sur la page d'accueil !
.bloc_petit {
background: url("design/menu_droite.png") no-repeat top right;
width: 150px;
padding: 12px 0px 30px 0;
list-style-type: none;
text-align: right;
float: left;
}
.bloc_petit h3 {
background: url("design/puce.png") no-repeat;
background-position: 18px 0px;
width: 132px;
padding: 0 18px 3px 0;
text-align: left;
text-indent: 35px;
font-weight: bold;
font-size: 11pt;
}
.bloc_petit .contenu {
padding: 0 15px 5px 13px;
width: 122px;
font-size: 0.75em;
}

.bloc_petit .footer {
background: url("design/bloc_petit_footer.jpg") repeat-y;
width: 150px;
height: 12px;
clear: both;
}

#menu ul a, .bloc_petit a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 0.9em;
}
#menu ul a:hover, .bloc_petit a:hover {
color: #a5a5a5;
}



/*
* Liens en ligne
*/
.retour {
float: left;
margin: 0 0 8px 10px;
font-size: 0.9em;
color: #fff;
}
.suivprec {
float: right;
text-align: right;
margin: 0 20px 8px 0;
font-size: 0.9em;
color: #fff;
}
.pagination {
float: right;
text-align: right;
margin: 0 20px 8px 0;
color: #fff;
font-size: 0.9em;
}


/*
** Galerie
*/
ul.liste {Liste des catégories situés dans "Galerie
/*overflow: auto;*/
padding: 5px 0px 0 30px;
width: 535px;
}

ul.liste li {
margin: 0 5px 0 6px;
width: 122px;
height: 150px;
text-align: center;
float: left;
list-style-type: none;
color: white;
font-weight: bold;
}

ul.liste li img {
border: 1px #b7b7b7 solid;
width: 120px;
height: 120px;
}
ul.liste li img:hover {
border: 1px #d6d5d6 solid;
}



/* Les divs commentaires */
#commentaire {
padding: 0 10px 0 10px;
font-size: 0.9em;
}
#commentaire .texte { Les commentaires des membres de Folio graphiques.
padding: 5px 0 5px 0;
text-align: justify;
}
#commentaire .separateur { Séparateur de messages
border-top: 1px #d2d2d2 dotted;
padding: 0 0 5px 0;
}
#commentaire textarea {
width: 400px;
margin: 8px 0 8px 80px;
padding: 1px 5px 1px 5px;
border: 1px #d0cfcf solid;
-moz-border-radius: 7px;
font-family: arial;
color: #606060;
font-size: 12px;
}
#commentaire input { Bloc où les membres écrivent leurs commentaires
margin: 8px 0 0px 80px;
padding: 2px 2px 2px 2px;
border: 1px #d0cfcf solid;
-moz-border-radius: 7px;
font-family: arial;
color: #606060;
font-size: 12px;
}

#commentaire input.envoi { Bloc commentaire envoyé
cursor: pointer;
margin: 8px 0 0px 0px;
}

.form_petit input, .form_petit textarea {
font-size: 1.1em;
margin: 5px 0 0px 0;
}
.form_petit textarea {
width: 120px;
}

.message_shoutbox { Les messages de la CB
border-bottom: 1px #d2d2d2 dotted;
padding-bottom: 5px;
margin-bottom: 5px;
}



/**
** JCAROUSEL
** GALERIE DEFILANTE SUR LA PAGE D ACCUEIL
**/
.jcarousel-skin-folio .jcarousel-container {

}

.jcarousel-skin-folio .jcarousel-container-horizontal {
width: 500px;
height: 135px;
padding: 0 60px 0px 40px;
margin: 10px 0 20px 10px;
}

.jcarousel-skin-folio .jcarousel-clip-horizontal {
width: 520px;
height: 100%;
}

.jcarousel-skin-folio .jcarousel-item {
margin: 5px 0 0 0;
width: 120px;
height: 120px;
border: 1px #b7b7b7 solid;
text-align: center;
}

.jcarousel-skin-folio .jcarousel-item:hover {
}

.jcarousel-skin-folio .jcarousel-item-horizontal {
margin-right: 10px;
}



.jcarousel-skin-folio .jcarousel-item-placeholder {
}

/**
* Horizontal Buttons
*/
.jcarousel-skin-folio .jcarousel-next-horizontal {
position: absolute;
top: 50px;
right: 00px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url("design/next.png") no-repeat 0 0;
}

.jcarousel-skin-folio .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-folio .jcarousel-next-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-folio .jcarousel-next-disabled-horizontal,
.jcarousel-skin-folio .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-folio .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}




.jcarousel-skin-folio .jcarousel-prev-horizontal {
position: absolute;
top: 50px;
left: 00px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url("design/prev.png") no-repeat 0 0;
}

.jcarousel-skin-folio .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}

.jcarousel-skin-folio .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}

.jcarousel-skin-folio .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-folio .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-folio .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
/**
** FIN DU JCAROUSEL
**/




Je fais pas de design parce que j'ai la flemme de le faire ^ ^'
5971
Sentinelle du Zénith
Dragon Quest SlimeDragon Quest SlimeDragon Quest SlimeDragon Quest SlimeDragon Quest Slime
Samedi 16 Juillet 2011 à 19:49
Merci Pop, pour m'avoir montré le tuto de Barb'art, il est très bien réalisé, et explicite. Mais finalement, et je m'en tapperai la tête sur les murs, il suffisait d'actualiser la page du folio pour que le design soit mis à jour --'
Donc voilà, tout ça pour vous dire qu'un design personalisé a été mit en place, et que je l'améliore petit à petit (je crois même savoir comment mettre un curseur personalisé. Merci donc de votre coup de main à tous, et si ça vous intéresse, vous pouvez aller jeter un oeil dans le lien de ma sign, sachant que les parties qui ont actuellement des éclairs bleus seront revues, ainsi que l'arrière plan et donc le curseur. Dernier détail : il y a en bas à droite une "shoutbox". C'est un livre d'or où vous pouvez laisser un petit mot avant de quitter le folio.
Samedi 16 Juillet 2011 à 20:03
J'en ai laissé un :)!

5971
Sentinelle du Zénith
Dragon Quest SlimeDragon Quest SlimeDragon Quest SlimeDragon Quest SlimeDragon Quest Slime
Samedi 16 Juillet 2011 à 20:06
Oui, comme tu as pu le constater, c'est encore un peu plat, mais là j'ai les bases, faites en mode intermédiare, où j'upload les images du design, et sauf pour les titres, la suite va relever du codage css, pour lequel j'ai dégotté un bon tuto, enfin Pop ^^