Positionnement de blocs et CSS

shenron76 · 11 Septembre 2005

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

dièse · 11 Septembre 2005

tu peux virer le "float: left" du div 02 et du div 03, ça suffira peut-être :unsure:

sinon tu mets ton div 04 en "float: right"

shenron76 · 11 Septembre 2005

lorsque j'enleve uniquement les float de 2 et 3: lien

lorsque en plus je met float: right; a 4: lien

... pourquoi 4 est il autant décalé alors que le tout est dans un body de largeur superieur a la largeur de 1+2+4

Dudu · 12 Septembre 2005

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 çà

shenron76 · 12 Septembre 2005

salut,

j'ai fais ce que tu as dis mais le resultat n'est pas mieux.

page html: page html

fichier css: le css

jeanpierre949 · 12 Septembre 2005

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é 12 Septembre 2005 par jeanpierre949

Connexion

Positionnement de blocs et CSS

Sujets conseillés

shenron76

dièse

shenron76

Dudu

shenron76

jeanpierre949

Veuillez vous connecter pour commenter

Parcourir

Activité