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:

Petit probleme de placement de bloc en CSS

gweno

Par gweno
dans Programmation

 Partager

Messages recommandés

gweno Full Patch Member

gweno

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

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 :P

 

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

Modifié par gweno
Lien vers le commentaire
Partager sur d’autres sites

tangui Godlike Member

tangui

Posté(e)
Posté(e)

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 :P

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

gweno

Posté(e)
  • Auteur
Posté(e)

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.

Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

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

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

gweno

Posté(e)
  • Auteur
Posté(e) (modifié)

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 :P . 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é par gweno
Lien vers le commentaire
Partager sur d’autres sites
gweno Full Patch Member

gweno

Posté(e)
  • Auteur
Posté(e)

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.

 

:P .

 

 

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

Lien vers le commentaire
Partager sur d’autres sites
tangui Godlike Member

tangui

Posté(e)
Posté(e)

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>

Lien vers le commentaire
Partager sur d’autres sites
KewlCat Devil Member !

KewlCat

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

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...