5568 sujets

Sémantique web et HTML

[Résolu] Paradoxe de position entre le centrage et z-index

Bonjour à tou(te)s,

Voilà, cela vous paraitra tout bête mais moi je vois pas :
dans un contexte responsive (j'ai essayé aussi avec un framework bootstrap, ce n'ai pas le souci) , je réalise une page d'accueil qui dirige vers 2 sites différents, pour cela j'ai 2 grandes images, l'une à gauche de l'écran, l'autre à droite, j'ai mes hovers tout simple tout va bien.
Lorsque je veux proposer une image (le logo = .title dans le code) superposé en haut de la page (sur les 2 images), je peux : position fixe + z-index
Mais lorsque je veux le centrer je peux pas Smiley confus
position relative + text-align
J'ai donc empilé les divs et rien y fait :
pourcentages, positions, floatings et ordres d'imbrications utilisés de divers manières etc...

C'est pas extraordinaire mais j'ai besoin d'aide si cela est possible pour vous, cela serait super Smiley smile

voici le code :

Le HTML :

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
    </head>
    <body>
    
  <div class="container-title" >
        <div class="title" >
        <div class="img-title"> <img src="../img/title.jpg" width="300" height="150"></div>
            </div>
             </div>


    <div class="container">
      <div class="col-half"> <a href="http://forum.alsacreations.com"><img class="responsive-image" src="../img/test1.jpg" /></a>
      </div>
      <div class="col-half"> <a href="http://forum.alsacreations.com"><img class="responsive-image" src="../img/test.jpg" /></a>
      </div>
    </div>
         
</body>

</html>



Le CSS :



@charset "utf-8";
/* CSS Document */


html, body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
	background-color: #000;
}

.container {
	width: 100%;
	height: 100%;
	z-index: 99;
	position: fixed;

}

.col-half {
    margin: 0;
    padding: 0;
    float: left;
    max-width: 50%;
    height: 100%;
}

.responsive-image {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}
a:hover {
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
.title {
	z-index: 100;
	position: fixed;
	text-align: center;

}
.container-title {
	text-align: center;
	position: relative;	
   	margin-right: auto;
	margin-left: auto;  
	
}
.img-title {
	text-align: center;
	position: relative;
	margin-right: auto;
	margin-left: auto;   	
 height: 100%;
	width: 100%;	
}

Modifié par DavidVincent (12 Nov 2014 - 14:56)
Bonjour,

Si j'ai bien compris tu voudrais centrer et fixer en haut ton image qui est dans la div.img-title.
Tu as plusieurs erreurs dans ton code :
- il te manque un width: 100% sur la div.title (qui a la position fixe)
- les css .container-title et .image-title ne te servent à rien :
- le texte align est dans la class .title,
- la position relative est inutile, tu as juste besoin du fixed
- les margins sont inutiles car une div à un width de 100% par défaut Smiley smile

Par ailleurs, tu n'as pas peur d'avoir des mise en page avec plusieurs div en position fixed ?

Bye
Merci tomInCat !

Oui cela a résolu le centrage super ! Merci beaucoup !
J'aurai une autre question du coup (la dernière) :
Je voudrai que cette image soit aussi responsive que les deux autres (qui, elles, responsivent nikelement bien Smiley smile
J'applique bien ma class="responsive-image" et des W et H à 100%
mais visiblement c'est pas comme çà qu'il faut s'y prendre Smiley confus
Ces questions sont les points clés de cette petite page d'accueil, donc je devrais arrêter de t’embêter ensuite, tu m'a déjà enlevé une grosse épine du pied Smiley cligne

le code :

LE HTML :


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"></link>
    </head>
    <body>
    
    <div class="container">

      <div class="col-half"> <a href="http://forum.alsacreations.com"><img class="responsive-image" src="../img/test1.jpg" /></a>
      </div>
      <div class="col-half"> <a href="http://forum.alsacreations.com"><img class="responsive-image" src="../img/test.jpg" /></a>
      </div>
    </div>
    
        <div class="title" >
        <img src="../img/title.jpg" width="100%" height="100%" class="responsive-image" /></div>
            
</body>
</html>


LE CSS :


@charset "utf-8";
/* CSS Document */


html, body {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
	background-color: #000;
}

.container {
	width: 100%;
	height: 100%;
	z-index: 99;
	position: fixed;

}

.col-half {
    margin: 0;
    padding: 0;
    float: left;
    max-width: 50%;
    height: 100%;
}

.responsive-image {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;
}
a:hover {
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
.title {
	z-index: 100;
	position: fixed;
	text-align: center;
	width: 100%;
}

Modifié par DavidVincent (13 Nov 2014 - 03:13)
Pas de soucis, avec plaisir Smiley cligne .

Ton image s'adapte à la largeur du contenu mais pas à la hauteur : si tu réduis la largeur de ta page pour que celle-ci soit plus petite que ton image, tu verras que cette dernière se dezoom.

Pour résoudre ce problème, tu dois aussi donner une hauteur en % sur ta div.title mais je ne suis pas sûr que ce soit la bonne solution : pourquoi mettre 2 divs avec chacune une position fixed, un width et un height de 100% ? Ce n'est jamais bon d'abuser des positionnements, tu pourrais ne pas passer par le fixed ou n'avoir qu'un seul élément en fixed tout dépend de ce que tu cherches à obtenir.

Bon courage pour la suite Smiley smile
Sujet clos
Aller à