CSS cadre flottant

Anonymous - Dernière réponse le 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;
}

CSS cadre flottant »

Suggestions

CSS cadre flottant
Html enlever le cadre d'un lien sur une image (Résolu) » Forum
[CSS] image flottante (Résolu) » Forum
CSS:largeur fixe/relative ...est-ce possible? » Forum
Fenêtre flottante » Forum
[CSS] Cadre d'image O.o » Forum

Plus

Réponse

cire69 23Messages postés 15 juin 2010Date d'inscription 3 mars 2011Dernière intervention 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;
}

Ajouter un commentaire - Site web

Réponse

cire69 23Messages postés 15 juin 2010Date d'inscription 3 mars 2011Dernière intervention 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/

Ajouter un commentaire - Site web

Anonymous - 15 juin 2010 à 21:19

Merci beaucoup ! Je vais aller voir tout ça :)

Réponse

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.

Ajouter un commentaire

Réponse

Anonymous 16 juin 2010 à 11:42

Personne ? :/

Ajouter un commentaire

Réponse

cire69 23Messages postés 15 juin 2010Date d'inscription 3 mars 2011Dernière intervention 16 juin 2010 à 13:35

ben à vrai dire, je ne comprends pas grand chose ! :)

tu n'aurais pas un lien que je vois ça ?

Ajouter un commentaire - Site web

Réponse

Anonymous 16 juin 2010 à 22:53

Voici un screen :

http://s2.noelshack.com/upload/17194077490293_capture_dacran_20100616__224550.png

(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.

Ajouter un commentaire

Réponse

cire69 23Messages postés 15 juin 2010Date d'inscription 3 mars 2011Dernière intervention 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. ;)

Ajouter un commentaire - Site web

Réponse

Anonymous 18 juin 2010 à 16:11

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 ? :)

Ajouter un commentaire

Réponse

Anonymous 18 juin 2010 à 21:33

Ce n'était pas le résultat attendu, mais c'est encore mieux ! Merci beaucoup beaucoup ! :)

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

CSS cadre flottant

CSS cadre flottant »

Passage au tout numérique : quel coût pour les particuliers ?