28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de float

Pages :
Bonjour,

voici un schema :

http://img222.imageshack.us/img222/2131/schema8da.gif

J'ai un bloc 1 avec une image de fond, dans ce bloc 1 je voudrais potionner un bloc 2 avec une certaine marge par rapoport à la bordure suprerieur de bloc 1 et à une certaine marge de la bordure gauche du bloc1.

Je voudrais aussi que le bloc 3 soit à coter du bloc 2 juste à 20px d'ecart.

Comment potionner tout ca ?

Car j'ai essayé avec les float et impossible, en mettant des margin, des padding ca ne marche pas non plus.

Peut etre faut il un autre potionnement ? relative, absolu ?

Je ne m'y connais pas trop en tout.

Merci d'avance
Modifié par Snoopy17 (16 Jan 2006 - 13:18)
Bonjour,
non les flottant ne sont pas idéal je pense dans ce cas.
Pas de postionnement mais simplement des marges (top et left) et un width pour ton premier div. et pour ton 2ieme div tu as le choix entre un positionnement absolue et ou non positionné mais avec marge top negative.

Mais là encore tout dépend de ce que tu veux faire de tous tes blocs...
Modifié par Hermann (09 Jan 2006 - 12:49)
Merci de te réponse je vais essayé de coderca en position absolue et je re demanderais de m'aide si besoin Smiley smile
Je me permes de reposter car je n'y arrive vraiment pas Smiley decu

L'image qui se trouve ci-dessus je veux que elle soit dans un div en image de fond, donc pour ca aucun probleme.

Je voudrais ecrire dans les bloc 1 et les bloc 2 ! Donc ce que j'ai pensé c'est creer des blocs codés en css qui seront potionnés au dessus des blocs qui sont dans l'image.

Mais je n'y arrive pas ! si je positionne en absolue il y a un décalage sous IE enfin une vrai galere.

De plus le positionnement en absolue marche pas avec une resolution inferieur à la mienne c'est a dire que si je test en 800*600 c'est du n'importe quoi ... Smiley decu

Merci d'avance
Je viens de faire un petit test et j'arrive à ça qui à l'air de marcher.

css
* { padding: 0;	margin: 0; }
	
#bloc1	{
	width: 400px;
	height: 200px;
	border: 1px solid red;
	}

#bloc2	{
	float: left;
	width: 50px;
	height: 50px;
	margin: 10px 0px 0px 10px;
	border: 1px solid gray;
	}
	
#bloc3	{
	width: 50px;
	height: 50px;
	margin: 10px 0px 0px 15px;
	border: 1px solid yellow;
	}


et code
<body>
<div id="bloc1">
	<div id="bloc2">
		<p>bloc2</p>
	</div>
	<div id="bloc3">
		<p>bloc3</p>
	</div>
</div>
</body>


Smiley smile
Bonjour,

Je viens de tester et cela ne marche pas si j'enleve les bordures ! plus exactement si j'enleve la bordure du bloc 1 ! Smiley decu

Aparament sans la bordure du haut du bloc1 ca ne marche pas et je ne sais vraiment pas pourquoi Smiley decu

merci de votre aide
Modifié par Snoopy17 (11 Jan 2006 - 14:08)
avec ton exemple ou avec le mien.

Parce que je bviens de tester sur le mien en mettant une image en fond de bloc1 et sans bordure.

pas de soucis Smiley biggrin
le tien justement !

Si je mes aucunes bordures au #bloc1 le #bloc3 est decallé bizarre =/

voila le code css :

* { padding: 0;	margin: 0; }

#bloc2 {
float:left;
height:55px;
width:100px;
color:#FFFFFF;
margin: 10px 0px 0px 10px;
border: 1px solid yellow;
}

#bloc1 {
height:82px;
width:780px;
}

#bloc3 {
border: 1px solid yellow;
height:55px;
width:75px;
color:#FFFFFF;
margin: 10px 0px 0px 80px;
}


Et le xhtml est :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="bloc1">

	<!-- le premier bloc gris du header -->
	<div id="bloc2">
	<p>Texte </p>
	</div>	
	
	<div id="bloc3">
	<p>Texte </p>
	</div>
	
</div>

</body>
</html>


Merci de ton aide
Modifié par Snoopy17 (11 Jan 2006 - 15:05)
c'est bizarre je n'ai aucun soucis je suis au bureau sous IE 6 et je peux tester ce soir chez moi sous FF si tu veux

Voilà ton exemple en image avec un background gris

upload/830-PblSnoopy17.jpg
Un problème similaire qui pourra nous aider à avancer :

mon XHTML :

<div id="mainBlock">
   <div id="subBlock"><img src="photo1.jpg" /></div>
   <div id="subBlock"><img src="photo2.jpg" /></div>
   <div id="subBlock"><img src="photo3.jpg" /></div>
   <div id="subBlock"><img src="photo4.jpg" /></div>
</div>


mon CSS :

#mainBlock{
	border: 1px solid #F00;
}

#subBlock{
	float: left;
        margin: 5px;
}


Ce qui nous donne sous IE comme sous FF :
upload/4393-illu1.jpg

Par contre, si je change mon css en ajoutant

#mainBlock{
	border: 1px solid #F00;
        height: 1px; // un minimum est nécessaire sous IE
}


alors sous IE, le mainBlock s'adapte automatiquement à son contenu, à savoir les 4 subBlock :
upload/4393-illu2.jpg


Mon objectif serait donc de savoir comment faire pour que ça fasse la même chose sous FF, à savoir que le conteneur mainBlock s'adapte automatiquement à la taille de ses contenus subBlock qui sont en float: left...

Merci pour vos aides Smiley smile
Tu dois mettre un élément avec clear: both. habituellement, on mets une barre (hr).
Cette technique permet de s'assurer que le bloc mainBlock comprendra tout les éléments .
OK !!! pardon !!
ça marche Smiley smile merci !

j'ai ajouté :

<div id="mainBlock">
   <div id="subBlock"><img src="photo1.jpg" /></div>
   <div id="subBlock"><img src="photo2.jpg" /></div>
   <div id="subBlock"><img src="photo3.jpg" /></div>
   <div id="subBlock"><img src="photo4.jpg" /></div>
   <hr class="spacer" />
</div>


où la classe spacer est :

.spacer {
    clear: both;
}


en gros, suffit de se servir du faq du site Smiley langue

merci !
Bon revenons à mon problème Smiley langue

j'ai réussi à aligner le bloc3 sur la meme ligne que le bloc2 en rajoutant un float:left au bloc3 ce qui donne ceci

Mais le problème c'est qu'il y a un plus grand espace entre les 2 blocs sur IE Smiley decu

Comment regler ce problème ?

Merci d'avance
Snoopy17 a écrit :
Personne ne peut m'aider ?

En fait je ne vois pas où il peut y avoir un problème. Un plus grand écart dans IE que dans Firefox ? Vu le CSS présenté, j'ai du mal à voir comment, et je n'ai pas IE sous la main.

Tu pourrais à la rigueur faire des captures d'écran pour que l'on voie la différence de rendu...
si entre les blocs jaunes sous IE l'espace est plus grand, je veux dire par la que un plus grand espace separe les 2 blocs sous IE que sous FF !

C'est NET quand on regarde

Merci d'avance
Pages :
Sujet clos
Aller à