Sujet Précédent Sujet Suivant

[CSS] Problème de positionnement

Fermé
Gregg - 26 mai 2006 à 17:38
antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 - 29 mai 2006 à 16:02
Bonjour à tous,

voilà je ne comprends pas trop j'ai un problème de positionnement et ça faisait longtemps que je n'avais pas buté sur ce genre de cas.

en fait la page d'accueil est nickel, mais pour les autres pages quand je met du texte plus long dans la page ou dans ma colonne avec scroll, le bas de page ne suit pas...

voilà 2 impressions d'écrans pour vous faire une idée :

La page OK :
https://imageshack.com/

La page explosée :
https://imageshack.com/

Et voilà mon code :
HTML : 
<body>
<div id="conteneur">    
        <div id="header">
                <div id="menu">
                <ul>
                        <li class="lien1"><a id="item1" href="#"></a></li>
                        <li class="lien2"><a id="item2" href="#"></a></li>
                        <li class="lien3"><a id="item3" href="#"></a></li>
                        <li class="lien4"><a id="item4" href="#"></a></li>
                        <li class="lien5"><a id="item5" href="#"></a></li>
                        <li class="lien6"><a id="item6" href="#"></a></li>
                </ul>
                </div>
        </div>
        <div id="col_gauche"><?php include("inc/pub.inc"); ?></div>
        <div id="col_milieu">
                <div id="content">
                        <div id="contenu">
                        <?php include("inc/contenu_accueil.inc"); ?>
                        </div>
                        <div id="colonne">
                        <?php include("inc/colonne.inc"); ?>
                        </div>
                </div>
                <div id="baseline"></div>
        </div>
        <div id="col_droite"></div>
        <div id="legende"><img src="images/fleche.gif"> Cliquez sur les photos pour un affichage en grande taille</div>
        <div id="pied"><?php include("inc/pied.inc"); ?></div>
</div>
</body>


Et la partie importante du CSS : 
/* __________ BODY __________ */
body {
        margin: 0;
        padding: 0;
        background: #105C5C;
        line-height: 16px;
}

/* __________ CONTAINER __________ */
#conteneur
{
        width: 800px;
        height: 620px;
        margin: 0px;
        text-align: left;
        background-color: #88AFB4;
        border: 1px solid white;
        position:relative;
}

/* __________ HEADER __________ */
#header
{
        width: 800px;
        height: 92px;
        left: 0px;
        background: transparent url(../images/logo.gif) top left no-repeat;
}

/* __________ LOGO __________ */
#logo
{
        width: 210px;
        height: 92px;
        left: 0px;
        background: transparent url(../images/logo.gif) top left no-repeat;
}
#col_gauche
{       
        position:absolute;
        top:92px;
        margin-left:4px;
        margin-top:20px;
        width:209px;
        height: 460px;
/*      border: 1px solid red; */
        background-color: #88AFB4;
        }
#col_milieu
{       
        position:absolute;
        top:92px;
        margin-left:209px;
        width:566px;
        height: 460px;
        background-image: url(../images/fond.gif);
        }

#col_droite
{       
        position:absolute;
        padding-top:40px;
        top:92px;
        margin-left:775px;
        width:25px;
        height: 460px;
        background-color: #88AFB4;
        background: transparent url(../images/colonne_droite.gif) no-repeat;
        }

/* __________ CONTENT __________ */
#content {
        text-align: justify;
        line-height: 15px;
        margin-bottom: -30px;
} 

/* __________ CONTENU __________ */
#contenu 
{       
        top:100px;
        float:left;
        margin-left:0px;
        width:372px;
        color: #105C5C;
        font-size: 12px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        padding: 20px 5px 0px 10px;
        }
/* __________ COLONNE __________ */
#colonne {
        margin-left:400px;
        width: 150px;
        height: 415px;
        background-color: #EBF6F2;
        border: 1px solid #B6E0D0;
        scrollbar-face-color: #258989;
    scrollbar-shadow-color: #3F9797;
    scrollbar-highlight-color: #A5CECE;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
        overflow: auto;
        color: #105C5C;
        font-size: 11px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        padding: 10px 5px 10px 0px;
        }
/* __________ BASELINE __________ */
#baseline
{
        width:591px;
        height:22px;
        position:absolute;
        bottom: 0;
        left : 0px;
        background: transparent url(../images/bas_cadre.gif) no-repeat;
        background-color:#88AFB4;
}

#legende
{
        width:775px;
        height:20px;
        position:absolute;
        top: 550px;
        left : 0px;
        text-align:right;
        font-size: 12px;
        font-family: Arial, Tahoma, Verdana, sans-serif;
        color:#FFFFFF;
}

/* __________ PIED __________ */
#pied
{
        width:800px;
        height:30px;
        position: absolute;
        bottom: 0;
        margin:0;
        left: 0px;
        background: url(../images/pied.gif) no-repeat;
        background-color:#00879A;
        color:#FFFFFF;
        padding-top:5px;
}


J'n'aime pas envoyer de telles longueurs de code mais là je bloque !
Merci d'avance pour votre aide ;-)

Gregg

3 réponses

Réponse 1 / 3
antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 1 159
27 mai 2006 à 08:06
salut

je suis entrain de créer un site et j'avais aussi ce genre de problemes. j'ai trouver un truc qui a resolu tout ca mais je ne c'est pas si ca va allez dans ton cas.


Essaie de mettre ton pied de page dans un tableau.

comme ca :


<table>
<tr>
<td>
<div id="pied"><?php include("inc/pied.inc"); ?></div>
</td>
</tr>
</table>

voila je me doute que tu ne souhaite pas passer par les tableaux mais je n'est que ca a te proposer
0
Réponse 2 / 3
Gregg
29 mai 2006 à 13:55
Bein en fait ça marche pas trop mais merci pour ton aide.

Voilà mon problème en plus simple :
j'ai tout simplement 3 DIVs alignés et lorsque le contenu du 2ème est trop long, le DIV n°2 passe sous le 3ème alors que je préfèrerai que le 3ème se décale vers le bas...

En image ça donne ceci :
http://www.creation-website.net/test/test.htm
http://www.creation-website.net/test/test.css

Je voudrais que mon DIV vert se déclae vers le bas et reste sous le rouge !

Merci d'avance pour votre aide

@++
0
Réponse 3 / 3
antic80 Messages postés 4785 Date d'inscription lundi 30 mai 2005 Statut Contributeur Dernière intervention 9 septembre 2009 1 159
29 mai 2006 à 16:02
oui j'avais bien compris et comme je te l'ai dis moi ca fesais pareil sur mon site

en fait j'avais ca moi 

<div id ="cadre">
  <div id="banniere>
  </div>

  <div id ="menu">
  </div>

   <div id ="corps">
   </div>

   <table>
     <tr>
       <td>
          < div id="pied_de_page">
           </div>
        </td>
       </tr>
   </table>

</div>



voila comment est constitué ma page

mon pied de page reste tjs en bas meme quand le corps est trop long
0

Discussions similaires

tests du greta
yass -
yassir -

9 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
le test d'entrée pour le cesi en alternance
sab08600 -
sab08600 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
test greta
nyla123 -
nyla123 -

2 réponses