28172 sujets

CSS et mise en forme, CSS3

Background cliquable comme sur yahoo.fr

Bonjour,

Seriez-vous si il existe un tuto pour faire background cliquable comme sur le site yahoo.fr ?

Merci beaucoup
<div onclick="document.location='http://www.mapage.com';" id="bg"></div>



#bg {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:-500;
}
Bonjour,

Voici ce que j'ai fait mais, j'ai un problème lors du clic.
Meme dans la div d'id main, cela m'ouvre une page externe.
En fait je voudrai que que cela m'ouvre une fenêtre uniquement dans la div #bg ( où aucun élément n'est présent.

Est-ce possible ?

Merci beaucoup

<html>
<style>
body{
	background: white url(habillage_1800x1500.jpg) no-repeat fixed 50% 0px;
}
#bg {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-500;
}
#main{
	width:936px;
	margin: 0 auto;
	padding:10px;
}
</style>
<body>
	<div onclick="document.location='http://127.0.0.1';" id="bg">
		<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia turpis vestibulum velit scelerisque sed feugiat erat luctus. Mauris eget nisi elit. Phasellus augue odio, malesuada vitae pellentesque ut, lobortis ut massa. Nulla malesuada consequat purus at molestie. Nulla facilisi. Vivamus posuere egestas eros quis commodo. Vestibulum sit amet lorem arcu. Pellentesque pretium metus nec lacus tincidunt fermentum. Nullam et ante sit amet massa varius dapibus. Praesent vel dui turpis, in interdum mi.</p>

	
		</div>
	</div>

</body>
</html>

Modifié par jose2204 (21 Sep 2012 - 14:50)
C'est contradictoire ce que tu dis.

Ouvrir une fenêtre => Nouvelle page

Détaille un peu plus ce que tu veux faire. Sur le site de yahoo que tu prends en exemple, ça ouvre une nouvelle page.
Salut,

Il faut juste rajouter un z-index à ton contenu du centre :

#bg {
	position:absolute;
        [b]z-index: 1;[/b]
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-500;
}
#main{
	width:936px;
	[b]position:relative;[/b]
        [b]z-index: 11;[/b]
	margin: 0 auto;
	padding:10px;
}
MattBPA a écrit :
C'est contradictoire ce que tu dis.

Ouvrir une fenêtre =&gt; Nouvelle page

Détaille un peu plus ce que tu veux faire. Sur le site de yahoo que tu prends en exemple, ça ouvre une nouvelle page.



en effet , je voudrai ouvrir une nouvelle page avec la pub en question
Gili a écrit :
Salut,

Il faut juste rajouter un z-index à ton contenu du centre :

#bg {
	position:absolute;
        [b]z-index: 1;[/b]
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-500;
}
#main{
	width:936px;
	[b]position:relative;[/b]
        [b]z-index: 11;[/b]
	margin: 0 auto;
	padding:10px;
}



salut

Cela ne fonctionne pas, j'ai mise ceci :
<html>
<style>
body{
	background: white url(habillage_1800x1500.jpg) no-repeat fixed 50% 0px;
}
#bg {
	position:absolute;
	z-index: 1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-500;
}
#main{
	width:936px;
	position:relative;
    z-index: 11;
	margin: 0 auto;
	padding:10px;
}
</style>
<body>
	<div onclick="document.location='http://127.0.0.1';" id="bg">
		<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia turpis vestibulum velit scelerisque sed feugiat erat luctus. Mauris eget nisi elit. Phasellus augue odio, malesuada vitae pellentesque ut, lobortis ut massa. Nulla malesuada consequat purus at molestie. Nulla facilisi. Vivamus posuere egestas eros quis commodo. Vestibulum sit amet lorem arcu. Pellentesque pretium metus nec lacus tincidunt fermentum. Nullam et ante sit amet massa varius dapibus. Praesent vel dui turpis, in interdum mi.</p>
		</div>
	</div>

</body>
</html>


Le clic dans div d'id "main" m'ouvre toujours le lien http://127.0.0.1
Yep sorry j'ai mal regardé le code HTML, moi je te propose plutôt de faire ceci :

	<a href="http://127.0.0.1" id="bg">
              <img src="tonurl" alt="Découvrez une autre page" />
        </a>

		<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia turpis vestibulum velit scelerisque sed feugiat erat luctus. Mauris eget nisi elit. Phasellus augue odio, malesuada vitae pellentesque ut, lobortis ut massa. Nulla malesuada consequat purus at molestie. Nulla facilisi. Vivamus posuere egestas eros quis commodo. Vestibulum sit amet lorem arcu. Pellentesque pretium metus nec lacus tincidunt fermentum. Nullam et ante sit amet massa varius dapibus. Praesent vel dui turpis, in interdum mi.</p>
		</div>
Et tu adaptes les CSS en fonction du rendu que tu souhaites
Modifié par Gili (21 Sep 2012 - 16:25)
J'ai réussit !!!

Voici mon code:


<html>
<head>
	<style type="text/css">
	body {margin: 0;}
	a#background {
		background: white url(habillage_1800x1500.jpg) no-repeat fixed 50% 0px;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
	}
	#main {
		position: absolute;
		width: 70%;
		min-height: 100%; 
		left: 15%;
		background-color: white;
	}
	</style>
</head>
<body>
	<a id="background" href="http://127.0.0.1" target='_blank'></a>
	<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia turpis 
			vestibulum velit scelerisque sed feugiat erat luctus. Mauris eget nisi elit. Phasellus augue odio,
			malesuada vitae pellentesque ut, lobortis ut massa. Nulla malesuada consequat purus at molestie. 
			Nulla facilisi. Vivamus posuere egestas eros quis commodo. Vestibulum sit amet lorem arcu. 
			Pellentesque pretium metus nec lacus tincidunt fermentum. Nullam et ante sit amet massa varius dapibus. 
			Praesent vel dui turpis, in interdum mi.</p>
	</div>
</body>
</html>


Un grand merci a tous
Sujet clos
Aller à