Intégration d'une image-lien sur un site en HTML/CSS

[johan54]

Bonjour à tous, voilà, il y a quelques temps j'ai créé mon entreprise, je me suis fais un site, mais là je galère sur un point que je n'arrive pas à résoudre.

J'ai sur mon index.html, un carrousel en JavaScript afin de faire défiler deux images distinctes.

Étant donné que je commence à faire de la pub un peu partout, j'ai créé une page sur FaceBook, et j'aurais aimer y placer une image-lien "retrouvez nous sur FaceBook" afin qu'on puisse cliquer dessus et retrouver ma page FB.

J'ai bien tenté de l'ajouter dans mon CSS, mais elle ne se place pas correctement et je n'arrive pas à en faire un lien.

Je ne suis qu'un débutant en HTML et CSS

mon index.html

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!-- CARROUSEL -->

<div id="mycarousel" class="jcarousel-skin-tango">

	<div class="jcarousel-control">
		<a class="number un" href="#">1</a>
        <a class="number deux" href="#">2</a>
	</div>
    
    <ul>
    
    <li>
    	<div class="image-carousel">
        	

           <div class="lien-fb">
            	<div class="image-fb">
                <a href="URL"></a>
                </div>
            </div>

                
        	<div class="lien-gauche">
            	<div class="image-gauche">
                </div>
                <div class="texte-gauche">
                <strong><a href="#">TITRE</a></strong>
                <div class="sepa-small"></div>
                <a href="#">TEXTE***TEXTE</a>
                </div>
            </div>
            
            <div class="lien-droite">
            	<div class="image-droite">
                </div>
                <div class="texte-droite">
                <strong><a href="#">TITRE</a></strong>
                <div class="sepa-small"></div>
                <a href="#">TEXTE***TEXTE</a>
                </div>
            </div>
        </div>
	</li>

Il n'y a là qu'une des deux parties du carrousel

et le CSS qui correspond

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.lien-fb
{
	float:left;
	margin-top:418px;
	margin-left:230px;
}

.image-fb
{
	background-image:url(images/fb.png);
	width:115px;
	height:158px;
	margin-right:5px;
	float:left;	
}


.lien-gauche
{
	float:left;
	margin-top:418px;
	margin-left:230px;
}

.image-gauche
{
	background-image:url(images/image1.png);
	width:85px;
	height:85px;
	margin-right:5px;
	float:left;
}

.texte-gauche
{
	font-family:"Segoe UI";
	font-size:12px;
	color:#808080;
	width:145px;
	float:right;
	margin-top:-3px;
	text-align:left;

En rouge ce que j'ai rajouté, vous vous en doutez.

Si quelqu'un à une solution.

Amicalement.

Johan

[Atomya Rise]

En float, il te faudra toujours préciser les dimensions (hauteur + largeur). Sinon, dans les autres cas (ou presque) il te faudra obligatoirement préciser une hauteur (height) car la longueur (width) est par défaut 100%.

Donc, ici, il faut que tu ajoute un width et un height a ta class css lien-fb afin que celle-ci affiche son contenu.

[Candygirl]

Hello,

Envoyé par Atomya Rise

En float, il te faudra toujours préciser les dimensions (hauteur + largeur).

Pas nécessairement. Un élément flottant adapte sa largeur et sa hauteur en fonction de son contenu.

Envoyé par Atomya Rise

Sinon, dans les autres cas (ou presque) il te faudra obligatoirement préciser une hauteur (height) car la longueur (width) est par défaut 100%.

Le width par défaut est auto et non 100%. Le width prendra l'espace maximum à disposition dans son parent, en tenant compte des éventuels border, margin et padding. Si le block ne possède ni border,ni margin, ni padding alors là, le width:auto sera équivalent à un width de 100%.

En général, il est déconseillé de définir une hauteur sauf dans le cas ou la hauteur est pleinement maîtrisée (par exemple pour une image de hauteur fixe).

@johan54: il est difficile de se représenter ton problème de positionnement sans voir la page.

[Atomya Rise]

Envoyé par Candygirl

Pas nécessairement. Un élément flottant adapte sa largeur et sa hauteur en fonction de son contenu.

Même avec un div ?

[Candygirl]

Envoyé par Atomya Rise

Même avec un div ?

Je ne suis pas sûre de bien comprendre la question mais n'importe quel élément (div, p, span, a,...) flottant, avec la valeur par défaut width:auto, adapte sa largeur en fonction de son contenu et non de son parent; c'est le comportement par défaut des flottants:

10.3.5 Floating, non-replaced elements

If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'.

If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.

Calculation of the shrink-to-fit width is similar to calculating the width of a table cell using the automatic table layout algorithm. Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, find the available width: in this case, this is the width of the containing block minus the used values of 'margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.

Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).

[Atomya Rise]

Désolé, je parlais surtout de la hauteur d'une div en faite, sur la largeur, aucun soucis tu as entièrement raison

C'est surtout sur la hauteur que je me pose la question, car il y a eu une fois, j'ai eu un soucis avec une div qui ne s'afficher pas, et la seule solution trouvé par Anomaly a été de renseigné la hauteur de celle-ci, il m'avais expliqué que si on ne le faisait pas la div ne prenais pas en compte son contenu et du coup, invisible.

[Candygirl]

ok je pense que tu fais alors référence à un div dont les enfants sont tous des éléments flottants, par exemple:

Code :

1
2
3
4
<div style="background:red;">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>

Dans ce cas là, tu ne verras pas la couleur de fond rouge de ton div parent à moins que tu ne lui confères une hauteur (mauvais idée puisqu'il y a du text susceptible de varier en hauteur) ou que tu lui attribues une propriété qui établit un nouveau contexte de formatage. Par exemple:

Code :

1
2
3
4
<div style="background:red;float:left;">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>

ou encore

Code :

1
2
3
4
<div style="background:red;overflow:auto;">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
</div>

Il est clair que les deux solutions ne présentent pas le même effet final mais le but était juste de faire prendre au div parent en compte le contenu de ses enfants pour déterminer sa hauteur (l'ajout d'un width:100% sur la solution en float:left rendrait pareil dans ce cas là).

Et on en revient à ce qui est dit plus haut, un élément flottant adapte sa hauteur à son contenu

[Atomya Rise]

D'accord !

Je comprend mieux à présent !

Je te remercie énormément pour la patience dont tu as fait preuve avec moi, cela est très très sympathique !

Tu es géniale ! Merci a toi c'est super

[Candygirl]

Mais de rien, le forum est là pour ça

[eckerdecker]

@Candygirl et Atomya Rise : la propriété css clear (qui accepte comme valeurs : both, right, left ou none) est LA propriété qui a été désigné pour "casser" les flux d'éléments flottants à gauche, à droite ou même les deux d'un coup. Utilisé comme ceci :

Code :

1
2
3
4
5
<div style="background:red;">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
  <p style="clear:both">Lorem ipsum</p>
</div>

ou à la rigueur

Code :

1
2
3
4
5
<div style="background:red;">
  <div style="float:left;">left</div>
  <div style="float:right;">right</div>
  <div style="clear:both"></div>
</div>

si vous ne voulez pas particulièrement de contenu apres "left" et "right".
L'élément "clear" reprendra le cours normal de l'enchainement des blocs et au passage redonnera sa consistance au bloc rouge.
Il doit être possible de mettre à la fois un clear et un float sur un bloc afin d'à la fois rompre un enchainement et en démarrer un nouveau mais l'interprétation par les vieux navigateur est à vérifier ...

@Johan54 : je rejoint Candygirl sur le fait que sans voir la page il sera difficile de t'aiguiller, je pense comprendre ce que tu veux faire et les difficultés que tu rencontres mais il manque des éléments et il est préférable d'avoir un rendu plutôt que te demander de poster tout ton code

[johan54]

Merci pour vos réponses, je rentre de vacances, je vais m'occuper de ça

merci beaucoup