28218 sujets

CSS et mise en forme, CSS3

[Résolu] Un rideau fixe sur mon site.

Bonjour, voila j'aimerais ajouter sur mon site un rideau fixe (image png avec transparance) qui se positionnerait en haut a droite de mon block conteneur qui recouvrirait les autres éléments. Est-ce possible ?

Je pensais qu'il suffisait juste de faire une division rideau :
#rideau {
background-image:url(images/rideau.png);
height:416px;
width:348px;
float:right;
}
mais en faisant cela tout le reste de ma page est décallé...

Donc je serais pas contre un petit peu d'aide Smiley smile

Voici l'adresse de la page:

http://boukeffa.free.fr/chicha/pages/accueil.php

Et voila l'adresse de la maquette, j'aimerais arriver à ce résultat :

http://boukeffa.free.fr/chicha/presentation.jpg

Merci.
Edited by Nad1 (20 Dec 2005 - 19:55)
Modérateur
Je suis occupé avec un client (il a le dos tourné), mais tu pourrais essayer avec la position absolute, au lieu de float. Je reviendrai pour t'aider plus tard si nécessaire.

Si tu ne connais pas, regarde sur openweb.eu.org
En mettant absolute et en bricolant un peu ca marche Smiley smile :

.rideau {
	width:348px;
	height:416px;
	position:absolute;
	margin-left:202px;
}

<img class="rideau" src="../images/rideau.png" alt="rideau" />


Je te remercie !

Par contre un autre problème se pose Smiley decu

J'ai une ligne de menu : Présentation - Visite ... et les derniers liens qui ce trouvent en dessous du rideau, on ne peut pas cliquer dessus. J'ai essayé d'arranger ca avec un z-index en mettant z-index:10 pour ma div menu et z-index:0 pour le rideau mais ca ne marche pas...

Une idée ? Merci encore.
Edited by Nad1 (20 Dec 2005 - 20:08)
Modérateur
Pour la position absolute, au lieu d'utiliser une margin gauche, tu devrais utiliser les propriétés suivantes :

- left
- top
- right
- bottom

Ces propriétés vont s'appliquer à ton l'élément par rapport au premier conteneur parent qui est en position relative, par exemple.

Je t'invite fortement à lire l'article à ce sujet. Il y a des exemples clairs.
Modifié par Tony Monast (20 Dec 2005 - 20:14)
Modérateur
En effet, mettre un élément en position absolue par-dessus un contenu rend ce dernier innaccessible. En fait, je n'ai jamais créé ce genre d'effet visuel très intéressant (si, je l'ai déjà fait, mais de façon plus discrète dans l'interface). Si j'avais à le faire, je penserais différemment.

Au lieu de mettre cette image par-dessus ton contenu via du code, tu devrais plutôt donner l'impression qu'il est par-dessus, mais en fait, il serait en-dessous, en background du contenu. Suffirait que tu place ton contenu pour être certains qu'il ne passerait jamais par-dessus le rideau. Tu vois ce que je veux dire ?

- Rideau en image de fond dans ton conteneur principal (background-image simple, avec background-position:right top ou top right, je l'oublis toujours)
- Padding-right sur ton contenu pour qu'il ne "touche" jamais à ton rideau

Aucune position absolute nécessaire, aucun z-index, aucun float, juste de l'illusion, donc aucun problème.

Un truc comme ca. Smiley smile
Modifié par Tony Monast (20 Dec 2005 - 20:34)
Modérateur
bonjour,
je me permet, de repondre sur le sujet des liens (+ d1 heure rapport au dernier post).
En mettant ton image en position absolute, elle recouvre comme prevue tes elements, pour recuperer le click sur les lien, ajoute a ton image un z-index 0 ou 1 et ajoute au lien un z-index superieur pour qu'il repassent dessus.
comme ceci:

.rideau {
	width:348px;
	height:416px;
	position:absolute;
	margin-left:202px;
	z-index:0;
}
#menu a {
	color:#F5C276;
	font-size:12px;
	text-decoration:none;
position:relative;
z-index:1;
}

le position:relative; permet simplement de garder les element <a> la ou il se trouvent (sans changer leur positionnement dans ce cas ) mais surtout de rendre le
z-index actif/efficace. et de replacer ainsi seulement les lien au dessus du rideau Smiley smile

a plus

<edit> je me permet aussi de reprendre son idée du absolute, son effet risque peut-etre d'etre casser au redimensionnement des polices, alors qu'avec cette soluce de z-index, seul les textes de liens repasseront au dessus du rideaux. </edit>
Modifié par gcyrillus (20 Dec 2005 - 21:52)
Modérateur
Pour éviter que tes liens du menu passent par-dessus ton rideau, suffit que tu donne une largeur inférieure à ton menu. Si par exemple ton interface est de 500 pixels, ton rideau 200 pixels, alors tu donne une largeur de 300 pixels à ton menu. De cette façon, même en agrandissant la taille du texte avec le navigateur, le menu ne devrait pas s'empiler par-dessus le rideau.
Modifié par Tony Monast (20 Dec 2005 - 22:13)
Ok merci beaucoup.

J'ai encore une autre petite question concernant ce satané rideau, en fait j'aurai aimé centrer mon site j'ai donc rajouter la ligne margin :
#content {
	width:550px;
	height:640px;
	margin:auto;
	background: url(images/background.gif) repeat-x;
	background-color:#741511;
}

Mais un probleme ce pose pour le rideau étant donné que je centre mon site je connais pas à l'avance la taille de la marge gauche qu'il faudra pour caler le rideau en haut a droite du site.
.rideau {
	width:348px;
	height:416px;
	position:absolute;
	left:212px; <-- ICI
	z-index: 0;
}

J'ai bien essayer de mettre un pourcentage mais ca ne marche pas super Smiley decu

Qqun aurait une idée ?

Merci.
Modérateur
Je n'ai plus accès à ton site (erreur 404), donc je ne peux pas vérifier ton code, mais dans l'article que je t'ai proposé d'openweb.eu.org, la solution s'y trouve.

Tu n'as qu'à mettre ton conteneur principal en position:relative, en CSS. Tu met ensuite ton div rideau à l'intérieur (dans le code) de ton conteneur principal. Ensuite, via CSS, tu met quelque chose comme ca :

CSS

#conteneurprincipal {
position:relative;
}

#rideau {
	width:348px;
	height:416px;
	position:absolute;
	right:0;
        top:0;
	z-index: 0;
}


HTML

<div id="conteneurprincipal">
   <div id"rideau"></div>
</div>


Le div rideau se positionnera par rapport à son conteneur (le conteneur principal, car c'est lui qui est placé en relative), donc à droite à 0, et à haut à 0.

Si ton div rideau est unique, au lieu d'utiliser une class, tu devrais utiliser un id. Dans mon exemple, j'ai changé pour des id. Voir Quelle est la différence entre une classe et un id ?
Modifié par Tony Monast (21 Dec 2005 - 00:09)
Modérateur
rebonjour,
as tu essayer de la positionner a droite plutot avec une valeur de zero et en donnant une position:relative a #content pour forcer .rideau a prendre en consideration #content comme coordonnées de positionnement ?

comme ceci :

.rideau {
	width:348px;
	height:416px;
	position:absolute;
	right:0;
	z-index: 0;
}
#content {
position:relative;
/* les elements contenus et places  en position:absolute prendront 
#content comme zone de reference */
	width:550px;
	height:640px;
	background: url(images/background.gif) repeat-x;
	background-color:#741511;
margin:auto;
}


a plus

<edit>, la reponse etait deja donnée, heu bonsoir a tous et bon dev </edit>
Modifié par gcyrillus (21 Dec 2005 - 00:18)
Oui désolé j'ai modifié la structure du site...
Voici l'adresse http://boukeffa.free.fr/chicha/

J'ai donc fait comme vous m'avez dit et cela marche parfaitement.

Je n'ai pas créé une division propre pour le rideau j'avais simplement fait

<img class="rideau" src="images/rideau.gif" alt="rideau" />


que je viens de remplacer par 

<img id="rideau" src="images/rideau.gif" alt="rideau" />


Il me reste juste a supprimer quelques erreurs pour qu'il soit valide XHTLM 1.0.
Sinon que pensez vous du résultat ?

Encore Merci Smiley smile .
Edited by Nad1 (21 Dec 2005 - 00:17)
Modérateur
Une dernière chose, au lieu d'utiliser une image (img) en dur, tu devrais utiliser un div avec une image de background. Une balise img est utilisée pour présenter un contenu réel, et non une image décorative. Dans ton cas, ton rideau n'est que purement décoratif donc il faudrait qu'il soit en image de background.
Tony Monast a écrit :
Une dernière chose, au lieu d'utiliser une image (img) en dur, tu devrais utiliser un div avec une image de background. .


je confirme, un tel design doit être "normalement" fait avec des images en background , car elles sont alors mises en cache = rapidité de chargement des pages améliorées,etc ...
Modérateur
robby a écrit :

je confirme, un tel design doit être "normalement" fait avec des images en background , car elles sont alors mises en cache = rapidité de chargement des pages améliorées,etc ...


Que les images soient en background, ou affichées via une balise img en tant que contenu, elles se mettent en cache quand même. Smiley cligne
Sujet clos
Aller à