28172 sujets

CSS et mise en forme, CSS3

Background de div qui s'affiche dans le background du menu [RESOLU]

Bonjour à tous,

Mon problème est le suivant : j'ai une div "bandeaunavigation" qui englobe une autre div contenant le menu. Le menu ne prenant pas toute la largeur de la div "bandeaunavigation", j'ai voulu mettre une image1 en background de "bandeaunavigation", sauf que cette image1 a également pris la place de l'image2 située en background dans la div "menu" et elle se répète dans chaque rubrique du menu !
Et je ne veux pas mettre l'image1 en div car IE n'accepte pas du tout ! Et aussi, comme vous allez le voir dans le code, parce que j'ai mis un lien sur l'image1 et que je ne veux pas utiliser de javascript pour le site.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>...</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
	<link href="../CSS/limsfr.css" rel="stylesheet" type="text/css" />
	<style type="text/css">(</style>
    <!--[if IE]>
 <style type="text/css">
 html pre
{
	width: 636px ;
}
</style>
<![endif]-->
    </head>
	
	<body>
	<div id="conteneur">
    		
		<div id="header">
        	<div id="logolims"><a href="#" title="..."><span>LIMS FR</span></a></div>
        	<div id="bandeauaccueil"></div>
                </div>
        
        <div id="bandeaunavigation"><a href="#" title="blablabla"><span>blablabla</span></a>
			<div id="menu">
   				<ul class="niveau1">
      				<li class="sousmenu"><a href="#">...</a>
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
         				</ul>      
      				</li>
      				<li class="sousmenu"><a href="#">...</a>
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>            
         				</ul>
      				</li>
      				<li class="sousmenu"><a href="#">...</a>  
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
         				</ul>
      				</li>
      				<li class="sousmenu"><a href="#">...</a>
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
         				</ul>
      				</li>
      				<li class="sousmenu"><a href="#">...</a>
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
         				</ul>
      				</li>
      				<li><a href="#">...</a></li>
      				<li class="sousmenu"><a href="#">...</a>
         				<ul class="niveau2">
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
            				<li><a href="#">...</a></li>
         				</ul>
      				</li>
      				<li><a href="#">...</a></li>
   				</ul>
   			</div>
            <span id="clients"><a href="#">...</a></span>
            <span id="langues"><a href="#">...</a></span>
        </div>
		
		<div id="contenu">
			<h2>...</h2>
			<p>...</p>
		</div>
		<div id="footer">mentions légales</div>
	</div>
	</body>
</html>



et voici le code CSS :

#bandeaunavigation
{
height:64px;
margin:0;
padding:0;
}

#bandeaunavigation a
{
width:202px;
height:64px;
display:block;
background:url("..") no-repeat left top;
margin:0;
padding:0;
text-indent:-5000px;
float:left;
}

div#menu
{
background:url("..") no-repeat right top;
float:right;
height:24px;
width:798px;
margin:0;
padding:0;
}

div#menu a
{
color:#FFFFFF;
font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
font-size:0.9em;
font-weight:bold;
text-align:center;
border-left:dotted;
border-left-color:#FFFFFF;
border-left-width:thin;
}

div#menu ul
{
padding: 0;
margin:0px;
background:#EB6909;
}


J'espère qu'il y a assez d'informations pour vous dans le css... Mais selon moi ça ne peut pas concerner le reste du css (je peux me tromper). Smiley ravi


Merci pour votre aide et bonne soirée à vous,
Modifié par mama5 (14 May 2009 - 11:02)
Hello,

en tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.


D'autre part ce serait sympa de simplifier la tâche de ceux qui voudraient t'aider en mettant un code html qu'il suffise de copier/coller. Smiley smile
ok vraiment désolée j'avoue n'avoir pas lu le règlement avant...

J'espère que ceci sera déjà plus conforme (cf. nouveau message ci-dessus)
Modifié par mama5 (13 May 2009 - 19:58)
Bon le problème n'est pas résolu mais j'ai trouvé une autre solution :
J'ai créé une div pour l'image1 et j'ai tout positionné en absolu et ça fonctionne même sous IE.

le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>

		<title>...</title>

		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

		<meta http-equiv="Content-Style-Type" content="text/css" />

		<meta http-equiv="Content-Language" content="fr" />

	<link href="../CSS/limsfr.css" rel="stylesheet" type="text/css" />

	<style type="text/css">(</style>

    <!--[if IE]>

 <style type="text/css">

 html pre

{

	width: 636px ;

}

</style>

<! endif -->

    </head>

	

	<body>

	<div id="conteneur">

    		

		<div id="header">

        	<div id="logolims"><a href="#" title="..."><span>LIMS FR</span></a></div>

        	<div id="bandeauaccueil"></div>

                </div>

        

        <div id="bandeaunavigation">
        	[b]<div id="las2"><a href="#" title="..."><span>Loc-At-Soft</span></a></div>[/b]


			<div id="menu">

   				<ul class="niveau1">

      				<li class="sousmenu"><a href="#">...</a>

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

         				</ul>      

      				</li>

      				<li class="sousmenu"><a href="#">...</a>

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>            

         				</ul>

      				</li>

      				<li class="sousmenu"><a href="#">...</a>  

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

         				</ul>

      				</li>

      				<li class="sousmenu"><a href="#">...</a>

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

         				</ul>

      				</li>

      				<li class="sousmenu"><a href="#">...</a>

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

         				</ul>

      				</li>

      				<li><a href="#">...</a></li>

      				<li class="sousmenu"><a href="#">...</a>

         				<ul class="niveau2">

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

            				<li><a href="#">...</a></li>

         				</ul>

      				</li>

      				<li><a href="#">...</a></li>

   				</ul>

   			</div>

            <span id="clients"><a href="#">...</a></span>

            <span id="langues"><a href="#">...</a></span>

        </div>

		

		<div id="contenu">

			<h2>...</h2>

			<p>...</p>

		</div>

		<div id="footer">mentions légales</div>

	</div>

	</body>

</html>



Et pour le code CSS :

[b]#bandeaunavigation
{
	margin:0;
	padding:0;
}

#las2
{
	width:202px;
	height:64px;
	position:absolute;
	margin:0 80px 0 0;
	padding:0;
}


#las2 a
{
	width:202px;
	height:64px;
	display:block;
	background:url("../Images/las2.jpg") no-repeat left top;
	margin:0;
	padding:0;
	text-indent:-5000px;
	float:left;
}[/b]

div#menu

{

background:url("..") no-repeat right top;

float:right;

height:24px;

width:798px;

margin:0;

padding:0;

}



div#menu a

{

color:#FFFFFF;

font-family:"Myriad Pro", Arial, Helvetica, sans-serif;

font-size:0.9em;

font-weight:bold;

text-align:center;

border-left:dotted;

border-left-color:#FFFFFF;

border-left-width:thin;

}



div#menu ul

{

padding: 0;

margin:0px;

background:#EB6909;

}


Voilà merci à ceux qui y ont jeté un oeil et merci aux tutoriels d'alsacreation sur les propriétés des positions absolue, relative, float, etc.
Sujet clos
Aller à