Probleme de CSS

Christian69 · le 24 septembre 2005

Bonjour,

Je vais essayer d'etre le plus clair possible.

Je creer une page qui a un <div> en haut qui a une hauteur de 120 pixel sur une largeur de 1200

En dessous un 2 eme div qui a la meme configuration

En dessous encore un 3 eme qui est un peu moins large (800 pixel)

Aprés ceci , en dessous donc, j'ai un div collée a gauche sur une colonne de 200 de large sans limite de hauteur.

A la droite de ce div, j'ai un div central de 350 de large, et en fin positionné tout a droite, j'ai un dernier div sur une colonne de 200 sans limite de hauteur.

Je n'arrive pas a faire coller en haut mes divs de droite et de gauche, ils reste décallé vers le bas, pourquoi ????

Merci de votre aide

Ci joint le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="Css_du_gn.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Divtitre"></div>
<div class="Menuhorizontal"><a href="organisations.htm">L'Organisation</a>| <a href="reglementation2005.htm">La Réglementation</a>| <a href="lachartedupecheur/charte.htm">La Charte du Pêcheur</a> | <a href="Le Forum</a> | 
<a href="Boutique/export/index.html">La Boutique</a> | <a href="Nous contacter</a></div>
<br /><div class="Div_des_mises_a_jours">Mise a jour du site faite ce jour a 20h00</div>
<div class="Divmenugauche" id="Divmenugauche"><h3>Menu</h3>  
<a href="histoire.htm">L'Histoire</a>
<hr />
<a href="comdir.htm">Le Comité Directeur</a><hr />
<a href="Montlucon/indexmontlucon.htm">Le Forum de Montluçon</a><hr />
<a href="leslicences/indexlicences.htm">Rejoindre </a><hr />
<a href="La%20politique/la_politiqueindex.htm">La politique</a><hr />
<a href="index_planete.htm"></a><hr />
<a href="championnat_de_france_des_jeunes/2005/indexjeunes.htm">Les Championnats de France des Jeunes</a><hr />
<a href="championnat_de_france/indexchtfrancesenior.htm">Les Championnats de France</a><hr />
<a href="championnatdumonde/indexchtdumonde.htm">Les Championnats du Monde</a><hr />
<a href="Equipe_Carpe_france/ECF2005/indexECF2005.htm">L' Equipe de France</a><hr />
<a href="Partenaires%20officiels/partenaires_officiels.htm">Nos partenaires officiels</a><hr />
<a href="nospartenaires.htm">Nos liens favoris</a><hr />
<a href="sitesdesclubs.htm">Les Sites des Clubs</a><hr />
<a href="Les_Archives_PDF/indexarchives.htm">Les Archives</a><hr /></div>
<div class="Divcentral">Div central<img src="Photo_pour_le_web/Photos_du_site/Murclair.jpg" /></div>
<div class="Divdroite"><h3>Les Régions</h3> 
   <ul> 
     <li><a href="lesregions/Region%20Alsace/IndexAlsace.htm">Alsace</a></li> 
     <li><a href="lesregions/Region%20Aquitaine/IndexAquitaine.htm">Aquitaine</a></li> 
     <li><a href="lesregions/Region%20Auvergne/IndexAuvergne.htm">Auvergne</a></li> 
     <li><a href="lesregions/Region%20Bourgogne/IndexBourgogne.htm">Bourgogne</a>      <a href="lesregions/Region%20Bretagne/IndexBretagne.htm">Bretagne</a></li> 
     <li><a href="lesregions/Region%20Centre/IndexCentre.htm">Centre</a></li> 
     <li><a href="lesregions/Region%20Champagne%20Ardenne/IndexChampagneArdennes.htm">Champagne Ardennes</a></li> 
     <li><a href="lesregions/Region%20Franche%20Conte/IndexFrancheConte.htm">Franche-Conté</a></li> 
     <li><a href="lesregions/Region%20Ile%20de%20France/IndexIledeFrance.htm">Ile-de-France</a></li> 
     <li><a href="lesregions/Region%20Languedoc%20Roussillon/IndexLanguedocRoussillon.htm">Languedoc-Roussillon</a><a href="lesregions/Region%20Limousin/IndexLimousin.htm">Limousin</a></li> 
     <li><a href="lesregions/Region%20Lorraine/IndexLorraine.htm">Lorraine</a></li>
  <li><a href="lesregions/Region%20Midi%20Pyrennee/IndexMidiPyrenee.htm">Midi-Pyrennee</a></li>
  <li><a href="lesregions/Region%20Nord%20Pas%20de%20Calais/IndexNordPasdeCalais.htm">Nord-Pas de Calais</a></li>
  <li><a href="lesregions/Region%20Normandie/IndexNormandie.htm">Normandie</a></li>
  <li><a href="lesregions/Region%20Pays%20de%20Loire/IndexPaysdeLoire.htm">Pays de Loire</a></li>
  <li><a href="lesregions/Region%20Picardie/IndexPicardie.htm">Picardie</a></li>
  <li><a href="lesregions/Region%20Poitout%20Charente/IndexPoitoutCharente.htm">Poitou-Charentes</a></li>
  <li><a href="lesregions/Region%20Paca/IndexPaca.htm">PACA</a></li>
  <li><a href="http://gncrhonealpes.free.fr/">Rhône-Alpes</a></li>
   </ul></div>
</body>
</html>

Voici le code ma CSS:

.Divtitre {
background-image: url(Photo_pour_le_web/Photos_du_site/bandeau-titre1400-news.jpg);
height: 120px;
width: auto;
background-repeat: no-repeat;
}
.Menuhorizontal {
margin-left: 230px;
background-color: #FFFFCC;
width: 610px;
}
.Div_des_mises_a_jours {
display: inline;
margin-left: 230px;
background-color: #CCCCCC;
width: 250px;
}
.Divmenugauche {
background-color: #FFFFCC;
width: 150px;
background-repeat: no-repeat;
clip: rect(auto,auto,auto,auto);
float: left;
margin-right: 100px;
border-top: thin solid #009999;
border-right: thin solid #009999;
border-bottom: thin solid #009999;
border-left: thin solid #009999;
text-decoration: underline;
}
.Divcentral {
margin-top: 10px;
width: 350px;
margin-left: 200px;
}
.Divdroite {
margin-left: 700px;
width: 150px;
}

Modifié le 24 septembre 2005 par Christian69

pastazere · le 27 septembre 2005

Salut

Je te préviens de suite que je ne suis pas un pro du Css mais essaye voir en modifiant ton code comme ci-dessous (soit en ajoutant un float: left à tes 2 div et isole tes marges en les entourant de /* */ )

.Divcentral {

margin-top: 10px;

width: 350px;

float: left;

/*margin-left: 200px;*/

}

.Divdroite {

/*margin-left: 700px;*/

width: 150px;

float: left;

}

odSen · le 27 septembre 2005

Salut

Je te préviens de suite que je ne suis pas un pro du Css mais essaye voir en modifiant ton code comme ci-dessous (soit en ajoutant un float: left à tes 2 div et isole tes marges en les entourant de /* */ )

.Divcentral {

margin-top: 10px;

width: 350px;

float: left;

/*margin-left: 200px;*/

}

.Divdroite {

/*margin-left: 700px;*/

width: 150px;

float: left;

}

579353[/snapback]

Je comprends pas ton principe

/* et */ ne servent qu'à inclure un commentaire, non ?

pastazere · le 27 septembre 2005

Je comprends pas ton principe
/* et */ ne servent qu'à inclure un commentaire, non ?

579410[/snapback]

Re

Effectivement tu peux mettre des commentaires entre /* et */ et donc en faisant ainsi avec les 2 lignes en question cela a pour effet de ne pas les interpréter.

Fais un essai dans une page html vierge et colles ce code et regarde ce qu'il donne sous ton navigateur.

<html>

<head>

<title>Untitled</title>

</head>

<!--

body {

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

color: blue;

}

-->

</style>

<body>

<p>Avec ce code le texte est de couleur bleu mais si je mets la ligne color:blue; entre des /* et */ ça donne quoi ?, essaye et tu verras</p>

</body>

</html>

Modifié le 27 septembre 2005 par pastazere

odSen · le 27 septembre 2005

Re,

Mais plutôt que de mettre en commentaire un élément, autant le supprimer non ? Le commentaire est plutôt destiné à se donner des repères dans le fichier. Et dans un fichier xHTML les commentaires ne sont pas /* commentaire */ mais . /* commentaire */ est pour le CSS.

Je comprends pas bien à quoi ça sert de mettre des /* */ dans l'HTML, comme dans ton exemple...

@ Christian69 > Je vais jeter un coup d'oeil à tes codes et essayer de trouver ce qui va pas.

Modifié le 27 septembre 2005 par odSen

pastazere · le 27 septembre 2005

Re,
Mais plutôt que de mettre en commentaire un élément, autant le supprimer non ?

Mais bien sûr, je ne dis pas le contraire mais si ce que je lui propose ne résoud pas son problème, il n'a plus qu'à enlever les 2 float ainsi que les /* */ et il retrouve son code initial sans avoir besoin de le retaper (ni plus ni moins).

@ Christian69 > Je vais jeter un coup d'oeil à tes codes et essayer de trouver ce qui va pas.

579573[/snapback]

Au moins la remontée de ce topic aura servi à ça !

Bonsoir

odSen · le 28 septembre 2005

Resalut à tous les deux !

Je crois que j'ai trouvé quelques trucs qui allaient pas dans le fichier HTML.

Il faut bien que tu fasses passer ton div de menu gauche AVANT ceux de menus horizontaux (et en incluant comme tu l'a fait un float: left dans ton css). Là, le menu gauche sera bien positionné. Après, tu auras quelques problèmes avec ton menu droite, celà est peut-être du à une mauvaise organisation des calques. Un petit dessin d'explication :

Ce que tu veux obtenir :

Ce qu'il vaudrait mieux faire pour éviter des complications :

Donc dans l'organisation du fichier HTML ça devrait donner quelque chose comme ça:

<body>
 <div class="Divtitre">...</div>
 <div class="Divmenugauche">...</div>
 <div class="Divdroite">...</div>
 <div class="Divcentral">
   <div class="Menuhorizontal">...</div>
   <div class="Div_des_mises_a_jours">...</div>
 ...
 </div>
</body>

Et dans ton CSS, applique un float:left au menu gauche et un float:right au menu droite. Essaie, voie ce que ça donne, et s'il reste encore des problèmes fais signe. Il y a peut-être d'autres solutions à ton problème, mais je pense que de cette manière c'est possible.

Modifié le 28 septembre 2005 par odSen

skog · le 3 octobre 2005

Salut, si tu as encore un problème avec tes div,vas donc faire un tour sur ce site :

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Il y a des exemples de mises en page et le site est plutôt sympa; moi je n'y connaissais pas grand chose en css et avec ça c'est devenu plus simple.

Tu dois pouvoir t'inspirer de leurs exemples pour les adapter au tiens.

Connexion

Pas encore inscrit ?

Probleme de CSS

Messages recommandés

Christian69

pastazere

odSen

pastazere

odSen

pastazere

odSen

skog

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer