Discussion :

[laurentSc]

Bonjour,

je commence à remplacer ma mise en page à base de tables html par des div et du css, mais le premier truc que je fais ne marche pas, et je ne comprends pas. Pour être clair, voilà le code à remplacer :

Code :

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

<table><tr><td width=330></td><td><img src="---"></td></tr></table>

et mon essai :

Code :

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

1
2
<div id="logo_decal"></div>
<div id="logo"><img src="---"></div>

avec dans le head

Code :

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

 <link rel="stylesheet" type="text/css" href="style_div.css">

et style_div.css :

Code :

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

1
2
3
4
5
6
7
8
 
div#logo_decal {
	width:330px;
	}
 
div#logo {
float:left;
}

Bien qu'ayant appliqué ce que j'avais compris, l'image n'est pas décalée de 330 pixels, mais complètement à gauche de la page : pourquoi ?

[thelvin]

float: left est là pour assurer que la div soit bien à gauche de la page, et que ce qui suit vient "flotter" à sa droite. Jusqu'à ce que ce qui flotte finisse par la dépasser par le bas, auquel cas ça continue tout à gauche.

Pour décaler une boîte vers la droite, le plus simple est margin-left. Par exemple :

Code :

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

margin-left: 30%

Une indication en pixels, de l'ordre de 300px, ne tient pas assez compte des innombrables résolutions d'écran d'aujourd'hui. Tout le monde ne navigue pas avec un PC de bureau.

[laurentSc]

Merci, avec ça , ça marche :

Code :

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

1
2
3
div#logo {
margin-left:330px;
}

mais pour la culture, pourquoi ça ne marche pas avec ça :

Code :

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

1
2
3
4
5
6
7
div#logo_decal {
	width:330px;
	float:left;
	}
 
div#logo {
}

: le premier div est tout à gauche (float : left) et large de 330 pixels et le deuxième devrait être à droite du premier ??

[thelvin]

Le premier div a une hauteur nulle. Le second commence donc directement en-dessous. Je ne suis pas certain que l'on puisse compter dessus, toutefois.

Et à mort les ultraportables.

[laurentSc]

Et à mort les ultraportables.

Interdit
Merci pour ton explication, ça marche aussi avec un height de 100px, mais bizarrement, pas 1OOpx (des lettres au lieu de chiffres)

[laurentSc]

J'ai décoché "résolu", car je veux faire un truc un poil plus compliqué et de nouveau, je n'y arrive pas :
le code à remplacer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
  <tbody>
    <tr>
 
      <td width="80"></td>
      <td><img src="img1" border="0">
 
      </td>
      <td width="20"></td>
      <td><img src="img2" border="0"></td>
    </tr>
  </tbody>
</table>

Mon essai :

Code :

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

1
2
<div id="pr_image"><img src="img1" border="0"></div>
<div id="de_image"><div id="d_image"><img src="img2" border="0"> </div></div>

avec ce css :

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
 
div#pr_image {
	float:left;
	height:230px;
	margin-left:80px;
}
 
div#de_image {
height:230px;
}
 
div#d_image {
margin-left:20px;
height:230px;
}

Comme il y a 2 images à mettre côte à côte (avec un espace entre les deux), l'idée est de mettre les deux images ds 2 div conteneurs, le premier ayant l'attribut float:left, puis d'inclure dans le 2e conteneur un deuxième div qui contient l'image, ce div ayant l'attribut de margin-left:20px afin d'introduire l'espace entre les deux images. Or cet espace n'existe pas, et de plus, il y a un petit décalage en hauteur entre les 2 images, alors qu'elles font la même hauteur : comment faire que les 2 images soient alignées et qu'il y ait un espace entre les 2 ?

[NoSmoking]

as tu essayé le plus simple

Code html :

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

1
2
3
4
<div>
  <img src="img1" style="margin-left:80px;border:0;">
  <img src="img2" style="margin-left:20px;border:0;">
</div>

[laurentSc]

Je n'y croyais pas mais ça a marché en apportant une petite modif :

Code :

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

1
2
3
4
5
                                          <div><img
 src="img1"
 style="border: 0 ; float: left; margin-left: 80px;"><img
 src="img2"
 style="border: 0; margin-left: 20px;"></div>

(sans le float:left, la 2e image passe sous la première). Merci de m'y avoir fait penser.

[NoSmoking]

(sans le float:left, la 2e image passe sous la première). Merci de m'y avoir fait penser.

la balise img est une balise d'élément inline, donc si elle passe à la ligne c'est que le contenant, la div en l'occurence, n'est pas assez large.