Forum : problème avec le CSS

bonjours ;

je suis entrain d’intégré une maquette avec bootstrap et less et j'ai rencontré un problème lors de l'ajout d'une icone ( la loop ) qui a chaque fois que je minimise la page elle se déplace et du coup je trouve un marge a droite en blanc qui c'est ajouté tout seul ,

j'ai mis la page en ligne pour que vous pouvais tester le résultat lien de la page

page html

<body>
        <header class="top-header">
            <div class="container">
                <div class="row">
                    <div class="span6">
                        <h1 class="logo">
                            <a href="#" class="hide-text">Caspevi</a>
                        </h1>
                        <h2>Le Moteur de recherche</h2>
                    </div>
                    <div class="span6"></div>
                </div>
            </div>  
            <!-- end container -->
        </header> 

        <!-- Recherche générale -->
        <section>
            <div class="section-form1">
                <div class="container">

                    <form action"/" method="post" class="genaral-form">
                        <p class="contour">
                            <a href="#"></a> 

                        </p>

                    </form>

                </div>
            </div>

        </section>
        <!-- recherche personaliser -->

    </body>

le CSS

.section-form1 {
    background: url('../image/background_top.png') no-repeat center;
    background-color: #000;
    width: 100%;
    height: 694px;
    a {
        background: url('../image/forme_serche.png');
        width: 61px;
        height: 61px;
        position: absolute;
        top: -40px;
        left: 413px;
        &:hover {
        background: url('../image/forme_serche_hover.png');
        }
    }
}

.contour {
    position: relative;
    height: 239px;
    border: 1px solid white;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin-left: 120px;
    margin-right: 120px;
    margin-top: 80px;
}

Arrows78

Réponse acceptée

Ah oui je vois. Bah dans ma console web, je vois que tu as mis:

background-attachment : scroll;

Il faut mettre plutôt:

background-attachment : fixed;

De plus, essaye de mettre l'image "forme_serche" en no-repeat.

Tu as "scroll" ici:

.section-form1 a {
    background: url('../image/forme_serche.png') repeat scroll 0% 0% transparent;
}

Fais cette modification, et redis nous si ça fonctionne bien comme tu le souhaites.

zerubeus

Auteur

Réponse acceptée

merciiii .. j'ai trouver la solution il faut juste remplacer positon absolute par position relative et après en ajoute un float left et un margin left en pourcentage,

a {
        display: block;
        background: url('../image/forme_serche.png') repeat scroll 0% 0% transparent;
        width: 61px;
        height: 61px;
        position: relative;
        float: left;
        margin-left: 44%;
        top: -42px;
        &:hover {
        background: url('../image/forme_serche_hover.png');
        }
     }

Arrows78

Si tu parles de la marge blanche en rond autour de ton image 'forme_serche_hover.png', c'est tout simplement que ton image contient cette marge, donc enlève-là :)

zerubeus

Auteur

non c'est pas sa le problème essayez de faire un zoom dans la page ou bien minimiser le navigateur et vous aller voir que l'iconne va se déplacer a droite

Arrows78

La manière que tu as faite me semble pas terrible. Peut-être que cela marche, mais il faudrait plutôt garder le positionnement en absolu pour ton image, et l'élément parent de celui-ci en relatif. Après, je vois pas l'intérêt de mettre un float et une marge comme ça. Mais bon, si cela marche et te convient, pourquoi pas.

problème avec le CSS

5 réponses