Comment élargir l'interface de mon site web ?
Résolu
Thérèse
-
Thérèse -
Thérèse -
Bonjour,
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.
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.
A voir également:
- Comment élargir l'interface de mon site web ?
- Site de telechargement - Accueil - Outils
- Création site web - Guide
- Site comme coco - Accueil - Réseaux sociaux
- Web office - Guide
- Quel site remplace coco - Accueil - Réseaux sociaux
6 réponses
Merci pour ta célérité. 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;
}
<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;
}
Désolé, je viens de me rendre compte 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é. Voici les bonnes informations :
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. Je suis vraiment coincé, j'attends beaucoup de vos réponses. Merci d'avance.
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. Je suis vraiment coincé, j'attends beaucoup de vos réponses. Merci d'avance.
Bonsoir,
J'ai vécu ce même problème sans trop m'en souvenir...
Maintenant, j'englobe toute ma page du <body> au </body> d'une division spéciale pour être sur que tout est intégré et que je me réfère toujours à la page : <div class="bloc-page">, laquelle class ne fait quasiment rien... sauf établir la largeur :
.bloc-page {
width : 99,9%;
}
Pour moi, ça avait corrigé ces mêmes problèmes.
Bonne chance RJL2719
J'ai vécu ce même problème sans trop m'en souvenir...
Maintenant, j'englobe toute ma page du <body> au </body> d'une division spéciale pour être sur que tout est intégré et que je me réfère toujours à la page : <div class="bloc-page">, laquelle class ne fait quasiment rien... sauf établir la largeur :
.bloc-page {
width : 99,9%;
}
Pour moi, ça avait corrigé ces mêmes problèmes.
Bonne chance RJL2719
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question