Discussion :

[Aspic]

Bonjour à tous,

Pour commencer, j'ai un probleme pour centrer tout mon site (body)
Probleme centrage

Si j'enlève la propriété float:left au conteneur du milieu qui contient trois blocs (news, contenu et partenaire) ca change rien...

PS: Dans le bloc décalé il y a trois blocs qui sont inclus dans un seul !

Code CSS :
Feuille de style

De plus connaissez vous des bon tutos sur ce que je suis entrain de faire car j'ai bien cherché mais tous les tutos trouvés ne me conviennent pas !

Merci à tous !

[Dan_A]

Une proposition plutôt :
utiliser un générateur de layout pour voir comment ça marche car il y a quelques problèmes avec la page en ligne.
http://csscreator.com/tools/layout
http://www.positioniseverything.net/...maker_form.php
http://www.fu2k.org/alex/css/layouts...1&show_style=0
http://www.neuroticweb.com/recursos/3-columns-layout/

Des exemples :
http://www.cssplay.co.uk/layouts/index.html
http://www.pmob.co.uk/temp/3colfixedtest_explained.htm
http://www.pmob.co.uk/temp/3coltest-2.htm
http://www.tanfa.co.uk/css/layouts/flexi_floats/

[Candygirl]

Perso je te propose ceci:

- Que ton div contenu englobe tout; c'est à dire que tu rajoutes le header et le footer dedans

- tu vires le float:left et applique un margin auto aux marges latérales:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#contenu {
margin:0 auto;
}

[Aspic]

Merci pour vos réponses.

CandyGirl merci ca marche très bien ! mais j'aimerais comprendre Le margin:auto; du bloc "total" permet de centrer tout ? De plus, le code CSS du lien précédent est il correct ? (je ne veux pas avoir de probleme quand j'aurais crée la motié de mon site )

Dan_A j'ai regardé tes liens mais je ne comprends pas ce que je dois faire avec un générateur de Layout... Tu dis qu'il y a des problemes dans la mise en forme de mon site, pourrais tu etre plus explicite ?

PS: Liens du post précédent ont été mis à jour.

[Dan_A]

La solution de Candygirl avec margin:0 auto; ne pose pas de problème avec les navigateurs récents (donc sauf avec IE 5.x) et a réglé quelques problèmes avec l'html (il en reste : http://validator.w3.org/check?verbos...om%2Finfo1.php )et les positions.
Le générateur de layout permet d'obtenir (et d'étudier) le code html et css qui correspond à ce qu'on veut obtenir (la compatibilité avec ie 5.x n'est peut-être pas assurée) et c'est un code qui passe sur à peu près tous les navigateurs (y compris Opera) sans laisser d'espaces comme pour la division de droite, évite normalement que la mise en page ne soit mise en vrac par un grossissement des caractères ou une option d'accessibilité.

[Aspic]

(il en reste : http://validator.w3.org/check?verbos...om%2Finfo1.php )et les positions.
Le générateur de layout permet d'obtenir (et d'étudier) le code html et css qui correspond à ce qu'on veut obtenir (la compatibilité avec ie 5.x n'est peut-être pas assurée) et c'est un code qui passe sur à peu près tous les navigateurs (y compris Opera) sans laisser d'espaces comme pour la division de droite, évite normalement que la mise en page ne soit mise en vrac par un grossissement des caractères ou une option d'accessibilité.

Justement j'allais en venir avec les DocType et la validation du code html : J'ai 8 erreurs certes mais je comprends pas pourquoi car les explications données pour la correction des erreurs n'est pas terrible...

Pourrais tu m'aider à corriger toutes ces erreurs

PS : J'ai téléchargé Opéra 8 et tout marche très bien

EDIT : Sur FF 1.5 et 2.0, IE 6.0 et Opera 8.0 ca marche très bien ensuite je ne pourrais pas tester sur une version antérieure à IE 6.

[Dan_A]

il faut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style1024.css">

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="style1024.css" />

et ajouter alt="description de l'image" pour les images

J'ai téléchargé Opéra 8 et tout marche très bien

J'utilise Opera 9.21 et chez moi, avec les options par défaut, ça ne va pas trop bien car la page occupe plus que l'écran et de plus, j'ai le même espace à droite de #partenaire qu'avec les autres navigateurs.

ca marche très bien ensuite je ne pourrais pas tester sur une version antérieure à IE 6.

Ce n'est peut-être pas nécessaire, tout dépend de l'audience.
Plusieurs solutions, la plus simple :
http://tredosoft.com/Multiple_IE

[Aspic]

Pour les erreurs merci beaucoup c'est corrigé !

Est ce que le nom du DocType a une importance ou pas ? (moi c'est HTML 4.01 Transitional)

Pour l'erreur de marge dans le #partenaire c'est réglé c'est mon image qui etait mal dimensionner (tu peux tester).

Pour l'histoire du site qui prends plus de place quelle est ta résolution ? Un screen pour voir le soucis ?

Et puis je vais installer ton logiciel pour tester plusieurs versions de IE

EDIT : Donc ca marche très bien avec toutes les versions de IE (sauf 3.0 mais c'est normal ). Seul le centrage du site n'est pas pris en compte dans les versions antérieures à la 6.0

Sous FF nickel et sous Opera 8.0 et 9.21 marche très bien je ne vois pas le soucis que tu as.

[Candygirl]

De plus, le code CSS du lien précédent est il correct ?

En plus de ce que Dan_A a relevé:

• Pour ton menu, préfère une structure en liste (<ul><li>) plutôt que des <p>
  
  
• inutile de donner une unité dans ton css lorsque tu attribues la valeur 0
  
  
• #999999 peut-être simplifié en #999
  
  
• Tu devrais éviter de donner un height à ton footer puisque celui-ci comporte du texte.
  
  
• Evite d'utiliser des div lorsqu'une autre balise est plus appropriée; tu peux utiliser un h1 pour ta banner si elle sert de titre principal, un p pour ton footer, ...
  
  
• div#contenu peut être écrit #contenu tout court; le div devant n'est vraiment utile que si tu as un autre élément avec le même id (sur une autre page mais avec le même css) mais auquel tu ne veux pas attribuer le style ou alors que tu dois augmenter la spécificité de ton sélecteur.
  
  
• la balise blockquote doit être réservée pour de longues citations
  
  
• Si tu veux avoir ton cite centré aussi sur IE mode quirks (= inférieure à la 6) tu peux rajouter un text-align:center; dans le body puis le réajuster à la valeur voulue dans le #contenu

[Dan_A]

Est ce que le nom du DocType a une importance ou pas ?

Oui, il n'y a pas de raison de ne pas utiliser Strict (à part le travail de correction de l'HTML)
Curieusement, Opera considère que mon écran fait 835px (voir résultat coin haut droite firefox et opera et les calculs effectués par Opera) peut-être à cause du doctype.
Les remarques de Candygirl peuvent régler le problème.

[Aspic]

Oui, il n'y a pas de raison de ne pas utiliser Strict (à part le travail de correction de l'HTML)

Comment changer le DocType pour avoir le Strict ?

Sinon pour la résolution c'est normal si tu es en 800x600, tu va avoir des problemes mais j'ai prévu le coup avec une feuille de style alternative en fonction de la résolution. La résolution doit etre de 1024x768 pour que le site s'affiche correctement.

Pour les remarques de CandyGirl, j'en prends compte très précieusement. Pour certaines c'est pas de ma faute mais Dreanweaver génére du code merdique (c'est peu de le dire). Pour les simplifications c'est toujours bon à prendre. Par contre pour le Header je suis obligé de mettre un height sinon on voit plus rien (il n'y a pas de texte, ca sera que des images : une de fond et les autres pour les boutons.)

Si tu veux avoir ton cite centré aussi sur IE mode quirks (= inférieure à la 6) tu peux rajouter un text-align:center; dans le body puis le réajuster à la valeur voulue dans le #contenu

Je n'ai pas compris par contre ca car text_align:center c'est que pour centrer le texte ?

Pour en revenir au DocType, je pense qu'il faut modifier cela :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Mais je ne sais pas quoi mettre pour le changer en Strict.

Je suppose que le Strict demande une plus grande rigeur (un peu comme les options en VB.NET), c'est bien à mon sens ca va m'apprendre à coder normalement sans bidouillage !

EDIT : Code CSS mis à jour :
Feuille de style

[Dan_A]

Sinon pour la résolution c'est normal si tu es en 800x600

Je suis en 1024x768, c'est bien ce qui est curieux.

mais j'ai prévu le coup avec une feuille de style alternative en fonction de la résolution

C'est une mauvaise idée. Comment savoir ?
A titre personnel j'ai javascript désactivé....

Je n'ai pas compris par contre ca car text_align:center c'est que pour centrer le texte ?

C'est un "bug" de IE en mode quirks.
Pour le Doctype :
http://csscreator.com/node/18218

[Aspic]

Exact donc je comprends pas mais c'est normal qu'il y ai une marge à droite et à gauche (le body doit etre centré normalement).

Sinon oui c'est en javascript car j'ai pas le choix. Si c'est desactivé alors par défaut se sera le template 1024x768 (puisque c'est la résolution banale). Je ne vois pas sinon comment ajuster le template en fonction de la résolution...

En ce qui concerne le Doctype je vais rester en HTML Traditional car en XHTML Strict j'ai 13 erreurs et vu mon niveau en Html je capte rien !
http://validator.w3.org/check?uri=ht...doctype=Inline

PS : Quelle est la différence entre Html et XHTML ?

[Dan_A]

Un résumé des différences (avec des liens intéressants mais tout n'est pas traduit) :
http://xhtml.com/en/xhtml/serving-xhtml-as-html/
Comme l'avenir est à html 5 plutôt qu'à xhtml 2, HTML 4.1 strict est une bonne option.

[Aspic]

Un résumé des différences (avec des liens intéressants mais tout n'est pas traduit) :
http://xhtml.com/en/xhtml/serving-xhtml-as-html/
Comme l'avenir est à html 5 plutôt qu'à xhtml 2, HTML 4.1 strict est une bonne option.

Ok donc ma décision est prise pour l'instant. Vu que je suis encore débutant dans le domaine, je vais garder le Html et eventuellement passer en Strict.

Sinon un probleme recurrent que j'ai avec une image en background : Le fait que l'image se repete déforme soit le degradé soit le motif de mon image initiale et laisse des traces montrant bien la répétition... Répéter une petite image (960x10 px) beaucoup de fois me semble pas etre la bonne solution. Comment faire pour eviter de voir la répétition de l'image ?

[Aspic]

Bonjour, je reviens parmi vous

Je me familiarise enfin avec le CSS mais il me reste un probleme embetant pour la construction de mon template.

Je m'explique, dans les sites actuels, il y a le plus souvent un menu à gauche et le contenu à droite. Si le contenu (generalement du texte) est très long (présence d'une scrollbar verticale) alors le footer (pied de page) descend en fonction de la longeur du texte dans le contenu. Jusque la pas de soucis Par contre, le menu à gauche doit descendre en "meme temps" que le contenu... (je veux dire en fonction de la longeur du texte).

On m'avais suggérer de faire une image commune au menu et au contenu et de la répéter de facon continue pour avoir le motif. Mais j'ai vu que sur beaucoup de sites (http://www.crystalxp.net/ par exemple), le background du menu est différent du background du contenu et dissocié egalement. Pourtant , ils n'ont pas le probleme que j'ai. En effet, le menu de gauche suit bien le contenu... Comment on t-ils réussi ?

Encore merci de votre aide et j'espère que je suis clair

[Candygirl]

En effet, le menu de gauche suit bien le contenu... Comment on t-ils réussi ?

Ils appliquent la méthode qui t'a été décrite. Tu remarqueras que l'image de fond n'est pas appliquée au menu mais au conteneur qui contient à la fois le menu et le contenu. Pour les ombres sur les côtés, ils ont choisis de les intégrer par imbrication de div plutôt que de faire 1 seule image. C'est plus lourd niveau code mais c'est plus flexible si tu souhaite modifier la largeur du site, tu n'as pas besoin de refaire d'image, à moins que la lergeur du menu ne change elle-aussi (dans ce cas précis)

[Aspic]

Pourtant sur le site de crystalXP, l'image de fond pour le menu à gauche est appliqué à la ligne CSS suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#principal{background: #FFFFFF url('/_design/img/v2/pointg-fond.gif') repeat-y; text-align:left;}

Pour l'image de fond du contenu, elle est appliquée à la ligne CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#contenu .content-szonebleue{background:url('/_design/img/v2/sous-disclaimer.gif') top repeat-x; padding-top:33px;}

Donc il y a bien deux div différents avec deux images de fond différentes ? Certes elle sont répétés mais il n'y a pas une seule image appliquée à la balise div qui englobe le menu et la contenu...

[Candygirl]

Pour l'image de fond du contenu, elle est appliquée à la ligne CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#contenu .content-szonebleue{background:url('/_design/img/v2/sous-disclaimer.gif') top repeat-x; padding-top:33px;}

Cette image de fond n'est utilisée que pour une partie du contenu et est d'une hauteur fixe (répétée en x et pas y), donc non dépendante de la hauteur totale du contenu; elle ne correspond donc pas à la problématique des "colonnes de hauteurs égales"

[Aspic]

Ok j'ai essayé d'appliquer la technique avec un degradé. Je dois avoir une erreur dans mon code CSS ou html :

Code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="all"> 
  <div id="header">header</div> 
  <div id="contenu"> contenu avec menu et texte
    <div id="menu">menu</div> 
    <div id="texte">
 
    </div> 
  </div> 
  <div id="footer">footer</div> 
</div

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
margin:0;
padding:0;
background-color:gray;
}
#all {
margin:auto;
width:960px;
}
 
#header {
width:960px;
height:131px;
background-image:url(Header.png);
}
 
#contenu {
width:960px;
background-image:url(degrade.png);
background-repeat:repeat-y;
}
 
#menu {
float:left;
width:260px;
}
#texte {
float:left;
width:700px;
}
#footer {
clear:both;
width:960px;
height:70px;
background-image:url(Footer.png);
}

Probleme : Le background du contenu ne s'affiche pas a travers les bloc menu et texte (en fait il est derriere je pense). Pourquoi ?

Voir le screen pour plus d'infos