Création du header

Version imprimable

25/04/2013, 23h16
okan6426

2 pièce(s) jointe(s)

Création du header

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)

Pièce jointe 117034
Pièce jointe 117035

Bonjour et bienvenue,

voici une solution en utilisant table et table-cell.

Code:

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.

26/04/2013, 10h05
okan6426

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
26/04/2013, 10h16
rodolphebrd

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
26/04/2013, 10h46
okan6426

code

et voila
okan
26/04/2013, 12h03
rodolphebrd
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:

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)
26/04/2013, 12h16
okan6426

1 pièce(s) jointe(s)

les ronds blanc seront remplacés par des boutons
26/04/2013, 12h48
rodolphebrd

Pour votre contenu je verrais 2 DIV flottants à gauche.

POur le footer voir sur Google : sticky footer (il y a pas mal de solutions).
26/04/2013, 14h29
okan6426

1 pièce(s) jointe(s)

euh en fait je me suis trompé de document.
du coup le header et le footer changent un peu
27/04/2013, 21h37
rodolphebrd

Où êtes-vous bloqué?
28/04/2013, 01h08
okan6426

Je cherche à créer un header pour mon site qui aurrais cette apparence
http://uppix.com/t-header517c5a410012b7cd.jpg

Le probleme c'est que je n'arrive pas a créer de texte centrée les uns par rapport aux autres et centrés en hauteur dans mon header
28/04/2013, 08h02
NoSmoking

Bonjour,
à quoi sert-il que rodolphbrd se décarcasse ???
:fleche: http://www.developpez.net/forums/d13...r/#post7256425