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:

Probleme de CSS

Christian69

Par Christian69
dans Programmation

 Partager

Messages recommandés

Christian69 Junior Member

Christian69

Posté(e)
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites

pastazere Junior Member

pastazere

Posté(e)
Posté(e)

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;

}

Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
Posté(e)
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 ?

Lien vers le commentaire
Partager sur d’autres sites
pastazere Junior Member

pastazere

Posté(e)
Posté(e) (modifié)
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
Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites
pastazere Junior Member

pastazere

Posté(e)
Posté(e)
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

Lien vers le commentaire
Partager sur d’autres sites
odSen Full Patch Member

odSen

Posté(e)
Posté(e) (modifié)

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
Lien vers le commentaire
Partager sur d’autres sites
skog Junior Member

skog

Posté(e)
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...