IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

position absolue ?


Sujet :

Positionnement en CSS

  1. #1
    Membre actif
    Profil pro
    Inscrit en
    Mai 2004
    Messages
    490
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2004
    Messages : 490
    Points : 201
    Points
    201
    Par défaut position absolue ?
    Bonjour,

    j'ai un bloc qui contient deux éléments, un bouton et du texte,
    je voudrais positionner le bouton en bas du conteneur et le texte, juste au dessus de ce bouton. Comme si ces deux éléments étaient collés.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    <div class="contenuBtnAjouter">
    	<h2 class="prix">{$aSelection4[0]->prix}</h2>	
    	<span class="btnAjouter">
    		<img  src='images/ajouter.gif' border='0' alt="">
            </span>
    </div>
    mon style :
    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
     
    .btnAjouter{
     
    	width:				105px;
    	position:				absolute;
    	top:					25px;
    	left:					00px;
    	z-index:1;
     
    }
    .contenuBtnAjouter{
    	width:70px;
    	position:absolute;
    	left:00px;
    	clear:both; /* pour IE !! */
    }
     
    h2.prix  {
     
    		position:			absolute;
    		width:			85px;
    		color:				red;
    		font-weight:		bold;
    		font-size:			12px;
    		text-align:			right;
    		left:				10px;
    		z-index:			2;
     
    }
    si j'ai bien compris, mes deux éléments doivent s'aligner sur leur parent. donc si je mets : top :25px à mon bouton, je devrais mettre top 20px à mon texte ? et si je mets 20 çà arrive sur mon bouton ?

    je voulais savoir si mon code était correct et le z-index utile (car je ne vois pas la différence avec ou sans)..

    merci

  2. #2
    Membre éprouvé Avatar de laurentibus
    Inscrit en
    Mars 2008
    Messages
    875
    Détails du profil
    Informations personnelles :
    Âge : 39

    Informations forums :
    Inscription : Mars 2008
    Messages : 875
    Points : 908
    Points
    908
    Par défaut
    position absolut n ai pas trop conseillé

    tu peux utiliser l' attributs margin-top qur tu mettra a ton élément du bas : l image
    margin-top défini la distance de ton élément par rapport a l'élément supérieur ici ton titre
    donc tu met margin-top:0px et je pense que ca devrait être good
    ... un flash ... et ça repart

    700R ... catch me if u can

    Best regards,
    .

  3. #3
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    Février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2008
    Messages : 2 177
    Points : 2 444
    Points
    2 444
    Par défaut
    En effet il faut privilégier les positionnement en flux normal.
    Quelques remarques:
    > pas besoin d'imbriquer ton image dans un span, la class peut très bien être appliquée directement sur l'image.
    > Les valeurs d'attribut doivent être comprises entre des guillements et non des simples quotes.
    > Toujours préciser les dimension de l'image pour accélérer la restitution du document et indiquer aux navigateurs d'appareils portatif s'il peuvent ou non afficher l'image.
    > Supprimer les attributs comme border qui font partie des attributs déconseillés et qui sont invalides si ton document est en DTD Strict.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <img  src="images/ajouter.gif" alt="" height="" width="" class="btnAjouter">

  4. #4
    Membre actif Avatar de tim974
    Profil pro
    Inscrit en
    Mai 2008
    Messages
    175
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2008
    Messages : 175
    Points : 222
    Points
    222
    Par défaut
    Pourquoi ne pas mettre les deux éléments dans un bloc div chacun, tout simplement, avec un text-align center et un padding,margin 0 ?
    hum
    C'est en forgeant que l'on devient forgeron et c'est en sciant que Leonard de Vinci ...

Discussions similaires

  1. position relative, position absolue.....?
    Par manutudescends dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 07/02/2006, 14h35
  2. [DIV] recuperer la position absolue d un div relatif
    Par zolive dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/09/2005, 11h28
  3. [Opera 7 & 8] Position absolue dans conteneur relatif
    Par Sub0 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 16
    Dernier message: 17/08/2005, 00h16
  4. position absolue d'un composant
    Par papy_tergnier dans le forum C++Builder
    Réponses: 2
    Dernier message: 06/07/2005, 11h46
  5. Un spacer pour une position absolue
    Par Notilius dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 22/04/2005, 21h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo