probleme pour la creation de ma page "index&qFermé

Question

Bonjour a tous,

Apres 4 ans dans le role de maman a plein temps, j'ai decidé de créer un petit site pour y vendre divers choses ;) mais n'ayant pas de sous de coté, je dois me debrouiller avec les moyens du bord, c'est a dire moi et mes doigts :) ( et biensur tout les gens super sympa du net qui donne de leur temps pour aider!)

bon, j'ai donc créer ma page index .html et .CSS et j'ai créé mon menu deroulant (oui je vous l'accord, je n'ai pas encore fait grand chose! pourtant cela fait plus d'une semaine que je suis dessus ! mais bon, j'apprends en meme temps et puis j'ai 3 enfants collés a moi toute la journée...lol)
donc voila mes petits problemes:

1) je n'arrive pas a centrer mon menu. je souhaiterai que le menu s'adapte a la fenetre. Par exemple quand la fenetre est agrandi, que le menu occupe tout l'espace et quand la fenetre est en petit format, que l'espace entre les titres soient plus petit pour que tout le menu tienne sur une ligne
2) je souhaiterai mettre une image en arriere plan du menu ( une longue barre doré par exemple) dans les titres et les sous titres et je n'y arrive pas! j'ai reussi une fois a mettre l'image mais comme elle etait trop petite, ca me mettait 2 fois l'image avec un petit espace dans la categorie sous titre.
3)je souhaiterai que le contenu de mon site soit encadré et centré.

voici le les codes que j'ai trouvé sur le siteduzero (vous trouverez le code et les explications ici: http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
le code HTML:

</head>
<body>
<div id="header"><img alt="logo" src="logo.png" /></div>

<ul id="menu">

<li>
<a href="#">1er</a>
<ul>
<li><a href="#">1er A</a></li>
<li><a href="#">1er B</a></li>
<li><a href="#">1er C</a></li>
<li><a href="#">1er D</a></li>
</ul>
</li>

<li>
<a href="#">2eme</a>
<ul>
<li><a href="#">2eme A</a></li>
<li><a href="#">2eme B</a></li>
<li><a href="#">Pour la fam2eme C</a></li>
</ul>
</li>

<li>
<a href="#">3eme</a>
<ul>
<li><a href="#">3eme A</a></li>
<li><a href="#">3eme B</a></li>
<li><a href="#">3eme C</a></li>
<li><a href="#">3eme D</a></li>

</ul>
</li>

<li>
<a href="#">4eme</a>
<ul>
<li><a href="#">4eme A</a></li>
<li><a href="#">4eme B</a></li>
<li><a href="#">4eme C</a></li>
<li><a href="#">4eme D</a></li>
</ul>
</li>

<li>
<a href="#">5eme</a>
<ul>
<li><a href="#">5eme A</a></li>
<li><a href="#">5eme B</a></li>
<li><a href="#">5eme C</a></li>
<li><a href="#">5eme D</a></li>
<li><a href="#">5eme E</a></li>
</ul>
</li>

<li>
<a href="#">6eme</a>
<ul>
<li><a href="#">6eme A</a></li>
<li><a href="#">6eme B</a></li>
<li><a href="#">6eme C</a></li>
<li><a href="#">6eme D</a></li>
<li><a href="#">6eme E</a></li>
</ul>
</li>

</ul>

</body>
</html>

le code CSS:

body
{
color: #dcceaa
}

#header {
background:#dcceaa;
text-align:center;
}

#menu li ul li a
{
background: transparent url("arriereplan.jpeg") repeat ;
}

#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin: 0; /* ni extérieure */
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#menu /* Ensemble du menu */
{
font-weight : bold, itailc; /* on met le texte en gras */
font-family : Georgia,"Comic Sans MS","Trebuchet MS", verdana, serif; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
text-align : center;
}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background : #fce8e9; /* couleur de fond */
background : transparent url("arriereplan.jpeg") repeat ; /*image de fond*/
color : #ca0945; /* couleur du texte */
text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
width : 200px; /* largeur */
z-index:100
}
#menu li /* Éléments des listes */
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
text-align : center;
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

#menu li ul /* Sous-listes */
{
position: relative; /* Position absolue */
width: 144px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoie loin du champ de vision */
z-index:100
}

#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}

#menu li ul ul
{
margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */
}

/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body #menu li ul ul
{
border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
#menu a:hover /* Lorsque la souris passe sur un des liens */
{
color: #ff0000; /* On passe le texte en noir... */
background: #000000; /* ... et au contraire, le fond en blanc */

merci d'avance a tous ceux qui pourront m'aider.

jona303 · Answer

1) je n'arrive pas a centrer mon menu. je souhaiterai que le menu s'adapte a la fenetre. Par exemple quand la fenetre est agrandi, que le menu occupe tout l'espace et quand la fenetre est en petit format, que l'espace entre les titres soient plus petit pour que tout le menu tienne sur une ligne Bof bof, ca fait un site qui est différent en fonction de l'utilisateur,.. de toutes facons il n'y a que le js pour faire ça.. Je te conseille de center le tout c'est déjà très bien pour commencer.. ;) pour le 3 : fais une div générale dans le body genre :

puis en css, tu lui donnes un width (1000 est une bonne valeur) #main {width:1000px; margin: 0 auto; } le margin 0 auto, va centrer cette div dans la fenetre. puis avec un border:1px solid #666666; tu lui donnes un cadre pour le point 2 : je te conseilles de faire une pertite image qui fait genre 3px de width et le height correspondant à tes li; puis dans la css : #menu li, #menu li ul li{background:url(lechemindetonimage.jpg) repeat-x; } Voila, je te souhaite du courage, en tous cas c'est un bon début.. c'est propre et c'est W3C valide.. ;)

kiyomasa · Answer

Oulala ! Je crois que tu vas t'arracher les cheveux ! Une fois que tu auras suffisamment de connaissance en HTML, il faudra apprendre le php plus toutes les compétences pour des paiement sécurisés ect, enfin à ce nivo là je n'y connais pas grand chose mais en général, il faut une petite équipe de personne assez calés pour faire ce genre ça. Néansmoins, pour centrer un site, il faut que tous tes éléments soit dans une balise div. Et cette balise div tu vas lui donner des attributs CSS. En gros : dans le html :

Tous tes éléments

et dans le css : .nomdelaclassel { position : relative; margin-left: auto; margin-right: auto; width: 1000px; text-align: left; /* on rétablit l'alignement normal du texte */ } Je précise que j'ai mis 1000px mais en fait c'est la longeur de ton site. Elle est de la longeur que tu veux. Si tu ne met pas la bonne valeur le site va se centrer mais il sera décalé. Dc si tu n'a pas prévu de longueur à ton site, tu peux toujours mettre une valeur que tu détermine au coup d'oeil. ce qui va se passer, c'est que cette div contient tout les élements de ta page et comme elle sera centrer en fonction de ta fenêtre et ben tt sera centré. Je ne comprend pas ta question 2) Et pour la une, il te faut mettre le positionnement des éléments en % et non en pixel. Après j'avoue ne pas trop savoir t'aider plus car je n'utilise jamais cette méthode (non pas qu'elle soit mauvaise mais je n'ai pas l'habitude de travailler comme ca). Après, pas mal de gens plus doués que moi te répondrons mieux que moi :)

zouzou75 · Answer

je vous remercie infiniment de m'avoir repondu! 
entre temps, je viend de trouver un site anglais qui vend des templates pour pas grand choses ( mais le hic c'est que d'autres personnes pourront l'acheter aussi. si je veux l'acheter entierement c'est bien bien plus cher!!)
je pense que je vais faire ca en premier temps et quand j'aurai plus de temps, j'apprendrais mieux "le monde" du php, js etc... et là, j'essayerai de me créer un site unique lol! 
merci beaucoup de votre temps, patience et experience!

bonne année et excelente journée :)

Probleme pour la creation de ma page "index&q

3 réponses

Discussions similaires

Newsletters