mise en page avec un div et du css [Résolu]

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

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

et mon essai :

Code :

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

avec dans le head

Code :

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

et style_div.css :

Code :

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 :

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 :

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

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

Code :

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 :

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 :

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 :

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 :

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 :

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]

Envoyé par laurentSc

(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.