Placement, bloc et taille des images

Bonjour,

Après pas mal de recherche, une lecture poussé du livre de Raphaël, j'ai toujours mon problème.
Outre le fait que j'ai du mal à saisir les différents placements, j'ai un problème soit de compréhension soit technique sur l'affichage des images.

En effet, mes images ne sont pas retaillé en fonction du bloc qui la contient.
Je m'explique, imaginons un bloc de 100px/100px, et que j'ai une image de 200px/200px, sans erreur de ma part, l'image déborde, est-ce normal ?

De plus, comment faites vous pour calculer les placements ?
Vous marquez tout sur une feuille, margin, paggin etc.. en faisant des calculs pour voir les placements ou tatonnez-vous ?

Merci d'avance.

Bonjour,

a écrit :
Je m'explique, imaginons un bloc de 100px/100px, et que j'ai une image de 200px/200px, sans erreur de ma part, l'image déborde, est-ce normal ?

Oui, c'est normal le bloc s'étend pour laisser toute l'image visible.
Tout dépend si il s'agit d'une image de contenu ou de présentation ?

a écrit :
De plus, comment faites vous pour calculer les placements ?
Vous marquez tout sur une feuille, margin, padding etc.. en faisant des calculs pour voir les placements ou tatonnez-vous ?

En général, on fait proprement sous firefox & on utilise les commentaires conditionnels pour corriger le tir sous IE.

Bonne continuation.
Romain

Par exemple une bannière tout en haut, dans la configuration ci-dessus, si je mets un autre bloc en dessous, celui-ci se retrouve sous l'image, parce que le bloc est plus petit.
Je me trompe?

yodaswii a écrit :
on fait proprement sous firefox

Vous vous lancez comme ça, les mains direct dans le CSS ?

a écrit :
Par exemple une bannière tout en haut, dans la configuration ci-dessus, si je mets un autre bloc en dessous, celui-ci se retrouve sous l'image, parce que le bloc est plus petit. Je me trompe ?

Une balise de type 'block' (p, div pour ne citer qu'eux) prend par défaut 100% de son parent.
Ce type d'éléments se placent les uns en dessous des autres (sauf indication contraire via css-positionning).

Si cette bannière présente de l'information (titre, slogan etc.), on l'insère dans la page par la balise img (sans oublier l'attribut alt pour le descriptif) si il s'agit juste d'un habillage on utilise la propriété css background-image.

a écrit :
Vous vous lancez comme ça, les mains direct dans le CSS ?

Oui & non ! En fait, le mieux c'est de prendre un crayon et une feuille de dessiner une maquette, de commencer à coder en (x)html puis de composer la css. Mais on commence souvent (à tord) par la présentation ...
Modifié par yodaswii (23 Mar 2007 - 12:29)

Merci.

J'ai toujours mon problème de compréhension sur les taille des bloc et des images.

Voici mon CSS pour la bannière :

div#banner{
	margin-top:15px;
	height:193px;
	width:1020px;
	border-width:thin;
	border-style:solid;
	border-color:rgb(144,145,147);
}

et mon html :

<div id="banner">
<img src="images/banner.png" alt="test bannière"/>
</div>

La section de CSS est bien interprétée par le navigateur, si vous en doutiez (moi j'ai des doutes parfois )

Le width et height sont respecté pour la bordure, je la vois qui rétrécis si je diminue les tailles, mais l'image continue de déborder, c'est ça que je comprends pas

Salut,

Si l'image est plus grande que son conteneur, il est normal qu'elle dépasse de celui-ci.

Qu'est-ce que tu essaies de faire avec cette image, exactement ?

Bah je voudrais savoir comment adapter l'image à la taille de son conteneur .

Peut être que ce n'est pas possible

Si tu veux mettre une image dans un div de 1020 x 193 px, il faut que tu recadres (à l'aide d'un éditeur d'image comme photoshop, gimp ou autres) ton image pour qu'elle fasse 1020 x 193 px ou moins, mais pas plus.
Modifié par tankia (24 Mar 2007 - 19:55)

Au passage, un div de 1020 pixels de large (+ la bordure qui s'ajoute, donc on devrait arriver dans les 1022 ou 1024 pixels de large je suppose), c'est une mauvaise idée.

Un écran en 1024x768 ne permettra d'afficher que des pages de maximum 1000px de large... et mieux vaut tabler sur moins, pour garder un peu de marge et éviter ainsi les barres de défilement horizontal inutiles.

Valeurs de référence pour un site en largeur fixe :
- compatible 800x600 : 760px (770px grand maximum) ;
- compatible 1024x768 : 980px (990px grand maximum).

Merci pour les conseils Florent.

Ok, donc je dois tailler les images en fonction.

Merci.

tankia a écrit :
Si tu veux mettre une image dans un div de 1020 x 193 px, il faut que tu recadres (à l'aide d'un éditeur d'image comme photoshop, gimp ou autres) ton image pour qu'elle fasse 1020 x 193 px ou moins, mais pas plus.

Tu peux aussi modifier l'overflow du <div> en question : en appliquant

overflow: hidden;

l'image ne dépassera plus du conteneur, même si elle est plus grande que celui-ci. Attention cependant, c'est aussi valable pour tout le reste du contenu du <div>, dont le texte. Il faut s'assurer que cela ne pose pas de problèmes, en cas de redimensionnement du texte, par exemple.