Discussion :

[Effer_]

Bonjour à tous.

J'ai décidé il y'a quelques temps que mon métier ne me correspondait plus, et j'ai décidé de me lancer dans le développement web ( passionné d'info, et + d'idées de créations de site web que de logiciels ).
j'ai suivi quelques formations gratuites ou semi-gratuites sur le net, et suivi quelques tutos de-ci de-là.

Mais ayant peu ou pas de connaissance et surement pas assez, pourriez-vous m'expliquer quelle est la marche à suivre pour transformer un psd en html/css, je bloque sur les positionnements des éléments ( je me suis peut-être attaqué à trop gros pour un premier site ).

Je cherche à faire ceci :



Mon code html ( basique il me semble ).

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
    <header class="header">
        <div class="container">
            <div class="logo"><a href="index.php"><img src="./_images/logo.png" height="150px" alt="logo"></a></div>
            <nav>
                <ul class="nav">
                    <li class="menu-1"><a href="#">ACCUEIL</a></li>
                    <li class="menu-2"><a href="#">GALERIE</a></li>
                    <li class="menu-3"><a href="#">CONTACT</a></li>
                    <li class="menu-4"><a href="#">ADMIN</a></li>
                </ul>
            </nav>
        </div>
    </header>

Mon CSS

Code :

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
.header{
    background-image: url(../_images/bg-header.png);
}
 
.header{
    width: 100%;
    height: 130px;
}
 
.logo{
    margin: 0 auto 0 auto;
    padding-top: 7.5px;
    width: 130px;
}
 
.menu-1, .menu-2, .menu-3, .menu-4{
    position: absolute;
    top: 35px;
}
 
.menu-1{
    left: 20%;
}
 
.menu-2{
    left: 35%;
}
 
.menu-3{
    right: 35%;
}
 
.menu-4{
    right: 20%;
}
 
.nav a {
    font-family: Bazar, sans-serif;
    font-size: 30px;
    color: var(--nav-link-color);
}

De plus j'ai rajouté un lien css vers bootstrap5.

Mes soucis à l'heure actuelle ( je ne travaille que sur le header pour l'instant ):
- cela fonctionne, mais je suppose qu'il y a mieux...
- lors du redimensionnement de ma fenêtre pas très joli joli...
- je n'arrive pas à mettre en place ma ligne dashed en bas du header

- et je n'ai aucune idée de comment faire le reste.

Je suis preneur de tout, tuto, formation ( même si payante pour budget très réduit), morceau de code, conseil, MP, ...

Merci de l'attention et de l'aide que vous pouvez m'apporter.

[mathieu]

pour avoir des effets responsifs en fonction de la largeur de l'écran, vous pouvez utiliser les requêtes média qui permet de définir des règles css qui s'appliquent seulement pour certaines tailles :
https://developer.mozilla.org/fr/doc..._media_queries
pour le menu, ce que j'ai souvent vu sur les petits écrans est un menu "hamburger", qui se présente sous la forme de 3 traits. vous pouvez le voir par exemple en réduisant la largeur de la page mozilla.org.

pour le trait pointillé en bas de l'entête, vous pouvez par exemple utiliser une petite image et la répéter en largeur avec background-repeat
https://developer.mozilla.org/fr/doc...kground-repeat

[NoSmoking]

Bonjour et bienvenue sur DVP.

Tu peux également créer ta bordure à l'aide d'un background-image: repeating-linear-gradient(....) et ses propriétés associées.

Voir : repeating-linear-gradient()