Création du header

**okan6426** · 25/04/2013, 23h16

Bonjour, pour mon projet de fin d'année je doit créer un site web en html et css, mais j'ai un problème pour mon header (qui se répétera dans mon footer)

je desire écrire mon nom sur deux ligne, mettre mon titre sur une ligne et l'intitulé de ma formation sur une ligne.

Jusqu'ici facile, mais après je veut que tout ce petit monde se retrouve centré sur mon header tout en étant à 30pixels du bord (margin 30 px)

Nom : f-header51799c520012b362.png
Affichages : 52
Taille : 4,8 Ko

Nom : f-header51799c520012b362.png
Affichages : 52
Taille : 4,8 Ko

Nom : f-mise_en_page_con51799d010012b363.jpg
Affichages : 78
Taille : 364,6 Ko

**rodolphebrd** · 26/04/2013, 00h16

Bonjour et bienvenue,

voici une solution en utilisant table et table-cell.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
        margin:0;
        padding:0;
}
.header {
        width:100%;
        background:black;
        color:orange;
        font-size:20px;
}
ul{
        list-style-type:none;
        width:100%;
}
.ident{
        display:table;
        
}
.rang {
        display:table-cell;
        width:30%;
        padding-top:2%;
        padding-bottom:2%;
        
}
.name{
        padding-left:5%;
}
.port{
        text-align:center;
        vertical-align:middle;
}
.graph{
        padding-right:5%;
        text-align:right;
        vertical-align:middle;
}
</style>
</head>
<body>
<div class="header">
    <ul class="ident">
        <ul class="rang name">
          <li>NOM</li>
          <li>Prénom</li>
        </ul>
        <li class="rang port">Portfolio</li>
        <li class="rang graph">Graphiste</li>
    </ul>
</div>
</body>
</html>

Exemple en ligne: codepen
Bon courage.

**okan6426** · 26/04/2013, 10h05

Merci,
Il y a cependant un problème, le cadre monte et descend en fonction du navigateur.

Je m'explique:
lorsque je scinde mon ecran en deux pour afficher notepad++ et mozilla firefox à la fois il n'y a pas de problèmes mais dès que je touche à la taille de mozilla mes titres vont se cacher sous mon header

Comment régler ce probleme

Okan

**rodolphebrd** · 26/04/2013, 10h16

Je comprends pas trop le sens de votre dernier post.

- Utilisez codepen (le lien que je vous ai envoyé) en le complétant avec votre code.
ou
- Envoyez un lien de votre page
ou
- Postez votre code

**okan6426** · 26/04/2013, 10h46

code

et voila
okan

**rodolphebrd** · 26/04/2013, 12h03

Il faut commencer par supprimer les positions fixed.
Ce n'est pas comme cela que vous positionnerez vos éléments.

Définir une mise à zéro des marges pour être sûr de la position des éléments:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
*{
 padding:0; 
 margin:0;
}

Que voulez-vous comme résultat?
Donnez un exemple de site ou une explication détaillée.
J'ai déjà compris que vous vouliez le footer fixe (ce qui ne s'obtient pas de cette manière d'ailleurs)