Fonctionnement DIV pour faire mise en page
shidy06
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
J'ai un problème avec l'utilisation des "div".
(Ci joint, une image pour représenter le problème : http://i40.servimg.com/u/f40/11/30/02/60/div10.jpg)
Je voudrais que l'encadrement de ces deux images cliquables soient un layout, dans lequel on a donc deux layouts (les deux images) alignées horizontalement comme sur l'exemple).
Ca "donnerait" :
<div id="cadre">
<div id="image1">
</div>
<div id="image2">
</div>
</div>
Quelqu'un sait comment configurer ceci pour que ça apparaisse de façon horizontale à l'intérieur d'un div sur une page verticale ? :/
Admettons que "cadre" est en 800*500, et que les deux images soient en 400*500.
Merci d'avance.... !
J'ai un problème avec l'utilisation des "div".
(Ci joint, une image pour représenter le problème : http://i40.servimg.com/u/f40/11/30/02/60/div10.jpg)
Je voudrais que l'encadrement de ces deux images cliquables soient un layout, dans lequel on a donc deux layouts (les deux images) alignées horizontalement comme sur l'exemple).
Ca "donnerait" :
<div id="cadre">
<div id="image1">
</div>
<div id="image2">
</div>
</div>
Quelqu'un sait comment configurer ceci pour que ça apparaisse de façon horizontale à l'intérieur d'un div sur une page verticale ? :/
Admettons que "cadre" est en 800*500, et que les deux images soient en 400*500.
Merci d'avance.... !
A voir également:
- Fonctionnement DIV pour faire mise en page
- Mise en forme conditionnelle excel - Guide
- Supprimer page word - Guide
- Fonctionnement processeur - Guide
- Mise a jour chrome - Accueil - Applications & Logiciels
- Mise a jour windows 10 - Accueil - Mise à jour
2 réponses
Un élément du DOM ne peux pas être en position absolute et avoir un float. position:absolute; et float: right; ne vont donc pas ensemble (différents navigateurs peuvent interpréter ça différemment...). Surtout que le cadre n'est pas positionné, du coup les éléments en absolute vont se placer par rapport à la page, ce qui est assez moche.
Vaut mieux ne pas changer la position (ou alors la mettre en relative mais c'est la valeur par défaut), ne pas mettre le left: 50% qui sert à rien, et mettre un float: right (ou left) aux deux images. Ou float: left à l'image 1, float: right à l'image 2.
A part ça le padding du cadre n'est pas non plus super utile.
La balise <center> est obsolète et n'est pas valide W3C.
Vaut mieux la remplacer par ce css sur #cadre:
margin: 0 auto;
Et la balise <style> ça se déclare avec l'attribut 'type' comme ça <style type="text/css">...</style>
Ce qui donne par exemple :
Vaut mieux ne pas changer la position (ou alors la mettre en relative mais c'est la valeur par défaut), ne pas mettre le left: 50% qui sert à rien, et mettre un float: right (ou left) aux deux images. Ou float: left à l'image 1, float: right à l'image 2.
A part ça le padding du cadre n'est pas non plus super utile.
La balise <center> est obsolète et n'est pas valide W3C.
Vaut mieux la remplacer par ce css sur #cadre:
margin: 0 auto;
Et la balise <style> ça se déclare avec l'attribut 'type' comme ça <style type="text/css">...</style>
Ce qui donne par exemple :
<html>
<head>
<style type="text/css">
#cadre { margin: 0 auto; width: 800px; height: 500px;}
#image1, #image2 { width: 400px; height: 500px;}
#image1 { float:left;}
#image2 { float: right;}
</style>
...
</head>
<body>
<div id="cadre">
<div id="image1"></div>
<div id="image2"></div>
</div>
</body>
</html>
Comme ça par exemple ?
<html>
<head>
<style>
#cadre { padding: 3px; background-color: blue; width: 800px; height: 500px;}
#image1, #image2 { width: 400px; height: 500px;}
#image1 { position:absolute; background-color: yellow;}
#image2 { position:absolute; float: right; left: 50%; background-color: red;}
</style>
</head>
<body>
<center>
<div id="cadre">
<div id="image1"> </div>
<div id="image2"> </div>
</div>
</center>
</body>
</html>
