Image d'une div
Link67
-
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
mpmp93 Messages postés 6648 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
je suis en train de mettre en place le design de mon site. Je place actuellement la banière.
Pour cela j'ai créé une div appelé #banner j'y place sur ma page CSS mon image.
Et le résultat me surprend...l'image ne déborde pas de la DIV.
En bas cela me gène pas car le resultat est souhaité mais sur la partie haute la tête de mon avatar est coupé.
Comment faire pour que l'image déborde en haut et pas en bas de la DIV?
CODE CSS
#banner
{
width: 980px;
height: 120px;
background-image: url(images/DOUB7.gif);
background-position:left;
background-repeat: no-repeat;
margin-bottom: 10px;
}
je suis en train de mettre en place le design de mon site. Je place actuellement la banière.
Pour cela j'ai créé une div appelé #banner j'y place sur ma page CSS mon image.
Et le résultat me surprend...l'image ne déborde pas de la DIV.
En bas cela me gène pas car le resultat est souhaité mais sur la partie haute la tête de mon avatar est coupé.
Comment faire pour que l'image déborde en haut et pas en bas de la DIV?
CODE CSS
#banner
{
width: 980px;
height: 120px;
background-image: url(images/DOUB7.gif);
background-position:left;
background-repeat: no-repeat;
margin-bottom: 10px;
}
A voir également:
- Image d'une div
- Image iso - Guide
- Légender une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Transformer une image en icone - Guide
3 réponses
Salut, met plutôt une balise img dans ton div, au lieu de mettre l'image en background du div, ainsi elle ce dimensionnera automatiquement si tu met le width a 100% dans le css de l'image:
EDIT: pas besoin du height.
<div id="banner">
<img style="width:100%;" src="" />
</div>
#banner
{
width: 980px;
margin-bottom: 10px;
}
EDIT: pas besoin du height.
Disons que si cette image est présente dans toutes ses feuilles, le fait de la mettre dans une css séparée permettra de changer cette image en une fois sur toutes ses feuilles d'un coup, ou de prévoir plusieurs styles différents incluant un changement de l'image lors du changement de la feuille css (en gros)
En gros c'est pour la changer plus facilement
En gros c'est pour la changer plus facilement
ha oui ça y est je comprend, en html y a toujours un minimum de codage a faire, il est vrai que les langage de programmation comme le php permettent de faciliter les choses, mais là on sait pas trop si l'auteur peu faire du php.
La méthode de mettre l'image en background ne me semble pas bonne du fait de peu de compatibilité suivant les résolution je crois. les balises img s'adapte à la taille du conteneur parent, si elle évolue avec un width en "%", ainsi avec cette méthode on peut facilement imaginer des banniere qui s'adapte a la résolution et ne change pas de dimension en fonction de celle-ci.
La méthode de mettre l'image en background ne me semble pas bonne du fait de peu de compatibilité suivant les résolution je crois. les balises img s'adapte à la taille du conteneur parent, si elle évolue avec un width en "%", ainsi avec cette méthode on peut facilement imaginer des banniere qui s'adapte a la résolution et ne change pas de dimension en fonction de celle-ci.
Tu peux faire pareil en css, disons que tout ce qui touche à la mise en forme, il est préférable de le faire en css, le html étant réservé exclusivement au contenu (pour un codage "pro"). Ainsi, on pourra modifier très facilement le design, voir le proposer au choix, tout en gardant le contenu intact.
En l'occurrence, je crois que l'image fait partie du design (si elle avait fait partie du contenu, alors en html elle aurait été adaptée). Donc mieux vaut la faire en css
En l'occurrence, je crois que l'image fait partie du design (si elle avait fait partie du contenu, alors en html elle aurait été adaptée). Donc mieux vaut la faire en css
Bonjour,
Si vous construisez votre site en HTML5 (ce qui est compatible avec tous les navigateurs moyennant une petite bidouille: http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5), vous pouvez par exemple définir votre tête de page:
<body>
<header>
<h1>Titre de ma page</h1>
</header>
<article>
...texte du reste de ma page...
</article>
</body>
et le css de header:
body header {
width: 980px;
height: 120px;
background-image: url(images/DOUB7.gif);
background-position:left;
background-repeat: no-repeat;
margin-bottom: 10px;
}
Dans la page dont j'ai mis le lien en début de mon intervention, vous trouvez ceci:
<body>
<header>
<h1>HTML5 / CSS 2.x/3 / PHP / MySQL ...</h1>
<nav>
<a href="index.php?page=accueil">retour page d'accueil</a>
</nav>
</header>
...reste de la page...
</body>
En jouant bien avec la structuration des blocs, vous n'aurez plus besoin de faire class='xxxxxx' partout dans votre code HTML5.
A+
Si vous construisez votre site en HTML5 (ce qui est compatible avec tous les navigateurs moyennant une petite bidouille: http://html5.immo-scope.com/index.php?page=html5/premierePageHtml5), vous pouvez par exemple définir votre tête de page:
<body>
<header>
<h1>Titre de ma page</h1>
</header>
<article>
...texte du reste de ma page...
</article>
</body>
et le css de header:
body header {
width: 980px;
height: 120px;
background-image: url(images/DOUB7.gif);
background-position:left;
background-repeat: no-repeat;
margin-bottom: 10px;
}
Dans la page dont j'ai mis le lien en début de mon intervention, vous trouvez ceci:
<body>
<header>
<h1>HTML5 / CSS 2.x/3 / PHP / MySQL ...</h1>
<nav>
<a href="index.php?page=accueil">retour page d'accueil</a>
</nav>
</header>
...reste de la page...
</body>
En jouant bien avec la structuration des blocs, vous n'aurez plus besoin de faire class='xxxxxx' partout dans votre code HTML5.
A+