Aller au contenu

Deplacer corps a droite du menu


djodjo64

Sujets conseillés

Bonjour,

J'ai un soucis que je n'arrive pas à régler depuis ce matin : le corps ne veut pas se mettre à droite du menu.

J'ai pourtant mis le float:left, mais rien n'y fait.

Pouvez-vous me donner un petit coup de pouce, car j'ai beau tourner et retourner le problème, je ne vois pas d'où cela vient.

Je vous en remercie par avance.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Glory-hole.fr</title>
<link rel="stylesheet" media="screen" type="text/css" title="" href="style.css" />
</head>

<body>


<div id="header"><h1>mon site</h1></div>

<div id="menu_horizontal"><ul>
<li><a href="#1"><img src="images/puce.gif"/>titre1</a></li>
<li><a href="#2"><img src="images/puce.gif"/>titre2</a></li>
<li><a href="#3"><img src="images/puce.gif"/> titre3</a></li>
<li><a href="#4"><img src="images/puce.gif"/> titre4</a></li>
</ul>
<br style="clear:right"/>
</div>

<div id="conteneur">

<div id="sidebar">
<div class="menu">
<h3>MENU</h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">titre1</a></li>
<li><a href="#">titre2</a></li>
<li><a href="#">titre3</a></li>
</ul>
<div class="menu_bas"></div>
</div>
</div>
<div class="menu">
<h3>MENU</h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">titre1</a></li>
<li><a href="#">titre2</a></li>
<li><a href="#">titre3</a></li>
<li><a href="#">titre4</a></li>
</ul>
<div class="menu_bas"></div>
</div>

<div id="corps">
<div class="bloc_corps">
<h3>BIENVENU SUR MON SITE</h3>
<p>texte<br />
texte<br />
texte</p>
<div class="bloc_corps_bas"></div>
</div>

</div>

</div>
</body>

</html>

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

body
{
font-family: Verdana, Arial, "Times New Roman", Times, sans-serif;
background: url("images/fond.gif");
}

#header
{
background: url("images/header.gif");
width: 850px;
height: 129px;
margin-left:auto;
margin-right:auto;
}

h1
{
text-indent: -50000px;
}

#menu_horizontal
{
background: url("images/menu_horizontal.gif");
width: 850px;
height: 26px;
margin-left:auto;
margin-right:auto;
}


#menu_horizontal ul
{
margin: 0; padding: 0;
float: right;
margin-right: 15px;
}

#menu_horizontal ul li
{
display: inline;
}

#menu_horizontal ul li a
{
float: left;
text-decoration: none;
color: #F92BAB;
font-weight:bold;
padding: 6px 20px;
font-size: 13px;
}

a img
{
border: none;
}

#conteneur
{
background: url("images/contenu.gif");
width: 850px;
margin-left:auto;
margin-right:auto;
}

#sidebar
{
width: 169px;
float: left;
}

.menu h3
{
background:url("images/menu_haut.gif") no-repeat;
width: 169px;
height: 66px;
font-size:13px;
text-align:center;
font-weight:bold;
color:#FFF;
line-height:29px;
}

.menu ul
{
background:url("images/menu_centre.gif");
width: 169px;
background-repeat: repeat-y;
list-style-type: none;
padding-left: 40px;
font-size:13px;
font-weight:bold;
}

.menu ul li a
{
color: #F92BAB;
}

.menu_bas
{
background:url("images/menu_bas.gif");
width: 169px;
height: 71px;
}

#corps
{
width: 643px;
}

.bloc_corps h3
{
background:url("images/corps_haut.gif")no-repeat;
width: 643px;
height: 30px;
color:#FFF;
font-size:13px;
}

.bloc_corps p
{
background:url("images/corps_centre.gif");
width: 643px;
}

.bloc_corps_bas
{
background:url("images/corps_bas.gif");
width: 643px;
height: 85px;
}

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
×
×
  • Créer...