28220 sujets

CSS et mise en forme, CSS3

[resolu]Problème : height 100% [et] Décalages sous IE

Salut,
Je suis en train de "migrer" l'ex design de mon site.
Il était fais avec plein de tableaux... je le passe en XHTML et CSS valide...ou du moins, j'essaye de le faire !

Voici ce que j'ai actuellement :
http://www.graph-site.net/divers/gs/

J'ai quelques problèmes...

Sous Firefox :
J'aimerais bien que le design s'adapte bien au contenu...là j'ai mis du height:100% un peu partout, mais pourtant même sans contenu, j'ai une barre de scroll verticale.
J'ai essayé de mettre un height: auto !important; sur le body et le html 
html, body {height: auto !important; height: 100%; width: 99%; margin: auto; background: #F0F0F0;}

mais dans ce cas je n'ai plus de #corps_d ni de #corps_g à s'afficher ...(les bordures extérieurs gauches et droites de ma page...) mais pour le reste, c'est ce que je veux !!!
Comment régler ce problème, qui d'après ce que j'ai vu est très courrant, mais pas facile à résoudre Smiley cligne

Sous IE :
Et bien même problème que sous FF, sauf que rajouter le
height: auto !important;
n'a aucun effet apparemment...

En plus, sous IE il y a plein de décalages et je ne parviens pas à les faire disparaître.

Comment résoudre ces problèmes SVP ?
Je reviens mettre des captures demain !

@ +
Modifié par Graph-Site (25 Jan 2007 - 12:23)
Salut,
Voici les captures, avec quelques commentaires supplémentaires...

Voici ce que j'ai actuellement en ligne :
- Sous Firefox
- Sous IE

Voici ce que je voudrais avoir sauf qu'il manque les bordures gauche et droite...qui ne s'affichent pas...
La capture a été faite sous FF car sous IE la manip que de donne juste après n'a aucun effet apparent...
http://www.graph-site.net/divers/gs/captures/capture_ff_!imporant.jpg

Pour obtenir ce rendu j'ai remplacer 
html, body {height: 100%; width: 99%; margin: auto; background: #F0F0F0;}

par
html, body {height: auto !important; height: 100%; width: 99%; margin: auto; background: #F0F0F0;}


Voici le document tel qu'il est actuellement :
http://www.graph-site.net/divers/gs/
(il ne comporte pas le height: auto !important; )

Quelqu'un a-t-il une solution ?
Que faire pour qu'IE supprime ces "marges" ?

@ +
Bon, je me permet de faire un petit up Smiley smile
Ce sera le seul !

je n'ai toujours pas réussi à corriger ces problèmes... Smiley decu

@ +
Graph-Site a écrit :
. . . . ...là j'ai mis du height:100% un peu partout, mais pourtant même sans contenu, j'ai une barre de scroll verticale... . . . .


"Du 100%" ne résout un problème que quand 100% EST la solution du problème !

Et visiblement cela ne fonctionne pas, et ne peut pas fonctionner : #corps_g, #corps_d et #corps_c à 100% s'ajoutent à tes conteneurs du haut et du bas, le total est donc supérieur à 100%.

Tu aurais pu la voir en quelques secondes avec Firefox et l'extension Webdeveloper !

En outre la présentation de ton site dépendra du nombre de barres d'outils affichées par l'internaute : il y aura plus ou moins de scroll selon ces barres...
Merci pour ta réponse Smiley smile
Webdeveloper -> oui, il faut que je le réinstalle (la dernière version ne fonctionnait pas...je vais réessayer)
Tu viens de me rappeler que cela me permettrait d'éditer en temps réelle ma CSS !

Sinon, pour les décalages sous IE, tu vous d'où cela pourrait venir ?

@ +
Merci Smiley smile
...J'ai toujours su que j'aurais dû mieux suivre en anglais cette année ! lol
ça va je devrais m'en sortir !

@ +
Salut,
juste pour redire un très très grand merci, grâce à cet article j'ai réussi à corriger mon problème sous IE.
voici comment en français :
- Pour les DIV en float, mettre un marge négative de 3px (du coté du centre...donc si c'est float: left on met un margin-right de -3px)
- Pour les DIV au centre, afin d'équilibrer avec ce margin négatif...on enlève 3px pour les margin left et right...

Comme j'exlique comme un pied, voici un exemple de code que j'aurais pu avoir au départ et ensuite, le même code mais corrigé pour IE :


#haut-gauche {
height: 31px;
width: 28px;
background: #FF0000;
 float: left;}

#haut-droite {
width: 28px;
 height: 31px;
background: #0000FF;
 float: right;}

#haut-centre {
margin-left: 28px;
margin-right: 28x;
height: 31px;
background: #FF00FF;
}

Qui devient donc : 

#haut-gauche {
margin-right: -3px; 
height: 31px;
width: 28px;
background: #FF0000;
 float: left;}

#haut-droite {
margin-left: -3px;
width: 28px;
 height: 31px;
background: #0000FF;
 float: right;}

#haut-centre {
margin-left: 25px;
margin-right: 25x;
height: 31px;
background: #FF00FF;
}


Ce n'est pas logique (pas MA logique en tout cas Smiley smile lol)
Mais je suis heureux : ça marche !

@ +
Sujet clos
Aller à