Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]

Jiff

Worldmind répond moi !

Voila,

Je suis en train de faire un site.
Je découvre XHTML, alors j'ai essayé de séparer contenu et mise en forme.

Mais il y à un endroit qui ne rend pas pareil sur IE6 et Mozilla.
Le reste de la page passe bien pour l'instant (Menu déroulant, etc...)

le mieux est encore une image :

avec ce code :

Code :

<div id="menugauche" class="ca-menugauche">
<div class="menugauche-texte1">S'inscrire à la Newsletter :</div>
<div class="menugauche-texte1"><form name="newsletter" method="post" action=""><input name="textfield" type="text" class="btextenews" value="Entrez votre mail." size="22" /><input type="submit" class="bouton-sondage" name="news" value="Ok" />
</form></div>
<div class="menugauche-lignevide"> </div>
<div class="menugauche-separ"> </div>
<div class="menugauche-texte1"> télécharger le fond d'écran
du mois.</div>
<div class="centre"><img src="images/sanguinaires.jpg" height="101" /></div>
<div class="menugauche-lignevide"> </div>
<div class="menugauche-separ"> </div>
<div class="menugauche-texte1">Sondage :</div>
<div class="menugauche-texte1"><form name="sondage" method="post" action="">
<div class="texte-sondage"> <input type="radio" name="radiobutton" value="radiobutton" />num 1</div>
<div class="texte-sondage"><input type="radio" name="radiobutton" value="radiobutton" />num 2</div>
<div class="texte-sondage"><input type="radio" name="radiobutton" value="radiobutton" />num 3</div>
<div><input type="submit" class="bouton-sondage" name="Submit" value="Envoyer" /></div>
</form>
</div>

CSS :

Code :

.ca-menugauche {
position: absolute;
height: auto;
width: 145px;
left: 50%;
top: 130px;
margin-left: -387px;
background-color: #EFEEE4;
padding-top: 10px;
}
.menugauche-separ {
width: 100%;
border-top-style: solid;
border-top-color: #FF6600;
height: 10px;
border-top-width: 1px;
font-size: 10px;
line-height: 10px;
}
.menugauche-texte1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
line-height: 17px;
padding-left: 5px;
vertical-align: middle;
height: 15px;
}
.btextenews {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF6600;
background-color: #FFFFFF;
border: 1px solid #FF6600;
}
.menugauche-lignevide {
height: 10px;
width: 100%;
font-size: 10px;
line-height: 10px;
}
.bouton-sondage {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
background-color: #FF9900;
border: 1px solid #FF6600;
font-size: 10px;
font-weight: bold;
text-align: center;
}
.texte-sondage {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
text-decoration: none;
}

Bref, on dirait que sur Mozilla, le height:auto du cadre pricipal (en gris) ne tient pas compte des 2 ème ligne et du form du sondage.

Je me doute bien, que ca doit surement etre de ma faute et pas celle de Mozilla :whistle:

enfin, si une âme charitable lis ca jusqu'au bout et y voit une erreur :jap:

Publicité

Jiff

Worldmind répond moi !

HotShot a écrit :

<limite hs>
Houlala ca me semble bien compliqué tout ça, y a des <div> de partout, m'est avis qu'il doit y en avoir une bonne part de superflu... [:marc]
</limite hs>

Tu as ça en ligne sur un site ? J'arrive à réfléchir que quand j'ai le code et la page sous les noeuils

Et, non, je n'ai pas ca en ligne.

Je veux bien croire qu'il y ait du superflu, et encore, la c'est juste un bout du menu de gauche

En fait, la page est constitué de plusieurs div organisant la structure de la page (Bandeau, menu-gauche, menu-deroulant, principal, )
Avec dans chaque, des trucs de ce type...

Alors on peut surement faire beaucoup plus leger en effet, mais je débute avec les div+css

gm_superstar

Appelez-moi Super

Alors :

- vertical-align: ne s'applique pas pour les DIV (c'est bête mais c'est comme ça)
- L'élément FORM a des marges haut et bas qui sont non nulles sous IE.
- Il y a clairement des DIV en trop. Au lieu de faire un DIV de 10 pixels de haut pourquoi tu ne donnes pas au DIV précédent ou suivant une marge de 10 pixels ?

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Jiff

Worldmind répond moi !

Merci, pour vos réponse...

J'ai essayé de suivre vos conseils, et en effet, on peut faire plus simple

Bon j'ai supprimé le div avec la classe : "ligne vide" qui ne servait juste de marge.
Pour faire une marge, j'avais essayé Padding-top, mais ca ne donnait pas ce que je voulait et en cherchant un peu: margin-top:10px;
Il ne me reste plus qu'une ligne avec marge avant et apres:

Code :

<div class="menugauche-separ"> </div>

au lieu de 2 :

Code :

<div class="menugauche-lignevide"> </div>
<div class="menugauche-separ"> </div>

=> plusieurs ligne en moins.

J'ai appliqué la classe directement sur l'image et non pas sur un div englobant.

Mais j'ai toujours ce problême de supperposition sous Mozilla.

Pour les form, il faudrait donc définir ses marges ??

edit > et donc, en appliquant la classe directement dans le form, on peut se passer des div ?

Message édité par Jiff le 05-02-2003 à 09:28:36

Jiff

Worldmind répond moi !

HotShot a écrit :

form{margin:0px} comme ça tu mets tous les browsers d'accord.

quel temps de réaction
c'est pas possible, tu es un bot

merci beaucoup, je vais essayer ça
enfin, surement ce soir, là il faut que je justifie mon salaire :whistle:

Jiff

Worldmind répond moi !

Pour l'image des sanguinaires : http://forum.hardware.fr/forum2.ph [...] t=#t202093

Il y en a d'autres dans le même topic et la partie d'apres (edit > http://forum.hardware.fr/forum2.ph [...] #t206545).

Une petite question : j'ai passé le code au validateur XHTML 1.0 et j'ai une erreur (pleins en fait, mais c'est la même)

Pour faire un affichage de résultats sur 2 colones, j'ai utilisé l'exemple de la FAQ, ce qui m'a donné :

Code :

div#gauche {
float: left;
width: 65%;
text-align: left;
text-indent:10px;
}
div#droite {
float: right;
width: 35%;
text-align: right;
}

Code :

<div id="gauche" class="adresse result"> Chemin de l'exemple 20167 AFA</div>
<div id="droite" class="tel result"> Tél : 06 10 00 00 00</div>
<div id="gauche" class="adresse result"> Chemin de l'exemple 20167 AFA</div>
<div id="droite" class="tel result"> Tél : 06 10 00 00 00</div>
<div class="spacer separ"> </div>

En fait j'utilise l'Id droite ou gauche a chaque fois que je veux placer mon texte en colone.

Evidement, il ne faut pas apparement, l'Id doit etre unique.

Alors est ce que je peux remplacer mon div#gauche par une classe .gauche à attribuer ?? ou que lest le moyen pour ne pas avoir à utiliser des Id identiques ??

Message édité par Jiff le 05-02-2003 à 10:49:00

Jiff

Worldmind répond moi !

Bon concernant les Id gauche et droite, j'ai résolu le problême en passant par des classes au lieu d'Id.

Ca m'aprendra a betement recopier un exemple

Comme quoi, le meilleur moyen de trouver c'est de chercher

Par contre pour l'instant toujours ce prob de superposition

edit >

c'est mon premier [:yaisse2] :sweat:

Bon c'est pas encore du code optimisé, mais au moins c'est au normes

Message édité par Jiff le 05-02-2003 à 11:27:54

Jiff

Worldmind répond moi !

HotShot a écrit :

Je te dis, colle le fichier en ligne, que chacun puisse bidouiller. Je pense qu'y a des padding/margin/width/height qui se baladent en vrac...

Non ! sinon, on va m'envoyer au bucher :cry:

Serieusement, je peux pas du boulot(pas acces au FTP) je verrai ce soir si je peux (match de l'ACAjaccio )

Bon, maintenant, je vais essayer de nettoyer un peu ce code (j'ai dit un peu :whistle: )

gm_superstar

Appelez-moi Super

Essaye de faire apparaître les bordures des différents DIV. Tu pourras mieux visualiser les bloc qui posent problème.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Profil supprimé

j'ai jamais compri les div?

ca marche comme un tableau c'est ca?

Publicité

gm_superstar

Appelez-moi Super

chacal_one333 a écrit :

ca marche comme un tableau c'est ca?

Non, justement.

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog

Jiff

Worldmind répond moi !

HotShot a écrit :

Je te dis, colle le fichier en ligne, que chacun puisse bidouiller. Je pense qu'y a des padding/margin/width/height qui se baladent en vrac...

Bon, je voulais juste vous remercier.
En fait, par exemple pour le texte "télécharger le fond d'écran du mois", que l'image venait masquer sur mozilla, c'était la classe appliquée qui n'allait pas :

Code :

.menugauche-texte1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
line-height: 17px;
padding-left: 5px;
vertical-align: middle;
height: 15px;
}

J'avais mis en effet, un peu partout, des Height, etc... inutiles

Donc en appliquant une classe correcte ça marche.

Code :

.menugauche-texte1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FF6600;
padding-left: 5px;
}

Plus de height, et plus de vertical-align qui ne marche pas

Enfin, j'ai nettoyé un peu le code (il reste des choses à enlever, mais c'est déja mieux )

Et j'obtiens pratiquement le même résultat sur IE5+ et Mozilla (les seuls testés).

Il me reste juste encore un problême : j'essaye de placer un "cadre" composé de 4 images qui va entourer la page, mais je n'arrive pas a faire un cadre qui s'ajuste à la longueur du contenue (avec les 2 images des cotées qui s'étirent).
Je crois donc, que je vais faire une longueur fixe...

encore merci :jap:

FORUM HardWare.fr

Programmation

HTML/CSS

Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]

Sujets relatifs
Validation des CSS ...	[(X)HTML-CSS] Comment définir de nouvelles constantes de couleur?
Problème de CSS, IE pour Mac needed	[CSS] je comprends pas là...
On ne peut rien faire bouger en XHTML?	[CSS] Placement d'images
[CSS ] et padding/magin sous IE !	J'arrive pas a faire un beau tableau nikel.. (CSS inside)
[CSS] Largeur de tableaux dans un div	[HTML, CSS] Calcul de la largeur minimale
Plus de sujets relatifs à : Div et hauteur, result diff. sur IE et Mozilla [XHTML et CSS]

Page générée en 0.068 secondes