Bonjour, je souhaiterai élargir l'interface de mon site web à 100 % de la fenêtre internet, ou au moins la bannière. J'ai déjà mis le width de cette dernnière à 100 % mais je n'ai constaté aucun changement. J'ai aussi mis le width du #conteneur dans habillage.css (je suis sous spip) à 100% il n'a fait qu'augmenter la largeur du corps du texte jusqu'à la rendre égale à celle de ma bannière. Pouvez-vous me proposer autre chose? Je vous remercie d'avance.
28172 sujets
CSS et mise en forme, CSS3
Merci pour ta célérité :
Voici mon code html :
Et voici mon Css
Voici mon code html :
<div id="colonne1">
<div id="menu1">
<ul>
<li><a href="http://www.histoiredumaghreb.com/Les-Rustumides-ou-Rostemides">Rustumides</a></li>
<li><a href="http://www.histoiredumaghreb.com/Les-Idrissides">Idrissides</a></li>
<li><a href="http://www.histoiredumaghreb.com/Les-Aghlabides">Aghlabides</a></li>
<li><a href="http://www.histoiredumaghreb.com/Le-Maghreb-fatimide-909-969">Fatimides</a></li>
<li><a href="http://www.histoiredumaghreb.com/Les-Almoravides-1056-1147">Almoravides</a></li>
</ul>
</div>
</div>
Et voici mon Css
#menu1 {
/** La couleur du background est definie a noire car on a choisi une image de fond fonc?e */
background: #000 url(koutoubia.jpg) no-repeat;
/** on retire les puces **/
list-style: none;
/** on supprime le padding et les margin par defaut, on rajoute un padding en haut et en bas **/
padding: 40px 0px 20px 0px;
margin: 0px;
width: 126px;
}
#menu1 li {
margin: 5px;
}
#menu1 li a {
/** pour que le lien prenne toute la largeur **/
display: block;
font-size: 1em;
font-family: verdana;
font-weight: bold;
text-decoration: none;
/** par defaut, ecrit en noir sur fond blanc, les liens restent toujours visible */
color: #000;
background: #fff;
/* ces propri?t?s permettent l'effet de transparence sur la plupart des navigateurs
cependant, si un navigateur ne les prend pas en compte, ils n'auront aucun effet mais le menu restera lisible
*/
opacity: 0.7;
filter: alpha(opacity:70);
-khtml-opacity: 0.7;
-moz-opacity: 0.7;
/* note: la valeur 0.7 peut être ajust?e en fonction de l'image de fond
plus la valeur est faible, mois le texte est visible */
}
#menu1 li a:hover {
opacity: 1;
filter: alpha(opacity:100);
-khtml-opacity: 1;
-moz-opacity: 1;
/* sans image le background redevient noir, et le lien blanc, toujours lisible ! */
background: transparent;
color: #fff;
}
J'ai mis ton code dans mon éditeur et à vrais dire je ne vois pas trop ce que tu veux dire en fait ^^
Tu as ton div#colonne1 qui occupe toute la largeur et qui contient div#menu1 avec une largeur de 126px. Si c'est ça que tu veux qui occupe toute la largeur tu enlèves le width:126px
Mais bon dans ta question initiale tu me parles de ta bannière hors ici je n'en vois pas donc j'imagine que la portion de code que tu as donné n'est pas concernée par le problème.
Tu as ton div#colonne1 qui occupe toute la largeur et qui contient div#menu1 avec une largeur de 126px. Si c'est ça que tu veux qui occupe toute la largeur tu enlèves le width:126px
Mais bon dans ta question initiale tu me parles de ta bannière hors ici je n'en vois pas donc j'imagine que la portion de code que tu as donné n'est pas concernée par le problème.
Oui, je viens de me rendre compte en effet que ce n'est pas le bon code, je l'ai interverti avec le code que je devais donner sur un autre sujet dans un autre forum. Vraiment désolé.
J'ai une boucle spip sur mon sommaire.html html déclinée ainsi :
[(#REM) Entete de la page + titre du site ]
Et voici le code css de la même bannière :
Je voudrais donc étendre cette bannière à 100% de la largeur de la page pour tous les visiteurs. J'ai déjà essayé de mettre le width de #conteneur à 100% dans habillage.css mais sans aucun résultat.
J'ai une boucle spip sur mon sommaire.html html déclinée ainsi :
[(#REM) Entete de la page + titre du site ]
Et voici le code css de la même bannière :
#entete{
display: block;
width: 100%;
height: 220px;
padding: 0;
background-image:url(header.jpg);
background-repeat: no-repeat;
border-bottom: 0;
}
#entete #nom_site_spip {display: none;}Je voudrais donc étendre cette bannière à 100% de la largeur de la page pour tous les visiteurs. J'ai déjà essayé de mettre le width de #conteneur à 100% dans habillage.css mais sans aucun résultat.
Il faudrait l'ensemble de la structure html au moins à défaut d'une page en ligne car si tu as mis width: 100% sur ton div#conteneur qui est lui même contenu dans un div avec un largeur spécifié ça ne changera rien.
Bref essaye de mettre le code HTML de toute la page ainsi que le CSS incriminé et on pourra voir ensemble le problème.
Bref essaye de mettre le code HTML de toute la page ainsi que le CSS incriminé et on pourra voir ensemble le problème.
Voici la page en question : www.histoiredumaghreb.com
Bonjour, merci pour ton indication, je viens de supprimer cet élément de habillage.css et j'attends le résultat (les modification css prennent du temps à s'afficher, en tous cas chez moi!). En ce qui concerne la largeur de la bannière, j'ai déjà dit que j'avais mis son width à 100% et que ça n'avait rien changé. Si je la redimensionne, j'ai peur qu'elle ne s'affiche pas en entier sur d'autres pc avec d'autres configurations que la mienne. En attendant, j'ai un autre petit problème et je vais poser une autre question sur le forum, ne voulant pas surcharger ce sujet.
Merci beaucoup à toi Gili, ça a marché, il ne me reste plus qu'à refaire une bannière plus longue, à ce propos, juste avant de mettre ce sujet en résolu, dois-je simplement avoir une bannière de 1000px de largeur au lieu de 760 actuellement. Ou bien dois-je m'y prendre autrement? Merci encore, je ferai tout ce qui est en mon pouvoir pour que les générations futures te glorifient entre les hommes. 
Ta bannière est une image et travailler en width: 100% (donc relatif à la résolution de l'écran dans ce cas ci) te risquerait à des résultat plutôt dégueu.
Par contre tu peux utiliser cette solution que tu adapterais à ton header mais je suis pas sur que ça correspondrait a l'identité visuelle de ton site.
Sinon tu peux simplement garder le header en image au dessus du site avec une taille définie et appliquer une couleur de fond sur l'élément pour les côtés.
Merci c'est bien urbain de ta part
Par contre tu peux utiliser cette solution que tu adapterais à ton header mais je suis pas sur que ça correspondrait a l'identité visuelle de ton site.
Sinon tu peux simplement garder le header en image au dessus du site avec une taille définie et appliquer une couleur de fond sur l'élément pour les côtés.
Therese a écrit :
je ferai tout ce qui est en mon pouvoir pour que les générations futures te glorifient entre les hommes
Merci c'est bien urbain de ta part
Bonsoir, en fin de compte, après un long combat presque épique, je ne suis pas parvenu à bout de mon problème. Selon les ordinateurs que je consulte, mon site apparait tantôt avec des barres de défilement, tantôt avec ma bannière trop courte ou trop longue. Comment faire pour qu'il apparaisse sur toutes les configurations et tailles d'écran et navigateurs de la même manière. Comme le présent site d'Alsacréations par exemple. J'espère n'avoir pas visé trop haut, n'avoir pas blasphémé... Merci de votre aide.
Therese a écrit :
Comment faire pour qu'il apparaisse sur toutes les configurations et tailles d'écran et navigateurs de la même manière.
Malheureusement c'est une question bien vaste a laquelle il n'y a pas de réponse générique car tout les sites sont différents. Mais si je peux te donner deux éléments de réponses/recherches :
- utiliser une feuille de style de base pour avoir un base commune pour tout les navigateurs (qui n'ont pas forcément les mêmes styles par défaut interne) ou utiliser un reset (pour en savoir plus à propos des resets css). Quelques exemples : reset d'Eric Meyer, normalize utiliser dans le canvas HTML5 boilerplate ou plus récemment KNACSS réalisé par l'équipe d'Alsacréations.fr (pas encore testé^^).
- t'initier au positionnement CSS une fois pour toute pour comprendre ce que tu fais et ne pas y aller en tâtonnant en écrivant des propriétés dont tu ne maitrises pas les effets et qui finalement t'enferme dans une mise en page que tu ne maitrises pas. Pour ça il n'y a pas de secret. Il faut apprendre, lire, commencer avec des exemples plus simple. Quelques pistes : Initiation au positionnement en CSS (Partie 1), Guide de survie du positionnement CSS, Mise en page CSS avancée grâce à la propriété display.
Allais courage !
