28172 sujets

CSS et mise en forme, CSS3

Décalage des block avec FireFox

Bonjour à tous
J'avais déjà posé la question sous une autre forme il y a peu.

Comment faire pour que FireFox ne décale pas les block lorsque l'on place, par exemple, une image alignée a gauche dans le block du dessus si on ne spécifie pas la hauteur de ce block?
En effet le contenu des block est variable puisque géré "dynamiquement".

Voici le CSS/

body{
background-color: #003300;
}

.haut {
width: 100%;
text-align: center;
font-size: 30px;
padding: 2px;
background-color: #ffffff;
border: 2px, solid;
}

.gauche {
float: left;
width: 19%;
height: 100%;
margin-top: 8px;
padding-right: 2px;
padding-left: 2px;
background-color: #ffffff;
}

.paragr {
float: right;
width: 78%;
margin-top: 8px;
margin-left: 8px;
padding-top: 2px;
background-color : #ffffff;  
 }

.aligng{
float: left;
}


et voici le fichier html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<title>essai 11</title>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1">
<LINK href="style11.css" type=text/css rel=stylesheet>
</head>
<body>

<div class="haut">
<img src="logo.gif" width="138" height="68" class="aligng">
blabla blabla blabla blabla blabla blabla 
</DIV>

<div class="gauche">
blabla blabla blabla blablablabla blabla blabla blabla blabla
</DIV>

<div class="paragr">
blablabla 
</DIV>

<div class="paragr">
blablabla 
</DIV>

</body>
</html>


J'ai réduis le contenu du fichier html pour éviter des problemes de compatiblité de doctype

Avec Iex pas de probleme par contre avec FF rien a faire, si quelqu'un a une idée je l'en remercie d'avance Smiley smile

Dois-je utiliser un tableau avec tr et td a la place des block?

Mathieu

Les fichiers sont visibles la:
http://www.seegers.fr/essais/
Merci pour l'adresse Smiley smile , je suis allé voir

mais le probleme n'est pas un élément flottant qui dépasse de l'élément parent
Le probleme que je rencontre c'est: qu'une image alignée a gauche dans un bloc avec une hauteur (le bloc) non définie aura a sa droite, bien sur, le texte contenu dans ce bloc mais aussi le bloc suivant !!! en ce qui concerne FF
alors qu'avec Iex le bloc suivant reste sagement a sa place

En plaçant clear both dans le fichier html ça fonctionne mais bon, il y a peut-être mieux?

Mathieu
Hum...
Cette image "alignée à gauche" n'est pas dotée de la propriété "float:left" ? Smiley rolleyes
Ce conteneur doté de la propriété "clear:both" que tu ajoutes pour solutionner ce petit soucis, il est sensé faire quoi si ce n'est empêcher le "dépassement des flottants" ? Smiley rolleyes
Ou comme le dit, sûrement plus justement, Florent :
Florent V. a écrit :
...permet de "faire rentrer" les éléments flottants qui le précèdent dans le flux de l'élément parent.


Il s'agit d'une des solutions envisageable pour contrer ce phénomène, il en existe d'autres que tu as dû survoler lors de la lecture (?) de l'article (et des liens associés...) que je t'ai fourni...

Je t'encourage donc à (re)prendre ta lecture...

Cdt,
Sylvain
Bonjour,

En passant: c'est dommage d'utiliser des <div class="paragr"></div> là où la logique aurait dicté des <p></p>. Pour rappel, les titres et paragraphes c'est le B.A.-ba de HTML, si on n'a pas appris à les utiliser alors on a loupé un chapitre. Smiley cligne
Bonjour

Tu as raison 6l20, a force de chercher je fini par ne plus savoir ce que je cherche Smiley decu

j'ai trouvé la solution:
il suffit de doter le bloc du haut de: overflow: hidden et ça marche incroyable non?

a voir: http://www.seegers.fr/essais/


Merci Florent Smiley smile
j'ai appelé ça "paragr" mais en fait ce sont des blocs comme les autres qui doivent accueillir du texte , des images ou d'autres éléments.

vais bosser,
Mathieu
Sujet clos
Aller à