Menu transparent dans indexhibit

Bonjour,

J'ai un petit souci. J'aimerais rendre le menu de mon site: www.imagesin.ch transparent comme celui-ci: www.ronitmirsky.com ou celui-la: www.madebyberry.com .

Quelqu'un saurais me dire quel code il faut changer.

Merci d'avance!!!

4 réponses

  1. MERCI. J'ai pu avancer un peu. J'ai réussit à avoir le "filet" transparent à voir sur mon site: www.imagesin.ch.

    Malheureusement je n'arrive pas à avoir l'image derrière le menu. Ni à le remonter. Voici le code de la page, pouriez-vous s'il vous plait me dire ce qu'il faut changer. MERCI!!!

    /**
    * CSS
    *
    * @version 1.0
    * @author Vaska
    * @author Gregory Cadar
    */
    * {
    margin: 0;
    padding: 0;
    }

    body {
    text-align: left;
    font-size: 12px;
    font-family: Helvetica, Arial, sans-serif;
    background: #fff;
    }

    body.section-1 { }
    body.section-2 { }
    body.section-3 { }

    #content a {
    color: black;
    text-decoration: none;
    border-bottom: red solid 1px;
    }

    #content a:hover {
    color: red;
    border-bottom: red solid 1px;
    }

    img { border: none; }

    .hide {
    display: none;
    }

    #menu {
    width: 215px;
    overflow: auto;
    top: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    font-weight: 100;
    line-height: 120%;
    paddingt: 20px;
    margin: 20px;
    }

    #menu ul {
    list-style: none;
    margin: 0 0 12px 0;
    }

    #menu ul li.section-title { }

    #menu a {
    text-decoration: none;
    color: #9d9d9d;
    }
    #menu a:hover {
    text-decoration: none;
    border-bottom: 1px red solid;
    }

    #menu .active a {
    color: red;
    }

    #menu #menulink {
    border-bottom: 1px white solid;
    }

    #content {
    height: 100%;
    margin: 0 0 0 225px;
    padding-top: 57px;
    top: 0;
    text-align: left;
    line-height: 120%;
    }

    .container {
    padding: 5px 5px 25px 5px;
    }

    #content p { width: 600px; margin-bottom: 9px; }

    p {
    margin: 0 0 9px 0;
    }

    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 16px; }
    h4 { font-size: 12px; }

    #img-container {
    position: fixed;
    top: 117px;
    left: 230px;
    margin: 0; padding: 0;
    }

    #img-container img {}

    #img-container p.nav {
    position: fixed;
    top: 95px;
    left: 230px;
    margin: 0; padding: 0;
    z-index: 100;
    font-size: 10px;
    }

    #content #img-container a {
    border: none;
    }

    #content #img-container a:hover {
    color: red;
    text-decoration: none;
    }

    /*
    #img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; }
    */
    #once { clear: left; }
    1. MERCI à vous j'ai pu avancer un peu! J'ai réussi à avoir le "filet" transparent à voir sur mon site: www.imagesin.ch .

      Malheureusement je n'arrive pas à avoir l'image derrière le menu. Est le menu est trop bas aussi.

      Voici le code de la page. Peut-être pouriez-vous me dire ce qu'il faut changer...MERCI
      :/**
      * CSS
      *
      * @version 1.0
      * @author Vaska
      * @author Gregory Cadar
      */
      * {
      margin: 0;
      padding: 0;
      }

      body {
      text-align: left;
      font-size: 12px;
      font-family: Helvetica, Arial, sans-serif;
      background: #fff;
      }

      body.section-1 { }
      body.section-2 { }
      body.section-3 { }

      #content a {
      color: black;
      text-decoration: none;
      border-bottom: red solid 1px;
      }

      #content a:hover {
      color: red;
      border-bottom: red solid 1px;
      }

      img { border: none; }

      .hide {
      display: none;
      }

      #menu {
      width: 215px;
      overflow: auto;
      top: 0;
      bottom: 0;
      left: 0;
      position: fixed;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.5);
      font-weight: 100;
      line-height: 120%;
      paddingt: 20px;
      margin: 20px;
      }

      #menu ul {
      list-style: none;
      margin: 0 0 12px 0;
      }

      #menu ul li.section-title { }

      #menu a {
      text-decoration: none;
      color: #9d9d9d;
      }
      #menu a:hover {
      text-decoration: none;
      border-bottom: 1px red solid;
      }

      #menu .active a {
      color: red;
      }

      #menu #menulink {
      border-bottom: 1px white solid;
      }

      #content {
      height: 100%;
      margin: 0 0 0 225px;
      padding-top: 57px;
      top: 0;
      text-align: left;
      line-height: 120%;
      }

      .container {
      padding: 5px 5px 25px 5px;
      }

      #content p { width: 600px; margin-bottom: 9px; }

      p {
      margin: 0 0 9px 0;
      }

      h1 { font-size: 32px; }
      h2 { font-size: 24px; }
      h3 { font-size: 16px; }
      h4 { font-size: 12px; }

      #img-container {
      position: fixed;
      top: 117px;
      left: 230px;
      margin: 0; padding: 0;
      }

      #img-container img {}

      #img-container p.nav {
      position: fixed;
      top: 95px;
      left: 230px;
      margin: 0; padding: 0;
      z-index: 100;
      font-size: 10px;
      }

      #content #img-container a {
      border: none;
      }

      #content #img-container a:hover {
      color: red;
      text-decoration: none;
      }

      /*
      #img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; }
      */
      #once { clear: left; }
      1. en fouillant 30 secondes dans le code la page

        le CSS contient ca

        #menu {
        	width: 200px; /* sets the width of your left hand bar - if you change this also change the LEFT margin in #content to match */
        	overflow: auto;
        	top: 0;
        	bottom: 0;
        	left: 50px;
        	position: fixed; /* this make the menu stay in place while the content section scrolls*/
        	height: 100%;
        	background-color: #FFFFFF;
        	padding-top: 25px; /* change to match the padding-top in #content if you want them to align */
        	padding-bottom: 25px;
        	/* padding-left & right can be changed in #menu ul - below */
        		font-size: 11px;
        	opacity: 0.80;


        ca me parait une bonne piste