28220 sujets

CSS et mise en forme, CSS3

[Résolu]Positionnement des blocs <div> + pb selon navigateurs

Bonjour,

Je débute avec le CSS et j'avoue avoir quelques difficultés avec le positionnement des blocs <div>. Je m'entraîne donc sur un exemple simple.
Pour le positionnement absolu, j'y arrive sans problème.

upload/1731-stitch.JPG

http://tests.guduszeit.com/stitch.html

Code HTML :

<html>
	<head>
		<title>Stitch</title>
		<link rel="stylesheet" type="text/css" href="script/style.css">
	</head>
	<body>
		<div id="cadre">
			<img class="stitch01" src="images/stitch01.gif" alt="Stich01" title="Stich01" />
			<img class="stitch02" src="images/stitch02.gif" alt="Stich02" title="Stich02" />
			<img class="stitch03" src="images/stitch03.gif" alt="Stich03" title="Stich03" />
			<img class="stitch04" src="images/stitch04.gif" alt="Stich04" title="Stich04" />
			<img class="stitch05" src="images/stitch05.gif" alt="Stich05" title="Stich05" />
			<img class="stitch06" src="images/stitch06.gif" alt="Stich06" title="Stich06" />
			<img class="stitch07" src="images/stitch07.gif" alt="Stich07" title="Stich07" />
			<img class="stitch08" src="images/stitch08.gif" alt="Stich08" title="Stich08" />
			<img class="stitch09" src="images/stitch09.gif" alt="Stich09" title="Stich09" />
		</div>
	</body>
</html>


Code CSS :

body
{
	margin: 0px;
	padding: 0px;
}

#cadre
{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	width: 539px;
	height: 539px;
	border: 3px #FF0000 solid;
	background-color: #DDDDDD;
}

.stitch01
{
	position: absolute;
	left: 5px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch02
{
	position: absolute;
	left: 183px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch03
{
	position: absolute;
	left: 361px;
	top: 5px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch04
{
	position: absolute;
	left: 5px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch05
{
	position: absolute;
	left: 183px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch06
{
	position: absolute;
	left: 361px;
	top: 183px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch07
{
	position: absolute;
	left: 5px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch08
{
	position: absolute;
	left: 183px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}

.stitch09
{
	position: absolute;
	left: 361px;
	top: 361px;
	width: 171px;
	height: 171px;
	border: 1px #0000FF solid;
}


J'aimerais avoir la même chose avec des positionnements en relatif, également avec des flottants pour comparer. Mais je n'y arrive pas. Si vous pouvez me donner le CSS correspondant, je vous serais reconnaissant.

Autre problème : la compabilité entre navigateurs.
J'ai remarqué que FF et IE avaient pas mal de différences de rendu avec du CSS. Pour exemple sous FF le cadre est centré alors que sous IE, il est aligné à gauche.
Autre problème plus génant, les bordures. Sous FF, les bordures sont toujours en dehors de la taille spécifiée dans le CSS (<div> et <img>) alors que sous IE la bordure des images se trouve à l'extérieur et pour la balise <div> la bordure se trouve à l'intérieur (sous FF elle se trouve à l'extérieur).

Voilà, ces différences posent parfois problème.

Je vous remercie d'avance pour votre aide.
Modifié par Trunks_ (07 Dec 2005 - 08:19)
Bonsoir

Est-ce que celà peut être une piste ?


<!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" xml:lang="fr" lang="fr">
<head>
<title>Stitch</title>
<link rel="stylesheet" type="text/css" href="stitch_fichiers/style.css" />
</head>
<body>
<div class="cadre">
<div class="bloc01">
<img class="serie01"  src="stitch_fichiers/stitch01.gif" alt="Stich01" title="Stich01" />
<img class="serie02"  src="stitch_fichiers/stitch02.gif" alt="Stich02" title="Stich02" />
<img class="serie03"  src="stitch_fichiers/stitch03.gif" alt="Stich03" title="Stich03" />
</div>
<div>
<img class="serie01"  src="stitch_fichiers/stitch04.gif" alt="Stich04" title="Stich04" />
<img class="serie02"  src="stitch_fichiers/stitch05.gif" alt="Stich05" title="Stich05" />
<img class="serie03"  src="stitch_fichiers/stitch06.gif" alt="Stich06" title="Stich06" />
</div>
<div>
<img class="serie01"  src="stitch_fichiers/stitch07.gif" alt="Stich07" title="Stich07" />
<img class="serie02"  src="stitch_fichiers/stitch08.gif" alt="Stich08" title="Stich08" />
<img class="serie03"  src="stitch_fichiers/stitch09.gif" alt="Stich09" title="Stich09" />
</div>
</div>
</body>
</html>




.cadre{
	width:530px;
	border:1px solid #000000;
	margin:0 auto 0 auto;
}

.serie01{margin:0 0 0 4px;}
.serie02{margin:0 0 0 0;}
.serie03{margin:0 0 0 0;}

.bloc01{margin:4px 0 0 0;}

body{
	margin:0;
	padding:0;
	background-color: #cccccc;
}

img{
	width: 171px;
	height: 171px;
	margin:0 0 0 0;
	padding:0 0 0 0;
}


@+ Smiley cligne
Sujet clos
Aller à