Problème de "base" mais bloquant

Question

PatrickDuSud

18 Oct 2006 à 23:19

Bonjour,

Petit nouveau je me permets d'expliquer rapidement mon problème, sachant que vous devez déjà avoir eu ce genre de message.

Soit un DIV contener d'une largeur X, centré dans une page.
Jusque là pas vraiment de souci.

body {
	margin: 0;
}

div#container {
	margin-left: auto;
	margin-right: auto;
	width: 955px;
	border: 1px dotted white;
}

A l'intérieur, plusieurs DIV.
1 qui va servir pour le contenu du texte et sur la droite, plusieurs petits DIV.

Pour le 1er, on peut le positionner de diverses manière... mais pour les autres, je me retrouve systématiquement avec un retour à la ligne, hors ils seront plus ou moins à la même hauteur.

Auriez vous une idée, car je ne m'en sors pas avec les margin etc. Tout par en "sucette" à un moment ou à un autre Smiley decu

Pour info, le code doit être fonctionnel pour IE6 minimum et FF.

Merci par avance.

PS : J'ai testé le "tuto" avec les 3 blocs côte à côte mais dès que j'applique des margin-left, notamment sur le 1er bloc, j'ai plus rien qui ne va, les pixels ne sont plus gérés pareil entre IE et FF...

Pour récapituler :
1) 1 DIV contener centré sur la page.
2) 1 DIV à X pixel du bord du DIV contener.
3) D'autres DIV à côté du 2e DIV.

Merci

PatrickDuSud

18 Oct 2006 à 23:36

Tuto du NET, que j'ai limité à 2 blocs.
Sous IE, à cause du float: left, on a un décalage plus important entre le contener et le 1er bloc.
Si on l'enlève, le 2e bloc passe à la ligne Smiley decu

.bloc1 {
background-color: blue;
height: 50px;
width: 660px;
margin-left: 50px;
[#red]float: left;[/#]
}

.bloc2 {
background-color: green;
height: 50px;
width: 130px;
float: left;
margin-left: 20px;
}

Sur la page HTML :

<div id="container">
<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>
</div>

Modifié par PatrickDuSud (18 Oct 2006 - 23:37)

PatrickDuSud

18 Oct 2006 à 23:53

Bon j'ai contourné le problème en mettant un bloc devant le 1er bloc pour jouer le rôle de marge mais je ne trouve pas ca propre Smiley decu

Si quelqu'un a une idée, je suis vraiment preneur.

Bonne soirée.

fvsch

18 Oct 2006 à 23:55

Rapidement en passant : faire une recherche sur le « doubled margin bug ».

PatrickDuSud

18 Oct 2006 à 23:58

mpop a écrit :
Rapidement en passant : faire une recherche sur le « doubled margin bug ».

OK, je vais regarder de ce côté là... Smiley smile

Si entre temps, tu vois une autre solution, je suis là Smiley cligne

ghost

19 Oct 2006 à 00:11

Bonjour,

Dans l'absolu avec ton code d'origine tente ...


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
			
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <title>test</title> 

<style type="text/css">
#conteneur{
width: 790px;
margin: auto;
}

.bloc1 {
background-color: blue;
height: 50px;
width: 660px;
float: left;

}

.bloc2 {
float: right;
background-color: green;
height: 50px;
width: 130px;
}

</style>
</head>

<body>
<div id="conteneur">

<div class="bloc1">bla bla bla</div>
<div class="bloc2">bli bli bli</div>

</div>

</body>

Mais en cas de borders sur tes blocs faudra revoir les largeurs ...

PatrickDuSud

19 Oct 2006 à 00:38

Je vois ce que tu veux faire (sorte d'alignement à gauche pour le 1er et droite pour le 2e) mais au niveau de mon DIV contener, j'ai un LOGO vertical en fond, d'où mon décalage du "bloc1".

Petite apparté bizarroïde mais peut être normale :
Si je fais afficher la bordure du contener, j'ai mes 2 blocs à l'intérieur sous IE mais pas sous FF Smiley ohwell

Avec des tableaux la solution était toute simple mais pas assez souple Smiley decu

PatrickDuSud

19 Oct 2006 à 00:40

Je viens d'ailleurs de m'appercevoir, que comme sous FF les blocs ne semblaient pas dans le contener, je me retrouve avec un contener de 0 pixel de haut, et donc par conséquant on ne voit pas mon logo de fond... Smiley confus

ghost

19 Oct 2006 à 00:49

Re,

C'est dur de comprendre sans exemple en ligne ...

Pour que ton bloc conteneur suive son contenu une des solutions sous FF est de rajouter overflow: hidden; à ton bloc

PatrickDuSud

19 Oct 2006 à 00:49

En gros, voici la structure "bidon" que je souhaite appliquer :
- Contener centré dans la page, LOGO en fond du contener.
- Bloc 1, mobile dans le contener, avec lui aussi un fond particulier + bordures
- Bloc 2, surement un contener pour 2 3 autres DIV.

http://img483.imageshack.us/my.php?image=dispositionod8.jpg

PS : Ne pas comtempler ce schéma de toute beauté Smiley cligne

Modifié par PatrickDuSud (19 Oct 2006 - 00:50)

PatrickDuSud

19 Oct 2006 à 00:51

ghost a écrit :
Re,

C'est dur de comprendre sans exemple en ligne ...

Pour que ton bloc conteneur suive son contenu une des solutions sous FF est de rajouter overflow: hidden; à ton bloc

Je viens d'uploader le schéma de la structure que je souhaite mettre en place Smiley smile

PatrickDuSud

19 Oct 2006 à 00:54

Je m'appercois que vouloir centrer mon contener pose pas mal de soucis que l'on ne remarque pas quand le site est bêtement plaqué en haut à gauche Smiley ohwell

ghost

19 Oct 2006 à 01:31

Re,

En essayant de comprendre ce que tu voulais ... Si ça t'inspire


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

			

<head> 

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

   <title>test</title> 



<style type="text/css">



#conteneur {



margin:0 auto 0 auto;
width:500px;
overflow:hidden;
background-color: #35ffee;

}


#gauche {

width:100px;
height: 157px;
float:left;
padding: 0;
background: url(image 100x157.jpg);


}

#centre {

width:200px;
margin-left: 120px;
padding: 0;
border: 3px solid #968d00;
background-color: #fffbb3;
margin-top: 50px;

}


#droite { 

float: right;
width:140px;
padding: 0;
margin-top: 75px;
margin-right: 10px;
background-color: #daffc6;
}

.bloc_droite { 
width:130px;
margin: auto;
margin-bottom: 10px;
background-color: #b3feff;
}

.stop_float{
clear: both;
}

</style>

</head>



<body>


<div id="conteneur">






  <div id="gauche">

</div>
 
<div id="droite">
 <div class="bloc_droite"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a urna et turpis facilisis elementum. Duis sed nibh nonummy dolor laoreet feugiat.
</p>
 </div>

 <div class="bloc_droite"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a urna et turpis facilisis elementum. Duis sed nibh nonummy dolor laoreet feugiat.
</p>
 </div>

 <div class="bloc_droite"> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a urna et turpis facilisis elementum. Duis sed nibh nonummy dolor laoreet feugiat.
</p>
 </div>

</div>

<div id="centre">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a urna et turpis facilisis elementum. Duis sed nibh nonummy dolor laoreet feugiat. Nam ornare ligula eu nunc. Morbi tellus. Sed ultrices. Donec dapibus luctus massa. Pellentesque quis sapien eget purus gravida luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ac nisi. Mauris est mi, viverra at, ornare eget, condimentum quis, nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam auctor quam non odio. Aliquam consequat ante ut nisl. Fusce purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam iaculis. In elit
</p> 
</div> 

<p class="stop_float"></p>
<p style="text-align: center"> Fin du float</>

</div>








</div>





</body>

PatrickDuSud

20 Oct 2006 à 13:28

Hello,

Merci, c'est exactement ca.
Bon je ne comprends pas trop ce qui s'est passé avant mais ce n'était pas si compliqué. La prochaine fois, je réfléchirais avant de POSTER...

Bon je n'ai plus qu'à reconstituer ma page. MERCI Smiley smile

Sujet clos

CSS et mise en forme, CSS3

Problème de "base" mais bloquant