Positionnement d'un header centre et mise en forme

Sujet résolu

2 janvier 2018 à 17:48:25

Bonjours,

Je chercherai a avoir cette mise en forme pour mon header mais rien n'y fait impossible d'arriver a ce résultat. Quelqu'un pourrai m'aider. C'est pour un exposé. (l'image a été faite via powerpoint, j'aimerai que vous m'aidiez a trouver les bonne propriété css pour y arriver) j'ai essayer en mettant une image, avec la propriété position (relative). et avec du float mais rien n'y fait

J'ai mis le titre dans un div et le menu dans un nav et le tout est dans le header.

image du header souhaité

Merci d'avance pour votre aide.

-
Edité par Vinsout 2 janvier 2018 à 17:50:03

Clément Muth

2 janvier 2018 à 20:33:42

c'est brouillon mais je ne vois pas ou tu aurais eu du mal à faire ça...

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<center>
    <header>
        <div class="menu">
            <div class="top"></div>  
            <p class="text">LOREM IPSUM</p>  
            <div class="bande_rouge">
                <a href="" class="bouton1">1. Lorem ipsum</a>
                <center>
                    <a href="" class="btn2">2. Lorem ipsum</a>
                </center>
                <a href="" class="btn3">3. Lorem ipsum</a>
            </div>
        </div>
    </header>
</center>

</body>
</html>

.menu{
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 120px; 
    background-color: rgb(64, 64, 64);
}

.top{
    background-color: rgb(0, 180, 232);
    height: 50%;
}

.text{
   color: white; 
   font-size: 25px; 
   margin-top: -55px; 
}

.bande_rouge{
    border: solid; 
    background-color: red; 
    border-color: white; 
    width: 80%; 
    height: 25%; 
    margin-top: -20px; 
    border-width: .5px;
}

.bouton1{
    text-decoration: none; 
    color: white; 
    float: left; 
    margin-left: 150px;
}

.btn2{
    text-decoration: none; 
    color: white; 
    margin-left: -250px;
}

.btn3{
    text-decoration: none;
    color: white; 
    float: right; 
    margin-right: 150px; 
    margin-top: -20px;
}

en revanche les couleurs sont approximatives hein tu regarderas par rapport à tes images

-
Edité par Clément Muth 2 janvier 2018 à 20:37:32

Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie.

noopy360

3 janvier 2018 à 0:11:57

Clément Muth a écrit:

c'est brouillon mais je ne vois pas ou tu aurais eu du mal à faire ça...

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<center>
    <header>
        <div class="menu">
            <div class="top"></div>  
            <p class="text">LOREM IPSUM</p>  
            <div class="bande_rouge">
                <a href="" class="bouton1">1. Lorem ipsum</a>
                <center>
                    <a href="" class="btn2">2. Lorem ipsum</a>
                </center>
                <a href="" class="btn3">3. Lorem ipsum</a>
            </div>
        </div>
    </header>
</center>

</body>
</html>

.menu{
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 120px; 
    background-color: rgb(64, 64, 64);
}

.top{
    background-color: rgb(0, 180, 232);
    height: 50%;
}

.text{
   color: white; 
   font-size: 25px; 
   margin-top: -55px; 
}

.bande_rouge{
    border: solid; 
    background-color: red; 
    border-color: white; 
    width: 80%; 
    height: 25%; 
    margin-top: -20px; 
    border-width: .5px;
}

.bouton1{
    text-decoration: none; 
    color: white; 
    float: left; 
    margin-left: 150px;
}

.btn2{
    text-decoration: none; 
    color: white; 
    margin-left: -250px;
}

.btn3{
    text-decoration: none;
    color: white; 
    float: right; 
    margin-right: 150px; 
    margin-top: -20px;
}

en revanche les couleurs sont approximatives hein tu regarderas par rapport à tes images

Desoler mais ton code n'est pas bon du tout du coup cadeau pour vous 2 -->

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

Clément Muth

3 janvier 2018 à 0:20:29

tu ne peux pas dire que mon code n'est pas bon étant donné qu'il y a des milliers de façons de styliser un objet afin d'obtenir le même résultât

Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie.

noopy360

3 janvier 2018 à 0:25:50

Clément Muth a écrit:

tu ne peux pas dire que mon code n'est pas bon étant donné qu'il y a des milliers de façons de styliser un objet afin d'obtenir le même résultât

Alors je suis totalement d'accord avec toi, il existe plusieurs façons de faire un même site internet... par contre par exemple la balise <center> ligne 14 & 16 n'est plus valide depuis longtemps (je n'ai plus la date) pour centre on passe par le css la mise en page n'a rien à faire dans le html...

Après je peut continuer il existe des balises (sementique <header>, <section> etc) que tu n'utilise pas du tout

donc oui ton code était bon il y a 5 ou 10 ans mais plus maintenant...

-
Edité par noopy360 3 janvier 2018 à 0:30:36

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

MrChampy

3 janvier 2018 à 10:32:57

Hello,

La balise <center> est dépréciée depuis HTML4, et obsolète en HTML5, donc ça a un bon paquet d'années.

Clément Muth

3 janvier 2018 à 18:57:21

C'est vrai oui je suis encore en retard sur certaines choses

Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie.

Vinsout

6 janvier 2018 à 15:18:34

Désolé de mon retard, j'ai compris mon erreur lors de ma mise en page. j’essayais de faire sa avec la propriété position, top et left. Merci pour votre aide.

Clément Muth

6 janvier 2018 à 16:01:59

passe le en résolu si tu as compris et réglés ton problème

Choisissez un travail que vous aimez et vous n'aurez pas à travailler un seul jour de votre vie.