Téléchargement
illégal
Posez votre question Signaler

Menu transparent dans indexhibit

ttfrancisco 7Messages postés 11 mai 2009Date d'inscription 28 février 2011Dernière intervention - Dernière réponse le 16 juin 2010 à 18:53
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!!!
Lire la suite 

Menu transparent dans indexhibit »

4 réponses
Réponse
+1
moins plus
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
Ajouter un commentaire
Réponse
+1
moins plus
Tu peux utiliser la propriété opacity ou les couleurs RGBa (c'est comme les RGB, sauf qu'on ajoute la couche "alpha" (transparence)) en CSS.

http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
http://www.quirksmode.org/css/opacity.html
Ajouter un commentaire
Réponse
+0
moins plus
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; }
Ajouter un commentaire
Réponse
+0
moins plus
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; }
Ajouter un commentaire
Ce document intitulé « Menu transparent dans indexhibit » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?