28172 sujets

CSS et mise en forme, CSS3

Positionnement de DIVs par rapport à une image étirable

Bonjour,

J'ai un arrière plan avec une image (1600*1200) étirable.

Je souhaite positionner des DIVs au dessus de zones précises de cette image. Cependant, comme l'image est étirable, je n'arrive pas à garder les DIVs en permanence au dessus des zones correspondantes.

Avez-vous quelques conseils/liens/tutos/exemples à me conseiller sur cette problématique ?

Merci
Et j'allais oublier mon squelette :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                <title>Association Télé 4L Sans Frontière</title>
                <link rel="stylesheet" type="text/css" href="style.css" />
        </head>
        <body>
        <img id="arriere" alt="" src="tele.png" />
        <div id="text">
			<div id="a2009"><a href="http://tele4lsf.com/2009/">2009<span>&raquo;Édition 2010</span></a></div>
			<div id="a2010"><a href="http://tele4lsf.com/2012/">2010<span>&raquo;Édition 2010</span></a></div>
			<div id="a2011"><a href="http://tele4lsf.com/2012/">2011<span>&raquo;Édition 2011</span></a></div>
			<div id="a2012"><a href="http://tele4lsf.com/2012/">2012<span>&raquo;Édition 2012</span></a></div>                                   
		</div>
	</body>
</html>


Et 

body {
          background : #000;
          margin : 0;
          /*background-image: url("tele.png") ;
          background-repeat: no-repeat; ;*/
          
          margin:0;
		  padding:0;
		  height: 100%;
		  width: 100%;
      }
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}

#inner {
          margin-left : -250px;
          position : absolute;
          top : -150px;
          left : 50%;
          width : 700px;
          height : 300px;
      }
.bgtext {
          font-size : 500%;
          position : absolute;
          text-align : center;
          top : -20%;
          left : 0%;
          right : 0%;
      }
.bgtext, .footertext {
          color : #222;
          font-family : verdana, helvetica, sans serif;
      }
.footertext {
          font-size : 12px;
          position : absolute;
          top : 320px;
          text-align : center;
          width : 500px;
      }
div#a2009, div#a2010, div#a2011, div#a2012, div#text5, div#text6, div#text7 {
          color : #222222;
          font-family : verdana, helvetica, sans serif;
          position : absolute;
      }
div#a2009 {
          font-size : 200%;
          top : 30%;
          left : -20%;
          position : absolute;
      }
div#a2010 {
          font-size : 200%;
          top : 70%;
          left : 5%;
      }
div#a2011 {
          font-size : 200%;
          top : 40%;
          left : 27%;
      }
div#a2012 {
          font-size : 200%;
          top : 50%;
          left : 70%;
      }

div#a2009 a:hover span {
          top : -3px;
          left : 0;
      }
div#a2010 a:hover span {
          top : -10px;
          left : 0;
      }
div#a2011 a:hover span {
          top : -4px;
          left : 0;
      }
div#a2012 a:hover span {
          top : -6px;
          left : 0;
      }

div#inner a:hover, div#inner2 a:hover {
          background : none;
          cursor : pointer;
      }
div#inner a span {
          display : none;
      }
div#inner a:visited span {
          display : none;
      }
div#inner a {
          text-decoration : none;
          color : white;
      }
div#inner a:hover span {
          display : block;
          position : relative;
          background : none;
          font-size : 14px;
      }
div#inner a:link, div#inner a:visited {
          text-decoration : none;
      }
div#inner a:hover {
          text-decoration : none;
      }
div#content {
          position : absolute;
          top : -50px;
          left : -70px;
          width : 635px;
          height : 400px;
          overflow : auto;
          font-family : verdana, helvetica, sans serif;
          font-size : 13px;
          color : white;
          text-align : justify;
          margin : 3px;
      }
div#inner div#content a:hover {
          text-decoration : underline;
      }
div#close, div#top {
          width : 17px;
          height : 17px;
          background : none;
          text-align : center;
          font-family : verdana, helvetica, sans serif;
          font-weight : bold;
          font-size : 12px;
          border : 1px solid #222;
      }
div#top {
          position : relative;
          left : 573px;
          top : 319px;
      }
div#close {
          position : relative;
          left : 573px;
          top : -47px;
      }
div#inner div#close a:link, div#inner div#top a:link {
          color : #fff;
          cursor : default;
      }
div#inner div#close a:visited, div#inner div#top a:visited {
          color : #fff;
          cursor : default;
      }
div#inner div#close a:hover, div#inner div#top a:hover {
          color : #fff;
          cursor : default;
      }
div#urltext {
          font-family : verdana, helvetica, sans serif;
          font-size : 30px;
          position : absolute;
          top : -87px;
          left : -69px;
      }
div#urltext, div#inner div#content a:link, div#inner div#content a:visited, div#inner a:hover, div#inner a:hover span {
          color : #ff7c11;
      }
div#content div#titlebar {
          border : 1px solid #222222;
          background : #000;
          font-weight : normal;
          color : #ff7c11;
      }
div#content {
          margin-left : 0;
          padding-right : 8px;
      }
.titleblock {
          font-family : verdana, helvetica, sans serif;
          font-size : 12px;
          color : #ff7c11;
          margin-right : 6px;
          margin-top : 10px;
          margin-bottom : 10px;
          margin-left : 2px;
          border : 1px solid #222;
          padding : 4px;
      }
.titleblock span {
          color : #ff7c11;
      }
#urltext a:link {
          color : #444;
      }
#urltext a:visited {
          color : #444;
      }
#urltext a:hover {
          color : #444;
      }
#urltext a:active {
          color : #444;
      }

Modifié par 2xyo (27 Nov 2010 - 20:01)
bonjour,

sans l'image dur dur de visualisé.

Si tu pars sur du positionement absolu, et une page fluide, les valeurs en % sont probablement les moins aléatoires.

min/max-height/width peuvent aussi aider a maintenir la zone a couvrir dans des proportions avantageuses.

background-size peut aussi simplifié la gestion de ton image étirable en arriere plan si elle ne vehicule pas de contenu, pour les navigateurs récents.

Le plus solide , c'est <img usemap="map" /><map id="map"><area shape=".....> , mais en taille fixe.

GC
gc-nomade a écrit :
bonjour,

sans l'image dur dur de visualisé.

Et hop : http://tele4lsf.com/tele.png

Je souhaite positionner un div au dessus de chaque groupe de voiture de couleur.

gc-nomade a écrit :

Si tu pars sur du positionement absolu, et une page fluide, les valeurs en % sont probablement les moins aléatoires.

Peu importe la manière dont je doit y arriver Smiley smile , je n'ai pas de préférence ! Du moment que le résultat est là et qu'il soit compatible avec le plus de navigateurs...
gc-nomade a écrit :

min/max-height/width peuvent aussi aider a maintenir la zone a couvrir dans des proportions avantageuses.

background-size peut aussi simplifié la gestion de ton image étirable en arriere plan si elle ne vehicule pas de contenu, pour les navigateurs récents.

Le plus solide , c'est &lt;img usemap=&quot;map&quot; /&gt;&lt;map id=&quot;map&quot;&gt;&lt;area shape=&quot;.....&gt; , mais en taille fixe.

GC

C'est "bien" niveau référencement les maps ? Smiley rolleyes
Modifié par 2xyo (27 Nov 2010 - 21:07)
Sujet clos
Aller à