div qui refuse de bouger

Par whitesmoke, il y a 11 ans

Les bases HTML/CSS

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

Underscreen, il y a 11 ans

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 ???

whitesmoke, il y a 11 ans

Bonsoir Underscreen,

merci de vos conseils et bien entendus,je m'exécute de ce pas.

Cdlt,

EDIT:

Rendu actuel

Le rendu voulu

whitesmoke, il y a 11 ans

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 :/