création d'un site web débutant

[Polo1212]

Bonjour,

Je suis actuellement en train de créer un site web mon premier site web pour m'entrainer et apprendre de mes erreurs, je débute en programmation.

Je sais que ce n'est pas parfait, j'aimerais avoir un première avis si il y a des choses à changer ( Je n'ai pas encore fini de faire le site web, il manque la partie responsive web design que je dois faire et la page contact qui n'ai pas terminer). Sinon la partie header je ne sais pas comment je peux bien centrer le logo et le footer je ne sais pas pourquoi il ne se fixe pas en bas de la page alors qu'en CSS j'ai mis :

html { height : 100%;}
body { min-height : 100%; margin : 0; padding : 0;}

Je vous donne le lien du site ici : https://bijouterie-ruby.000webhostapp.com/

J'ai pris un hébergeur gratuit (000webhostapp).

Merci d'avance pour votre avis.

Cordialement.
-----

[Polo1212]

J'ai oublié les pages politique de confidentialité et mentions légales ne sont pas fini je le ferai en dernier.

[Janpolanton]

Bonjour,
Qu'en voilà une façon judicieuse de promouvoir un site de vente en ligne.

[Polo1212]

Bonjour,

Je pense que vous n’avez pas lu l’entièreté de mon message. Le site ne m’appartient pas, je suis étudiante et créer un site web fait partie de mon projet cette année. Il n’y a d’ailleurs aucun moyen d’acheter des articles sur ce site, et je pense qu’il n’est pas très judicieux de promouvoir un site web qui n’est pas terminé.

Si quelqu’un qui s’y connaît voudrait bien m’aider et non parler sans rien savoir, votre aide serait la bienvenue.

Merci d’avance.

[A voir en vidéo sur Futura]

[vgondr98]

Bonjour,

As-tu essayé d'ouvrir la console du développeur et de cliquer sur ton logo ?



En faisant cela, on voit que ton logo est associé à une classe .main-header__container-logo contenant les valeurs text-align: center; et width: 46%; En modifiant les valeurs de width, on voit que le logo change de place.

[Polo1212]

Bonjour oui j’ai oublié de préciser j’ai tout codé moi même avec html css jquery et php j’ai mis dans la classe .main-header__container-logo ces valeurs là mais je trouve qu’elles ne sont pas correct et j’aimerais savoir si il y’a un moyen de mettre ce logo en milieu de page quelques soit la taille de la page en mettant des valeurs appropriées pour.

Merci pour votre réponse et votre aide.

[vgondr98]

Voila une proposition :
logobis.jpg

[vgondr98]

Pour faire en sorte que le numéro de tel soit placer sur la même ligne que le logo

.main-header__container-list {
position: absolute;
}

[Polo1212]

Bonjour,

Merci pour vos réponses j'ai essayé ce que vous m'avez conseillé mais cela ne marche pas je me suis un peu perdu au niveau du css.
Je vais vous montrer mon code html et css.

J'aimerais pourvoir obtenir ce résultat Capture d’écran (4)_LI.jpg et sur mobile Capture d’écran (5)_LI.jpg mais je ne sais pas comment je pourrais le faire tout simplement.

code CSS :

/* Header */

.main-header__container {
display: flex;
align-items: center;
margin-top: 0.5em;
margin-bottom: -1em;
}

.main-header__container-list {
position: absolute;
margin-left: 4em;
}

.pond {
display: flex;
justify-content: center;
}

.header-rs {
padding: 0.6em;
color: #ff69B4;
}

.header-rs:hover {
color: black;
}

.header-tel {
text-decoration: none;
padding: 0.6em;
color: #ff69B4;
}

.header-tel:hover {
color: black;
}

Code HTML :

<div id="main-container">
<header>
<div class="main-header__container">
<div class="main-header__container-list">

<a class="header-rs" href="https://www.facebook.com/Bijouterie-RUBY-108610950970432" target="_blank"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>

<a class="header-rs" href="https://www.instagram.com/bijouterie.ruby/?hl=fr" target="_blank"><i class="fa fa-instagram fa-3x" aria-hidden="true"></i></a>

<a class="header-tel" href="Tel:04 42 70 18 97"><i class="fas fa-phone-alt fa-lg"></i>04 42 70 18 97</a>

</div>
<div class="pond">
<a href="index.php?page=accueil">
<img src="img/bijouterieRuby.png" alt="logo de la boutique" width="150px">
</a>
</div>
</div>
</header>

Merci encore pour votre aide c'est très gentil.

[vgondr98]

Bonjour, si tu veux centrer le numéro de téléphone, il faut ajouter margin-top:3em dans la classe .main-header__container-list.

Ce que je te propose fonctionne pour un écran supérieur à 820 * 850. Ensuite, il faut absolument utilisé des breakpoints. https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Tu connais ?