Donner un padding interne à des blocs alignés avec float:left

Bonjour à tous

Me revoici. Cela fait quelque temps que je suis sur ces deux blocs qui me pose énormemment probleme. Les tutos et FAQ n'ont pas totalemrnt répondu à ma question. J'ai fait le maximum, maintenant j'ai besoin d'un coup de main ou d'une ligne directive.

Mon souci est que je n'arrive pas à mettre correctement un padding à l'intérieur du bloc texte.
Si j'ajoute un padding-left par ex, l'image descend et fait comme si elle n'avait pas de float:left !!
cecei st du au fait que j'ai donné une taille au bloc je sais, mais il faut bien car il faut que la somme (des width) des 2 Divs soit 470px.

merci de votre coup de main

voici le code html/php les Div s concernées sont text-star, image_star :

<div class="bloc_title_star">
<h2 id="title01_star" class="width_titles">Titre en rose</h2>
<h1 id="title_star" class="width_titles">Sous-titre en blanc</h1>
</div>
<div id="text_star">texte texte texte texte....</div>
<div id="image_star">image à coté du texte</div>
<div id="padding_top12">&nbsp;</div>

et le code css concerné :

div#text_star {
float: left;
background-color:#3399CC;
background-color: #F7F7F7;
/*padding: 0 4px 0 4px;*/
text-align: justify;
height: 122px;
width: 320px;
margin: 0;
}
div#image_star {
float: left;
background-color:#FF6666;
width: 150px;
height: 122px;
margin: 0;
padding: 0;
}

merci encore
Modifié par miltonis (10 Feb 2006 - 07:28)

Hum, pas sûr d'avoir bien compris ce que tu veux dire.

Mais si tu faits un padding-left de 15px, il faut que tu retires 15px à width pour avoir une largeur apparente identique.

C'est ça ?

+

pour plus de clarté, voici des images :

la 1ere correspond à ce que ça donne avec le code ci-dessus (IE et FF) :


la 2e correspond avec "un padding-left de 15px, il faut que tu retires 15px à width pour avoir une largeur apparente identique" (avec IE) :


je pensais trouver la solution la-dedans
http://openweb.eu.org/articles/dimensions_boites_css/
mais sans succès, aurais-je mal regardé?

merci

DOnne une largeur fixe au block de ton texte...pcq ton block texte passe sous ton images et donne un padding a droite de ton images... c'est pour cela...

fait moi savoir si tu as réeussi

Bonjour Bensti,

Merci de ta réponse, mais je crois lui avoir déjà doné une longuer fixe avec width: 320px; non?
sinon, ça veut dire quej'ai rien compris et alors comment faire?

PS : si le php n'était pas clair je l'ai remplacé par le vrai contenu dans le code plus haut.
Modifié par miltonis (10 Feb 2006 - 07:29)

Bonjour,

C'est effectivement une question de modèle de boîte, ou plus exactement de compréhension du modèle de boîte CSS.

Attention: on se place ici en mode de rendu strict dans IE, et non en mode de rendu quirks (on a donc un doctype (X)HTML correct et complet, pas e prologue xml).

Comme expliqué plus haut, la largeur totale disponible est de 470px, mais la largeur du contenu avec padding excède ces 470px. Elle est en effet égale à 320px de texte, plus 150px d'image, plus 8px de padding = 478px.

L'image flottante n'a pas la place de se tenir à côté du texte. Elle se décale donc normalement en dessous de celui-ci.

Il faut déduire de la largeur fixée pour le texte celle des padding qui lui sont appliqués:

div#text_star {
float: left;
background-color:#3399CC;
background-color: #F7F7F7;
[b]padding: 0 4px 0 4px;[/b]
text-align: justify;
height: 122px;
[b]width: 312px;[/b]
}

Modifié par Laurent Denis (10 Feb 2006 - 07:49)

Bonjour LAurent,

moi qui pensais être le seul par dans le coin dans ces heures-ci....
en fait j'ai déjà suivi le conseil indiqué plus haut et je l'avais même lu dans openweb, mais le résultat est celui de l'image suivante resultatavec IE
sous FF ça fonctionne évidememnt.

comme tu peux le voir, les 8px que j'enlève aux 320, s'enlèvent aussi à tout le bloc (partie verte)

Comme indiqué ci-dessus, on se place en mode de rendu strict dans IE. Voir http://blog.alsacreations.com/2005/08/01/183-choix-dune-dtd-le-doctype-switching-nest-pas-pour-nous

Le résultat incorrect que tu obtiens dans IE6.0 Windows est provoqué par le fait que ton code met IE en mode de rendu Quirks :
- parce que tu n'as pas mis de DTD
- ou parce que tu as mis une DTD incomplète
- ou parce que tu as mis en proglogue XML
- ou parce que tu as mis un commentaire HTML avant la DTD

Dans ce mode, c'est le modèle de boîte Microsoft qui est appliqué, et non le modèle de boîte CSS2 selon lequel ta feuille de style est conçue.

Tu obtiendras le résultat correct dans IE6.0 (et identique à celui de Firefox, Opera, etc) en corrigeant ce problème de DTD.

En revanche, IE5.0 et IE5.5 Windows ne fonctionnent qu'en mode de rendu Quirks. si tu veux corriger le rendu dans ces deux versions, il faut ajouter une feuille de style corrective en commentaires conditionnels (voir FAQ du forum et Les syntaxes de commentaires conditionnels pour IE Windows) avec simplement :

div#text_star {
width: 320px;
}

Modifié par Laurent Denis (10 Feb 2006 - 08:36)

merci de ta réponse très explicite Laurent. ça prend du temps pour tout assimiler.....le fait est que j'ai choisi
"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> "

et que ça fout la pagaille (sous IE) dans ma page!!!

alors je vais essayer de mettre de l'odre dans tout ça et reviens à la charge