Partage

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

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
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

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

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.

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.

Positionnement d'un header centre et mise en forme

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown