Image d'une div
Fermé
Link67
-
5 juin 2011 à 11:03
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 6 juin 2011 à 10:11
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 - 6 juin 2011 à 10:11
A voir également:
- Image d'une div
- Image iso - Guide
- Comment agrandir une image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
3 réponses
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
Modifié par dariumis le 5/06/2011 à 12:41
Modifié par dariumis le 5/06/2011 à 12:41
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.
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
5 juin 2011 à 12:29
5 juin 2011 à 12:29
Salut, je comprend pas trop, ça change rien, il rajoute juste la balise img avec un attribut css dans son div et il enlève deux lignes de son css, c'est tout, il peut toujours acceder a ces feuilles de style et faire toutes les modifs qu'il veut ^^.
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
dariumis
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
63
5 juin 2011 à 12:37
5 juin 2011 à 12:37
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
mpmp93
Messages postés
6652
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
Modifié par mpmp93 le 6/06/2011 à 10:12
Modifié par mpmp93 le 6/06/2011 à 10:12
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+
