Problème position avec CSS

Discussion dans 'Web, design' créé par KAMI, 3 Février 2010.

  1. Offline
    KAMI spim spam spoum
    Bonjour à tous,

    Alors j'ai un petit soucis avec une <div> en CSS. Comme une image vaut mieux qu'un long discours :-D

    [IMG]

    Comme vous le voyez sur l'image j'ai la <div> qui contient l'image info suivante qui part sucette :[]

    Je n'arrive pas à trouver pourquoi... Donc HHHHHEEEEEELPPP

    Mon CSS
    PHP:
    body{
        
    background-image:url(images/back2.png);
        
    background-repeat:repeat;
        
    font-family:"Franklin Gothic Heavy"Arial,serif;
        
    font-size12px;
    }
    titrenews{
        
    font-size:14px;
        
    colorred;
    }

    #hyperbloc{
        
    width1000px;
        
    height100%;
    }

    #header{
        
    background-image:url(images/header.png);
        
    background-repeatno-repeat;
        
    width1000px;
        
    height162px;
    }

    #fontnews{
        
    background-image:url(images/space_news.png);
        
    background-repeatrepeat-y;
    }

    #lienspre{
        
    background-image:url(images/footer_pre.png);
        
    background-repeatno-repeat;
        
    width420px;
        
    height39px;
        
    float:left;
    }

    #liensacc{
        
    background-image:url(images/footer_acc.png);
        
    background-repeatno-repeat;
        
    width160px;
        
    height39px;
        
    float:none;
    }

    #liensnex{
        
    background-image:url(images/footer_sui.png);
        
    background-repeatno-repeat;
        
    width420px;
        
    height39px;
        
    float:right;
    }

    #footer{
        
    background-image:url(images/footer.png);
        
    background-repeatno-repeat;
        
    width1000px;
        
    height159px;
    }
    Mon HTML

    PHP:
    <html xmlns="http://www.w3.org/1999/xhtml">
        <
    head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <
    title>Media Markt Braine-l'Alleud - Infos Flashs !</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>

        <body>
            <center>
                <div id="hyperbloc" align="center">
                    <div id="header"></div>
                    <div id="fontnews"></div>
                    <div id="lienspre"></div>
                    <div id="liensacc"></div>
                    <div id="liensnex"></div>
                    <div id="footer"></div>
                </div>    
            <center>    
        </body>
    </html>
    Voilà merci d'avance à tous :)
    KAMI, 3 Février 2010
    #1
  2. Offline
    KAMI spim spam spoum
    Problème résolu, il faut placer les flottants avant les non flottant même pour le right

    PHP:

    <div id="lienspre"></div
    <
    div id="liensnex"></div>
    <
    div id="liensacc"></div
    Voilà la bonne syntaxe au cas ou :)
    KAMI, 5 Février 2010
    #2
  3. Offline
    PiaFlalCoOl NiuAge
    C'est quand meme assez moche de tout mettre en image alors que c'est du simple texte !
    Tu pourrais aussi bcp factoriser ton code en général. Un exemple :

    #hyperbloc div {
    height:39px;
    float:left;
    }

    et tu redéfinis que quand ca change.

    Je pense que tu pouvais mettre lienacc en float:left, et mettre les div dans le html dans le bon ordre et ca fonctionnerait.
    Et pourquoi mettre des div si ce sont des liens ?

    <ul>
    <li:colere:a id="lienpre" href="#":colere:/a:colere:/li>
    <li:colere:a id="lienacc" href="#":colere:/a:colere:/li>
    <li:colere:a id="liennex" href="#":colere:/a:colere:/li>
    </ul>

    Et tu peux mettre les <a> en display:block et définir leur taille si tu veux que la zone clickable soit grande.

    Je te conseille d'utiliser la version raccourcie de "background". Utiliser background-image séparemment par exemple, c'est souvent juste utilisé pour des effets hover etc.
    Tu peux simpelement écrire :

    background:url("images/header.png") no-repeat;


    Sinon c'est assez bizarre tes "<center:colere:/center>". J'ai jamais utilisé ca. Pour centrer une div tu peux lui donner une largeur fixe et mettre ses margin-left et margin-right à auto :)
    PiaFlalCoOl, 7 Février 2010
    #3