FORUM MP | Xhtml/Css : problème de mise en page

COMMUNAUTE MP

Identifiez vous ...

DOMAINE MP

Bavardages

Langages Généraux

Langages Web

Langages DotNet

Autres langages

Dev. Jeux Video

Sécurité

Sys. Exploitation

Graphismes

Logiciels

Réseaux

Bases de données

Méthodologies

Emplois High-tech

Aide juridique

Articles juridiques

FORUM

CHAT MP IRC

Votre pseudo ...

Serv: irc.irc-land.org

Chan: #MoteurProg

PARTICIPER

Plus de 3500 emplois.

Visiteur MP

problème de mise en page
	Forum : XHTML/CSS Sous Catégorie : Aucune Type du sujet : Sujet Normale FAQ : FAQ XHTML/CSS
		SUIVI PAR MAIL INACTIF
		SUJET RESOLU
		SUJET ACTIF
		N'APPARTIENT PAS A LA FAQ

PAGE : [1]

FORUM XHTML/CSS
	Page précedente	Page suivante

rainbow
Membre du club
Chef de projet(s) :
- IA savane
- Team MoteurProg

Inscrit : 26/05/2006
Messages : 935

#108235 Posté le 22/08/06 à 15:08

Slt à tous.
J\'ai vu à plusieurs endroits sur google des posts sur mon problème, mais jamais je n\'arrive à régler mon problème:
voici les sources

Xhtml:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"> <html> <head> <title>La Programmation</title> <link rel=\"stylesheet\" media=\"screen\" type=\"text/css\" title=\"Essai\" href=\"design.css\" /> </head> <body>  <div id=\"en_tete\"> </div>  <div id=\"menu\"> <div class=\"element_menu\"> <h3>Menu Principal:</h3> <ul> <li><a href=\"article-info.html\" title=\"Les articles relatifs à l\'informatique\">Articles</a></li> <li><a href=\"zone-telechargement.html\" title=\"Une zone de téléchargement\">Zone de téléchargement</a></li> <li><a href=\"freeware-dispo.html\" title=\"Mes freeware disponibles\">Freewares disponibles</a></li> <li><a href=\"cours-accueil.html\" title=\"Mes simple cours de programmation\">Cours</a></li> <li><a href=\"liens.html\" title=\"les liens relatifs à l\'informatique\">Liens</a></li> <li><a href=\"contact.html\" title=\"Pour me contacter\">Contact</a></li> </ul> </div> </div>  <div id=\"corps\"> <p> blablabla <img src=\"smiley/wink.gif\"/> </p> </div>  <div id=\"pied_de_page\"> <p>Copyright tous droits réservés</p> </div> </body> </html>

et le css:

/*Les titres*/ h1 { text-align: center; font-family: \"Arial Black\", Arial, Verdana, serif; text-decoration: underline; color: red; font-size: xx-large; } body /* On travaille sur la balise body, donc sur TOUTE la page */ { background-color: silver; background-attachment: fixed; /* Le fond restera fixe */ color: green; /* Le texte de la page sera vert */ width: 700px; 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; } /*L\'en-tête*/ #en_tete { width: 760px; height: 100px; background-image: url(\"entete.jpg\"); background-repeat: no-repeat; margin-bottom: 10px; } #menu { float: left; width: 140px; /* Très important : donner une taille au menu */ } .element_menu { background-color: #626262; color: red; border: 2px solid black; margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ } .element_menu h3 { color: red; font-family: Arial, \"Arial Black\", \"Times New Roman\", Times, serif; text-align: center; font-weight: bold; } .element_menu ul { list-style-type: square; padding: 0px; padding-left: 20px; margin: 0px; margin-bottom: 5px; } #corps { width: 700px; margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu\'il ne passe plus sous le menu */ padding: 5px; /* Pour éviter que le texte à l\'intérieur du corps ne colle trop à la bordure */ color: green; background-color: black; /* Une couleur de fond pour le corps */ background-image: url(\"fond.jpeg\"); background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */ border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */ } /*Les classes*/ p { font-size: 20px; color:green; } a { color: red; font-weight: bold; } .element_menu a:hover { background-color: green; color: black; } .surligne { text-decoration: underline; }

Et le problème, c\'est que ma partie \"corps\" reste en dessous de ma partie menu. J\'ai essayer de modifier les marges, mais rien ne change.
Quelqu\'un pourrait-il m\'aider?

Merci d\'avance Smiley

__________________________
............ Curtis: RTS 3D ..............
......

........... TeamMoteurProg...........

HAUT DE PAGE

Publicité

Inscrit : X
Messages : X

#Aucun

HAUT DE PAGE

Alp
Superviseur :
- Système d'ex.
- Méthodologie.
- C & C++
Modérateur :
- Bavardages
Chef de projet(s) :
- My SDL Lib

Inscrit : 24/06/2004
Messages : 2547

#108236 Posté le 22/08/06 à 15:19

Essaye de chercher du côté de float ;)
cad : tu mets un float left à ton menu, en levant tous les margin pour commencer. Puis je pense pas qu'il soit nécessaire de mettre un float à ton corps.
Ensuite tu rajouteras les margin.
__________________________
Be C++
Mon Blog (C++, Intelligence Artificielle, Prolog)

HAUT DE PAGE

bigguiz
Membre MP

Inscrit : 27/07/2006
Messages : 235

#108237 Posté le 22/08/06 à 15:28

il faut rajouter "position:absolute;" a deux endroits:

#corps et #menu

Edit:
ton body a width:700px; et ton corps aussi!
ne mets pas les absolute, metes ton corps à 500 et ça marche. Smiley

__________________________
Eoliennes et informatique sur freresguizmo

HAUT DE PAGE

rainbow
Membre du club
Chef de projet(s) :
- IA savane
- Team MoteurProg

Inscrit : 26/05/2006
Messages : 935

#108249 Posté le 22/08/06 à 18:38

que je mette ou enleve les position: absolute; , ça ne change rien.
J'ai mis mon corps à 500 et ça ne marche toujours pas: mon corps reste en dessou du menu Smiley

PS voici lle code css

/*Les titres*/ h1 { text-align: center; font-family: "Arial Black", Arial, Verdana, serif; text-decoration: underline; color: red; font-size: xx-large; } body /* On travaille sur la balise body, donc sur TOUTE la page */ { background-color: silver; background-attachment: fixed; /* Le fond restera fixe */ color: green; /* Le texte de la page sera vert */ width: 800px; 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; } /*L'en-tête*/ #en_tete { width: 760px; height: 100px; background-image: url("entete.jpg"); background-repeat: no-repeat; margin-bottom: 10px; } #menu { position: absolute; float: left; width: 140px; /* Très important : donner une taille au menu */ } .element_menu { background-color: #626262; color: red; border: 2px solid black; margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */ } .element_menu h3 { color: red; font-family: Arial, "Arial Black", "Times New Roman", Times, serif; text-align: center; font-weight: bold; } .element_menu ul { list-style-type: square; padding: 0px; padding-left: 20px; margin: 0px; margin-bottom: 5px; } #corps { position: absolute; width: 500px; margin-left: 160px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */ padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */ color: green; background-color: black; /* Une couleur de fond pour le corps */ background-image: url("fond.jpeg"); background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */ border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */ } /*Les classes*/ p { font-size: 20px; color:green; } a { color: red; font-weight: bold; } .element_menu a:hover { background-color: green; color: black; } .surligne { text-decoration: underline; }

__________________________
............ Curtis: RTS 3D ..............
......

........... TeamMoteurProg...........

HAUT DE PAGE

bigguiz
Membre MP

Inscrit : 27/07/2006
Messages : 235

#108250 Posté le 22/08/06 à 19:10

arf! j'ai testé sous IE mais pas sous FF... Ca marche sous IE non?
__________________________
Eoliennes et informatique sur freresguizmo

HAUT DE PAGE

rainbow
Membre du club
Chef de projet(s) :
- IA savane
- Team MoteurProg

Inscrit : 26/05/2006
Messages : 935

#108255 Posté le 22/08/06 à 20:10

j'ouvre justement depuis ie 6
__________________________
............ Curtis: RTS 3D ..............
......

........... TeamMoteurProg...........

HAUT DE PAGE

Alp
Superviseur :
- Système d'ex.
- Méthodologie.
- C & C++
Modérateur :
- Bavardages
Chef de projet(s) :
- My SDL Lib

Inscrit : 24/06/2004
Messages : 2547

#108256 Posté le 22/08/06 à 20:20

Enlève tous les position:qqch, les margin et tout, et mets un float:left à ton menu ;)
Vas voir là bas : http://fr.selfhtml.org/css/proprietes/positionnement.htm#float
Regarde l'exemple :)
Au lieu du h1 tu mets le div de ton menu
Au lieu du p tu mets le div de ton corps
__________________________
Be C++
Mon Blog (C++, Intelligence Artificielle, Prolog)

HAUT DE PAGE

rainbow
Membre du club
Chef de projet(s) :
- IA savane
- Team MoteurProg

Inscrit : 26/05/2006
Messages : 935

#108258 Posté le 22/08/06 à 20:37

super site alp Smiley

problème résolu
__________________________
............ Curtis: RTS 3D ..............
......

........... TeamMoteurProg...........

HAUT DE PAGE


	Page précédente	Page suivante
FORUM XHTML/CSS

PAGE : [1]

.: Site Web développé par Julien Pichot et l'équipe MPWG avec www.evolvia-web.com :.