[CSS] Bug de positionnement

Sujet résolu

26 février 2006 à 13:35:34

Salut tout le monde !
J'ai fais le design de mon site mais le problème c'est que mon div contenu ce met en bas de page alors qu'il devrait être à droite du menu.
J'ai mis un margin-left mais y'a rien à faire, çà ne marche pas.

C'est la première fois que cela m'arrive, car d'habitude çà marche du premier coup

Voilà mon code css :

body
{
width: 900px;
margin: auto;

font-size: small;
font-family: comic sans ms;

background-color: #ffffff;
}

#header
{
width: 900px;
height: 51px;
margin: auto;

background-image: url('header.png');
background-repeat: no-repeat;
}

#speedbarre
{
width: 900px;
height: 20px;
margin: auto;

font-size: 11pt;
font-family: verdana, arial;

background-image: url('speedbarre.png');
background-repeat: no-repeat;
}

#titre_menu_haut
{
width: 130px;
height: 23px;
margin-top: 38px;

font-size: 10pt;
font-family: comic sans ms;
color: #ffffff;
text-align: center;

background-image: url('fond_titre_menu.png');
background-repeat: no-repeat;
}

#titre_menu
{
width: 130px;
height: 23px;
margin-top: 20px;

font-size: 10pt;
font-family: comic sans ms;
color: #ffffff;
text-align: center;

background-image: url('fond_titre_menu.png');
background-repeat: no-repeat;
}

#menu
{
width: 130px;

font-size: 10pt;
font-family: comic sans ms;

background-image: url('fond_menu.png');
background-repeat: repeat-y;
}

#contenu
{
width: 686px;
margin-left: 185px;
border: 1px solid black;
font-size: small;
font-family: comic sans ms;
color: #000000;
}

et ma page HTML :

<!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>Exemple d'utilisation de CSS externe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="BluEsign" href="aidastyle.css" />
</head>
<body>
<div id="header"> </div>
<div id="speedbarre"> </div>
<div id="titre_menu_haut">Les cours</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_menu.png">

<div id="titre_menu">Communauté</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_menu.png">

<div id="titre_menu">Dernier menu</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_page.png"></div>

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

(pour les includes je verrais plus tard pas la peine de me le conseillé c'est juste des test là

)
et la page : http://www.aidawebmaster.com

Merci d'avance

pascall

26 février 2006 à 14:09:36

bonjour,
c'est quoi tous ces <br> t'as froid ? :lol:

je ne crois pas que ce soit une balise xhtml
si tu veux voici ici un lien sur un site qui donne toutes les balises xhtml.
sinon dans tes css on dirait que dans #contenu, ton margin-left est coloré bizarrement.
a plus.pascal

Sykka

26 février 2006 à 14:13:26

Lol,
nan comme je l'ai dis, c'est juste un test, donc comme je n'ai encore rien à mettre comme élèments dans le menu je mets des <br> (normalement je devrais mettre <br /> mais j'oublie tjrs mais bon le résultat et le même

) ce qui me permet de faire des retours à la ligne

.
Oui je trouve aussi qu'il est coloré bizzarment mais bon jvais regardé mais y'a pas 36 façons de l'écrire

jp949

26 février 2006 à 14:13:52

je crois que tu as oublié de mettre un float sur #menu ou #contenu

Sykka

26 février 2006 à 14:23:34

J'ai essayé de mettre un float, sur les trucs menu vaut mieux pas y pensé çà donne des choses horribles :lol:

Par contre sur contenu çà ne change rien du tout.

pascall

26 février 2006 à 14:46:09

essaie d'effacer de margin-left et de le resaisir voir s'il y a un changement de couleur, sinon resaisi le paragraphe de #contenu en entier pour voir

Sykka

26 février 2006 à 14:52:44

Ok, mais je crois que çà a quelque chose avoir avec les margin-top des menus
[Edit] : sans succés :'(

Abel

26 février 2006 à 14:57:59

Essaye de mettre le "contenu" avant le menu!

Je sais pas si ça va changer grand chose mais ce n'est qu'une proposition!

Sykka

26 février 2006 à 15:01:19

Voilà j'ai essayé c'est pas mieux mais là c'est placé en haut :s
J'ai laissé vous pouvez aller voir le résultat

pascall

26 février 2006 à 15:06:02

oui mais où ?

Sykka

26 février 2006 à 15:08:46

Ben toujours au même endroit :
http://www.aidawebmaster.com

Abel

26 février 2006 à 15:09:35

Alors là... Tu veux le mettre juste avant le menu à gauche?

Sykka

26 février 2006 à 15:11:15

Nan, je veux le placer à droite du menu.
Ben un peu comme le sdz

Abel

26 février 2006 à 15:17:39

Alors, met le juste après le "menu"!

Sykka

26 février 2006 à 15:28:17

Marche pas
Le mieux je vais faire un nouveau design

pascall

26 février 2006 à 16:08:02

j'ai fait un truc
j'ai créé une div class menu :

<div class="menu">
<div id="titre_menu_haut">Les cours</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_menu.png">

<div id="titre_menu">Communauté</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_menu.png">

<div id="titre_menu">Dernier menu</div>
<div id="menu"><br><br><br><br><br></div>
<img src="bas_page.png"></div>

et dans les css

#contenu
{
width: 686px;
margin-left:185px;
border: 1px solid black;
font-size: small;
font-family: comic sans ms;
color: #000000;
margin-top:100px;
padding:10px;
}
.menu
{
margin-top:100px;
float:left;
}

ce qui place ton contenu à droite.
dans contenu et menu j'ai mis des margin top de x px mais là c'est à toi de voir.
voilà c'est une piste.
pascal

Sykka

26 février 2006 à 16:18:59

Mille fois merci !!!!

T'as résolu mon problème merci !!
** Trop content **