[Résolu] Bande de couleur a gauche et a droite de la hauteur du div

Bonjour
Je cherche a savoir si il est possible de remplir le coté gauche et droit de longeur dynamique ( auto) par un bande de couleur . La couleur ne se trouve que dans le border ( contour/epaisseur du border) et le padding ( padding et content de la même couleur) . Je pense qu il faut sortir du modèle de boite mais je ne sais pas si une technique CSS permet cela ?
Ci dessous voici comment la bande se comporterait si on bouge le coté droit du navigateur sur la gauche pour réduire sa taille ( width) .


en gros cette action doit faire de la sorte que la boite conteneur soit toujours centré ( au milieu de la zone de visualisation du navigateur ) et que la barre de défilement horizontale soit toujours positionné au milieu avec un même espace à gauche et à droite .

ce problème revient un peu à celui pour positionner une barre horizontale droite et à gauche d un titre sauf que ici la barre à une longueur fixe alors que je souhaite quelle soit en apparence infinie !!


...calc() ?
Merci
Modifié par 75lionel (12 Jul 2016 - 00:49)

Hello,

En fait, tu as tout dans ton exemple mais voici un bout de code qui pourra t'aider sur la mise en application.

Retiens simplement que tu dois styles ton wrapper (div.header dans ton cas) car c'est lui qui va de bord à bord et que ton .container vient simplement se centrer avec le margin: 0 auto;

Merci pour votre réponse ( une solution ) . Je connaissais margin-left: auto / margin-right : auto et vous utilisez ici margin: 0 auto; . Mais on reste dans un modèle de boite ( <header>) . Je pensais a un after et before mais le width de ces éléments ( droite et gauche) doivent donner l'illusion d'être infini et avoir une couleur ! ( une sorte de width : auto ....?!!)

L'exemple est vraiment intérressant car c 'est le .container{max-width: value;} qui permet de "centrer" le menu . la valeur value est 600 qui est la largeur du menu . J'aurais aimé que cette valeur soit dynamique ( non prefixé manuellement mais calculée par le navigateur) et je crois qu'il faut passer a javascript et pas calc() . Est ce que calc peut voir accès aux valeurs des attributs enfants ?

sinon le menu n'est pas centré ! Comment se fait t il que que le selecteur nav fait 600px alors que j 'ai 6 item avec li content a 83.59 = 501.54px ( 100 px en plus pour atteindre 600px = <nav> ) . 524 px est la point de rupture ou le contenu du menu se reparti sur 2 lignes !!


un nav{dsiplay:table-header-group; } semble mieux convenir mais pas parfait

je crois que flexbox est mon ami pour le centrage !! il reste a voir si on peu mixer tout ça

Merci
Modifié par 75lionel (12 Jul 2016 - 10:30)

Ok, je t'ai fais un autre exemple pour bien te montrer que c'est toujours le parent qui défini la taille disponible. Dans cet exemple, j'ai utilisé flexbox pour pouvoir utiliser les maximum de place pour les liens de navigation.

Le parent (.container) donne x pixel pour son contenu ça s’arrête là. Si tu veux prendre toute la place avec les liens et juste une partie, c'est en appliquant des styles sur les liens et non plus sur le parent.

Si tu le faisais en JS, tu voudrais faire quoi ? (en expliquant, pas forcément un exemple)


En ce qui concerne le margin, tu as plusieurs possibilité pour le définir : (remplace la direction par une valeur mais l'ordre sera toujours celui là.

/*4 valeurs :*/
margin: haut   droite   bas   gauche;
/*3 valeurs :*/
margin: haut   droite-et-gauche   bas;
/*2 valeurs :*/
margin: haut-et-bas   droite-et-gauche;
/*1 valeur :*/
margin: haut-droite-bas-gauche;

Dans le cas de margin: 0 auto, cela équivaut à écrire

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

Modifié par Yordi (12 Jul 2016 - 10:44)

Merci pour votre exemple.