Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

Christian69

Probleme de CSS

Messages recommandés

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é par Christian69

Partager ce message


Lien à poster
Partager sur d’autres sites

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;

}

Partager ce message


Lien à poster
Partager sur d’autres sites
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 ?

Partager ce message


Lien à poster
Partager sur d’autres sites
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>

<style type="text/css">

<!--

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é par pastazere

Partager ce message


Lien à poster
Partager sur d’autres sites

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 -->. /* 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é par odSen

Partager ce message


Lien à poster
Partager sur d’autres sites
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 :P 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 ! :P

 

Bonsoir

Partager ce message


Lien à poster
Partager sur d’autres sites

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 :

 

complique.JPG

 

 

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

 

mieux.JPG

 

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é par odSen

Partager ce message


Lien à poster
Partager sur d’autres sites

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.

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • En ligne récemment   0 membre est en ligne

    Aucun utilisateur enregistré regarde cette page.

×