28172 sujets

CSS et mise en forme, CSS3

Image overflow visible

bonjour,
dans le cadre d'un découpage HTML un peu touchy, je suis un peu à court d'idée par rapport à l'utilisation d'une image, utilisée comme une image de fond mais avec un overflow:visible.
Le but étant d'utiliser l'image dans le header de ma page (l'homme buvant le verre de vin), d'avoir cette image qui glisse avec le contenu via le scroll de l'ascenseur vertical, tout en ayant pas l'ascenseur horizontal qui apparait.
regardez la page pour plus de détails : http://fautra.fr/index2.htm
la zone de contenu fait 960 de large, mais avec l'image, qui contient des bords perdus pour les grandes résolutions d'ecran, je me retrouve avec un ascenseur horizontal.
Or, j'ai utilisé la meme technique pour l'image du verre situé à gauche...l'image se prolonge vers le bas sans que l'ascenseur vertical n'en tienne compte.
La seule différence entre les 2 styles css déclarés, c'est position:fixed
Effectivement, si j'ajoute position:fixed au style qui régit le bloc contenant l'image du header, l'ascenseur horizontal disparait...mais l'image ne scroll plus...
Alors, savez vous comment je pourrais avoir le beurre et l'argent du beurre, c'est à dire une image qui scroll tout en n'ayant pas l'ascenseur horizontal ?
merci de votre aide
Smiley bawling arf...personne ne peut m'aider ?
ou peut etre n'ai-je pas été assez précis ?
n'hésitez pas à me dire si je peux simplifier la demande...
Bonjour,

un schéma est parfois mieux parlant ; un bout de code çà peut aider (le gros de ta structure) et un soupçon de simplicité dans ta demande ; parce que moi j'ai rien pigé XD
ahahah !
ok lol pardon...
alors je recommence.

sur le lien suivant http://fautra.fr/index2.htm, il y a une page qui est composée de 2 parties. La partie de gauche contenant la navigation et le verre en noir et blanc est fixe, sans scroll vertical. Et pourtant l'image du verre en noir et blanc dépasse du conteneur. Pour cela, j'ai utilisée la fonction overflow:visible.

Pour la partie de droite, j'ai utilisé la meme technique du overflow:visible mais avec une image de header (l'image du mec qui boit le vin) qui scroll verticalement, en meme temps que le texte en dessous. Le seul probleme, c'est que j'ai l'ascenseur horizontal qui s'affiche car cette image qui est très large. Je voudrai que l'ascenseur ne tienne compte que de la largeur du conteneur de référence, c'est à dire celui qui contient le texte.

En gros, le overflow:visible qui donne le résultat attendu pour l'image de gauche ne fonctionne pas pour l'image du header.

J'aimerai donc comprendre pourquoi et trouver un moyen de faire disparaitre cet ascenseur horizontal, tout en gardant le scroll.

voila mon code simplifié :

<body>
	<div id="illustrLeft">
		<div id="illustrRight">
			<!-- DEBUT: CADRE -->
			<div id="cadre">
				<!-- DEBUT: BANDEAU HAUT -->
				<div id="bandeau_haut">
					<div id="navLeft">
						<a href="#"><img src="images/logo_fautra_short.jpg" alt="Logo" width="223" height="119" id="logo" /></a>
						<ul class="nav">
							<li class="navBouton"><a href="#">Accueil</a></li>
							<li class="navBouton"><a href="#">Présentation</a></li>
							<li class="navBouton"><a href="#">Domaines représentés</a></li>
							<li class="navBouton"><a href="#">Contact</a></li>
						</ul>
						<img src="images/left.jpg" alt="Accueil"  width="545" height="900" class="verre" id="Accueil" />
					</div>
					<div id="headerRight">
						<img src="images/top-long.jpg" alt="header" width="2005" height="601" id="header" />
					</div>
				</div>
				<!-- FIN: BANDEAU HAUT -->
				 
				<!-- DEBUT: CONTENU -->
				<div id="bandeau_centre">
				
					<div id="bandeau_gauche">
					</div>
				
					<div id="contenu">
						<div id="content_centre">
							<h2>Bonjour M. Xxxxxxxx</h2>
							<h1>Nous sommes heureux de vous compter <br />
								<span class="titre1">parmi nos invités de marque !</span></h1>
							</div>
						</div>
					</div>
				<!-- FIN: CONTENU --> 
				
				</div>
				
				<!-- DEBUT: BANDEAU BAS --> 
				<div id="bandeau_bas">
				</div>
				<!-- FIN: BANDEAU BAS --> 
			</div>
			<!-- FIN: CADRE -->
		</div>
	</div>
</body>


et mon css simplifié :

body {
	background-image: url(../images/fond_ligne.gif);
	background-repeat: repeat-y;
	background-position: center top;
	margin: 0;
	padding: 0;
	background-color: #000000;
	background-attachment: fixed;
}

/*  STYLES PAGE   */
div#illustrLeft{
	background-attachment: fixed;
	background-image: url(../images/left1.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	/*border: 1px solid red;*/
}
div#cadre {
	width: 960px;
	margin: 0 auto;
	padding: 0 0;
	position: relative
}
div#bandeau_haut {
	height: 600px;	/*border: 1px solid green;*/
	overflow: visible;
}
div#bandeau_gauche{
	width: 283px;
	float: left;
	/*border: 1px solid blue;*/
}
div#bandeau_centre {
	overflow:hidden
	width=100%
	/*border: 1px solid pink;*/
}
div#contenu {
	margin-left: 283px;
}
div#navLeft{
	width: 283px;
	position: fixed;
	padding-top: 166px;
	margin: 0;
	overflow: visible;	/*border: 1px solid red;*/
}
div#navLeft .verre {
	float: right;
}
div#headerRight{
	width: 700px;
	margin: 0;
	overflow: visible;	/*border: 1px solid red;*/
	padding-left: 283px;
}

div#content_centre {
	padding: 0;
	margin-right: 20px;
} 
/*
div#bandeau_bas {
}
*/


.img_spacer {
	padding-right: 30px;
}

img {
	border: none;
	display: block;
}
/* menu */
.nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.nav li {
	width: 223px;
	height: 39px;
}
.nav li a {
	text-align: right;
	font-size: 16px;
	display: block;
	/*	visibility: hidden; */
	color: #FFFFFF;
	text-decoration: none;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 19px;
} 
.nav li a:hover {
	color: #91c633;
	text-decoration: none;
} 

.navBouton {
	background-image: url(../images/nav_separation.gif);
	background-position: left top;
	background-repeat: no-repeat;
}


Est ce que c'est plus clair ?
Merci de votre aide
Sujet clos
Aller à