Forum : Problème de position

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 <u>découpé en temps qu'image</u> et j'aimerais les positionner <u>les 3 cotes à cotes</u> 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 : ) .

Sakhr

Réponse acceptée

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 !

agrafik

Auteur

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

agrafik

Auteur

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)

Sakhr

d'accord !
en ce qui concerne le (clear:both) , j'en jamais utlisé !
bon courage.

agrafik

Auteur

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

Problème de position

5 réponses