Design E-Loader
2 participants
Page 1 sur 1
Design E-Loader
par HammHetfield Mar 24 Fév - 15:18
Bon, donc on va commencer par ce design là...
Il est assez simple, tant mieux !
Donc pour commencer tu vas coder le fond...
Attention il y a un "piège" : le fond du design est un dégradé, et dans CSS, on ne peut pas mettre un dégradé à une image, sinon elle se répète
et ça fait des cassures ^^
Ce que tu vas faire c'est donc faire une image de ce dégradé, et définir son positionnement vers le haut...
Compris ou pas ?
Il est assez simple, tant mieux !
Donc pour commencer tu vas coder le fond...
Attention il y a un "piège" : le fond du design est un dégradé, et dans CSS, on ne peut pas mettre un dégradé à une image, sinon elle se répète
et ça fait des cassures ^^
Ce que tu vas faire c'est donc faire une image de ce dégradé, et définir son positionnement vers le haut...
Compris ou pas ?
HammHetfield- Admin
-
Nombre de messages : 629
Age : 33
Date d'inscription : 01/10/2006
Feuille de Personnage
Discipline:
(100/100) -
Re: Design E-Loader
par Jiggy Mar 24 Fév - 15:44
Voilà le css pour la couleur de fond de page que j'aurai mis :
body
{
Background-color: #1D1D1D;
background-image: url(back.png);
background-repeat: repeat-x;
}
Jiggy- Muet du clavier
- Nombre de messages : 5
Age : 30
Date d'inscription : 24/02/2009
Re: Design E-Loader
par Jiggy Mar 24 Fév - 16:11
Voilà pour le header (seulement le fond):
#en_tete
{
width: 100%;
height: 130px;
background-image: url("back2.png");
background-repeat: repeat-x;
}
Pour le logo, je galère encore XD
Edit :
html:
#en_tete
{
width: 100%;
height: 130px;
background-image: url("back2.png");
background-repeat: repeat-x;
}
Pour le logo, je galère encore XD
Edit :
html:
Jiggy- Muet du clavier
- Nombre de messages : 5
Age : 30
Date d'inscription : 24/02/2009
Re: Design E-Loader
par HammHetfield Mar 24 Fév - 16:24
Alors, voyons voir ça...
Déjà, première erreur : tu as mis une image en fond, mais c'est juste une couleur, donc pas besoin, autant mettre :
background-color:#333232;
Ensuite, c'est pas utile de mettre la hauteur, autant laisser s'adapter au contenu, ça change pas grand chose.
Et donc pas besoin de background-repeat.
Pour le logo, on va se servir des paddings.
Les paddings, se sont les marges intérieurs, ça veut dire qu'on va dire comment le contenu doit se décaler par rapport à la div.
padding:0% 10% 0% 10%;
on met des valeurs en % comme ça ça s'adaptera à la taille de la page, c'est plus joli ^^
si tu comprends pas pourquoi j'ai mis ça comme ça, j'explique sinon tu peux sauter ça :
la propriété padding prend 4 valeur, dans l'ordre qui suit : haut, droite, bas, gauche. Ca veut dire que pour le haut et le bas, il n'y a pas de marge, et que pour la droite et la gauche, il y a 10%.
Ensuite dans la page html, il suffit de mettre le code qui affiche une image et c'est reglé
Déjà, première erreur : tu as mis une image en fond, mais c'est juste une couleur, donc pas besoin, autant mettre :
background-color:#333232;
Ensuite, c'est pas utile de mettre la hauteur, autant laisser s'adapter au contenu, ça change pas grand chose.
Et donc pas besoin de background-repeat.
Pour le logo, on va se servir des paddings.
Les paddings, se sont les marges intérieurs, ça veut dire qu'on va dire comment le contenu doit se décaler par rapport à la div.
padding:0% 10% 0% 10%;
on met des valeurs en % comme ça ça s'adaptera à la taille de la page, c'est plus joli ^^
si tu comprends pas pourquoi j'ai mis ça comme ça, j'explique sinon tu peux sauter ça :
la propriété padding prend 4 valeur, dans l'ordre qui suit : haut, droite, bas, gauche. Ca veut dire que pour le haut et le bas, il n'y a pas de marge, et que pour la droite et la gauche, il y a 10%.
Ensuite dans la page html, il suffit de mettre le code qui affiche une image et c'est reglé
HammHetfield- Admin
- Nombre de messages : 629
Age : 33
Date d'inscription : 01/10/2006
Feuille de Personnage
Discipline: (100/100) -
Re: Design E-Loader
par Jiggy Mar 24 Fév - 16:36
Voilà ce que j'ai fait et ça marche plutôt bien :
html:
html:
- Code:
<div id="en_tete">
<span class="logo"><img src="logo.png" alt="header" /></span>
</div>
- Code:
.logo
{
margin-top: 20%;
padding-left: 10%;
}
Jiggy- Muet du clavier
- Nombre de messages : 5
Age : 30
Date d'inscription : 24/02/2009
Re: Design E-Loader
par HammHetfield Mar 24 Fév - 16:41
bouh c'est moche, enlèves moi ça !!!
C'est pas nécessaire du tout !
C'est pas nécessaire du tout !
HammHetfield- Admin
- Nombre de messages : 629
Age : 33
Date d'inscription : 01/10/2006
Feuille de Personnage
Discipline: (100/100) -
Re: Design E-Loader
par HammHetfield Mar 24 Fév - 16:44
CSS :
HTML :
- Code:
body {
background-color:#1d1d1d;
background-image:url(img/fond.png);
background-repeat:repeat-x;
padding:0 auto;
margin:0 auto;
}
#header {
background-color:#333232;
width:100%;
padding:0% 10% 0% 10%;
margin:0 auto;
}
HTML :
- Code:
<body>
<div id="header">
<img src="img/header.png" alt="header" />
</div>
</body>
HammHetfield- Admin
- Nombre de messages : 629
Age : 33
Date d'inscription : 01/10/2006
Feuille de Personnage
Discipline: (100/100) -
Re: Design E-Loader
par HammHetfield Mar 24 Fév - 16:51
body {
background-color:#1d1d1d;
background-image:url(img/fond.png);
background-repeat:repeat-x;
padding:0 auto;
margin:0 auto;
}
#header {
background-color:#333232;
width:100%;
padding:0 auto;
margin:0 auto;
}
#header img {
margin-left:10%;
}
background-color:#1d1d1d;
background-image:url(img/fond.png);
background-repeat:repeat-x;
padding:0 auto;
margin:0 auto;
}
#header {
background-color:#333232;
width:100%;
padding:0 auto;
margin:0 auto;
}
#header img {
margin-left:10%;
}
HammHetfield- Admin
- Nombre de messages : 629
Age : 33
Date d'inscription : 01/10/2006
Feuille de Personnage
Discipline: (100/100) -
Re: Design E-Loader
par Jiggy Mar 24 Fév - 17:08
Voilà pour le menu :
- Code:
<div id="menu">
<ul>
<li>Accueil</li>
<li>Mes fichiers</li>
<li>Préférences</li>
<li>Déconnexion</li>
</ul>
</div>
Jiggy- Muet du clavier
- Nombre de messages : 5
Age : 30
Date d'inscription : 24/02/2009
Re: Design E-Loader
par Jiggy Mar 24 Fév - 17:43
voici tous les codes qui concernent le menu :
css:
html:
css:
- Code:
ul
{
list-style: none;
}
#menu
{
font-family: Visitor TT2 BRK, arial, verdana, serif;
color: white;
padding: 20px;
}
li
{
display: inline;
border: #333232 1px solid;
background-image: url(back3.png);
background-repeat: repeat-x;
padding: 3px;
}
html:
- Code:
<div id="menu">
<ul>
<li>Accueil</li>
<li>Mes fichiers</li>
<li>Préférences</li>
<li>Déconnexion</li>
</ul>
</div>
Jiggy- Muet du clavier
- Nombre de messages : 5
Age : 30
Date d'inscription : 24/02/2009
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|