Bonjour à tous,

Premiere fois que je viens sur ce genre de forum mais je ne trouve aucun solution donc j'espère sincèrement que l'un d'entre vous pourra m'aider.
Je cherche depuis 1 semaine et je ne trouve pas de réponse!

Débutant dans le css...
j'ai mis une image d'arrière plan dans mon body que j'ai plus ou moins réussi à redimensionner sur différents écrans (je dis bien plus ou moins car l'image s'étend pas comme je voudrais).
J'ai ensuite crée une div menu mais celui-ci ne s'étend pas automatiquement comme mon image d'AR plan.
Est-ce que quelqu'un aurai une solution pour adapter mon menu en fonction de mon background svp?

J'espere sincèrement sue vous trouverez une solution.
CSS:
body{
	background-image: url(#); 
	background-repeat: no-repeat; 
	background-attachment: fixed; 
	background-size: cover; 
	
}

#globalmainmenu {
    background-color:f3e1cb;
    height: 45px;
    margin: 10px;
    min-width: 980px;
    padding: 0;
    position: relative;
    transition: height 0.2s ease 0s;
    width: 98%;
		}
#conteneur{
	
	position:absolute;
	top:10px;
	Right:-25px;
	

	
}
#mainmenu{
	
	height:60px;
	margin:auto;
	padding:0;
	width:980px;
	
}

#mainmenu ul {
    height: 60px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 980px;
}



#mainmenu ul li a {
    color: black;
    cursor: pointer;
    display: 0;
    height: 60px;
    margin: 0;
    padding: 0;
}

a {
    color: #F9F400;
    margin: 0;
    outline: medium none;
    padding: 0;
    text-decoration: none;
}


#mainmenu ul li {
    color: #FFFFFF;
    float: left;
    font-family: creampuff;
    font-size: 110%;
    font-weight: normal;
    height: 60px;
    line-height: 250%;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-transform: 0;	
}

#mainmenu ul 
li.menu_com,
#submenu 
ul.menu_com {
    width: 60px;
}

#mainmenu ul 
li.menu1_com,
#submenu 
ul.menu1_com {
    width: 130px;
}

#mainmenu ul 
li.menu2_com,
#submenu 
ul.menu2_com {
    width: 110px;
	
}
#mainmenu ul
li.menu3_com, 
#submenu 
ul.menu3_com {
    width: 160px;
}



HTML:
</head>
	
    
<body>
        
	<div id="globalmainmenu" style="display none;">
    <div id="conteneur">

		<div id="mainmenu">
<ul>

<li class="menu">
<a title="menu" href="#"><img src="...btn_accueil.png"</a></li>

<li class="menu1_com">
<a title="menu1" href="menu1.php">menu1</a></li>

<li class="menu2_com">
<a title="menu2" href="menu.php">menu</a></li>

<li class="menu3_com">
<a title="menu3" href="menu3php">menu3</a></li>


</body>
</html>



Par avance un grand merci!
Bonjour et bienvenue Smiley smile

Il faudrait mettre un lien vers une page de test ou mieux créer un petit jsFiddle ou CodePen isolant le problème car ce que tu as mis n'est pas tout à fait clair : une bonne partie du code HTML est tronqué et l'on ne voit pas trop si c'est fait exprès ou pas. Par exemple, les divisions ouvertes ne sont pas fermées, un display: none est utilisé via l'attribut style sur la division globalmainmenu…

À te lire,
Modifié par audrasjb (22 Apr 2014 - 18:32)
tout d'abord merci de prendre le temps de répondre à ma demande.
Oui j'ai effectivement supprimer des éléments du code HTML car le nom de mon site est inscrit dessus et je ne souhaite pas pour le moment communiquer dessus.
Tout mon menu est bien en place, j'ai simplement remplacer le nom de mon site par "#" dans le code et simplement mis des "menu, menu1..." pour remplacer les categories de mon menu.
En revanche je n'ai pas insérer le haut du code qui est:

[code=html]!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=UTF-8" />
<title>nom de mon site</title>


<link href="style.css" rel="stylesheet" type="text/css" media="screen";
/code]

Est-ce que cela suffit pour me donner quelques idées stp?
Car je ne vois pas comment faire une page test pour te l'envoyer...

Encore merci de ta réponse.
Rebonjour Smiley smile

Il y a donc plusieurs soucis dans ta page HTML. Par exemple, certains éléments sont ouverts mais ne sont jamais fermés. Je pense notamment aux divisions (<div>) qui te servent à maquetter ta page. Il faudrait commencer par régler ce problème avant de passer au reste Smiley cligne

Pour faire une page test, tu peux par exemple utiliser le service http://jsfiddle.net/. Tu y place ton code HTML (ne copie que le contenu situé entre <body> et </body>, le reste est généré automatiquement) et CSS dans les encarts prévus à cet effet puis tu clique sur Run pour tester. Une fois ton test prêt, tu peux partager ton fiddle en cliquant sur le bouton "share" pour obtenir son URL. Le service est bien entendu gratuit (mais en anglais).
Pour utiliser des images sans "dévoiler" les contenus de ton site, tu peux utiliser un autre petit service comme lorempixel. Exemple, si tu souhaite utiliser sur ta page de test une image de 400x200 pixels, voici comment procéder :


// IMAGE HTML
<img src="http://lorempixel.com/400/200/" alt="" />

// BACKGROUND CSS 
#ma_div {
 background: url(http://lorempixel.com/400/200/) no-repeat;
}

Commence par créer cette petite page de test, ce sera bien plus simple pour te venir en aide Smiley smile
Modifié par audrasjb (22 Apr 2014 - 21:49)
Re,

Je t'ai fait un exemple de base sur jsFiddle en te corrigeant déjà ton code HTML. Quel est ensuite exactement ton problème ?

> Exemple
(tu peux créer/dupliquer cet exemple sur jsfiddle, faire des modifs, et reposter le nouveau lien qui te sera attribué, sachant que le plus simple est tout de même de te créer un compte pour avoir la possibilité de gérer différentes versions de tes essais)
Bonjour,

Encore vraiment merci! Si tout le monde pouvait aider les gens comme ca...
Bon j'ai fait ce que tu m'as dis j'ai fais un copier/coller, et remplacer par mes url mais ca me donne exactement ce que j'avais auparavant.
Mon problème est de redimensionner mon menu en fonction de ma page.
Je m'explique:
J'aimerais que quand la page s'agrandit sur un autre écran, que mon menu s'agrandisse proportionnellement. En fait j'aimerais que ma page et mon menu soit automatisés en fonction de chaque écran et chaque navigateur.
J'ai fait une page test comme demander avec mes infos:
http://jsfiddle.net/fBe4T/

Encore une fois merci merci merci!
Bonne journée
Re,

Bon, quelques questions avant de poursuivre : tu ne vérifie pas ton code au validateur ? Quel logiciel de production de code utilise-tu ? Comment as tu appris à utiliser HTML et CSS ? Quel est ton niveau au juste ?
La réponse au deux dernières questions permettrait d'adapter la réponse en ne partant pas sur une solution qui nécessiterait plusieurs mois d'auto-formation pour comprendre ce que tu fais mais sur une solution comportant les bons compromis afin que tu puisse avoir un rendu correspondant à peu près à ce que tu souhaite obtenir.

La réponse à la première question est quant à elle contenue dans la question Smiley cligne Il faut que tu prenne l'habitude de produire un code valide : validateur HTML ; validateur CSS. C'est indispensable pour obtenir un résultat cohérent suivant les navigateurs.

Je t'ai fait une première série de corrections (surtout dans ton HTML). Petit rappel de mon message ci-dessus (à relire) : il ne faut pas copier autre chose que l'intérieur de ce qui se trouve entre <body> et <body> sur jsFiddle. Je t'ai tout nettoyé.
> http://jsfiddle.net/audrasjb/fBe4T/1/ Ça fait déjà une meilleur base pour travailler sur ton problème Smiley cligne

Maintenant, quel est le rendu souhaité exactement : le menu doit être centré et l'espace entre chaque item augmenter si la surface affichable augmente ? Dans ce cas tu ne peux pas fonctionner avec des largeurs fixes pour chaque item comme tu le fais. Il faut fonctionner plutôt avec des pourcentages.
re,
Non je n'ai pas l'habitude de verifier mon code au validateur car je ne connaissais pas du tout jsfiddle!
Je suis sur DW et je ca fait maintenant un peu plus d'1 mois que je suis sur mon site. Donc pas énormément de connaissance en html et css, j'ai malheureusement appris seul, d'où toutes mes erreurs.
J'ai effectivement essayé également de mettre toutes mes données en % mais le menu reste comme tu le vois!

Le rendu souhaité de ma page d'accueil, est un menu commençant par "programme" juste après le logo "violon" du site, avec un petit espacement entre chaque titre du menu et finissant par "bénévoles" un peu plus excentré.
J'aimerais que mon menu s'adapte à mon image (espacement, police,...)
J'espere sincèrement que cela reste possible.
Merci de prendre du temps.

Bon courage