Sujet Précédent Sujet Suivant

CSS cadre flottant

Fermé
Anonymous - Modifié par Anonymous le 15/06/2010 à 18:17
 Anonymous - 18 juin 2010 à 21:33
Bonjour,

J'aimerai créer un menu avec une couleur de fond semi-transparente(opacité à 80%) ainsi que le corps de la même couleur. Seulement, je voudrais que le menu soit indépendant du corps. J'ai essayé avec la balise float en CSS, mais il n'y a que le texte qui a flotté, la couleur de fond du corps s'est superposée avec celle du menu => menu inutilisable.
Il faudrait donc faire en sorte que le cadre menu soit séparé du cadre du corps de la page, et que le cadre du corps de la page puisse s'adapter pour continuer ensuite sous le cadre menu.

|-----------------| . |-------------------|
|.....MENU.......| . |........................|
|.....................| . |........................|
|-----------------| . |........................|
_____________|.........................|
|.............CORPS DE LA PAGE.........|
|...................................................|
|__________________________|

(c'est ça que je veux faire, - et | représentant les bordures)


Mon css: 

#menuVertical
{
	  float: left; /* Le menu flottera à gauche */
	  background-color:#000000;
   background-repeat: repeat-x;
   border: 1px solid gray;
    margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    filter: alpha(opacity=80); 
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
width:300px;
}

#menuVertical a
{
	color:#1E7FCB;
}

#corps
{
float:top;
	width:960px;
	color: #840000;
	margin-top:90px;
   margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   padding: 20px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
 background-color: #000000;
    filter: alpha(opacity=80); 
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
border: 1px solid gray;
}




9 réponses

Réponse 1 / 9
cire69 Messages postés 22 Date d'inscription mardi 15 juin 2010 Statut Membre Dernière intervention 3 mars 2011 2
18 juin 2010 à 19:45
ben, à vrai dire, je ne comprends pas vraiment, je ne vois pas ce qui est masqué, tout fonctionne bien apparemment.

bon écoute, voila comment je vois les choses, fait un essai, j'ai fait quelques modifs !

pour la partie 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" > 

   <head> 
       <title>Bienvenue !</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
              <link rel="stylesheet" media="screen" type="text/css" title="Design" href="tuto.css" /> 
              </head> 
  <body> 
    <div id="corps">

   <div id="menuHorizontal"> 
        
       <ul class="menuderoulant"> 
<li><a href='Accueil.php'>Accueil</a></li> 
            
<li><a href='contact.php'>Contact</a></li> 


<li><a href='machin.php'>Machin</a></li> 

<li><a href='machin.php'>Machin</a></li> 

<li><a href='galerie.php'>Galerie</a></li> 


<li><a href='livredor.php'>Livre d'or</a></li> 


       </ul> 
        
        
        
   </div> 

<div id="contenu">
   <div class="menuVertical"> 
    
   <ul> 
    
   <li><a href='machin.php'>Machin</a> 
         <ul class="sousmenu">  
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='machin.php'>Machin</a></li> 
</ul> 
</li>    
    
   <li><a href='machin.php'>machin</a></li> 
    
   <li><a href='machin.php'>machin</a></li> 

<li> 
<a href='machin.php'>machin</a> 
<ul class="sousmenu"> 
<li><a href='machin.php'>machin</a></li> 
</ul> 
</li> 

<li> 
<a href='machin.php'>machin</a> 
  <ul class="sousmenu">  
<li><a href='machin.php'>machin</a></li> 
  </ul> 
  </li> 

</ul>
</div>
 
<div class="texte">
<p> du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, du texte, 
</p>

</div>
</div>
</div>
</body>

</html>


pour la partie css : 
body 
{ 
background-image:url("machin.png");
margin:20px auto;
width:960px;
} 

#menuHorizontal 
{ 
   float: left;  
   width: 960px;  
    background-color: #000000; 
   background-repeat: repeat-x; 
   border: 1px solid gray; 
    margin-bottom: 20px;  
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.80; 
-khtml-opacity: 0.80; 
opacity: 0.80; 
} 

#menuHorizontal ul {  
 margin:0; 
 padding:0; 
 list-style-type:none; 
 text-align:center; 
 } 
#menuHorizontal li { 
 float:left; 
 margin:0px; 
 padding:0px; 
 } 
#menuHorizontal li a { 
 display:block; 
 width:80px; 
 text-decoration:none; 
 padding:5px; 
 color: #1E7FCB; 
 } 

#menuHorizontal li a:hover { 
 color:#FFD700; 
 } 
   


#corps 
{ 
 color: #1E7FCB; 
 margin-top:0px; 
 width:960px; 
height:auto;
float:top; 
   margin-bottom: 20px;  
   padding: 20px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
 background-color: #000000; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.8; 
-khtml-opacity: 0.8; 
opacity: 0.8; 
border: 1px solid gray; 
position:absolute;
} 

#corps img 
{ 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
  } 




.Titredusite 
{ 
 font-family: "Nueva Std"; 
 font-size: 40px; 
} 



.valider 
{ 
 margin-left: 170px; 
} 


.menuVertical 
{ 
float: left; 
  background-color:#FFF; 
  margin-right:40px; 
   background-repeat: repeat-x; 
   border: 1px solid gray; 
    margin-bottom: 20px;  
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.80; 
-khtml-opacity: 0.80; 
opacity: 0.80; 
width:300px; 
} 

.menuVertical a 
{ 

 color:#1E7FCB; 
}

.texte {
width:600px;
float:right;
}

#contenu {
width:auto;
}
1
Réponse 2 / 9
cire69 Messages postés 22 Date d'inscription mardi 15 juin 2010 Statut Membre Dernière intervention 3 mars 2011 2
15 juin 2010 à 21:01
bonjour,

pour mettre ton menu indépendant, met le dans une div !

et pour un menu en transparence, et ben tu ne peu pas mieux tomber, j'en ai fait un !
va voir :
http://www.cireasy.com/menu-deroulant-en-css/
0
Anonymous
15 juin 2010 à 21:19
Merci beaucoup ! Je vais aller voir tout ça :)
0
Réponse 3 / 9
Anonymous
15 juin 2010 à 23:35
Bon, ça ne fonctionne toujours pas . Mon <div id='corps'> chevauche toujours mon menu (<div id='menu'>.
J'aimerai qu'il y aie 2 cadres bien distincts, l'un du menu (il n'y a pas de sous menu) et l'autre du corps. Ces cadres ont les bords arrondis, et une opacité de 80% sur une couleur noire(pas important). J'aimerai que le cadre et la couleur du corps s'adapte en fonction du menu comme le fait le texte avec une balise float.

Ici, mon menu est masqué par le <div id='corps'>, je ne peux le voir que grace à la transparence du fond mais il est inutilisable. Y a-t-il un moyen pour afficher 2 cadres bien distincts qui s'adaptent en fonction de l'autre ? La balise Float ne fait effet qu'avec le texte mais pas avec la couleur d'arrière plan ni rien, elle continue à masquer mon menu. J'aimerai aussi un espace entre ces 2 éléments, soit menu sous fond noir transparent et corps sous fond noir transparent qui s'adapte en fonction de la longueur de son contenu. (il y a une image d'arrière plan au body), et entre les 2 un espace.
0
Réponse 4 / 9
Anonymous
16 juin 2010 à 11:42
Personne ? :/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
cire69 Messages postés 22 Date d'inscription mardi 15 juin 2010 Statut Membre Dernière intervention 3 mars 2011 2
16 juin 2010 à 13:35
ben à vrai dire, je ne comprends pas grand chose ! :)

tu n'aurais pas un lien que je vois ça ?
0
Réponse 6 / 9
Anonymous
16 juin 2010 à 22:53
Voici un screen :

http://www.noelshack.com/

(oui, j'ai brouillé le texte);

En haut, c'est un menu horizontal, celui là ne me pose aucun soucis.

Le gros carré noir tout moche c'est mon menu, qui est magnifiquement masqué par le corps. Avec mon code css que j'ai posté plus haut, on peut voir qu'il n'y a que le texte sous l'effet du float.

Mon but serait de laisser un espace entre la fenêtre du menu et la fenêtre du corps, et non pas l'un qui chevauche l'autre et qui le rend inutilisable.
0
Réponse 7 / 9
cire69 Messages postés 22 Date d'inscription mardi 15 juin 2010 Statut Membre Dernière intervention 3 mars 2011 2
17 juin 2010 à 19:19
ça ne me suffit pas !
il faudrait que je vois la source, c'est à dire le html plus le css en entier, car la à partir d'un image, je ne peu pas me rendre compte de ce qui ne marche pas. ;)
0
Réponse 8 / 9
Anonymous
Modifié par Anonymous le 18/06/2010 à 16:13
Le CSS, je l'avais déjà posté :) Mais je peux toujours le reposter : 

body 
{ 
   width: 900px; 
   margin: auto; 
   margin-top: 20px;   
   margin-bottom: 20px;    
background-image: url("machin.png"); 
} 

#menuHorizontal 
{ 
   float: left;  
   width: 1000px;  
    background-color: #000000; 
   background-repeat: repeat-x; 
   border: 1px solid gray; 
    margin-bottom: 20px;  
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.80; 
-khtml-opacity: 0.80; 
opacity: 0.80; 
} 

#menuHorizontal ul {  
 margin:0; 
 padding:0; 
 list-style-type:none; 
 text-align:center; 
 } 
#menuHorizontal li { 
 float:left; 
 margin:0px; 
 padding:0px; 
 } 
#menuHorizontal li a { 
 display:block; 
 width:80px; 
 text-decoration:none; 
 padding:5px; 
 color: #1E7FCB; 
 } 

#menuHorizontal li a:hover { 
 color:#FFD700; 
 } 
   


#corps 
{ 
 color: #1E7FCB; 
 margin-top:90px; 
 width:960px; 
float:top; 
   margin-bottom: 20px;  
   padding: 20px; 
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
 background-color: #000000; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.8; 
-khtml-opacity: 0.8; 
opacity: 0.8; 
border: 1px solid gray; 
} 

#corps img 
{ 
  background-color:#fafbfc; 
  border:1px solid #b0b0b0; 
  margin:0 0 10px 10px; 
  padding:5px; 
  } 




.Titredusite 
{ 
 font-family: "Nueva Std"; 
 font-size: 40px; 
} 



.valider 
{ 
 margin-left: 170px; 
} 


#menuVertical 
{ 
float: left; 
  background-color:#FFF; 
  margin-right:40px; 
   background-repeat: repeat-x; 
   border: 1px solid gray; 
    margin-bottom: 20px;  
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    filter: alpha(opacity=80);  
-moz-opacity: 0.80; 
-khtml-opacity: 0.80; 
opacity: 0.80; 
width:300px; 
} 

#menuVertical a 
{ 

 color:#1E7FCB; 
}


Le "menu.php", comprenant le menu horizontal (qui ne pose aucun soucis) et le menu vertical : 

<!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" > 

   <head> 
       <title>Bienvenue !</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
              <link rel="stylesheet" media="screen" type="text/css" title="Design" href="tuto.css" /> 
              </head> 
   <body> 
    
   <div id="menuHorizontal"> 
        
       <ul id='menuderoulant'> 
<li><a href='Accueil.php'>Accueil</a></li> 
            
<li><a href='contact.php'>Contact</a></li> 


<li><a href='machin.php'>Machin</a></li> 

<li><a href='machin.php'>Machin</a></li> 

<li><a href='galerie.php'>Galerie</a></li> 


<li><a href='livredor.php'>Livre d'or</a></li> 


       </ul> 
        
        
        
   </div> 
    
   <div id='menuVertical'> 
    
   <ul> 
    
   <li><a href='machin.php'>Machin</a> 
         <ul class="sousmenu">  
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='Machin.php'>Machin</a></li> 
<li><a href='machin.php'>Machin</a></li> 
</ul> 
</li>    
    
   <li><a href='machin.php'>machin</a></li> 
    
   <li><a href='machin.php'>machin</a></li> 

<li> 
<a href='machin.php'>machin</a> 
<ul class="sousmenu"> 
<li><a href='machin.php'>machin</a></li> 
</ul> 
</li> 

<li> 
<a href='machin.php'>machin</a> 
  <ul class="sousmenu">  
<li><a href='machin.php'>machin</a></li> 
  </ul> 
  </li> 

</ul> 

    
   </div> 
    
   </div> 

</body>


Et la structure d'une simple page : 

<!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" > 
   <head> 
       <title>Bienvenue !</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
              <link rel="stylesheet" media="screen" type="text/css" title="Design" href="tuto.css" /> 
              </head> 
   <body> 
    
    
       <div id="en_tete"> 

   <p class="Titredusite"> Titre du site </p> 
</div> 
  
  <?php include("menu.php"); ?>    
    
   <div id="corps"> 

<p> ce que je veux, c'est ici que je tape les éléments </p> 

</div> 

   </body> 
</html>


Autre question : j'ai essayé de poster une image, mais hélas elle se retrouve avec le même effet transparent que la couleur du fond du corps... Il n'y a pas un moyen de garder tel-quel les images ? :)
0
Réponse 9 / 9
Anonymous
18 juin 2010 à 21:33
Ce n'était pas le résultat attendu, mais c'est encore mieux ! Merci beaucoup beaucoup ! :)
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Tableau suivi cadres 2023 204 jours travaillés
UFAL75 -
PHILOU10120 -

33 réponses
langage C: Exception en point flottant
enacien -
viruk -

10 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses