28172 sujets

CSS et mise en forme, CSS3

Une image au dessus d'une autre

bonsoir à tous,
nouveau sur ce forum,je me présente :
en deux mots je suis un vieux con, qui se remet
au boulot pour des artistes comme moi.
mon dev html remonte un peu .... lol

ma question :

à l'instar de ce site :
http://www.pizzaza.ca/restaurant/bar_a_vin.php

je souhaite afficher une image en hover au dessus de mon image de menu, comme eux,
je fait pratiquement le même design pour une artiste peintre amie.
j'essaye tant bien que mal mais je comprends pas comment faire en css ??

suis-je compréhensible ?

merci de votre aide

cordialement

sined
Salutation sined33

Je me souviens avoir déjà participer à une discussion sur le sujet que tu traite ici sous topic.
Une image par dessus une autre. Discussion et code entre-nous.

J'essairai de retrouver la discussion qui date déjà de quelques mois. Si je le trouve, je te le donne.

D'ici là j'aimerais te dire que lorsque nous traitons d'une image par dessus une autre, souvent dans un conteneur parent, n'aura de sens que dans le « positionnement en CSS ». Différents tutos traitent (et ce profondément) du sujet sur Alsacréations et openweb. Toutes instructions qui casse le flux normal comme par exemple « float et position », ouvriront des portes nouvelles sur tes intentions esthétiques et fonctionnelles.

Si je trouve le sujet des derniers mois je te le donne. Il y avait l'auteur (mémoire morte), artemus24 et moi-même. D'autres aussi évidemment, mais dont les pseudos m'échappent, et qui joueront un rôle de pointe.

Tuto sur Alsacréations : positionnement en CSS.
C'est l'adresse de la 2ième partie où des liens externes nous propulsent vers des subtilités en CSS.

Le positionnement en CSS est vraiment à la base des superpositionnements d'images et de textes, comme de tout autre média. Et lorsque c'est gérer via un langage de programmation (facultatif), c'est très ouvert à l'intuitif et aux capacités créatives en soi.

Je ne retrouve pas le topic mais je te laisse quand même avec les résultats où, image, texte et border sont en superposition via le positionnement en CSS. Attention ici le positionnement des objets est en nombre positif et non négatif. C'est une des grandes faiblesses de tous les débutants (es). Certains mêmes abuseront des nombres négatifs. Par contre l'abus des nombres négatifs en positionnement CSS signale une certaine détresse (incompréhension) dans la capacité de gérer les espaces superposés en direction (x et y).

upload/20350-zZz01.jpg

Les paysages de Melbourne est un titre fictif, utile dans le cadre de l'exercice seulement. De même pour tout autre composant du fragment HTML et CSS.

Bon il faut que je quitte, je m'en vais acheté la biographie de Steve Jobs. Smiley lol

..
Modifié par zardoz (02 Nov 2011 - 04:54)
bonjour zardoz,

merci de votre réponse.
alors depuis plusieurs jours je m'abime les yeux sur tous ces sites,
à la recherche d'une illumination. Mais la force n'est pas en moi.

je souhaite vraiment faire le même menu que ce site
http://www.pizzaza.ca/restaurant/bar_a_vin.php

mais en css ???? je doute
mon souci a l'heure est d'afficher les bulles en hover. avec le lien qui vas bien.
a priori image fond, bande menu, etc, résolu ou presque Smiley cligne

voilou, merci quand même

cordialement
Oui en effet un menu assez simple et fonctionnelle.
Le script CSS est quand même accessible de l'exemple que tu as donner en lien.

Perso je l'ai vérifier, je l'ai en possession.

html, body { height: 100%; width:100% }
body { margin:0; padding: 0; border: 0; font-family:Verdana, Geneva, sans-serif; font-size: 11px; background-color: #000; }
a img { border: 0; }
img { -ms-interpolation-mode: bicubic; }

h3 { font-size: 14px; color: #c8641b; }
#background_container { position: absolute; top:0; left:0; }
#background { position:fixed; top: 0px; left: 0px; overflow:hidden; }
* html #background {position:absolute;}

#page { position: absolute; top:0; left:0; width: 100%; height: 100%; min-height: 670px; z-index: 10; }
.menuici { position:absolute; top:-60px; right:-6px; z-index:10000; }
#menu { position: absolute; bottom: 80px; margin:0; background-image:url(../_images/bg_menu.png); height: 116px; width: 100%; }

#menu div.copyright { position:absolute; bottom:-20px; right:35px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#c0c0c0; }
#menu div.copyright a { margin-left:0px !important; clear:none !important; color:#c0c0c0; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	text-decoration:none; font-weight:bold; text-transform:uppercase; font-size:9px; } 
#menu div.copyright a:hover { color:#d61c0d; }

* html #menu {top: 500px;}
#menu a { margin-left: 25px; }
#menu a.right { float: right; margin-top:25px; margin-right: 20px; }
* html #menu { background-color: #000; background-image: none; }

#menu .bulle { display: none; position: absolute; top: -80px; z-index:10000; }
#menu a:hover .bulle { display: block; }
#menu .menu { left: 20px; }
#menu .raisin { left: 280px; top: -120px; }
#menu .photos { left: 430px; top: -65px; }
#menu .cave { left: 70px; }
#menu .salon { left: 160px; }

#quick-menu { position: absolute; top:25px; right:10px; }
#quick-menu ul { list-style:none; margin:0; padding:0 } 
#quick-menu ul li { list-style:none; margin:0; padding:0; float:left; } 

#container { position: relative; top: 70px; width: 880px; height: 375px; margin: 0 auto 0 auto; }
#sidebar { float: left; position: relative; width: 180px; height: 375px; background: url(../_images/bg_titles.jpg); }
#content { position: relative; z-index:1; float: left; background: url(../_images/bg_contenu.png); width: 700px; height: 375px; }

#content-toggler { position: absolute; bottom: -25px; right: 50px; cursor: pointer; }

.col-1 { padding: 20px 20px; width: 330px; float: left; }
.col-2 { padding: 20px 20px; width: 250px; float: left; }
.col-menu { padding: 20px 0px 20px 20px; width: 250px; float: left; }
.col { margin-top:45px !important; }
.col_lower { margin-top:75px !important; }

.col-menu h4 { margin-bottom: 0; padding: 0; color: #7b695d; }
.colspecial h4 { margin:2px 0 !important; padding: 0; color: #7b695d; }
.col-menu p { margin: 0; padding: 0; line-height:12px; }

.content-horiz { width: 700px; height: 375px; overflow-x: auto; overflow-y: hidden; }
/*.inner-content-horiz { width: 4000px; }*/

.contact { padding-bottom: 20px; float: left; width: 125px; }

.with-img-right { margin:0; padding:0; list-style: none; width:250px; }
.with-img-right h3 { margin: 0; padding: 0px 0px 0px 0px; }
.with-img-right p { margin: 0; padding: 0; }
.with-img-right li img { float: right; }
.with-img-right li { padding: 15px 0px 0px 0px; vertical-align:top; min-height:44px; width:250px; }


.clear { clear: both; }
.right { float: right; }
.left { float: left; }

.top { position: absolute; top: 0; }
.bottom { position: absolute; bottom: 0; }
.aright { position: absolute; right: 0; }
.aleft { position: absolute; left: 0; }

#content i, #content em { color: #7b695d; }
#content a { color: #15536a; }

label { font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold; color: #7b695d; width: 100%; }
.field { background-color: #FEF7E6; border:5px solid #B8AA95; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; padding:2px; }

#cv-attached { margin-top:22px; display: none; }
#bt-submit { cursor: pointer; }
#upload-list { display: none; }

#upload-attach img { background-image: url(../_images/emploi-_bt_browse_off_.gif); }
#upload-attach.hover img { background-image: url(../_images/emploi-_bt_browse_on_.gif); }
#upload-attach.load img { background-image: url(../_images/emploi-_bt_load.gif) !important; }

.fut { background-image:url(../_images/ico_fut.gif); background-position:96% 50%; background-repeat:no-repeat; }
.bouteille { background-image:url(../_images/ico_biere.gif); background-repeat:no-repeat; background-position:95% 50%; }
.bouteille h4 { padding-right:25px; }
.fut h4 { padding-right:30px; }
.ou { padding:5px 0; color: #c8641b; font-weight:bold; }

h4 { font-size:12px; * margin:10px 0px; }
h3 { font-size:14px; }

.richard li { list-style-image:url(../_images/img_fleche.gif); margin-left:0px; padding-left:0px; }
.richard ul { margin:0; padding:0; }
.richard ul li { margin:0; padding:0; }
.thumbnail { border:5px solid black; margin-right:5px; margin-bottom:5px; }
.galerie_photo a:hover img {
	border:5px solid black;
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5; /* khtml, old safari */
	-moz-opacity: 0.5; /* mozilla, netscape */
	opacity: 0.5; /* fx, safari, opera */
	
}
img { outline:none; }
a { outline:none; }

.menupdf { position:absolute; top:5px; left:535px; }

Tu peut atteindre son fichier CSS : ici et l'ouvrir dans ton éditeur de préférence.

Je m'en veut un peu de proposer le script CSS de cette façon mais bon.
Pour étude c'est ok.

..
re bonsoir et encore merci,

mais vous avez raison, a l’époque ou je sévissez sur les newsgroups,
<mode citation variétés>
on me parle d'un temps que les moins de vingt ans ne peuvent pas connaître ! lalalala.....
<fin mode citation variétés>
j'avais aussi tendance a maitriser mes réponses en exemples et non solutions.

mais la... je vous avoue vous m'avez battu !lol

donc avant que je m'arrache le peu de cheveux qui me restes,
voilou ou j'en suis perso

mon site de travail
www.sinedproductions.fr/yenceladd

ne pouvant faire des pièces jointes :
le code html :
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
    <title>Yençeladd</title>
  </head>
  <body>
<div id="bandeauaccueil">
 <p> <span class="titrebandeauaccueil">YEN&#199;ELADD  </span>
 </p>
 <div id="menuaccueil" >
 <span class="palette"><img src="image/palette.png" a href="peinture.html"></span>
 <span class="appareilphoto"><img src="image/appareilphoto.png"></span>
 <span class="expo"><img src="image/expo.png"></span>
 <span class="question"><img src="image/question.png"></span>
 </div>
</div>  
<div id="piedpage">
Réalisé par  © Nov.2011 - <a href="http://www.sinedproductions.com">sinedproductions.com </a>
</div>
  </body>
</html



le fichier en cours css


html { 
		margin:0;
		padding:0;
		background: url(image/pageaccueil.jpg) no-repeat center fixed; 
		-webkit-background-size: cover; /* pour Chrome et Safari */
		-moz-background-size: cover; /* pour Firefox */
		-o-background-size: cover; /* pour Opera */
		background-size: cover; /* version standardisée */
		}

#piedpage {
		position: fixed;
		bottom: 0;
		width: 1200px;
		padding: 0 20px;
		text-align:right;
		font-weight: bold;
		font: italic 10pt/32pt georgia;
		color: white;
}		
#bandeauaccueil {
		float: center;
		margin-top: 650px;
		margin-left: -10px;
		margin-right: -10px;
		margin-bottom: 0px;
		height: 100px;
		background-color: #050505;
		border-color: white
		}
#menuaccueil {
		position: absolute;
}
.palette {
		float: center;
		margin-top: 700px;
		margin-left: 80px;
}
.palette:hover {
		background:url(image/bulletravaux.png); 
		
}
.appareilphoto { 
		margin-top: 700px;
		margin-left: 60px;
}
.appareilphoto:hover { /*en cours ecriture*/
		background:url(image/bulletravaux.png); 
		background-repeat: no-repeat; 
}

.expo { 
		float: center;
		margin-top: 700px;
		margin-left: 40px;
}
.expo:hover { /*en cours ecriture*/
		float: center;
		margin-top: 700px;
		margin-left: 40px;
		background:url(image/bulletravaux.png); 
		background-repeat: no-repeat; 
}
.question {
		float: center;
		margin-top: 700px;
		margin-left: 30px;
}
.question:hover { /*en cours ecriture*/
		float: center;
		margin-top: 700px;
		margin-left: 30px;
		background:url(image/bulletravaux.png); 
		background-repeat: no-repeat;
}				
.titrebandeauaccueil {
		font: italic 30pt/62pt georgia;
		font-weight: bold;
		color: white;
		text-align:right;
		float: right;
		margin-right: 50px;
		}

merci de me dire ou m'aiguiller vers mes erreurs.

cordialement
bonsoir à tous

merci à zardoz pour le code du site que j'avais donné en exemple de ce que je veux.

mais j'ai beau me trituré l'esprit et même essaye de le copier
j'y arrive toujours pas.

si quelqu'un à une soluce pour m'aider à faire un mixte,

sinon j'abandonnerais ce style et retournerais à mes vieux démons de tableau ; Smiley smile )

cordialement
Sujet clos
Aller à