18041 sujets

Questions générales et questions de débutants

Petite question CSS

Bonjour à toutes et à tous,

Je n'ai généralement pas trop de problèmes avec le ccs, mais là... c'est la colle Smiley sweatdrop !

Je m'explique, j'ai un conteneur (div) destiné à accueillir ma bannière. Jusque là pas de soucis. Dans ce même conteneur, en plus de mettre une image de fond, j'aimerai positionner deux autres div. Une en haut à droite de la div principale, et l'autre en bas à droite. Mon problème est que la div située en bas est décalée sur la gauche de la largeur de la div du haut.

Pour résoudre le problème j'ai essayé de jouer avec les propriétés display et position, mais rien n'y fait!

Mon DOCTYPE est le suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ci dessous, mon code HTML:


<!--Conteneur de l'header-->
    <div class="layout_banner">
        <div class="container_lang">
            <a href="index.php?lang=fr">
                <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/fr.png"/>
            </a>
            <a href="index.php?lang=en">
                <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/en.png"/>
            </a>
        </div>
        <!--Conteneur du login-->
        <div class="container_login">
            <?php z_render("user", "login");?>
        </div>
    </div>


Et le code CSS:


    .layout_banner {
        width:1280px;
        height:200px;        
        background-image:url('<?php echo PATH_IMAGE;?>/other/banner.png');
    }

    .container_lang {
        display:block;
        position:relative;
        float:right;
        height:20px;
        top:0px;
    }    

    .container_login {        
        display:block;
        position:relative;
        float:right;
        height:20px;
        top:180px;        
    }


Petit aperçu de ce que ça donne:

upload/27614-zugdivPB.png

Voilà Smiley biggrin , si vous avez une solution à me proposer pour corriger ce problème (en espérant que ce soit possible...).

Merci!

ZuG'
Modifié par ZuG (05 Mar 2010 - 14:12)
Salut Mikachu,

Merci tout d'abord, je vais jeter un œil sur ce sujet. Je vous tient au courant de l'évolution de mon problème.

ZuG'
Salut Zug,

Ton problème est assez simple à résoudre.

Rajoute: position:relative; à ton premier DIV et transforme les deux autres DIV container en position:absolute;

Tu ne devrais plus avoir de problème.
Salut Zenka,

C'est exactement ce que j'étais en train d'essayer, et je dois avouer que cela fonctionne plutôt bien. Sauf que maintenant, les contenus de mes div container_lang et container_login ne s'alignent plus à droite. Alors j'ai essayé de forcer l'alignement par un text-align et avec float, mais rien à faire Smiley confus ...

Aurais tu une idée ?

Voici mon nouveau code css:


    .layout_banner_content {
        position:relative;
        border:1px solid #F00;
        float:right;
        margin:5px;
        height:188px;
        width:200px;
    }

    .container_lang {
        position:absolute;
        text-align:right;        
    }

    .container_login {
        position:absolute;
        text-align:right;
        top:170px;        
    }


Mon nouveau code HTML:


    <!--Conteneur de l'header-->
    <div class="layout_banner">
        <div class="layout_banner_content">
            <div class="container_lang">
                <a href="index.php?lang=fr">
                    <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/fr.png"/>
                </a>
                <a href="index.php?lang=en">
                    <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/en.png"/>
                </a>
            </div>
            <!--Conteneur du login-->
            <div class="container_login">
                <?php z_render("user", "login");?>
            </div>
        </div>
    </div>


Petit aperçu:

upload/27614-zugdivPB2.png

Merci !

ZuG'
Modifié par ZuG (05 Mar 2010 - 15:17)
Je viens de trouver une solution à mon problème.

Il suffisait d'ajouter un width a mes div secondaires!

Merci à vous tous pour vos réponses!

Voici mon code pour ceux que ça pourrait intéresser:


    <!--Conteneur de l'header-->
    <div class="layout_banner">  
        <!--Conteneur des langues-->
        <div class="container_lang">
            <a href="index.php?lang=fr">
                <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/fr.png"/>
            </a>
            <a href="index.php?lang=en">
                <img alt="" src="<?php echo PATH_IMAGE;?>/16x16/flag/en.png"/>
            </a>
        </div>
        <!--Conteneur du login-->
        <div class="container_login">
            <?php z_render("user", "login");?>
        </div>        
    </div>




    .layout_banner {
        position:relative;
        width:1280px;
        height:200px;
        background-image:url('<?php echo PATH_IMAGE;?>/other/banner.png');
        float:right;
        text-align:right;
    }

    .container_lang {
        position:absolute;        
        text-align:right;
        width:1280px;
        top:0px;
    }

    .container_login {
        position:absolute;       
        text-align:right;
        width:1280px;
        top:180px;
    }
Sujet clos
Aller à