Aller au contenu

Positionnement de blocs et CSS

shenron76

Par shenron76
dans (X)HTML et CSS

 Partager

Sujets conseillés

shenron76

shenron76

Posté
Posté

Bonjour,

En fait je voudrais obtenir ce resultat : lien

J'ai donc créé une page html :

<div id="01">
</div>

<div id="02et03">
	<div id="02">
	</div>

	<div id="03">
	</div>
</div>

	<div id="04">
	</div>

et le fichier css qui correspond:

#01
{
width: 176px;
height: 95px;
float: left;
background-repeat: no-repeat;
border: 1px solid black;
}

#02et03
{
width: 411px;
height: 95px;
float: left;
border: 1px solid black;
position: absolute;
}

#02
{
width: 411px;
height: 20px;
float: left;
background-repeat: no-repeat;
border: 1px solid black;
}

#03
{
width: 411px;
height: 75px;
float: left;
background-repeat: no-repeat;
border: 1px solid black;
}

#04
{
width: 179px;
height: 95px;
float: left;
background-repeat: no-repeat;
border: 1px solid black;
}

Le probleme est que le resultat obtenu est le suivant: lien

Comment faire ?

Merci d'avance

ps: mes dimansion indiquée sont bonnes et le tout est contenu dans un body de 800px de large

Lien vers le commentaire
Partager sur d’autres sites
Dudu

Dudu

Posté
Posté

Salut

Normalement ceci devrait marcher 

#01, #02et03, #02, #03, #04 {border:1px solid #000; float:left; width:411px;}
#01, #02et03, 04 {height:95px;}
#01 {width: 176px;}
#02 {height: 20px;}
#03 {height: 75px;}
#04 {width: 179px; float:none; clear:both;}

À ce propos c'eût été plus simple de nous filer un lien vers une page HTML qu'une image JPG ;)

Dernier point: il n'est pas permis normalement de faire commencer le nom d'un id par un chiffre. Il est donc possible que certains navigateurs n'affichent pas ton exemple, tu devrais modifier çà B)

Lien vers le commentaire
Partager sur d’autres sites
jeanpierre949

jeanpierre949

Posté
Posté (modifié)

Salut. avec ce code css et htm j'ai affichage parfait

<style type="text/css">
<!--
body {height: auto; width: 800px; margin-top: 5px; margin-right: auto;
margin-bottom: auto; margin-left: auto;border: thin solid #000000;}
#gauche {background-color: #0066FF; margin: auto; height: 300px;
width: 176px;
float: left;}
#centro {background-color: #CC0000; margin: auto auto 5px; height: 150px;
width: 411px;}
#centrbas {background-color: #FFCCFF; margin: 5px auto auto; height: 150px; width: 411px;}
#droite {background-color: #FF9900; margin: auto;height: 300px;
width: 176px; float: right;}
-->
</style>
</head>
<body>
<div id="droite"></div>
<div id="gauche"></div>
<div id="centro"></div>
<div id="centrbas"></div>
</body>
</html>

Modifié par jeanpierre949
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...