La Ferme du web - Les forums

Merci pour ce compliment, ça me fait vraiment plaisir !
En tout cas si vous avez des questions n'hésitez pas à me les poser !
Au passage je rajouterai peut-être par la suite un sous chapitre dans les bonus pour faire un menu latéral (et oui j'ai oublié d'aborder cette méthode :s)

EDIT: J'ai corrigé une petite erreur dans le bonus du chapitre III
En gros on voulait faire la bannière cliquable, et je vous ai donné comme code source CSS:

#header a  
{  
   display: bloc;  
   height: 251px;  
   width: 832px;  
}

Mais en fait c'est display: block; avec un "k" ! Désolé pour l'oublie ^^'

Dernière modification par Sybio (02/05/2009 12:19:53)

Alors pour répondre a ta question, on m'a toujours dit qu'il faut préférer l'image de 1px qu'une image de 20px par exemple.
Je pourrais pas t'assurer à 100% que c'est plus optimisé, surtout si ton prof le contredit, mais voila ce qu'on m'a rapporté:

Découpage de 20px, si la résolution en hauteur n'est pas un multiple de 20px, ça doit être géré, ça utilise du temps, peut-être un conflit même (à voir). L'image sera découpé, hors ce n'est pas le but d'un fond.

Traiter et afficher une zone graphique, cela doit prendre le même temps proc, les mêmes ressources bus dans le pire des cas sauf si le système que ça soit en hard ou en software est optimisé aux répétitions courtes, de type 1px, a ce moment là, les ressources nécessaires seront faibles comparé à du 20px que le système considérera comme entité à part entière

1px = 1 octet ( bon selon l'encodage, ca peut faire 8 octet, là n'est pas la question )
1px ( h ) * l < 20px ( h ) * l
---> Moins besoin de RAM, 19x moins d'appel bus, 19x moins Temps en ms nécessaire à l'accès RAM,19x moins de temps à lire les données, 19x plus de temps à les afficher

Conclusion: 1px est plus optimisé

Bien sûr c'est à considérer avec prudence car ce n'est pas un prof qui m'a sorti ça

Personnellement, je fais quelques px en général, mais pas 1px.

Exemple: http://www.lafermeduweb.net/images/design/back2.jpg


Qui fait 10px de hauteur.

Je pense pas que ça ne change grand chose quand l'image fait moins de 15/20px.

Salut Rambo,
en fait le truc qui va pas c'est tout d'abord tes padding !!
En effet ton image de menu mesure 86 pixels de hauteur, si tu utilises un padding-top ou un padding-bottom, il faudra soustraire la hauteur de l'image d'autant de pixel que ton padding !!
Je vais donc te montrer ce qui n'allait pas :p :

#menu
{
    width: 1024px;
    height: 86px;
    text-align: center;
    font-size: 20px;
    background-image: url("images/menu.jpg");
    background-repeat: no-repeat;
    padding-top: 23px;
}

En gros, si je suis ton raisonnement, ça veut dire écarte toi de 23pixel en haut à l'intérieur du #menu et ensuite affiche l'image de 86pixels de hauteur !! Ce qui a pour résultat de donner un bloc de 109 pixels de haut, avec un trou de 23pixel et enfin l'image du menu affichée...

Ce qu'il faut corriger, si tu veux décaler ton texte de 23 pixels de haut, c'est de faire la soustraction:
86 - 23 = 63 pixels !

Voila déjà la correction pour ce bloc :

#menu
{
    width: 1024px;
    height: 63px;
    text-align: center;
    font-size: 20px;
    background-image: url("images/menu.jpg");
    background-repeat: no-repeat;
    padding-top: 23px;
}

Par la même occasion tu n'as plus besoin du margin-top: -25px; de ton bloc corps !!
Voila pour le corps:

#corps
{
    width: 804px;
    padding-top: 1px;
    padding-left: 110px;
    padding-right: 110px;
    background-image: url("images/corps.jpg");
    background-repeat: repeat-y;
}

Une constation, c'est que tu as bien soustrait la largeur par les padding-left et right

Enfin on retrouve la même erreur que pour le menu dans le footer, on peut déjà virer le margin-top négatif (qui se répercutait sur la fin de ton texte, ouai les navigateurs traduisent ça un peu comme ils veulent xD) pour constater en effet que sous firefox un trou apparaît.
Mais c'est normal tu as oublié la soustraction de ta hauteur avec ton padding-top !!

Pour éviter le négatif on va dire que le padding mesure 37px, donc il nous reste 0px:

#footer
{
    width: 1024px;
    height: 0px;
    text-align: center;
    background-image: url("images/footer.jpg");
    padding-top: 37px;
}

Et c'est là que ta vraiment pas de bol !!  Tu as une réaction assez rare, en fait les balises <p> on un margin-bottom par défaut, et ça génère rarement des trucs bizarres comme le trou ... ("saute x pixels en bas du paragraphe").
Donc ta 2 choix, le plus simple, tu forces le corps a couvrir tout ce qu'il y a à l'intérieur de lui via la propriété overflow: hidden;
Soit tu vires le margin-bottom des paragraphes, via margin-bottom: 0px;

Voila tu choisis l'une ou l'autre option:

#corps
{
    width: 804px;
    background-image: url("images/corps.jpg");
    background-repeat: repeat-y;
    padding-top: 1px;
    padding-left: 110px;
    padding-right: 110px;
    overflow: hidden;
}

ou bien:

p
{
    font-size: 18px;
    margin-bottom: 0px;
}

Moi je te conseille vivement la première solution, qui t'assure aussi pour éviter des choses aberrantes avec les float (PS: je n'aborde pas les float dans mon tuto)

En résumé, voila le code parfait entier:

body
{
    width: 1024px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #61594c;
}

#header
{
    width: 1024px;
    height: 239px;
    background-image: url("images/header.jpg");
}

#menu
{
    width: 1024px;
    height: 63px;
    text-align: center;
    font-size: 20px;
    background-image: url("images/menu.jpg");
    background-repeat: no-repeat;
    padding-top: 23px;
}

#menu a
{
    color: white;
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
}

#menu a:hover
{
    color: black;
}

#corps
{
    width: 804px;
    background-image: url("images/corps.jpg");
    background-repeat: repeat-y;
    padding-top: 1px;
    padding-left: 110px;
    padding-right: 110px;
    overflow: hidden;
}

h1
{
    text-align: center;
    text-decoration: underline;
}

p
{
    font-size: 18px;
}

.center
{
    text-align: center;
}

#footer
{
    width: 1024px;
    height: 0px;
    text-align: center;
    background-image: url("images/footer.jpg");
    padding-top: 37px;
}

Si ta d'autres questions, je suis là.

Je viens de tester le code et ça fonctionne très bien, avec les padding corrigés plus besoin de mettre de "background-repeat: none;" pour chaque div.
Je vais suivre ton conseil et utiliser "overflow: hidden;" pour ne pas avoir de problèmes plus tard avec les float.
Encore merci pour tes conseils

Bin en fait ton erreur vient du fait que l'image de ton corps2 plus l'image de ton corps3 donnent additionnées une largeur de 962pixels, or ton body a pour width: 960px;
Y'a 2 pixels de trop donc un bloc est complètement décalé pour respecter les 960pixels maximum, et c'est le bloc corps3 qui en pâtit !

Donc pour résoudre ton problème, tu coupes soit l'image corps2 de 2 pixels, soit l'image corps3 de 2 pixels.
Ensuite dans ton CSS, bin t'enlèves 2 pixels de largeur à l'une ou l'autre (celle que tu as découpé bien entendu) !

Bin je pensais sérieusement faire un tutoriel avec les floats parce que c'est assez important à maîtriser pour les menus ^^
Là pour ta découpe il y aura un petit soucis pour ce que tu veux faire, mais d'abord je vais corriger ton code actuel, tu as 2 choix pour obtenir ce que tu veux (le corps3 considéré comme un menu):

Choix 1: Soit tu fais flotter le corps2 à gauche, dans ce cas là, ta <div id='corps2'> doit absolument être avant ta <div id='corps3'> dans le code HTML. Une règle à se souvenir donc, si tu veux aligner 2 blocs côte à côte, celui que tu fais flotter doit toujours être avant l'autre dans l'html !!
Ensuite tu dois décaler ton bloc corps3 d'autant de pixels que prend le bloc corps2 en largeur, donc là 425px, à l'aide d'un margin-left: 425px; Tu le décales par contre que dans ce cas là. (si l'autre bloc flotte a gauche)

Choix 2: Sinon tu choisis de faire flotter le corps3 à droite, dans ce cas, c'est la <div id='corps3'> qui figure avant <div id='corps2'> dans l'html.
Pas besoin de décaler le corps2 vu que le corps3 va se caller à droite comme il faut.

Voila le code du choix 1:

#corps2
{
    float: left;
    background-image: url("images/corps2.jpg");
    width: 425px;
    background-repeat: repeat-y;
    color: white;
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 1px;
    overflow: hidden;
}

#corps3
{
    margin-left: 625px;
    background-image: url("images/corps3.jpg");
    width: 175px;
    background-repeat: repeat-y;
    color: white;
    padding-left: 60px;
    padding-right: 100px;
    padding-top: 1px;
    overflow: hidden;
}

Voila le code du choix 2:
Dans l'html:

<div id="corps3">

    <h1>Test :</h1>
   
        <p>Balballbalablabla
        Balballbalablablabla
        Balballbalablablabla
        Balballbalablablabla
        Balballbalablablabla
        Balballbalablablabla.</p>           

</div>   

<div id="corps2">

    <h1>Test :</h1>

   
        <p>Balballbalablablablablalbalalb
        Balballbalablablablablalbalalblab
        Balballbalablablablablalbalalblab
        Balballbalablablablablalbalalblab
        Balballbalablablablablalbalalblab
        Balballbalablablablablalbalalblab.</p>       

</div>

et dans le css:

#corps3
{
    float: right;
    background-image: url("images/corps3.jpg");
    width: 175px;
    background-repeat: repeat-y;
    color: white;
    padding-left: 60px;
    padding-right: 100px;
    padding-top: 1px;
    overflow: hidden;
}

Donc voila pour ça déjà ^^

Dans ce qu'on vient de faire, on constate qu'il y a un trou si le menu est plus grand que le corps, et vice et versa :s



Alors voila ce que je te propose (le schéma est grossier):


En jaune, tu créés un conteneur et tu répètes un fond (de 1pixel de hauteur) sur tout le conteneur jaune, oublie pas de lui mettre overflow: hidden;
Ensuite tu répètes le un pixel du corps2 avec les mêmes bords que la couleur de l'image de fond du conteneur (tu me suis xD ?). Tu rajoutes un footer au corps, et attention tous le footer doit avoir la même couleur de fond que celle de l'image de fond du conteneur. Idem pour le corps3, un fond è répéter de même couleur que le conteneur, un footer également de même couleur.
C'est ça ou tu pourras pas rendre le corps2 indépendant du corps3 :s
J'espère que tu as compris je suis pas très très clair :s

Sinon t'inquiètes pas tu peux poser autant de questions que tu veux (bon par contre je pars en voyage demain et je serais pas là pendant 2 semaines j'espère que l'autre admin répondra à tes questions :s)

Salut Salut

Alors tout d'abord, super tuto, j'ai galéré un jour a essayer de faire ça avant de trouver ce site de de plier ma page en 15min.
Maintenant j'aimerais pousser un peu la chose en mettant un menu a gauche de mon corps. Or quand je tente de le faire le menu n'apparait pas. Je suis un peu perdu avec la balise container, je sais pas si mon menu doit etre dedans ou dehors la balise...

En gros je veux faire comme Rambo, mais en gauche. Niveau css j'ai tout essayé float, margin-left... rien fonctionne, soit le menu est au dessus de tout car je le place avant le container dans le html, soit il n'apparait pas si je le met dans le container....

Parcequ'en plus j'ai un script de news dans mon corps (de mon site pas le mien ), et si je modifie le container ça m'envois tout en l'air.

voila mon css (a peu près celui du tuto), je précise que #menu est juste une bande horizontale sur le corps, ça m'a permis de suivre le tuto sans trop d'entorse et de pouvoir faire un corps adaptable
il faudrait donc faire un #menu2 ?

body
{
    background-color: #ededed;
}
#container
{
margin: auto;
width: 1020px;
}
#header
{
   background-image: url("img/header.png");
   background-repeat : no-repeat;
   width: 800px;
   height: 420px;
   margin-left :330px;
  
}

#menu
{
   background-image: url("img/menu.png");
   width: 800px;
   height: 74px;
   background-repeat : no-repeat;
   margin-left: 250px;

}
#menu2
{
float: left;
width : 220px;
}
.element_menu
{
   background-image: url("img/hautmenu.png");
   background-repeat: no-repeat;
}   
.element_menu2
{
   background-image: url("img/milieumenu.png");
   background-repeat: repeat-y;
}
#corps
{
   background-image: url("img/milieu.png");
   background-repeat: repeat-y;
   width: 800x;
   padding-left: 67px;
   padding-right: 67px;
   margin-left: 250px;

}

#footer
{
   background-image: url("img/bas.png");
   width: 800px;
   height: 25px;
   color: #00000;
   font-size: 12px;
   text-align: center;
   padding-top: 40px;
   background-repeat: no-repeat;
   margin-left: 250px;

}

et le html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>L'aventure de Rémy et Vanessa sur internet</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" href="design.css" />
    </head>
      <body>
     <div id="header"></div>        
    <div id="container">
         
         
           <div id="menu"></div>
             <div id="menu2">
           <div class="element_menu"></div>
           <div class="element_menu2"></div>
           </div>
           <div id="corps">BlablablablaBlablablablaBlablablablaBlablablablaBlablablablaBlablablabla<br/>
           BlablablablaBlablablablaBlablablablaBlablablablaBlablablablaBlablablabla

      </div>
           <div id="footer">
                     <br/><br/> Solex © 2008-2009
                   </div>
        </div>
    </body>
</html>

Voila mon site est ici : http://solexftp.free.fr si pouvais y jeter un petit coup d'oeil pour me dire comment m'y prendre ça serait sympa


Merci encore, Solex

Dernière modification par Solex (18/07/2009 22:47:31)

Me revoilà de Norvège :p
Content que tu es trouvé ton erreur Solex, si vous avez encore des questions je suis là 
Je vais compléter le tutoriel dans pas longtemps.

EDIT: me revoilà parti pour 2 semaines de vacances sans internet, à plus !

Dernière modification par Sybio (08/08/2009 23:59:27)

Très simple:

#container2 a {
color: red;
}

#menu a {
color: green;
}

Il suffit de mettre le nom de la div, de la classe ou de l'élément devant pour sélectionner le bon lien que tu veux stylé.

Ce tutos est il prévue (en rédaction) pour les personnes tournant sous Linux ??

Bonjour et merci à Sybio.

Le truc qui serait cool, c'est que vous postiez vos designs sur le forum, dans le sujet du tutoriel :p

Mon site refait de fond en comble grace à ton tuto. : www.orchestre-satanas.info

encore merci !!

Dernière modification par chrisjohn (07/02/2011 09:50:55)