Sujet Précédent Sujet Suivant

Position du corps de mon site

Résolu/Fermé
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009 - 7 janv. 2009 à 16:56
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009 - 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>


<!-- L'en-tête -->

<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>



<!-- Les menus -->

<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>

<!-- Le pied de page -->

<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
A voir également:

8 réponses

Réponse 1 / 8
Aquaberry
7 janv. 2009 à 16:58
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 !
0
Réponse 2 / 8
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009
7 janv. 2009 à 16:59
Le float: right;
ou le float: left; ne marche pas.
0
Aquaberry
7 janv. 2009 à 17:02
Il faut utiliser :

position: absolute;

Ensuite tu définis des valeurs de marges haut, bas, gauche et droite !
0
Réponse 3 / 8
Aquaberry
7 janv. 2009 à 17:00
Euh, non, le bloc CONTENU plutôt.
0
Réponse 4 / 8
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009
7 janv. 2009 à 17:02
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à...
0
Aquaberry
7 janv. 2009 à 17:04
Tu n'as pas mis :

#corps

Dans ton CSS !
0

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 mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009
7 janv. 2009 à 17:05
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;

}
0
Aquaberry
7 janv. 2009 à 17:07
Oui ! Il n'est pas affiché dans le code CSS que tu as fourni.
0
Réponse 6 / 8
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009
7 janv. 2009 à 17:09
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;

}
0
Réponse 7 / 8
chlebta*tsotsi Messages postés 75 Date d'inscription mardi 28 octobre 2008 Statut Membre Dernière intervention 3 octobre 2016
7 janv. 2009 à 17:17
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;
}
0
Réponse 8 / 8
~Toineb~ Messages postés 6 Date d'inscription mercredi 7 janvier 2009 Statut Membre Dernière intervention 7 janvier 2009
7 janv. 2009 à 17:23
Je n'ai plus rien à sa place

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

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses
Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses