Bonjour,
J'ai un petit souci avec une page web que je suis en train de monter avec HTML et CSS. Je débute et malgré la théorie que je mange en rallonge depuis quelques semaines,je n'arrive pas à résoudre mes problèmes de placement de Div...
J'me suis dis qu'éventuellement si vous voyez mon code vous pourriez m'aider sur la maniere et l'ordre dans le quel je dois écrire ma page.
C'est un petit projet test qui n'a aucun but sur le long terme sauf mettre un peu en pratique ce que j'ai pu apprendre au paravant.
J'vous met le lien Github de mon projet.
Merci d'avance pour vos conseils
Bonsoir,
1/ Le chemin vers votre fichier css est faux.
2/ Il faut absolument ne pas mettre d'espace dans un nom de fichier et de dossier
3/ Un < br> oui, 2 à la limite mais après il faut utiliser le "margin" ou "padding" pour espacer vos éléments, d'ailleurs ça syntaxe est fausse
En effet il y a beaucoup d'erreurs du type espace dans les liens ou nom de dossier : C'EST INTERDIT.
A mon avis Brackets arrive à gérer les espaces dans son éditeur WYSIWYG, mais, on voit bien qu'un vrai navigateur te rajoute %20 à la place des espaces.
Aussi... je n'ai jamais vu autant de <\br> de toute ma vie... ;)
À la place de tes espaces, mets des ”_” ca va te changer la vie!!
Je ne sais pas si je me trompe, mais je vais essayer!
Ce que tu veux, c'est garder ton bloc <header> dans une taille définie à 950px. Ce qu'il faut donc faire, c'est créer une div avec une class="container" autour de ton logo, menu et barre de recherche. ça donnerai ça :
<header> <!-- ton header à 100% de la taille du navigateur-->
<div class="container"> <!-- ici tu défini la taille de ton conteneur-->
<img src="logo.jpg" class="floatL"/>
<nav class="floatL">
<ul>
<li><a>lien</a></li>
<li><a>lien</a></li>
<li><a>lien</a></li>
<li><a>lien</a></li>
</ul>
<div class="search floatL">
<form>
<input type="text" placeholder="ma recherche">
<input type="submit" value="Ok">
</form>
</div>
<div class="clear"></div>
</nav>
</div>
</header>
et ton CSS :
header{width:100%; background-color:#000;}
.container{width:950px; margin: 0 auto;} // ça va te définir ton site à 950px de large + le centrer dans ta page du navigateur
.floatL{float:left;}
.clear{clear:both;}
nav ul li{display:inline-block;}
Je ne sais pas si c'est ce que tu voulais, mais voilà une petite aide pour ton problème...
Mon CSS s'ouvre bien dans Brackets quand j'utilise le mode live.
Pour le /br j'ai mis ca pour pouvoir scroll dans ma page pour voir si mon menu restait bien collé au dessus.
Merci pour votre réponse.
peux tu utiliser ce site pour qu'on puisse t'aider pour ton code : https://jsfiddle.net/ une fois ton code rentrez tu fait run pour essayer puis save pour sauvegarder ton travail est nous poster le lien ?
Salut, j'ai corrigé tout ton code. Sers toi de mon travail pour la suite.
https://www.dropbox.com/s/9vacie18vjhf32s/menu.rar?dl=0
Edit : Tu pourras comparer ton code et celui-là pour voir les erreurs.
Désoler pour le retard j'était en déplacement...Merci pour le coup de main!
J'me penche la dessus demain.
Encore merci ;)
Bonjour,
Effectivement,ca fait tout de suite moins bencale...Si, j'ai bien compris,pour l'astérisque, je dois le mettre dans chacun de mes Css que je commence pour bien initialiser mon projet?Je peux l'inclure dans mon template pour mes futurs projet?
Sinon,le class scroll et /Br était juste là pour voir si mon menu restait bien collé au-dessus ^^
Merci pour l'aide,j'y vois un peu plus clair
Le * sert de reset, il va appliqué les paramètres sur chaque éléments.
Généralement : padding:0,margin:0,border:0,outline:none,text-decoration:none,box-sizing:border-box,list-style:none
Vu que ton problème est résolu un petit conseil : au lieu d'utiliser le tag <br>
utilises plutôt <p> </p>
^^
(J'ai remarqué que le forum execute le code HTML, c'est chiant :/)
Comment je peux faire pour éviter que mon menu et ma barre de recherche s'aligne quand je redimensionne ma fenêtre?J'ai tenté un min width sur l'header, mais rien ne marche...
Tu veux que ton menu soit adaptable sur différentes tailles d'écrans ? Si c'est ça que tu désires, je te conseil de faire un ptit tour du côté des Media Queries en CSS3
Non,le côté "responsive" ne m'intéresse pas pour le moment,mon objectif, c'est de pratiquer un peu le CSS pour bien assimiler le truc :) J'ai mis quelque image pour montrer un peu ce que je veux faire.
Ici,c'est ma barre de menus qui merdouille lorsque je redimensionne mon navigateur à - de 950px
Là,c'est la barre quand je suis à + de 950px
En gros,j'aimerais que ma barre ne se redimensionne pas avec le navigateur.