Position du corps de mon site

Résolu

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention -
~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention - 7 janv. 2009 à 17:23

Bonjour,

Je suis en train de faire un site et j'ai un problème:

Voilà, le corps de mon contenu se place sous le menu.
Ce que je souhaiterais, ce serait de le mettre en parallèle du menu.

Je vous met mon code xhtml:

<head>
<title>Bienvenue sur le site de la mairie de Domalain!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>



<div id="en_tete">

</div>

<div id="menu_haut">

<a class="element_haut" href="vie_associative.html"> <img src="vie_associative.png" alt="Vie Associative" title="Accéder à la partie vie associative"/><a/>
<a class="element_haut" href="acceuil.html"> <img src="acceuil.png" alt="Acceuil" title="Accéder à l'acceuil du site" /><a/>
</div>



<div id="menu">
<br/> <img src="en_tete_menu.png" alt="Menu"/>
<div id="element_menu1">
<br/>
<br/>
<ul>
<li><a href="localisation_et_situation.html">Localisation et Situation</a></li>
<li><a href="cadre_de_vie.html">Cadre de vie</a></li>
<li><a href="histoire_et_monuments.html">Histoire et Monuments</a></li>
<li><a href="paysages.html">Paysage </a></li>
<li><a href="ville_fleurie3.html">Ville fleurie</a></li>
</ul>
</div>

<div id="element_menu2">
<br/>
<br/>
<ul>
<li><a href="conseil_municipal.html">Conseil muncicipal</a></li>
<li><a href="reunions.html">Réunions</a></li>
<li><a href="employés_communaux.html">Employés communaux</a></li>
<li><a href="etat_civil.html">Etat civil</a></li>
<li><a href="maisons_fleuries.html">Maisons fleuries</a></li>
<li><a href="festivités.html">Festivités</a></li>
</ul>
</div>
<div id="element_menu3">
<br/>
<br/>
<ul>
<li><a href="calendrier.html">Calendrier</a></li>
<li><a href="logement.html">Logement</a></li>
<li><a href="enseignement.html">Enseignement</a></li>
<li><a href="domaine_social.html">Domaine social</a></li>
<li><a href="transports_pour_tous.html">Transports pour tous</a></li>
</ul>
</div>

<br/>
</div>
<div id="corps">
<p><strong>Je vous souhaite la bienvenue sur le site officiel de la commune de Domalain.<br/>
J'espère que vous y trouverez réponse à vos attentes.<br/>
Je vous remercie de votre visite et vous dis à bientôt.</strong></p>

<p><strong>Le maire, J.Martin</strong> </p>

<p>La commune de Domalain est désormais en plein renouveau démographique.</br>
En effet, la commune compte à ce jour 1873 habitants.</br>
Ce très vaste village use de sa situation aux portes de la Bretagne afin d'attirer de nouveaux habitants.<p/>

<img src="image_accueil.png" alt="Panneau de bienvenue de la commune"/>
</div>



<div id="pied_de_page">

<p>Copyright "Jameu Corporation" 2009, tous droits réservés<br/>
<a href=mailto: "mairie-domalain@wanadoo.fr">Contacter la mairie</a><br/>
Tél: 02 99 76 35 07|Fax: 02 99 76 31 62 </p>
</div>

</body>
</html>

MAITENANT, le CSS:

body
{
width: 760px;
height: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: URL("fond_page_entière.png");
border: none;
}

#en_tete
{
width: 760px;
height: 250px;
background-image: url("banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu_haut
{

background-image: URL("fond_menu_haut.png");
background-repeat: no-repeat;
padding-left: 50px;
float: right;
height: 100px;
padding-top: 25px;
padding-right: 75px;
border: 3px inset rgb(107,146,130);

}
.element_haut
{
padding-left: 100px;
}

#menu
{
text-align: left;
background-image: URL("arriere_plan_menu.png");
background-repeat: repeat-y;
background-color: white;
margin-left: 0px;
margin-right: 0px;

Pour finir, je joins un screen du résultat :
(le cadre blanc dessous est mon pied de page.)

http://nsa03.casimages.com/img/2009/01/07/090107050124236036.png

Afficher la suite

A voir également:

Position du corps de mon site
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Quel site remplace coco - Accueil - Réseaux sociaux
Site de partage de photos - Guide
Site x - Guide

8 réponses

Réponse 1 / 8

Aquaberry

Je pense que tu dois mettre ton bloc MENU en type float. Grâce à ça tu peux le mettre où tu veux sur la page !

Réponse 2 / 8

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention

Le float: right;
ou le float: left; ne marche pas.

Aquaberry

Il faut utiliser :

position: absolute;

Ensuite tu définis des valeurs de marges haut, bas, gauche et droite !

Réponse 3 / 8

Aquaberry

Euh, non, le bloc CONTENU plutôt.

Réponse 4 / 8

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention

C'est à dire (je débute)...

Contenu n'est pas reconnu par les CSS
pour ce qui est de la position: absolute; elle y est déjà...

Aquaberry

Tu n'as pas mis :

#corps

Dans ton CSS !

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 8

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention

C'est de ça dont tu parles?

#corps
{
width: 500px;
margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
padding-left: 50px;
color: #B3B3B3;
display: block;
position: absolute;

background-image: url("fond_principal.png");
background-position: right;
background-repeat: repeat-y; /* Une petite image de fond qui se répètera */
border: 3px inset rgb(107,146,130); /* Une bordure pour bien marquer les limites du corps et pour faire joli */
text-align: center;

}

Aquaberry

Oui ! Il n'est pas affiché dans le code CSS que tu as fourni.

Réponse 6 / 8

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention

j'aai oublié cette partie:

#element_menu1
{
background-image: URL("decouvrir_domalain.png");
background-repeat: no-repeat;

}
#element_menu2
{
background-image: URL("vie_de_la_commune.png");
background-repeat: no-repeat;
}
#element_menu3
{
background-image: URL("domalain_pratique.png");
background-repeat: no-repeat;
}
ul /* Ma liste aura des puces en forme de mon choix */
{
list-style-image: url("icone_menu.png");
padding-left: 20%;
margin-left: 0px;
}
/* Juste pour améliorer la présentation : */
a
{
color: rgb(26,153,99);
text-decoration: none;
}

/* Le corps de la page */

#corps
{
width: 500px;
margin-left: 150px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
padding-left: 50px;
color: #B3B3B3;
display: block;
position: absolute;

background-image: url("fond_principal.png");
background-position: right;
background-repeat: repeat-y; /* Une petite image de fond qui se répètera */
border: 3px inset rgb(107,146,130); /* Une bordure pour bien marquer les limites du corps et pour faire joli */
text-align: center;
}

#pied_de_page
{
background-image: URL("fond_pied_de_page.png");
background-repeat: no-repeat;
padding: 20px;
font-family: "Arial Black", Arial, Verdana, serif;
font-size: x-small;
font-variant: small-caps;
text-align: center;
padding-top: 0px;

}

Réponse 7 / 8

chlebta*tsotsi Messages postés 75 Date d'inscription Statut Membre Dernière intervention

body
{
width: 760px;
height: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: URL("fond_page_entière.png");
border: none;
}
#en_tete
{
position: relative; /* si tu veu que l'en tete soit relative avec le body }
width: 760px;
height: 250px;
background-image: url("banniere.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}

#menu_haut
{
position: absolute ;{ le menu va etre fixe ss change le position des autre composant du page}
background-image: URL("fond_menu_haut.png");
background-repeat: no-repeat;
padding-left: 50px;
float: right;
height: 100px;
padding-top: 25px;
padding-right: 75px;
border: 3px inset rgb(107,146,130);

}
.element_haut
{
padding-left: 100px;
}

#menu
{
text-align: left;
background-image: URL("arriere_plan_menu.png");
background-repeat: repeat-y;
background-color: white;
margin-left: 0px;
margin-right: 0px;
}

Réponse 8 / 8

~Toineb~ Messages postés 6 Date d'inscription Statut Membre Dernière intervention

Je n'ai plus rien à sa place

EDIT: problème résolu, j'avais oublier le float du menu.
Merci à tous

Discussions similaires

C'est quoi le site qui remplace coco chat

Colis en cours de transport vers votre site de livraison ?

Votre réponse

Discussions similaires