28172 sujets

CSS et mise en forme, CSS3

[Résolu] Position Décalé d'un bloc image et d'n bloc paragraphe

Bonjour, débutant mes premiers travaux sur Dreamweaver, j'ai surement fait une erreur basic mais j'aimerai savoir d'ou vient ma bêtise, ainsi je voudrais aligner un bloc paragraphe qui s'affiche par une transition d'opacité et une image.

Dans Dreamweaver mes deux blocs sont alignés mais dans chrome ou IE ils sont décalé vers le bas.

voici mon code html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>


<img src="../Downloads/AlineAlexAnneJB.jpg" width="200" height="200" alt="Portrait">

<div id="box"> </div>

<p>Photo de soirée</p>

</body>
</html>

Et le fichier CSS:

@charset "utf-8";
.StyleCSS {

}


#box {
background-image: url(Maison%20Algebra.png);
height: 50px;
width: 50px;
left: 250px;
position: absolute;
-webkit-transition: background-color ease-in;
-moz-transition: background-color ease-in;
-ms-transition: background-color ease-in;
-o-transition: background-color ease-in;
transition: background-color ease-in;
}

#box:hover {
background-color: #666;
}

p {
height: 200px;
width: 200px;
position: absolute;
bottom: 540px;
opacity: 0;
-webkit-transition: opacity;
-moz-transition: opacity;
-ms-transition: opacity;
-o-transition: opacity;
transition: opacity;
background-color: #666;

}

p:hover {
opacity: 0.7;
color: #FFF;
}
Je vous remercie d'avance de vos réponses, Bonne soirée!
J'ai résolu mon problème comme un grand, j'ai utilisé l'attribut z-index pour superposer mes 2 blocs

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="test1">

<img src="../Downloads/AlineAlexAnneJB.jpg" width="200" height="200" alt="photo">

</div>

<div id="box"></div>


<div id="test2">
<p>Photo de soirée</p>

</div>

</body>
</html>

CSS:

@charset "utf-8";
.StyleCSS {




}


#box {
background-image: url(Maison%20Algebra.png);
height: 50px;
width: 50px;
left: 250px;
position: absolute;
-webkit-transition: background-color ease-in;
-moz-transition: background-color ease-in;
-ms-transition: background-color ease-in;
-o-transition: background-color ease-in;
transition: background-color ease-in;
}

#box:hover {
background-color: #666;

}

div#test1{
position: absolute;
z-index: 1;
height: 200px;
width: 200px;
}

div#test2 {
height: 200px;
width: 200px;
position: absolute;
opacity: 0;
-webkit-transition: opacity;
-moz-transition: opacity;
-ms-transition: opacity;
-o-transition: opacity;
transition: opacity;
background-color: #666;
z-index: 2;

}

div#test2:hover {
opacity: 0.7;
color: #FFF;
}
Sujet clos
Aller à