Discussion :

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

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.

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]

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

Même avec un div ?

[Candygirl]

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.