div qui refuse de bouger
Bonsoir à tous,
j'ai actuellement un soucis gênant le bon déroulement de ma soirée ...
et le problème c'est de centrer de façon optimale mes news (appelé #top_news ici) (les centrer verticalement par rapport à (#news) [et que ça, s'adapte responsivement]
Si une bonne âme savait m'aider car là je coince depuis 14h ...
Mon code
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>E-Technologie</title>
<style>
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #ECEDED;
}
body, html
{
height: 100%;
}
header
{
width: 100%;
height: 75px;
background-color: #183540;
}
nav
{
margin-right: 5%;
line-height: 75px;
width:100%;
text-align: right;
}
nav ul
{
list-style-type: none;
}
nav li
{
display:inline-block;
margin-left: 5%;
}
nav a
{
color: white;
text-decoration: none;
}
footer
{
height: 100px;
background-color: #BF3B58;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#container
{
min-height: 100%;
position: relative;
}
#titre
{
color: white;
line-height: 75px;
float: left;
margin-left: 2%;
}
#screen
{
margin-right: 5%;
}
#mobile
{
display: none;
}
#slider
{
width:100%;
height:auto;
background-color: blue;
}
#slider article
{
text-align: center;
line-height: 400px;
}
/* CSS DES NEWS */
#news
{
width: 100%;
height: 450px;
position: relative;
background-color: black;
}
#top_news
{
display: inline-block;
width: 33%;
height:auto;
background-color: #FFF7CD;
}
#top_news img
{
display: block;
margin-left: auto;
margin-right: auto;
width:50%;
height: auto;
}
/* ------------------- */
@media screen and (max-width: 500px)
{
#screen
{
display: none;
}
#mobile
{
display: inline-block;
float: right;
margin-right: 5%;
}
}
</style>
</head>
<body>
<div id="container">
<header>
<nav>
<div id="titre">
<?php require 'inc/config.php'; ?>
<?= '<h1>'.$titre.'</h1>' ?>
</div>
<div id="mobile">
<a href=""><img src="http://lmarcin.fr/_include/img/menu-mobile.png" /></a>
</div>
<div id="screen">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section id="slider">
<article>SLIDER</article>
</section>
<!-- BLOC DES NEWS -->
<section id="news">
<article id ="top_news">
<h1>Razzer</h1>
<p class="date">2014-01-01</p>
<img src="img/razer.png" alt="razer" />
<p class="text_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus arcu ...</p>
</article>
<article id ="top_news">
<h1>Razzer</h1>
<p class="date">2014-01-01</p>
<img src="img/razer.png" alt="razer" />
<p class="text_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus arcu ...</p>
</article>
<article id ="top_news">
<h1>Razzer</h1>
<p class="date">2014-01-01</p>
<img src="img/razer.png" alt="razer" />
<p class="text_center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus arcu ...</p>
</article>
</section>
<!-- FIN NEWS -->
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>Merci d'avance.
Cordialement,
W.S
4 réponses
Hello.
Je rejoins Underscreen pour les classes.
Sinon pour ton problème, procède comme suit:
#news
{
width: 100%;
height: 450px;
line-height: 450px;
position: relative;
background-color: black;
}
#news .top_news
{
display: inline-block;
width: 33%;
height:auto;
line-height: normal;
background-color: #FFF7CD;
}Et la source en prime > http://www.alsacreations.com/tuto/lire/1032-comment-centrer-verticalement-sur-tous-les-navigateurs.html :)
Bonsoir ,
C'est pas top de mettre des id en guise de class !! Les class sont fait pour ça.
En gros première chose remplace des id="top_news" et tu y remplace par class="top_news"
Ensuite ton
<?= '<h1>'.$titre.'</h1>' ?>remplace par :
<h1><?=$titre?></h1>ça ne règle pas ton problème mais ça évite de mélanger le php de l'html . Aucun intérêt ici.
Pour finir peux tu faire une caputre du rendu et mettre le résultat que tu souhaite obtenir ???
Bonsoir Underscreen,
merci de vos conseils et bien entendus,je m'exécute de ce pas.
Cdlt,
EDIT:
Rendu actuel
Le rendu voulu
Coucou, ça fonctionne du tonnerre merci ! mais quand je met une image avec ce code
#news
{
width: 100%;
height: 450px;
line-height: 450px;
position: relative;
background-color: black;
}
#news .top_news
{
margin-top: 2%;
display: inline-block;
width: 33%;
height:auto;
line-height: normal;
background-color: #FFF7CD;
}
.top_news img
{
display: block;
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}PS: oui j'ai du rajouté un margin-top:2% car sinon avec l'image dans la div, la div se recollait au slider :/ (et donc, elles n'étaient plus centrer verticalement)
ça fait tout buggé :/ ça fait passer une div en dessous quand je change la résolution de l'écran :/