Bonjour,

Je me suis mise à apprendre le HTML et le CSS il y a quelques jours, et j'en suis au TP de création de site web du cours "Apprenez à créer votre site web avec HTML5 et CSS3".
Jusqu'ici tout se passait assez bien, mais je suis réellement bloquée sur ce TP: j'ai fait un dessin rapide de l'apparence que je voudrais pour mon site, mais absolument impossible de faire ce que je veux, alors que c'est faisable...

Je vous joins la "maquette" que j'ai faite.

Le résultat est très loin de ce que je veux, comme vous pouvez le constater... Tout se superpose, le fond coloré (les gouttes d'eau) ne prend pas toute la largeur ni sur le footer ni sur le header, je n'arrive pas à mettre la photo et le "à propos" en haut à droite.. Au secours!

Mon code est sûrement bourré d'incohérences, de conflits et de choses obsolètes, n'oubliez pas que je m'y suis mise il y a deux jours...

le html:
 
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lifeinmcr.css">
    <title>Life in Manchester</title>
</head>

<body>
    <div id="bloc_page">
        <header>
            <div id="titre_principal">
                <div id="banniere">
                    <img src="banniere.png" alt="bannière">

                    <h1>Living in the Rainy City</h1>
                </div>
            </div>

            <nav>
                <div id="menu">
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">CV</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                </div>
            </nav>
        </header>

        <section>
            <article>
                <div style="float: left; width: 33%;">
                <ul>
                    <li><img class="img-circle" src="manchester4mini.png"><p>Food</p></li>
                    <li><img class="img-circle" src="manchester6mini.jpg"><p>Student tips</p></li>
                </ul>
                </div>
                <div style="float: left; width: 33%;">
                    <ul>
                        <li><img class="img-circle" src="manchester3mini.jpg"><p>Nightlife</p></li>
                        <li><img class="img-circle" src="manchester5mini.png"><p>Shopping</p></li>
                    </ul>
                </div>
                <div style="float: right; width:33%;">
                    <ul>
                        <li><img class="img-circle" src="manchester1mini.png"><p>Faves</p></li>
                        <li><img class="img-circle" src="manchester7mini.png"><p>Pictures</p></li>
                    </ul>
                </div>
            </article>
            <div class="asides">
                <aside>
                <img class="img-circle" src="vignette.png">
                </aside>
                <aside>
                <h2>A propos de nous</h2>
                <p>Bonjour et bienvenue à tous! Nous sommes Benjamin et Léa, un couple de français ayant vécu à Manchester.
                    Nous n'y avons pas vécu très longtemps, mais cela a suffit pour tomber amoureux de cette ville! 
                    C'est pourquoi nous avons décidé de créer ce blog, afin de partager avec vous nos avis, conseils et photos, 
                    pour vous faire découvrir la Rainy City, ou pour aider de futurs Mancuniens! Bonne visite!
                </p>
                </aside>
            </div>
        </section>

        <footer>
            <h3>Où nous trouver</h3>
            <a href="#">Sur Instagram</a>
            <a href="#">Sur Twitter</a>
            <a href="#">Sur Facebook</a>
        </footer>
    </div>
</body>

</html>

le css:

 
.img-circle
{
    border-radius: 50%
}

@font-face {
    font-family: 'quicksandlight';
    src: url('quicksand-light-webfont.woff2') format('woff2'),
         url('quicksand-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body
{
    background: url('fond.png');
    font-family: 'quicksandlight', Georgia;
}

#bloc_page
{
    width: 900px;
    margin: 0 auto;
}

section h1, footer h1, nav a
{
    font-family: 'quicksandlight', Georgia, 'Times New Roman', Times, serif;
    font-weight: normal;
    font-style: italic;
    text-transform: uppercase;
}

header
{ 
    background: url('rain.png');
    justify-content: space-between;
}

#titre_principal
{    
    display: flex;
    flex-direction: column;
    background: url('fond.png');
}

#banniere
{
    margin-top: 0;
    height: 200px;
    border-radius: 5px;
    position: absolute;
    margin-bottom: 25px;
}

header h1
{
    font-family: 'quicksandlight';
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2
{
        font-family: 'quicksandlight';
        font-size: 1.1em;
        margin-top: 0px;
        font-weight: normal;
}

nav ul
{
    list-style-type: none;
    display: flex;
    vertical-align: middle;
}

nav li
{
    margin-right: 15px;
}

nav a 
{
    color: black;
    font-size: 1.3em;
    padding-bottom: 2px;
    text-decoration: none;
}

nav a:hover
{
    color: teal;
    font-style: italic;
}

section
{ 
    display: flex;
    margin-bottom: 20px;
}

article, aside
{
    text-align: justify;
}

article
{
    margin-right: 20px;
    flex: 3;
}


footer
{
    background: url('rain.png');
    padding-top: 25px;
}

footer p, footer a
{
    font-size: 0.8em;
}

#menu
{
    position: center;
}

.aside
{
    display: inline-block;
}

aside
{
    text-indent: 10px;
    width: 200px;
}

Merci d'avance!

Léa

-
Edité par leayu 20 juin 2018 à 13:30:51

leayu

20 juin 2018 à 13:18:45

cyp86

20 juin 2018 à 13:24:17

Afin que nous puissions t'aider, merci d'éditer ton premier message et de mettre ton code en forme grâce au bouton prévu a cet effet (celui la </>), merci.

Am I dev ? 0x90

Lamecarlate

20 juin 2018 à 15:49:29

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/difficultes-a-positionner-aside-banniere-section

Je ferme ce sujet.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Forums des Zéros

Problèmes mise en page css

Doublon

Problèmes mise en page css

Doublon

Supprimer

Modérer

Signaler le message aux modérateurs