Bonjour,
Je cherche à faire une div qui va contenir du text et lien (jusque là c'est pas compliqué) mais
je souhaite quelle soit centré sur l'image du conteneur qui est une salle de cinéma, (là cela se corse un peut plus) en effet je souhaite que cette div soit au niveau de l'écran comme si c'était projeté sur l'écran et là ou cela deviens carrement fou c'est que j'aimerai que cette div soit toujours alignée sur l'écran de la photo de la salle ciné et celà peut importe la taille de la fenêtre du navigateur.
Une photo pour illustrer :
http://www.casimages.com/i/150502042352605642.jpg.html
Le cadre bleu doit toujours être centré sur l'écran et peut importe la taille de la fenêtre du navigateur....
moi j'ai fait cela niv code mais c'est loin d'être ce que je souhaite (mais c'est intérressant)
html :
css:
Le hic c'est quand on réduis la fenêtre, soit le text sort du carde bleu ou soit ce cadre n'est plus correctement positionné par rapport à la céran de la salle de cinéma
Merci de vos conseils !!
Modifié par reaman (02 May 2015 - 20:26)
Je cherche à faire une div qui va contenir du text et lien (jusque là c'est pas compliqué) mais
je souhaite quelle soit centré sur l'image du conteneur qui est une salle de cinéma, (là cela se corse un peut plus) en effet je souhaite que cette div soit au niveau de l'écran comme si c'était projeté sur l'écran et là ou cela deviens carrement fou c'est que j'aimerai que cette div soit toujours alignée sur l'écran de la photo de la salle ciné et celà peut importe la taille de la fenêtre du navigateur.
Une photo pour illustrer :
http://www.casimages.com/i/150502042352605642.jpg.html
Le cadre bleu doit toujours être centré sur l'écran et peut importe la taille de la fenêtre du navigateur....
moi j'ai fait cela niv code mais c'est loin d'être ce que je souhaite (mais c'est intérressant)
html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cin&ecute;ma</title>
<link rel="stylesheet" href="css/style.css">
</style>">
</head>
<body>
<div id="conteneur">
<div id="ecran">
<p class="txt">
Plusieurs variations de Lorem Ipsum peuvent être trouvées ici ou là, mais la majeure partie d'entre elles a été altérée par l'addition d'humour ou de mots aléatoires qui ne ressemblent pas une seconde à du texte standard. Si vous voulez utiliser un passage du Lorem Ipsum, vous devez être sûr qu'il n'y a rien d'embarrassant caché dans le texte. Tous les générateurs de Lorem Ipsum sur Internet tendent à reproduire le même extrait sans fin, ce qui fait de lipsum.com le seul vrai générateur de Lorem Ipsum. Iil utilise un dictionnaire de plus de 200 mots latins, en combinaison de plusieurs structures de phrases, pour générer un Lorem Ipsum irréprochable. Le Lorem Ipsum ainsi obtenu ne contient aucune répétition, ni ne contient des mots farfelus, ou des touches d'humour.
</p>
</div>
</div>
</body>
</html>css:
#conteneur {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#ecran {
margin: 0 auto;
margin-top: 4%;
margin-left: 1%;
padding: 0;
width: 34%;
height: 37%;
border: 2px solid #00F;
text-align: left;
position: absolute;
overflow: hidden;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
.txt {
margin: 2%;
text-align: justify;
font-family: verdana;
font-size: 0.6em;
color: #777;
}Le hic c'est quand on réduis la fenêtre, soit le text sort du carde bleu ou soit ce cadre n'est plus correctement positionné par rapport à la céran de la salle de cinéma
Merci de vos conseils !!
Modifié par reaman (02 May 2015 - 20:26)