Comment intègrer une bande horizontale en CSS [Résolu/Fermé]

Messages postés
207
Date d'inscription
dimanche 19 juin 2011
Statut
Membre
Dernière intervention
14 octobre 2013
-
Bonjour,

Je m'explique, Je veut intégrer une bande Horizontale en background avec une largeur donnée mais, qu'elle prend toute la largeur du site, en au top, et avec une couleur définie.

Merci d'avance!

Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
596
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
18 avril 2016
75
8
Merci
Dans ton message tu dis que tu veux une bande verticale, j'imagine que tu voulais dire horizontale.
Si c'est le cas, dans le code html, tu mets ça tout de suite après la balise <body> :
<div id="bande_horizontale"></div>

et dans le css :
#bande_horizontale{
padding: 0px;
margin: 0px;
border: none;
width: 100%;
height: 50px;
background-color: #FEB201;
}

Pour la largeur tu modifies le height, pour la couleur tu peux la choisir par exemple sur ce site : http://www.code-couleur.com/

Si tu veux mettre une bordure tu remplaces border: none par un truc du genre
border: solid 1px black;

Dire « Merci » 8

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 62510 internautes nous ont dit merci ce mois-ci

Messages postés
207
Date d'inscription
dimanche 19 juin 2011
Statut
Membre
Dernière intervention
14 octobre 2013
3
0
Merci
Merci bien! c'est tous a fait ce que je voulais! par contre je voulais ceci en background soit, que le menu de connexion soit à travers, c'est à dire en fondu derrière le site sans que cela ce décale par l'ajout de ce dernier... si tu voit ce que je veut dire???
Messages postés
596
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
18 avril 2016
75
0
Merci
Bah tu mets la form qui a l'id connexion dans la balise div que j'ai dit avant, et tu rajoutes une autre div pour la mise en page, pour avoir un truc comme ça :
<div id="bande_horizontale">
<div id="connexion_field">
<form id="connexion" ...>
...
</form>
</div>
</div>

T'as des balises <b> faut les mettre dans des class genre :
<b class="connexion_label">Nickname</b>
<b class="connexion_label">Password</b>

les input c'est pareil faut les mettre dans une class, par exemple "connexion_input".

Dans le css :
#connexion_field{
width: 960px;
margin: 0 auto;
}
.connexion_label{
color: black;
}
.connexion_input{
background-color: #FFC49E;
}
Kopros
Messages postés
596
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
18 avril 2016
75 -
En fait je crois que j'avais pas bien compris ce que tu as demandé.

En gros tu voulais que la bande horizontale soit recouverte par le contenu (là où y'a connexion) mais qu'on la voit un peu au travers, c'est bien ça ?
Aurèli1s
Messages postés
207
Date d'inscription
dimanche 19 juin 2011
Statut
Membre
Dernière intervention
14 octobre 2013
3 -
Ah non desoler j'ai suivis tes indication c'est exactement ce que je voulais, tu peut te rendre dans mon site pour voir
Kopros
Messages postés
596
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
18 avril 2016
75 -
Ok. Je t'explique pourquoi j'ai ajouté le "connexion_field" : pour éviter de se galérer à mettre la bande du haut en absolute et de se prendre la tête avec des z-index, j'ai pris le menu de connexion pour le mettre dans la bande, ce qui fait que ça se superpose.

Mais le truc c'est que du coup, il n'a plus les limites du reste du contenu, et sans rien il viendrait se coller sur le bord de la page. Donc il a fallu les mettre dans un container, la div "connexion_field", qui est centrée, comme le contenu, et qui a la même longueur que le contenu.
C'est très sûrement optimisable avec ce qui existait avant, j'ai pas analysé tout ton code, mais doit y avoir moyen de supprimer un container ou deux.
Aurèli1s
Messages postés
207
Date d'inscription
dimanche 19 juin 2011
Statut
Membre
Dernière intervention
14 octobre 2013
3 -
C'est plutôt pas mal le rendu, c'est dans l'idée que je voulais vraiment! De ce fait ajouter un effet d'ombre très fin en dessous grâce a le css c'est possible?
Kopros
Messages postés
596
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
18 avril 2016
75 -
Si tu parles de l'ombre sur le texte ça se fait avec la propriété text-shadow, par exemple :
text-shadow: 2em 2em 0.2em black;

Par contre si tu parles de l'ombre de la bande horizontale, c'est moins évident à faire.
Pour faire de l'ombre, faut faire du noir et le rendre un peu transparent, c'est à dire qu'il faut diminuer son opacité
Y'a une propriété css qui gère ça, le problème c'est qu'elle est propriétaire de Mozilla, et du coup ça ne fonctionne que sous Firefox, tous les autres navigateurs mettront la couleur complétement opaque (sauf IE6 qui aura surement planté avant^^).

Bref, pour que tout le monde soit content et voit l'effet d'ombre, il faut que tu crées une image de 1px avec un logiciel de graphisme un peu plus évolué que le paint de windows. Tu peux utiliser photoshop (si t'as acheté la licence bien évidemment) ou gimp (gratuit), mais je te conseille vivement d'utiliser PAINT.NET
C'est facile à utiliser, il peut faire + de trucs que le paint de windows, mais moins que photoshop. Ca suffit très souvent.

Donc tu crées ton pixel, tu lui donnes la couleur que tu veux, tu diminues son opacité, et t'enregistres dans le format .png ou .gif

ensuite tu mets ce code html juste après la balise de fermeture de la div "menu-connexion" :
<div id="band_shadow"></div>
(tu feras gaffe t'as 2 div qui portent cet id, faut en jarter une)

et le css qui va bien :
#band_shadow{
position: absolute;
padding: 0px;
margin: 0px;
margin-top: 30px;
border: none;
width: 100%;
height: 10px;
background: url('le/chemin/du/pixel.gif') ;
}

Explication : on crée une autre bande en dessous de la 1ere, qui a le pixel comme bg pour faire l'ombre. Par contre faut qu'elle passe par dessus les bordures rouges du contenu, du coup j'ai mis position: absolute pour sortir cet élément du DOM (ça veut dire grosso merdo qu'il ne se place pas en fonction des autres éléments) mais du coup faut quand même qu'il soit en dessous de la 1ere bande, d'où le margin-top: 30px; (30px c'est la height de la 1ere bande).
Le truc que j'ignore c'est si ça va se superposer au dessus ou en dessous des autres éléments. C'est ça qu'il faut tester.
Au pire tu vires position: absolute; et margin-top: 30px; mais du coup ça va pas passer par dessus les bordures du contenu.


Encore un mot : perso je préfère le format png à gif, mais IE6 ne prend pas en compte la transparence du png (j'ai un script en js pour que ça marche, mais c'est lourd). Par contre y'a pas de soucis pour les gif. Du coup, pour les 3 clampins du net qui sont encore sous IE6, faut privilégier les gif si on a de la transparence.