28172 sujets

CSS et mise en forme, CSS3

Div extensible

Bonsoir à tous,
Je travaille actuellement sur le design d'un site web personnel.

J'ai quelques petit soucis avec la position du pied de page.
En effet, quand le texte du corps est trop grand, celui-ci empiète sur le pied de page.
Comment adapter le design pour faire en sorte que ceci n'arrive pas ?
Bon, fini le blabla et voilà le code.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Administration</title>
        <link href="themes/default/theme.css" media="screen" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
        <div id="header">
         <div id="login_head">
               Welcome admin | <a href="#">Log out</a>
         </div>
        
         <div id="top-right-menu">
              <ul>
                 <li>
                        <a href="#">Feedback</a>
                 </li>
                   <li>
                        <a href="#">Help</a>
                   </li>
                  <li>
                        <a href="#">Settings</a>
                    </li>
               </ul>
           </div>
        </div>
        
        <div id="top-menu">
          <div id="top-menu-list">
             <ul>
                 <li><a href="#">Home</a></li>
                   <li><a href="?page=link1">Link 1</a></li>
                  <li><a href="?page=link2">Link 2</a></li>
           </ul>
            </div>
        </div>
        
        <div id="main">
            <div id="main_frame">
                Put a long text here.<br />
            </div>
        </div>
        
        <div id="footer">
           Copyright<br />
           Version 1.0
        </div>
    </body>
</html>


Remarque : je sais bien que le code HTML n'est pas pafait (il manque des paragraphes dans les div) mais là n'est pas la question.
Et le CSS...


/********************************************
* GENERAL
*********************************************/

html
{
    margin: 0;
}

body
{
    margin: 0;
}

/********************************************
* MAIN FRAME
*********************************************/

#main_frame
{
    left: 200px;
    width:80%;
}

#main
{
    position:relative;
    background-color: #f0eeee;
    height: 500px;
}

/********************************************
* TOP MENU
*********************************************/

#top-menu
{
    height:1.8em;
    font-size: 0.9em;
    padding: 2px 0px 0px 10px;
    border-bottom: 1px solid #276f9f;
    border-top: 1px solid #276f9f;
    background-color: #f0eeee;
    background-repeat:repeat-y;
}

#top-menu ul
{
    margin: 0; 
    padding: 0;
}
#top-menu li
{
    float:left;
    list-style-type:none;
    margin: 4px 0px 0px 0px;
    padding: 0px 8px 0px 0px;
}

#top-menu a
{
    margin-right: 8px;
    text-decoration:none;
    color: white;
    font-weight: bold;
}

#top-menu a:hover
{
    color:orange;
}

/********************************************
* TOP RIGHT MENU
*********************************************/

#top-right-menu
{
    font-size: 0.7em;
}

#top-right-menu ul
{
    margin: 0; 
    padding: 0;
}
#top-right-menu li
{
    float:right;
    list-style-type:none;
    margin: 4px 0px 0px 0px;
    padding: 0px 8px 0px 0px;
    text-align:center;
}

#top-right-menu a
{
    text-decoration:none;
    color: white;
}

/********************************************
* HEADER
*********************************************/

#header
{
    background-color:#0e5f95;
    height:105px;
}

/********************************************
* LOGIN_HEAD
*********************************************/

#login_head
{
    top: 75px;
    right:10px;
    font-size: 0.8em; 
    color: #ffffff; 
}

#login_head a
{
    color: #ffffff
}

/********************************************
* FOOTER
*********************************************/

#footer
{

    border-top: 1px solid #bbb; 
    font-size: 0.9em; 
    color: #7e7f80; 
    text-align:center; 
    width:100%;
    padding-top: 7px; 
}


Merci d'avance,
Frozensir.
Modifié par frozensir (01 Aug 2012 - 21:43)
Bonsoir,

Avec une hauteur fixée à 500px, ce comportement est tout à fait normal. Une solution extrêmement simple consiste à remplacer la propriété height de l'élément d'ID "main" par la propriété min-height :

#main {
	position: relative;
	[b]min-height: 500px;[/b]
	background-color: #f0eeee;
}


On obtient ainsi une hauteur minimale de 500px qui peut s'étirer librement si le contenu est trop important pour se contenter de cet espace restreint.
Sujet clos
Aller à