Problème de Div

Voilà, actuellement, je tente de développer mon premier design qui fonctionne avec des %.
J'ai actuellement un problème de positionnement que je n'arrive pas à résoudre, pourriez-vous y jeter un coup d'oeil ?

<!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" >
<head>
<title>Page Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/css.css" />
</head>
<body>
<div id="all">

<div id="header-inf"><div id="header"></div></div>


<div id="wrapper">

<div id="zone-gauche">

<div id="menu-gauche">
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
</div>
<div id="menu-gauche">
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
</div>
</div>

<div id="zone-droite">
<div id="espace-100">
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
</div>
<div id="espace-100">
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
<p>BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu BloBliBlu</p>
</div>
</div>
</div>


<div id="footer"></div>
</div>
</body>
</html>

body {
font-family: Verdana, Arial;
font-size: 10px;
color: white;
background-image: url("images/fond.gif");
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------- CSS -------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Cadres Généraux */
#all {
width: 100%-20px;
margin: 20px;
border: 1px solid #1b1b1b;
background-color: #262626;
}

#wrapper {
width: 100%;
border-top: 1px solid #1b1b1b;
border-bottom: 1px solid #1b1b1b;
}

#footer {
width: 100%;
height: 20px;
border-top: 1px solid #1b1b1b;
clear: both;
}

/* Header*/
#header {
width: 100%;
height: 175px;
border-bottom: 1px solid #1b1b1b;
background-image: url('header/header.png');
background-repeat: no-repeat;
}

#header-inf {
width: 100%;
height: 175px;
float: left;
background-image: url('header/header-inf.png');
background-repeat: repeat-x;
}

/* Zone Gauche */
#zone-gauche {
width: 220px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: left;
border-right: 1px solid #1b1b1b;
text-align: justify;
}

#menu-gauche {
width: 200px;
padding: 10px;
margin-top: 10px;
background-image: url('menu-gauche/background.png');
background-repeat: no-repeat;
background-color: black;
border: 1px solid #1b1b1b;
}

/* Zone Droite */
#zone-droite {
margin-left: 220px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 10px;
float: right;
}

#espace-100 {
margin-left: 220px;
padding: 10px;
margin-top: 10px;
background-image: url('menu-gauche/background.png');
background-repeat: no-repeat;
background-color: black;
border: 1px solid #1b1b1b;
}

Et pour finir, l'image qui montre mon problème :
<lien url=http://pix.nofrag.com/97/92/73a1a0f1f65e195ea8231c8d21c7.html> Image utilisateur

</lien>

PS : Bon désolé pour le lien, mais le zCode c'est pas mon truc, j'arrive pas a m'en servir.

Anonyme

15 juillet 2006 à 23:36:52

Pliskin

16 juillet 2006 à 1:10:52

Euh hum comment çàa se fait que t'ais deux id menu-gauche dans ton code ? :-°

16 juillet 2006 à 1:40:28

Bha, parce que j'ai deux menus.
Je sais je devrais faire une class, mais je préfère comme ça.
En tout cas, c'est pas ça qui pose le problème

mick3y

16 juillet 2006 à 5:49:12

Une ID ne s'utilise qu'une seule fois à l'inverse des class donc pourquoi ne pas utiliser ces derniers? o_O

16 juillet 2006 à 11:00:31

Voilà, j'ai mis des class. En fait j'avais pas mit ça au début car je pensais avoir besoin de class pour plus tard.

Enfin, bref, ça ne résous pas mon problème :s

Avec des %

Problème de Div

Supprimer

Modérer

Signaler le message aux modérateurs