Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: TheFlameflo
Ce topic a été résolu
Auteur Sujet: Centrer verticalement

TheFlameflo

Messages: 305

Bonjour,
J'ai un problème. Sur mon site, je souhaite centrer un élément en plein millieu d'une div qui est un effet parallaxe.
J'aimerais que ça ressemble un peu au template [url=http://html5up.net/spectral]Spectral.
[/url]Pour vous donner une idée de mon code :
HTML :
<div id="slide1">
   <div class="slide-inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus incidunt enim modi soluta, quam excepturi mollitia ratione dolore iure. Esse recusandae praesentium nesciunt maxime voluptates doloremque debitis facere autem dignissimos.</p>
   </div>
</div>
<div id="slide2">
   <div class="slide-inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat doloribus hic, commodi libero? Ut omnis, quisquam eveniet consequuntur, mollitia rerum tempora ipsa consequatur itaque id facilis ullam, earum laudantium tenetur!</p>
   </div>
</div>
<div id="slide3">
   <div class="slide-inside">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, obcaecati, impedit? Consequuntur sequi rerum, amet cum repudiandae tempora sapiente doloremque tenetur, aliquid minima architecto. Perferendis dolor ea asperiores tenetur earum?</p>
   </div>
</div>


 CSS:
body 
{
   margin: 0;
}
#slide1, #slide2, #slide3{
   height: 1000px;
   padding-top: 100px;
}
#slide1 {
   background: url(../img/slide1-background.jpg) center 0 no-repeat fixed;
   
}
#slide2 {
   height: 400px;
   background-color: white;
}
#slide3 {
   background: url(../img/slide3-background.jpg) center 0 no-repeat fixed;
}
.slide-inside
{
   position: relative;
   top: 25%;
   width: 980px;
   margin: auto;
   text-align: center;
}
Merci d'avance !
Publicité

Thibault_Feugere

Messages: 131

Dans mes vieux souvenirs de html et css, je faisais:
margin-left: auto ;
margin-right: auto ;
Et ca marchais Grand sourire

TheFlameflo

Messages: 305

Salut !
Merci de ta réponse, mais je crois que ce bout de code centre horizontalement, non ?
Cependant, je crois que ça marche tout autant pour le vertical ! ^^
J'ai une deuxième question ; en parcourant de nombreux site, j'ai aperçu que parfois, une div s'adaptait à l'écran, comme dans Spectral, où quand on arrive sur le site, la photo et le texte s'adaptent en fonction de l'écran :


C'est ce que je voudrais faire. 
J'ai beau inspecter le code HTML et CSS des sites comme ça, mais je ne comprend toujours pas !
Merci beaucoup d'avance !

PS : Si vous voulez mieux voir de quoi je parle : http://html5up.net/spectral.

Thibault_Feugere

Messages: 131

Pour le texte je ne vois pas de quoi tu parles mais pour le background, c'est très simple Tire la langue
background-imgage: url('tonimage.jpg') ;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;

Thibault_Feugere

Messages: 131

No-repeat c'est pour pas qu'il soit en mosaïque, le size cover c'est pour qu'il recouvre toute la page. et le fixed c'est pour pas qu'il bouge Tire la langue

TheFlameflo

Messages: 305

Merci beaucoup pour ton aide !
C'est parfait ! Sourire


Veuillez vous connecter ou créer un compte pour poster une réponse