Problème de position

Ce sujet est résolu
1741
,

Bonsoir ,

J’intègre actuellement mon nouveau Blog en CSS et HTML, j'y suis bientôt parvenu, il me reste juste un soucis.

J'ai 3 arrières-plans qui me servirons à recevoir le contenu de mes widgets , je les ai découpé en temps qu'image et j'aimerais les positionner les 3 cotes à cotes pour pouvoir avoir mon résultat. ( voir cette image)

Je voudrais de même positionner les H3. Le fond est une seule image qui se répète sur l'axe X.

Je vais vous montrer mon HTML , mais j'ai pas de CSS concret car je ne sais pas comment le mettre (à par le background).

Mon HTML:

<div class="footer">
        <div class="bloc">
            <h3> Last Comments </h3>


         </div>
         <div class="bloc">
            <h3> Last Tutorials </h3>


         </div>
         <div class="bloc">
            <h3> Biographie </h3>


        </div>
</div>

Mon CSS :

.footer{background: url(images/bg-footer.png) repeat-x bottom; position: relative; margin-top: -150px; clear:both; height: 269px; }
.footer .bloc{ background: url(images/bg-footer-widget.png) no-repeat; width: 248px; height: 179px; margin-top: 80px; position: absolute; float: left; margin: 0 auto; }

Merci pour votre aide,

bonne soirée : ) .

5 Réponse

Default
,

bonjour ,

si j'ai comprids ton problem , essaies ce bout de code :

CSS

.comments{
    background: url(images/bg-footer.png) repeat-x bottom;
    padding:5px;
    position: relative; 
    float:left; 
    margin-top: ; 
    clear:both;  
    width: 248px; 
    height: 269px; 
border:1px solid black;
} 
.tutorials{ 
    background: url(images/bg-footer-widget.png) no-repeat; 
    padding:5px;
    width: 248px; 
    height: 179px; 
    margin-top: 80px; 
    position: absolute; 
    float: left; 
    margin: 0 auto; 
    margin-left:270px;
    border:1px solid black;
}    
.biographie{
    background: url(images/bg-footer.png) repeat-x bottom;
    padding:5px;
    float:right;
    margin-top:-281px ; 
    margin-right:205px ; 
    clear:both;  
    width: 248px; 
    height: 269px; 
border:1px solid black;
}

HTML

<div >   
        <div class="comments">   
            <h3> Last Comments </h3>   
              votre comments ici 
         </div>   
         <div class="tutorials">   
            <h3> Last Tutorials </h3>   
               last tutorials ici
         </div>   
         <div class="biographie">   
            <h3> Biographie </h3>   
               biodgraphy ici
        </div>   
</div>

NB: Vous pouvez maintenir le CSS selon vos besoin, j'ai y ajouté de bordure , enleves la si tu veux !

1741
,

Bonjour, j'ai vraiment besoin d'aide s'il vous plait c'est urgent ! :S

1741
,

Salut vous deux !

j'ai essayé float left puis clear both, mais ça m'a rien donné de convainquant . Et en effet je vais revoir le tutoriel sur les position, car c'est des choses qu'on oublie facilement si on l'utilise pas .

@ Sakhr: Je vais essayer ton bout de code, je fini mon Portfolio, puis je vois :).

@Mathias: Merci quand même pour l'idée, je vais réessayé, j'ai peut-être fait un truc qui fallait pas (sans doute car moi aussije pensrais que sa marcherais)

Default
,

d'accord !

en ce qui concerne le (clear:both) , j'en jamais utlisé !

bon courage.

1741
,

Merci, je règle ce sujet, si ça fonctionne pas je referais un ;).