CSS AMATEUR - Positionnement des div dans la div parent

Le
Broc_Ex_Co
[Je bidouille, et n'ai pas d'autres prétentions; pardon pour le caractère
trés basique de la question]

Je n'arrive plus à retrouver le code à indiquer, pour que les boites <Div>
se positionnement en haut de leur boite parent.
De même, pour qu'elles soient centrées horizontalement dans le parent.

Merci d'avance!
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #22031091
Broc_Ex_Co a écrit :
[Je bidouille, et n'ai pas d'autres prétentions; pardon pour le caractère
trés basique de la question]

Je n'arrive plus à retrouver le code à indiquer, pour que les boites <Div>
se positionnement en haut de leur boite parent.
De même, pour qu'elles soient centrées horizontalement dans le parent.



Une boite "normale" se positionne toute seule en haut.
(du moins le premier enfant du parent)

Deux boites de largeur (et y compris les bords et marges) inférieure à
la 1/2 de la largeur libre de la boite contenante (largeur - bords -
padding) peuvent se succéder en haut, il faut alors qu"elles soient
flottantes.

<div style="position: relative">
<div style="width: 49%; float: left;"> 1 </div>
<div style="width: 49%; float: left;"> 2 </div>
</div>


Centrer 2 boites flottantes dans un conteneur : ce n'est pas prévu

Mais on doit pouvoir tricher :

<div style="position: relative">
<div style="width: 30%; float: left; margin-left: 20%"> 1 </div>
<div style="width: 30%; float: left;"> 2 </div>
</div>


Centrer 2 images côte à côte ce doit être possible :

<p style="text-align: center">
<img src=" ...
<img src=" ...
</p>


Le centrage horizontal ne pose aucun problème dès que les éléments à
centrer sont de type inline.

Exemple :

<html>
<style type="text/css">
ul { list-style: none; text-align: center; }
li { display: inline; margin: 0; padding: 0 }
ul li span { padding: 2px 14px; border: 1px solid; margin: 6px; }
</style>
<ul>
<li><span>exemple 1</span></li>
<li><span>exemple 2</span></li>
<li><span>exemple 3</span></li>
</ul>
</html>



Après il reste le positionnement en absolute.
(qu'il faut absolument éviter sauf si vraiment pas d'autre choix)



Quoi toi vouloir faire exactement ?


--
sm
Publicité
Poster une réponse
Anonyme