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.