[Résolu] Problème d'emplacement

Bonjour tout le monde,

bon voila j'ai un petit problème, je débute un peu en CSS et je n'arrive pas à placé mes objet comme je le voudrais.

de plus j'aimerai que chaque bouton soit différent et que quand j'écris du texte dans le petit tableau, celui ci s'agrandi ou créer un scroll .

Voila un exemple de page que j'aimerai recréer en CSS :

http://faustxv.free.fr/Design.php

Voila ce que j'obtiens :

http://faustxv.free.fr/Entrer.php

Et voila le CSS :

http://faustxv.free.fr/Design.css

Merci d'avance pour vos réponses.
Modifié par Shinjitsu-Gensou (11 Apr 2007 - 14:32)

Salut.

Pour l'espace entre le header et le menu, il vient de la marge par défaut du h1 dans le header. En fixant ses marges à 0, tu devrais résoudre le problème.

Ensuite pour centrer le menu, il suffit de donner des

margin-left:auto; margin-right:auto;

à ton ul comme tu l'as déjà fait pour les autres éléments.

Supprimes aussi les balises <p/> dans ton code qui ne veulent rien dire et qui peuvent être sources de problèmes.

Enfin, pourquoi as-tu fixé une hauteur à ton bloc de contenu? Tu ferais mieux de le laisser s'étirer en fonction de son contenu.

Salut et merci pour la réponse ça m'a déjà bien aidé, en fait c'est parce que je débute en CSS que je n'y arrive pas très bien, là le résultat est déjà beaucoup mieux mais j'aimerai pouvoir changer les boutons (qu'il n'y ai pas toujours le même) et les centrer par rapport à ma bannière, pourrait tu m'aidé s'il te plait?

EDIT : j'ai aussi un problème au niveau des écritures à l'intérieur du tableau, elle sont coller au tableau, comment je dois faire? s'il te plait
Modifié par Shinjitsu-Gensou (11 Apr 2007 - 09:38)

Est-ce que tu as mis en ligne les changements suite à mes précédentes remarques? Pour centrer le menu je t'ai donné une solution dans mon post précédent.

De plus je me rends compte que tu as pris l'habitude de fermer directement tes balises quand elle n'ont pas de contenu. Par exemple:

<h1 id="header"/>

Cette écriture est fausse. Elle est réservée à quelques rares balises, dont img ou br, qui ne peuvent jamais avoir de contenu. A corriger rapidement.

Pour ce qui est des images du menu, il existe deux pistes. L'une en javascript, que l'on conseille souvent, l'autre en css. Une petite recherche sur le forum t'apporteras sûrement une réponse. (Même si tu débutes, la solution en javascript est très simple. Demande de l'aide au cas où.)

Enfin pour ton texte, il faut utiliser le padding (marge interne) de ton div#fond-tableau

padding:10 px;

Modifié par <nicolas> (11 Apr 2007 - 11:27)

Oui j'ai mis les changement en ligne mais malheureusement je ne comprend pas tout

Pour ce qui est de la marge avec le padding j'ai essayé mais le texte ne ce décale pas, seul le design du tableau bouge .

Et pour les balises que je ferme directement c'est parce que c'est le seul moyen que je connais pour mettre du CSS et les tutoriaux que j'ai pu voir ne m'ont pas beaucoup aidé

EDIT : J'ai résolu mon problème, encore merci, je commence a comprendre le CSS
Modifié par Shinjitsu-Gensou (11 Apr 2007 - 14:30)

Re.

J'ai vu que tu avais commencé les changements. Pour les balises pas correctes, effectivement rien ne t'empêches de la laisser vide, mais il faut la fermer à l'aide d'une 2e balise comme tu l'as fait.

Sinon un conseil général pour centrer ton site, je te conseille de mettre un div qui contiendra tout ton site (le header, le menu, et le contenu). Tu donnes à ce div des margin:auto à gauche et à droite pour centrer, ainsi que la largeur de ton site. Ensuite, plus besoin de répéter les marges auto, ni la largeur. Tu pourras aussi supprimer le "align=center" que tu avais mis dans ton code html.

Du coup, pour le problème du contenu ca devrait marcher avec un padding vu que tu auras enlevé la largeur.

D'accord merci beaucoup j'ai trouver, c'était long

Encore une remarque pour ton menu. Tu n'es pas obligé de faire une liste par objet. Tu peux très bien donner ton id directement au a.

Ca sera beaucoup plus propre.

Je n'y arrive pas pourrais-tu me donné un exemple s'il te plait?

Quelque chose du genre:

<ul id="menu">
  <li><a id="menu_accueil" href="accueil.php"></a></li>
  <li><a id="menu_design" href="design.php"></a></li>
  <li><a id="menu_manga" href="manga.php"></a></li>
  <li><a id="menu_poemes" href="poemes.php"></a></li>
  ...
</ul>

et en css

ul#menu {
   margin:0;
   text-align:center;
}
ul#menu li {
    display:inline;
    margin: 0;
    padding: 0;
}
ul#menu li  a {
	display:inline;
	width: 91px ;
	height: 29px ;
	text-decoration: none ;
	background-repeat:no-repeat;

a#menu_accueil {
	background-image: url(Bouton-Accueil.png);
}
a#menu_accueil:hover {
	background-image: url(Bouton-Accueil2.png);
}

a#menu_design {
	background-image: url(Bouton-Design.png);
}
a#menu_design:hover {
	background-image: url(Bouton-Design2.png);
}
...

J'ai mis les li en display:inline pour pouvoir les centrer correctement dans le ul.

Et à quoi servent tous ces &nbsp; ?
Modifié par <nicolas> (11 Apr 2007 - 16:03)

Et pour faire encore mieux, tu peux rajouter le texte dans le a.

<a id="menu_accueil" href="accueil.php">Accueil</a>

et le cacher en css

ul#menu li  a {
	text-indent:-5000px;
	overflow:hidden;
}

Comme ça tout ceux qui n'ont pas les images, ou pas les css peuvent quand même voir un menu.

Merci beaucoup je vais essayer ça, et tout les &nbsp; servent a mettre un lien dessus mais je pense qu'avec ce que tu m'a montrer ça ira beaucoup mieux merci beaucoup