28172 sujets

CSS et mise en forme, CSS3

Problème position absolute

Bonjour, je suis entrain d'intégrer un design, le fond est une image en plein écran mais pas fixée donc tous les éléments (content, menu, footer.....) utilise: position: absolute pour pouvoir les positionner sur l'image. C'était un peut facile jusque la... Smiley lol
Le problème c'est que le bloc content ne prend pas en compte les margin-bottom alors qu'il prend les margin-top... Smiley fache ce qui est gênant car je n'arrive pas à positionner mon footer..
Voici le code : 

<div id="content">
                <!-- Pictures galerie -->
                <div id="galerie-background">
                        <div class="diapo">
                            <ul class="diaporama1">
                                <li><img src="img-galerie/city-q-g-850-350-7.jpg" alt="........" title="......." /></li>
                                <li><img src="img-galerie/city-q-c-850-350-9.jpg" alt="......." title="........" /></li>
				<li><img src="img-galerie/city-q-g-850-350-3.jpg" alt="........" title="......." /></li>
                            </ul>
                        </div>
                </div>
                <div id="citation-block">
                    <cite>"tempor incididunt ut labore et dolore"</cite>
                    <p>Georges Washington</p>
                </div>
                <div id="text-home">
                    <ol>
                        <li><div id="what-we-do">
                        <h2 class="title-home">What We do </h2>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor
                            incididunt ut labore et dolore magna aliqua.<a href="">sunt in</a></p>
                        </div></li>
                        <li><div id="your-project">
                        <h2 class="title-home">Your project</h2>
                            <p>Ut enim ad minim veniam  quis nostrud nisi in 
                            ullamco laboris nisi sedo ut aliquip in dis ex ea commodo consecis. Duis sed aute.<a href="">sunt in</a> </p>
                        </div></li>
                        <li><div id="who-we-are">
                        <h2 class="title-home">Who we are </h2>
                            <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                            deserunt mollit anim id est laborum. <a href="">sunt in</a></p>
                        </div></li>
                    </ol>
                </div>
            </div>

le css: 

#content
{
    position: absolute;
    float: left;
    width: 900px;
    background-color: white;
    padding-top: 0px;
    margin-left: 55px;
    margin-top: 120px;
    overflow: hidden;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -border-radius: 10px;
    -o-border-radius: 10px;
    box-shadow: 2px 2px 5px black;
}

Merci de votre aide!! Smiley cligne
Bonjour,

deux questions :
1. quel est le positionnement du parent de ton #content ? Le position absolute se positionne par rapport au dernier parent qui a une position (fixed, relative, absolute), par défaut, c'est body.
2. à quoi sert le float: left; si tu positionnes en absolute ?

Avec le code en entier ou une page en ligne ça serait plus simple, surtout que tu parles de ton footer, mais il n’apparaît pas dans le code.
Eh une petite question : En fait je ne maitrise pas encore le javascript(jquery) qqn pourrait-il juste m'expliquer comment faire pour que lorsque l'on passe sur les irones des réseaux sociaux elles ce lèvent et leur opacité passe de 0,7 à 1 ? Merci d'avance
Ok je vois mieux ce que tu veux faire. Pour le moment tu passes tous les éléments en absolute pour les faire passer par dessus l'image, du coup c'est un peu la galère. Il vaudrait faire dans l'autre sens je pense.
Le plus simple, au lieu de mettre ton content (ton menu etc) en absolute et casser le flux, ça serait de passer ton image de background #background en absolute et lui donner un z-index de 1.
Ensuite, tu enlèves toutes les positions absolutes de tous les autres éléments (et les margins), pour garder le flux. Tu passes à ton #page un z-index de plus de 1 (100 pour être sûre) et une position:relative. Ceci aura pour effet de passer tout le contenu de #page par dessus ton image, sans pour autant avoir des problèmes de positionnement du reste dans le flux.
Sujet clos
Aller à