A voir également:
- Fonctionnement DIV pour faire mise en page
- Supprimer une page word - Guide
- Mise en forme conditionnelle excel - Guide
- Mise a jour chrome - Guide
- Traduire une page - Guide
- Mise a jour windows 10 - Guide
2 réponses
Kopros
Messages postés
595
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
Modifié par Kopros le 9/08/2011 à 02:46
Modifié par Kopros le 9/08/2011 à 02:46
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>
Utilisateur anonyme
9 août 2011 à 00:24
9 août 2011 à 00:24
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>
