Petit probleme de placement de bloc en CSS

gweno · le 8 février 2006

Bonjours, je me lence dans un site qui consiste à regrouper un maximum de tutoriels.

Mais j'ai un petit probleme avec un bloc CSS.

Sur cette page : page1 Le bloc de menu et le corps sont bien placés

Alors que sur une autre : page2. le bloc de menu et le corp sont coller.

Voila le code :

body
{
  width: 1024px;
  margin: auto; 
  margin-top: 50px;
  margin-bottom: 20px;
  background-color: ededed;
}
#menu
{
  float: left;
  width: 200px;
  height: 500px;
  background-color:ffffff;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
  left: 40px;
  top: 50px;
}

#corps
{
  margin: auto;
  width: 750px;
  background-color:ffffff;
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 5px;
}

Je suis obliger d'utiliser Position: fixed; Car sinon le bloc de menu se place sous les bloc de corps. Donc si vous avvez quelque chose pour contrer ça.

J'utilises des includes en PHP pour afficher le texte.

Merci d'avance

EDIT ; Si vous utilisez IE les blocs sont encore plus mal placés mais ça j'y peut rien.

Modifié le 8 février 2006 par gweno

tangui · le 9 février 2006

salut!

je te prete un super lien:

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

ca te permettra de comprendre le pourquoi du comment

gweno · le 9 février 2006

Je viens de modifier mon code.

body
{
  width: 1024px;
  margin: auto; 
  margin-top: 50px;
  margin-bottom: 20px;
  background-color: ededed;
}
#menu
{
  float: left;
  width: 200px;
  height: 500px;
  background-color:ffffff;
  border: 1px solid black;
  padding: 5px;
}

#corps
{
  margin: auto;
  width: 750px;
  background-color:ffffff;
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 5px;
}

J'ai toujours le même probleme mais cette fois le menu ne se place pas sous l'autre bloc.

Tangi là j'ai pas le temps de lire ton lien mais je l'ai rapidement survolé. Il à l'air interessant.

KewlCat · le 9 février 2006

Je suis obliger d'utiliser Position: fixed;

Tu sais que IE ne reconnait absolument pas cette valeur pour "position" ?

Tu comptes faire comment pour avoir une présentation à peu près potable avec ce "navigateur" ?

A savoir également : lors d'un float:left (ou right), si le contenu placé à droite (respectivement, à gauche) du bloc est trop large, il y a un renvoi à la ligne. Ton souci vient peut-être du fait que tu spécifies "en dur" des largeurs en pixels qui "dépassent" et donc activent le renvoi à la ligne...

Si tu pouvais préciser sur quelle page on trouve quelle version de ton code, ça pourrait aussi aider ;-)

Au fait, tu es au courant que tu as plusieurs balises <html> dans tes documents ? Et que tu utilises un doctype xhtml (enfin... plusieurs doctypes, vu que tu multiplies les balises) avec des span contenant des attributs de style inline ? Commence déjà par avoir un HTML qui valide avant de te préoccuper du CSS... Impossible de dire lequel des deux fait foirer la présentation de ta page...

gweno · le 9 février 2006

Pour IE ça fait longtemps que je l'ai banni de mon utilisation. Et quand je vois que dans me collège il sont encore sous IE ça me rend fou . Alors je me dit que si un zébulonien passe et qu'il à IE, qu'il ne s'étonne pas d'avoir une mise en page encore plus nule.

A savoir également : lors d'un float:left (ou right), si le contenu placé à droite (respectivement, à gauche) du bloc est trop large, il y a un renvoi à la ligne. Ton souci vient peut-être du fait que tu spécifies "en dur" des largeurs en pixels qui "dépassent" et donc activent le renvoi à la ligne...

J'ai diminué la largeur mais ça n'a rien changé.

D'accord. je mets ça au clair

Alors voila ce que ca donne. http://gtrenvouez.free.fr/site/

Avec ce code :

body
{
  width: 1024px;
  margin: auto; 
  margin-top: 50px;
  margin-bottom: 20px;
  background-color: ededed;
}
#menu
{
  float: left;
  height: 500px;
  background-color:ffffff;
  border: 1px solid black;
  padding: 5px;
}

#corps
{
  margin: auto;
  width: 750px;
  background-color:ffffff;
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 5px;
}

Pour ce qui est des balises Html, Je pense que c'est du au fait que j'utilise des includes. C'est si grave que ça ?

Modifié le 9 février 2006 par gweno

gweno · le 10 février 2006

Après une lecture plus appronfondie, j'ai trouvé d'où venait le probleme.

Adaptés à la plupart des cas. Inadaptés pour des colonnes de hauteurs égales.

.

Au fait tangui j'ai vu sur ton site que tu avais une fonction recherche via google sur ton site comment fait on ceci ?

tangui · le 13 février 2006

Il faut que google est déjà mangé ton site (ca prend du temps)

je ne sais meme plus ou j'avais trouvé les explications du code mais il faut faire ca:

<form method=get action=http://www.google.com/custom class="google_form">
Recherche dans le site    

<input class="google_box" type=text name=q maxlength="50" value="">
<input type="submit" value="Cherche">
<input type=hidden name=domains value="tonsite">
<input type=hidden name=sitesearch value="tonsite" checked >
<input type=hidden name=meta value="lr=lang_fr">

</form>

KewlCat · le 14 février 2006

Pour ce qui est des balises Html, Je pense que c'est du au fait que j'utilise des includes. C'est si grave que ça ?

Oui, c'est très grave puisque le navigateur doit deviner où commence la page et où elle finit.

N'oublie pas, lorsque tu fais tes includes, que tu es en train de contruire une page HTML donc les fichiers que tu inclus ne doivent pas contenir de balises de délimitation de page ou de <head> et <body>. Tout doit être fait dans le script PHP qui inclut, et non dans la page qui est incluse...

gweno · le 14 février 2006

Ok merci, mais j'ai tous repris a zero. Et je repart sur une technique sans include.

Connexion

Pas encore inscrit ?

Petit probleme de placement de bloc en CSS

Messages recommandés

gweno

tangui

gweno

KewlCat

gweno

gweno

tangui

KewlCat

gweno

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer