Bonjour tout le monde
Voila en fait j'ai un problême de design :
J'aimerai mettre un menu de naviguation sur la gauche et le contenu du site à droite, pour cela j'ai utilisé float: left; et float: right; pour qu'ils soit placés à gauche et à droite et à côté (pour pas qu'il y en ai un à gauche et un autre à droite mais en dessous ) et voila ce que ça donne (avec FireFox, je vous montrerai la bizarerie que ça donne avec Internet ):
http://img214.imageshack.us/img214/3176/imgsdz1pv.png
Et sur Internet ça donne :
http://img394.imageshack.us/img394/2112/imgsdz3ja.png
Et le code de la page index + le CSS
Index.php (Oui je vais le faire en php, mais ici je met le code en HTML car sinon ça ne servirai à rien )


Design.css

Salut,

Ton code, c'est pour faire un design pour le site du zéro ?

Euh non pourquoi?

Ben ...

Parce que c'est fou comme ça ressemble comme deux gouttes d'eau à celui du site du zéro......

le seul truc ki ressemble c le menu, un bête menu en pointillé

Up aidez moi SVP

Bonjour

j'ai le même problème d'affichage (que celui qui est représenté sur internet)
J'ai pourtant scrupuleusement suivi le didacticiel de m@teo21
-rubrique : créons le design - CSS - le corps - modif de la marge à gauche

j'ai même inversé Menu et Corps en Corps et Menu
j'ai tout recommencé 2 fois () rien n'y fait

resultat sur internet

http://www.croq.name/accueil.html

je crois que répondre à mon petit camarade - ZeroCool - c'est me répondre aussi et je vous en remercie par avance

cordialement

Papiray

Pour toi Papiray, il n'y a nornalement pas de problême parce que tu n'as pas de bordure autour de ton corps et deton menus, nornalement avec un menu float:left; et un corps: right ça devrait aller, moi c'est juste que ça ne passe pas dans la bordure

Edit: C'est bon j'ai mis plusieurs "<br>" avant le dernier </div> et ça faisait descendre le #global , sinon il n'y a pas une autre façon?

ça ne marche toujours pas

et voili-voilou le code CSS utilisé

/* humbecourt css - par Papiray - fichiers créés le 12/02/2006
modifiés le 01/03/2006 pour entamer la création finale de la BEC*/

body
{
width:750px;
margin:auto;/*pour centrer la page*/
margin-top:20px;/*pour éviter de coller avec le haut de la fenêtre du navigateur*/
margin-bottom:20px;
background-image:url('img/fondgrisfonce.gif');/* une image de fond pour éviter un fond blanc*/
}

/*les ID*/
/* L'en tête*/

#en_tete
{
width:750px;
height:100px;
background-image:url('img/banniere.jpg');
background-repeat:no-repeat;
margin:auto;/*pour centrer la page*/
margin-bottom:5px;
}


/*le menu*/

#menu
{
float:left;/*le menu flottera à gauche*/
width:120px;/*tres important: donner une taille au menu*/
}

/*le corps de la page*/

#corps
{
width:600px;
margin-left:135px;/*on modifie la marge de gauche pour le repousser afin qu'il ne passe plus sous le menu*/
margin-bottom:10px;/*(même chose - on ne modifie que margin-bottom, toutes les autres sont à 0px*/
padding:10px;/*pour eviter que le texte à l'interieur du corps ne colle trop à la bordure*/
background-image:url('img/fondgrisbleu.gif');
border:1px solid black;/*une bordure pour marquer les limites du corps et faire joli*/
}

#pied_de_page
{
width:750px;
font-family:Comic Sans Ms;
color: #FFFFFF;
margin:auto;/*pour centrer la page*/
text-align:center;
}

/*les CLASS*/

.element_menu
{
background-color:#64b692;
background-repeat:repeat-x;
border:1px solid black;
margin-bottom:5px/*pour eviter que les elements du menu soient collés*/
}

/*quelques effets sur les menus*/

.element_menu h3/*tous les titres de menus*/
{
color:blue;
font-family:Comic Sans Ms;
text-align:center;
}

/*LES liens*/
.element_menu
a/*toutes les liens dans un menu*/
{
color:blue;
font-family:Comic Sans Ms;
text-align:left;
}

.element_menu
a:hover/*quand on pointe sur un lien dans un menu*/
{
color:white;
}

.element_menu
ul/*tous les titres de menus*/

{
padding:0px;/*tous les cotés ont une marge intérieure de 0 pixel*/
padding-left:20px;/*mais on modifie la marge de gauche*/
margin:0px;/*idem pour margin, ça nous évite d'avoir à en écrire 4(margin-left, margin-right,...)*/
margin-bottom:5px;/*même chose - on ne modifie que margin-bottom, toutes les autres sont à 0px*/
}

/*LES titres et les CONTENUS*/

h1
{
font-family:Comic Sans Ms;
text-align:center;
color: #262626;
}
h2
{
font-family: Comic Sans Ms;

color: #262626;
clip: rect(0px,auto,auto,auto);
margin: 3px;
top: 0px;
left: 10px;
right: 0px;
bottom: 0px;
font-weight: normal;
padding: 0px;
}

p
{
font-family:Comic Sans Ms;
font-size: em;
color: #626262;
text-decoration: none;
text-indent:10px;
margin: 0px;
padding: 0px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
clip: rect(1px,auto,auto,auto);
}

pa
{
color:white;
}

je ne suis pa

http://css.maxdesign.com.au/floatutorial/

Papiray à ton corps tu dois mettre float: right;

as tu essayé d'enlever le float:right et le width à ton corps et les remplacer par un margin-left de 170 ou 180px ?

Bonjour et merci pour vos conseils

Pour Djeepy - je suis désolé mais je ne parle pas et ne comprend pas l'anglais
c'est dommage car le tutorial semble riche (et même très riche)
existe t il un équivalent en français ? je suis preneur

j'ai réglé une partie de mon problème en inversant le corps et le menu

ça fonctionne parfaitement sous Mozilla
mais pas sous IE

les codes modifiés

CSS

body
{
width:750px;
margin:auto;/*pour centrer la page*/
margin-top:20px;/*pour éviter de coller avec le haut de la fenêtre du navigateur*/
margin-bottom:20px;/*pour éviter de coller avec le bas de la fenêtre du navigateur*/
background-image:url('img/fondgrisfonce.gif');/* une image de fond pour éviter un fond blanc*/
}

/*les ID*/
/* L'en tête*/

#en_tete
{
width:750px;
height:100px;
background-image:url('img/banniere.jpg');
background-repeat:no-repeat;
margin:auto;/*pour centrer la page*/
margin-bottom:5px;
}

/*le corps de la page*/

#corps
{
float:left;/*le menu flottera à gauche*/
width:600px;
margin-bottom:10px;/*(même chose - on ne modifie que margin-bottom, toutes les autres sont à 0px*/
padding:10px;/*pour eviter que le texte à l'interieur du corps ne colle trop à la bordure*/
background-image:url('img/fondgrisbleu.gif');
border:1px solid black;/*une bordure pour marquer les limites du corps et faire joli*/
}

/*le menu*/

#menu
{
width:120px;/*tres important: donner une taille au menu*/
margin-left:630px;/*on modifie la marge de gauche pour le repousser afin qu'il ne passe plus sous le corps*/
}

#pied_de_page
{
/*width:750px;*/
font-family:Comic Sans Ms;
color: #FFFFFF;
margin:auto;/*pour centrer la page*/
text-align:center;
}

/*les CLASS*/

.element_menu
{
background-color:#64b692;
background-repeat:repeat-x;
border:1px solid black;
margin-bottom:5px/*pour eviter que les elements du menu soient collés*/
}

/*quelques effets sur les menus*/

.element_menu h3/*tous les titres de menus*/
{
color:blue;
font-family:Comic Sans Ms;
text-align:center;
}

/*LES liens*/
.element_menu
a/*toutes les liens dans un menu*/
{
color:blue;
font-family:Comic Sans Ms;
text-align:left;
}

.element_menu
a:hover/*quand on pointe sur un lien dans un menu*/
{
color:white;
}

.element_menu
ul/*tous les titres de menus*/

{
padding:0px;/*tous les cotés ont une marge intérieure de 0 pixel*/
padding-left:20px;/*mais on modifie la marge de gauche*/
margin:0px;/*idem pour margin, ça nous évite d'avoir à en écrire 4(margin-left, margin-right,...)*/
margin-bottom:5px;/*même chose - on ne modifie que margin-bottom, toutes les autres sont à 0px*/
}

/*LES titres et les CONTENUS*/

h1
{
font-family:Comic Sans Ms;
text-align:center;
color: #262626;
}
h2
{
font-family: Comic Sans Ms;

color: #262626;
clip: rect(0px,auto,auto,auto);
margin: 3px;
top: 0px;
left: 10px;
right: 0px;
bottom: 0px;
font-weight: bold;
padding: 0px;
}

p
{
font-family:Comic Sans Ms;
font-size: em;
color: #626262;
text-decoration: none;
text-indent:20px;
margin: 0px;
padding: 0px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
clip: rect(1px,auto,auto,auto);
}

pa
{
color:white;
}
et 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>Base Eco Citoyenne - Croq nature et Croq vacances - Humbécourt (52)</title>
<meta name="creator" content="Papiray">
<meta name="subject" content="Base Eco Citoyenne - Croq nature et Croq vacances - Humbécourt (52)">
<meta name="keywords" content="Base Eco Citoyenne - Croq nature et Croq vacances - Humbécourt (52)">
<meta name="description" content="Le site Internet de la Base Eco Citoyenne - Croq nature et Croq vacances - Humbécourt (52)">
<meta name="publisher" content="croq.name">
<meta name="date" content="2006-02-22">
<meta name="type" content="Base Eco Citoyenne - Croq nature et Croq vacances - Humbécourt (52)">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" media='screen' type="text/css" title='accueil' href="accueil.css" />
</head>

<body>

<div id='en_tete'><!--ici on mettra la bannière-->

</div>

<div id="corps"> <!--ici on mettra le contenu principal de la page-->
<h1>Base Eco Citoyenne d'Humbécourt</h1>

<p>
La BEC - Base Eco Citoyenne - est un centre qui sera ouvert toute l'année.<br/><br/>
</p>

<h2>Au coeur de la Champagne </h2>

<p>
En bordure de la Forêt du Val et à proximité du plus grand lac artificiel d'Europe, (le lac du Der mis en eau en 1973) se niche une Base Eco Citoyenne de Pleine Nature : la BEC d'Humbécourt.<br/><br/>
</p>

<h2>Propriété des EEDF</h2>

<p>
Depuis 1979, le groupe de Saint Dizier anime cette structure d'accueil reconnue, depuis de nombreuses années, pour sa convivialité et le sérieux de son équipe.<br/><br/>
</p>

<h2>Un terrain de 4 ha</h2>
<p>
Implantée sur un terrain de 4 ha, la base - dotée de nombreux équipements - développe ses activités "Croq'Nature" et "Croq'Vacances".
</p>
</div>

<div id='menu'><!--ici cadre englobant tous les menus-->

<div class='element_menu'><!--cadre correspondant à un sousmenu-->

<ul>
<li><a href='accueil.html'>Accueil</a></li><!--Liste des liens du sous menu-->
</ul>
</div>

<div class='element_menu'><!--cadre correspondant à un sousmenu-->

<ul>
<li><a href='nature.html'>Nature</a></li>
<li><a href='attente.html'>Vacances</a></li>
</ul>
</div>

<div class='element_menu'><!--cadre correspondant à un sousmenu-->

<ul>
<li><a href='attente.html'>Base Eco</a></li><!--Liste des liens du sous menu-->
</ul>
</div>

<div class='element_menu'><!--cadre correspondant à un sousmenu-->

<ul>
<li><a href='attente.html'>Formation</a></li>
</ul>
</div>

<div class='element_menu'><!--cadre correspondant à un sousmenu-->

<ul>
<li><a href='attente.html'>Contacts</a></li>
</ul>
</div>

</body>
</html>

merci pour vos réponses

cordialement

PS:comment puis ajouter mon avatar à la messagerie ?

bonjour
j'ai pris les code html et css sur ton site (pas vérifié si c'etait les memes que sur ce post)
je suis arrivé à quelque chose en modifiant body width:760px
voilà
à plus

edit
ce message etait pour papiray