Question css

JustineF
#1 3615 myliFe

Dites, petite question aux pros du css.
J'ai en body une image de fond.
Pour le header, je voudrais faire un rectangle de couleur avec une opacité de 50% (pour qu'on voit à travers l'image du body) mais je vousdrais que la background-image (du header) reste opaque.
C'est possible, ça ?

Pour l'instant, j'ai ça

#header {
	background: #4494b5 url(images/logo_blanc.png) no-repeat left;
	opacity: 0.5;
}

Mais forcément, l'image prend la transparence...

Merci de votre aide.

lundi
09 février 2009 à 20:25

#2 PanPan

Oui c'est possible !

lundi
09 février 2009 à 20:36

#3 CaptNCook

Hum je pige pas trop ce que tu veux faire. Mais si tu veux avoir deux opacités différentes, il te faut deux calques différents.

lundi
09 février 2009 à 20:38

JustineF
#4 3615 myliFe

CaptNCook a écrit
Hum je pige pas trop ce que tu veux faire. Mais si tu veux avoir deux opacités différentes, il te faut deux calques différents.

Genre un #header avec la couleur et transparence et un #header_img sans couleur de fond, avec mon image opaque.
Je vais tester ça.

lundi
09 février 2009 à 20:56

#5 Akshell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
background : url('http://uppix.net/4/e/4/17f8170db2b408cb54308fed27c91.jpg') top left no-repeat;
}
#header2 {
background: url('http://lasile.fr/images/logo.gif') no-repeat left;
width : 100px;
height : 100px;
position : absolute;
}
#header {
background: #4494b5 no-repeat left;
height : 100px;
opacity : 0.5;
filter : alpha(opacity=50);
}
</style>
</head>
<body>
<div id="header2"></div>
<div id="header"></div>
</body>
</html>

Dernière modification le 09/02/09 à 21:03 par Akshell

lundi
09 février 2009 à 21:01

JustineF
#6 3615 myliFe

Yep, merci, c'est ce que j'avais en tête.
le filter:alpha(), c'est pour ie ?
(j'avais vu que le opacity tout court n'était pas reconnu par ce navigateur de m****)

mardi
10 février 2009 à 01:38

#7 SimOOn

Ouaip, c'est bien ça.

mardi
10 février 2009 à 01:42

#8 JiHeM

J'essaie de bidouiller un peu mon site, mais j'y connais rien en CSS. J'ai ajouté une colonne à droite avec divers widgets. Le problème c'est que ça a rétréci la colonne principale avec le contenu, ce que je ne veux pas : je trouve le redimensionnement automatique des images absolument dégueulasse. Bref, j'ai bricolé deux valeurs (max-width & min-width) à l'arrache dans le fichier CSS, jusqu'à ce que ma colonne centrale soit suffisamment large pour afficher des images de 640 pixels de large. Mais ça ne doit pas être très propre, et pas adapté au 1024*768... De plus, je trouve les marges un peu grandes. Je me dis qu'il doit y avoir moyen de les réduire un peu, de baisser max-width et d'augmenter le pourcentage de la colonne principale pour lui garder sa largeur actuelle. Mais je m'y perds... Je pense que ça se joue ici :

/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1135px;
	min-width: 950px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

/* Singular */
.singular #primary {
	margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
	margin: 0 7.6%;
	position: relative;
	width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	margin: 0 auto;
	width: 68.9%;
}

En outre, ce nouveau "design" s'applique bien à la home et aux pages des diverses catégories accessibles via le menu, mais pas aux pages uniques des articles. Comment je fais pour avoir ma colonne de droite dans les articles aussi ?

Dernière modification le 11/05/13 à 00:19 par carwin

mardi
07 mai 2013 à 14:56

Gingembre
#9 Affreudisiaque

je croyais que Justine était revenue :(

mardi
07 mai 2013 à 16:37

#10 kaplan

A cause du groupe de musique ?

mardi
07 mai 2013 à 17:31

groove_salad
#11 hOrny Lettuce

body {padding: 0 2em;}
#page {margin: 2em auto;max-width: 1024px;min-width: 950px;}
#branding hgroup {margin: 0 7.6%;}
#access div {margin: 0 7.6%;}
#primary {float: left;margin: 0 -36.4% 0 0;width: 100%;}
#content {margin: 0 34% 0 1.6%;width: 78%;}
#secondary {float: right;margin-right: 1.6%;width: 15%;}

#Page #Content et #secondary pour le positionnement de tes < Div > en home.

==> Ce qui donne (avec les valeurs que j'ai modifiées, j'ai fait ça à titre d'exemple) :

En ce qui concerne les articles et la Colonne de droite, je ne suis pas spécialiste en WordPress mais m'est d'avis qu'il va falloir mettre les mains dans le cambouis ... Récupérer une partie du Code Dynamique de la home page pour le coller dans un CSS Secondary de la page article justement ... Cela implique probablement de modifier la stucture de la page (j'ai pas regardé le source en même temps).

Dernière modification le 10/05/13 à 10:25 par groove_salad

vendredi
10 mai 2013 à 10:19

#12 JiHeM

Ah merci ! Du coup la zone centrale est beaucoup plus large que 640 (1024 * 0.78, j'ai bon ?). Je préfère pas trop l'élargir non plus, sinon je vais me retrouver avec des paragraphes de deux lignes (et ça fatigue les yeux de lire sur une trop grande largeur il me semble). Mais je vois l'idée, je vais continuer à bidouiller les chiffres.

Pour le deuxième truc, heu... Je vais laisser tomber :)

vendredi
10 mai 2013 à 11:04

groove_salad
#13 hOrny Lettuce

En fait, 1024 est la largeur totale de la page (partie centrale + droite).

vendredi
10 mai 2013 à 12:30

carwin
#14 sprattus sprattus

Gingembre a écrit
je croyais que Justine était revenue :(

Pas du tout ! Jihem tente de partager un peu de ses grosses joules pour ranimer le site. Merci à.toi, rugueux et généreux homme du cantal !

vendredi
10 mai 2013 à 19:01

#15 JiHeM

Heu... En fait j'avais juste la flemme de créer un sujet, je préfère cybersquatter.

vendredi
10 mai 2013 à 20:18

#16 hohun

Meeerde JiHeM les cheveux "courts", ça fait un choc !

samedi
11 mai 2013 à 19:21

groove_salad
#17 hOrny Lettuce

Je m'excuse !

samedi
11 mai 2013 à 23:06

#18 LeChat

hohun a écrit
Meeerde JiHeM les cheveux "courts", ça fait un choc !

Il a été rasé complet hein !

samedi
11 mai 2013 à 23:38

groove_salad
#19 hOrny Lettuce

LeChat a écrit
hohun a écrit
Meeerde JiHeM les cheveux "courts", ça fait un choc !

Il a été rasé complet hein !

Complet, complet ? Je te trouve bien renseigné ... ;)

dimanche
12 mai 2013 à 09:56

#20 LeChat

Oups !

dimanche
12 mai 2013 à 10:41

Répondre au sujet