28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement d'un background avec float:left

Bonjour,

j'ai un problème avec le positionnement d'un background

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Problème de background avec float:left</title>
<style type="text/css">
div.infos {
	margin-left:100px;
	}
div.pro {
	border:1px solid red;
	float:left;
	}
div.perso {
	border:1px solid blue;
	}
p.portable {
	background:url(/images/phone.png) 4px center no-repeat;
	padding-left:25px;
	}
</style>

</head>

<body>

<div class="infos">
	<div class="pro">
		<p class="portable">01 02 03 04 05</p>
	</div>
	<div class="perso">
		<p class="portable">01 02 03 04 05</p>
	</div>
</div>

</body>
</html>
ce qui donne : upload/3720-background-.GIF

Vous constaterez que :
1/ [CORRECTION >] p.portable n'a PAS de padding-left dans le div.perso
2/ les deux images background (le téléphone) se superposent...

Quelqu'un pourrait-il m'aider sur ce coup ?
Merci d'avance

@ bientôt
Modifié par Tchupacabra (16 Dec 2008 - 11:54)
Hello Tchupacabra,

Une petite révision sur le positionnement flottant Smiley cligne
Pour ma part, à titre d'exemple et s'agissant de "bloc", j'assignerai volontier une dimension à ce flottant, et une marge du même accabit (+ la cosmétique) pour le bloc suivant.

Mise en pratique (valeurs à remplacer par ce que tu veux, ou à supprimer) :
div.infos {
	margin-left:100px;
	[#blue]border:1px solid #000;[/#]
	[#blue]padding:30px;[/#]
	}
div.pro {
	border:1px solid red;
	float:left;
	width:[#blue]250px[/#];
	}
div.perso {
	border:1px solid blue;
	margin-left:[#blue]280px;[/#]
	}
p.portable {
	background:url(/images/phone.png) 4px center no-repeat;
	padding-left:25px ;
	margin: .75em 0;
	}

Ensuite, l'utilisation de telle ou telle balise html (et la mise en forme via css), la pertinence de cette utilisation (sémantiquement parlant) est une autre question Smiley cligne

Cdt,
Sylvain
6l20 a écrit :
Pour ma part, à titre d'exemple et s'agissant de "bloc", j'assignerai volontier une dimension à ce flottant, et une marge du même accabit (+ la cosmétique) pour le bloc suivant.

L'autre solution serait d'utiliser un contexte de formatage sur le deuxième bloc (celui qui doit s'adapter au flottant). Donc ici rajouter un simple overflow: hidden sur div.perso, et quelque chose comme un margin-right: 20px sur div.pro.
merci 6|20 pour ton aide... j'avance ! Smiley smile

mais tout n'est pas rose dans ce monde CSS... Smiley murf
avec 
<style type="text/css">
* {
	padding:0px;
	margin:0px;}
div.infos {
	border:1px solid black;
	margin-left:100px;}
div.pro {
	background-color:red;
	float:left;
	width:50%;}
div.perso {
	background-color:green;
	margin-left:50%;}
.portable {
	background:url(/images/phone.png) 4px center no-repeat;
	padding-left:25px;}
</style>

Le rendu me parait normal (et bon) sous Firefox mais sous IE7, j'ai un espace blanc imprévu entre .pro et .perso
visuel : upload/3720-Sanstitre.GIF

Apparemment, c'est le margin-left:100px qui dérègle la mise en page.
Comment rectifier pour avoir le même affichage ?
autres précisions:
- j'aimerais que mes blocs .pro et .perso soient de même largeur (d'où mes 50%)
- et qu'il est possible qu'à la génération de la page PHP seul un des 2 blocs soit présent

@+
Sujet clos
Aller à