J'ai essayé cette même méthode sur un site Web précédent dans lequel cela fonctionnait. Je ne sais pas pourquoi cela ne fonctionne pas maintenant.
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
<a href="">Menu_1</a>
<a href="">Menu_2</a>
</nav>
</header>
</div>
<h1>Heading</h1>
body {
max-width: 100%;
}
#header_encapsulator {
max-width: 1000px;
margin: auto;
background-color: orange;
}
header {
position: fixed;
max-width: 60em;
width: 100%;
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
Je ne sais pas pourquoi margin: auto à l'intérieur de #header_encapsulator ne centre pas max-width . Le site Web se cassera sur un moniteur avec une largeur> 1000px. Il ne prend pas une valeur de 10000px, pas de valeurs% aussi.
Deuxièmement, l ' header_encapsulator devrait afficher une image d'arrière-plan orange bord à bord de l'écran. Ça ne se voit pas. Je sais que les divs / sections vides n'affiche pas ses propriétés, mais je l'ai déjà fait, exactement de la même manière.
Modifier: J'ai créé un fichier html et css plus simple avec le même code. Vous pouvez le télécharger ici et le tester localement. Je n'obtiens pas le fond orange à 100% de la largeur du moniteur.
3 Réponses :
Vous spécifiez max-width: 100% .
Il s'agit de la largeur maximale qui sera occupée par le div et pour atteindre cette largeur, l'élément div nécessitera suffisamment de contenu pour remplissez-le à 100%.
Utilisez width au lieu de max-width . Cela forcera tout div à avoir la largeur spécifiée, quel que soit le contenu.
J'ai essayé, toujours pas de chance. J'ai également essayé max-width: 1000px et width: 100% en même temps. Pourtant, pas de chance.
Assurez-vous de maintenir ctrl enfoncé tout en cliquant sur Actualiser. Si vous ne le faites pas, le navigateur conservera le fichier CSS mis en cache et il semblera que rien n'a changé (actualisation ctrl pour chrome, utilisez ctrl + shift + R pour firefox).
Je suis allé de l'avant jusqu'à supprimer toutes les données personnelles, l'historique, les cookies, etc. du navigateur.
Donnez une hauteur à votre #header_encapsulator comme ceci:
#header_encapsulator header {
margin: auto;
//other css if you want
}
plus si vous voulez margin: auto header vous devriez faire quelque chose comme:
#header_encapsulator {
width: 1000px;
background-color: orange;
height: 100px; // or anything you want
}
Pourtant, il ne s'étire pas sur 1000px, même si je passe à width: 1000px ou max-width: 1000px et width: 100%
vous devez utiliser width: 1000px pour vous assurer qu'il est étiré autant que vous le souhaitez. Je mets à jour la réponse maintenant.
Essayé la dernière fois lui-même, ne fonctionne pas. J'avais mentionné dans le commentaire que cela ne fonctionne pas même si je change en largeur: 1000px. J'ai téléchargé les fichiers pour le tester localement mega.nz/#F!epUzHK6Q!J39FPQ6h2ypsJA
Oui, cela fonctionne là-bas. Ce qui est encore plus frustrant, c'est qu'il y a ce même morceau de code dans un autre projet et cela fonctionne bien maintenant lorsque je le vérifie.
Je ne sais pas s'il y a une raison pour que l ' # header-encapsulator ne soit pas corrigé lui-même au lieu de l'en-tête à l'intérieur (ce qui fait que l'encapsulateur est "vide", donc ne pas avoir height), mais simplement déplacer la propriété position: fixed vers # header-encapsulator et ajouter une width: 100% devrait résoudre le problème
Modifier: Suppression de la propriété 10000px max-width de #header_encapsulator et width: 100% from header.
<div id="header_encapsulator">
<header>
<a class="logo" href="/">Logo_name</a>
<nav>
<a href="">Menu_1</a>
<a href="">Menu_2</a>
</nav>
</header>
</div>
<h1>Heading</h1>
body {
max-width: 100%;
}
#header_encapsulator {
width: 100%;
background-color: orange;
/*Put it in here*/
position: fixed;
}
header {
/*Removed it from here*/
max-width: 60em;
margin:auto
}
.logo {
float: left;
font-family: 'Tangerine', cursive;
font-size: 3rem;
padding: 0 0 0 1rem;
text-decoration: none;
font-weight: bold;
color: black;
}
nav {
float: right;
padding: 1.5rem 1rem 0 0;
}
nav a {
text-decoration: none;
}
nav a:first-child {
padding-right: .8rem;
}
h1 {
font-size: 2rem;
text-align: center;
padding: 12rem 0 2rem 0;
font-family: 'Roboto Slab', serif;
}
@mjustin compte tenu des modifications apportées; Je recommande vivement de prendre le temps de repenser un peu la structure que vous avez construite, car définir un max-width: 10000px , ou toute autre propriété avec des valeurs sans signification concrète n'est pas une bonne pratique. Peut-être que vous pouvez trouver un moyen de modifier un peu la structure pour éviter un si grand nombre et utiliser quelque chose qui a plus de sens et fait que tout fonctionne bien.
J'ai supprimé ce 10000px. Ce n'est plus nécessaire. Et oui, je me sens fortement contre ces propriétés vagues. C'était la première fois que je l'utilisais dans le cadre du bricolage car tout allait au sud depuis le début. :) Merci à vous et à tous pour votre aide.
vider votre cache et actualiser, cela fonctionne sur mon test
Je l'ai essayé, pas de chance
y a-t-il une erreur dans la console?
repl.it/repls/TrustworthyBronzeSymbol
C'est un site Web statique de base. La console est vide à l'exception d'un avertissement concernant l'encodage des caractères.
Veuillez vérifier que votre feuille de style est en cours de chargement, appuyez sur ctrl + u et essayez de cliquer sur le lien dans la balise
La feuille de style est en cours de chargement .. Tout ce qui est css est visible sur la page sauf cet arrière-plan.
y a-t-il un css pour l'en-tête ou un ou nav? peut-être que ceux-ci ont des arrière-plans avec des superpositions l'arrière-plan de header_encapsulator
Oui, il y a css pour l'en-tête et d'autres éléments à l'intérieur. Je le posterai dans la question principale.
a posté une réponse s'il vous plaît vérifier si cela aide merci.