Question théorique.

Bonjour à tous,
c'est mon premier post sur le site, mais là, j'ai un soucis que je n'arrive pas à résoudre seul, même si il parait complétement bidon (je vous assure, j'ai honte, mais je bloque là dessus depuis hier soir)...

Alors voilà, j'ai un élément <div>, que l'on appellera "banderole". Je souhaite que "banderole" soit constitué de 3 images (cf main_1.jpg). Je ne connais pas la taille horizontale de "banderole", elle est fixée à 100%. Sa hauteur est de 160px.



En soit, rien de compliqué.

Là où ça se complique, c'est que je n'ai pas encore les fichiers images en question. Je voudrais quand même réserver l'espace pour celles ci.

Question :
Peut on dimensionner un élément <img> sans pour autant lui fournir une src ? Le résultat sera t il visible ?

Merci d'avance pour vos réponses éclairées.

Bonjour,

Pourquoi ne pas utiliser une image factice en attendant d'avoir les vraies? Par exemple une image unie, ou transparente.

Bonjour,

pourquoi ne pas utiliser les attributs width et height ? Même avec un src vide, le bloc prend la dimension indiquée : c'est ce dont on se sert en emailing afin de préserver la structure, étant donné qu'aucun client de messagerie ( ou presque ) n'affiche les images par défaut.

Tout à fait d'accord, mais tu te doutes que si je pose la question, c est que width et height n'ont aucun effet...
Pour info, je fixe la taille horizontale de 1 (20%), de 2 (50%) et de 3 (30%). La taille verticale pour les trois images est de 160px.

En l état, mon div "banderole" s affiche bien, mais rien au niveau des blocs img.

Bonjour,

Sans code, difficile de t'aider.

Mais en attendant : +1 avec les images factices.

Bonjour Laurie-Anne,

un petit peu de code pour toi :

Ci dessous la partie html

<div id="slideshow">
    <img id="slide-small" alt="1" src="nothing.jpg" />
    <img id="slide-large" alt="2" src="nothing.jpg" />
    <img id="slide-medium" alt="3" src="nothing.jpg" />
</div>

Ci dessous la partie CSS

div#slideshow { background-color: black ; height: 160px ; 
	border-color: white ; border-style: dashed ; 
	border-top: 0 ; border-left: 0 ; border-right: 0 ; padding: 0 ; margin: 0 } 

img#slide-small { width: 20% ; height: 160px ; background-color: white ; margin: 0 ; padding: 0 }
img#slide-medium { width: 45% ; height: 160px ; background-color: white ; margin: 0 ; padding: 0 }
img#slide-large { width: 35% ; height: 160px ; background-color: white ; margin: 0 ; padding: 0 }

Et une petite capture d'écran du résultat en l'état :


Moi pas comprendre ! Il se moque éperdument de ce que je peux lui mettre (!) en width et height pour ce qui est des img...

Hello,

Juste une petite précision:

Ten a écrit :
Même avec un src vide...

Le src vide est à bannir pour des raisons de perfs (et de logique aussi) : voir Empty image src can destroy your site.

Sinon, +1 pour les images factices, surtout que des services comme dummyimage ou placekitten font ça très bien. Là ton souci est que ton nothing.jpg n'existe pas donc il se rabat sur le alt. Pour width et height, Ten parlait des attributs HTML, pas des propriétés CSS.
Modifié par Florian_R (25 Oct 2011 - 12:56)

Bon, je crois que je vais suivre vos conseils pour les images factices. Cependant je trouve quand même étrange qu'en l'état mes éléments <img> ne prennent pas les valeurs spécifiées.

Je reviens vers vous avec un tas d'autres questions !

Merci.

PS : si quelqu'un a une idée du pourquoi ça marche pas , je suis preneur !

Une image est a par défaut la valeur inline pour sa propriété display. Un width ou un height en CSS ne sera pas pris en compte.

Ceci expliquerait donc cela ! Et comme il est pas envisageable de les passer en display: block (je veux qu'elles soient alignées) je n ai comme solution que les images factices!

Merci Florian_R !

aur8l a écrit :
Ceci expliquerait donc cela ! Et comme il est pas envisageable de les passer en display: block (je veux qu'elles soient alignées) je n ai comme solution que (...)

... display:inline-block.
De rien.

Bien entendu, si c'est pour un test ou quelque chose de temporaire ça ira bien, mais pour un site en production on évitera les src manquants ou aboutissant à une réponse 404 comme la peste!

Autre remarque qui va bien: je dis ça à tout hasard, mais on évitera d'utiliser des images dans des cas de figure ou d'autres éléments seraient plus adaptés. Ça fait longtemps que j'ai pas vu une mise en page avec trois éléments IMG censés prendre la largeur d'un conteneur (en dehors de l'emailing où on utilise encore des techniques préhistoriques), ça pique un peu ma curiosité.
Modifié par fvsch (25 Oct 2011 - 13:56)

Je t explique :
En fait l idée, c'est d avoir une espèce de zone qui serait une gallery. On sélectionne 3 images et on les met en avant dans "banderole".

Donc je te rassure, les src vides, c'est juste pour la réalisation de mon squellette de page!

Merci pour l astuce du display: inline-block !