28220 sujets

CSS et mise en forme, CSS3

une enchainement tout simple : un bloc (qui contiens une image) en float: left, et un cadre qui doit, en restant dans le flux a priori, se caller a droite :

<body id="menu1">
				<div id="pano">
					<img id="big-pict" src="sites/antioche/pano_1.jpg" alt="Photo en taille normale" />
				</div><!-- fin pano -->
				<div id="menusite">
					test
				</div><!-- fin menu site -->
</body>


mon code CSS :

html {margin:0; padding:0;}
p {margin:0; padding:0;}

body {
		margin: 0;
		padding: 0;
		color: #000;
		background-color: #DEDEDE;
		text-align: center;
		color:white;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 65%;
	}

#big-pict { margin:0 0 0 0; padding:0 0 0 0; }
#pano {	float:left; width:468px; padding:0 0 0 0; margin:0 0 0 0; border:1px solid white;}
#menusite {overflow: auto; height:186px; text-align:left; background-color: #2E3852; border:1px solid white;}


tout marche bien, mais IE me rajoute une marge entre les deux bloc. J'ai essayé de mettre toutes les marges et tous les padding a zero sans résultats ...

seul succés : mettre une marge négative ... c'est pas trés carré je pense Smiley smile upload/1174-Clip3.jpg
Modifié par tancrede (09 Aug 2005 - 12:11)
ok. Je viens de lire l'article a propos de ce hack

/* Hides from IE5-mac \*/
* html .menusite {height: 1%;}
/* End hide from IE5-mac */


le truc c'est que moi, mes boites sont toutes dimentionnées : le flottant l'est en largeur, et celui dans le flux l'est en hauteur ... du coup je ne suis plus trop sur de moi Smiley smile
je vais utiliser ça :

/* Hides from IE5-mac \*/
* html #pano {margin-right: -3px;}
/* End hide from IE5-mac */

qui marche bien,