Page 1 sur 1

Pb de position CSS

Publié : 12 oct. 2008, 22:27
par AnT
Salut,

Je reviens ici, parce que je ne m'en sors pas avec les CSS.

Pour y voir clair, j'ai fait une page avec uniquement les blocs sans contenu : http://www.clionautes.org/test/blocs.htm

le code CSS est :

Code : Tout sélectionner

#conteneur {
position: relative;
width: 800px;
margin: 0 auto;
background-image:url(squelettes/images/fond.png) repeat-y;
border-right:1px solid black;
}

#titre { width:100%; margin: 2px; }

#menu { position: absolute;  left:0; width: 150px;  margin: 2px; }

#centre { width: 100%; margin-left: 150px; padding: 5px; border-left:1px solid black; background-color: yellow; }

#comptes-rendus { position : absolute; width: 350px; background-color:green; }  

#galaxie { position: absolute; left:350px; width: 300px;  margin: 0px; color:blue; background-color:red; }

#pied { width: 100%; margin: 2px; background-color:blue;  }

</style>
en m'inspirant de http://css.alsacreations.com/modeles/modele9.htm.

J'ai 3 soucis

1. le bloc #conteneur est censé contenir tous les autres et fixer la largeur à 800 px. Manifestement, il ne comporte que le bloc menu et pas les autres. Pourtant, je ne ferme pas le div.

2. idem, le bloc #centre est censé contenir #compte-rendu et #galaxie, mais si je les mets en position absolute, ils sortent du bloc et si je ne les mets pas en absolute, ils ne se positionnent pas bien.

3.le bloc #pied qui est censé être en bas de page se place bien sous le bloc #centre, mais comme #galaxie et #compte-rendu sont en absolute, il se superpose à eux.

Avez vous des pistes pour résoudre ces pb ?

Merci

AnT.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Publié : 13 oct. 2008, 08:55
par calimo
  1. Ta page n'a pas de doctype. Firefox l'interprète en mode "quirk", non standard. Les réactions sont donc totalement imprévisibles. Mets toujours un doctype faisant passer Firefox en mode standard.
  2. Tu as des Erreurs HTML, avec en particulier des erreurs d'imbrication.
Ces 2 problèmes sont plus que suffisants pour expliquer absolument n'importe quoi ;-)
À lire absolument : http://openweb.eu.org/articles/toi_comprendre_moi (et le reste du site par la même occasion).

Publié : 13 oct. 2008, 19:15
par Invité
calimo a écrit :
  1. Ta page n'a pas de doctype. Firefox l'interprète en mode "quirk", non standard. Les réactions sont donc totalement imprévisibles. Mets toujours un doctype faisant passer Firefox en mode standard.
Bon j'ai ajouté le doctype...en espérant que ce soit le bon.
Tu as des Erreurs HTML, avec en particulier des erreurs d'imbrication.[/list]
.

Certes, mais je ne comprends pas toujours bien la nature des erreurs. Et je vois mal en quoi cela influence le placement de mecs blocs.

Merci

AnT.



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Publié : 13 oct. 2008, 19:57
par Benoit
Je pense que tu devrais plutôt utiliser le doctype HTML 4.01 car tu en es beaucoup plus proche que du XHTML (23 erreurs au lieu de 146).

C'est celui-ci :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
L'influence que les erreurs HTML peuvent avoir c'est que l'arbre du document (DOM) généré n'aura pas forcément la même structure que ce que tu as prévu, ni ne sera le même d'un navigateur à l'autre. Si la structure change, l'application des règles CSS fera de même puisqu'elles fonctionnent selon la règle d'une « cascade » au travers de cet arbre.

De plus beaucoup de gens refuseront simplement de t'aider pour ces mêmes raisons, ton problème est beaucoup moins facilement identifiable au milieu de tout le « bruit » causé par ces erreurs.

Publié : 13 oct. 2008, 20:49
par AnT.
Bon, j'ai essayé de grater un maximum d'erreurs. J'ai l'impression que certaines viennent du code SPIP.

mais j'ai tjs mon pb de blocs.

Merci

AnT.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Publié : 14 oct. 2008, 09:34
par calimo
Il reste toujours 18 erreurs. Dont des erreurs d'imbrications qui font que le document n'est pas interprété comme tu le penses. C'est une page de test, tu peux supprimer toutes les balises SPIP, tu les remettras plus tard.

Tu te rendras alors compte que tu as perdu la balise d'ouverture de l'élément html et que ton imbrication est douteuse *. Regarde en particulier ton bloc "titre", et regarde où il se termine, et compare avec où tu as mis le commentaire pour le terminer. L'inspecteur DOM peut t'aider à y voir plus clair. Quand tout sera propre, reviens nous voir si tes problèmes n'ont pas disparu en même temps que les erreurs ;-)
Benoit a écrit :De plus beaucoup de gens refuseront simplement de t'aider pour ces mêmes raisons, ton problème est beaucoup moins facilement identifiable au milieu de tout le « bruit » causé par ces erreurs.
Et surtout il arrive bien souvent que la correction des erreurs HTML "résolve" en même temps les problèmes de mise en page !

* à chaque fois que tu as un tag "</div>", ajoute un commentaire à côté précisant quel div il ferme.

Publié : 14 oct. 2008, 17:10
par AnT
Ok, j'avance.

- Ce coup-ci, la page est valide 100%
- #centre est bien dans #conteneur
- les blocs #Comptes-rendus et #galaxie sont bien inclus dans #centre.

MAIS

- ces 2 blocs ne sont pas cote à cote alors qu'ils devraient (j'ai essayé de jouer sur le padding mais, ils ne se mettent pas sur la même ligne)
- le pied se superpose au menu (ca j'ai compris, c'est une histoire de flux car le menu est en "absolute". Je veux bien faire autrement mais je trouve pas l'astuce, sauf à tout repasser en float mais c'est justement ce que j'avais écarté au départ !)

Merci

AnT.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Publié : 14 oct. 2008, 17:29
par calimo
AnT a écrit :- ces 2 blocs ne sont pas cote à cote alors qu'ils devraient (j'ai essayé de jouer sur le padding mais, ils ne se mettent pas sur la même ligne)
Un float ? Tant que display:inline-block n'est pas implémenté, c'est la seule solution pour mettre 2 blocs côte à côte.
AnT a écrit :- le pied se superpose au menu (ca j'ai compris, c'est une histoire de flux car le menu est en "absolute". Je veux bien faire autrement mais je trouve pas l'astuce, sauf à tout repasser en float mais c'est justement ce que j'avais écarté au départ !)
Il y a une astuce sur alsacréations. Si je me souviens bien il faut un bloc en plus incluant le menu et le contenu, mais pas le pied.
Je crois que c'est http://css.alsacreations.com/Faire-une- ... me-hauteur ;-)

Publié : 14 oct. 2008, 17:54
par AnT
calimo a écrit :Un float ? Tant que display:inline-block n'est pas implémenté, c'est la seule solution pour mettre 2 blocs côte à côte.
Le problème, c'est que si je fais un float pour #galaxie, il sort de #centre et si je mets aussi #centre en float, #galaxie revient à l'intérieur, mais là, c'est #centre qui sort de #conteneur.

Je m'en sort pas !!!

Merci

AnT.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3

Publié : 14 oct. 2008, 19:41
par Fabrice.Tres.Net
Un peu de lecture devrait éclaircir les idées:

http://css.alsacreations.com/Bases-et-i ... ses-en-CSS