18041 sujets

Questions générales et questions de débutants

Bloc qui descend lors du remplissage ?

Bonjour à tous !

J'ai toujours consulté alsa sans jamais franchir le pas de l'inscription, et en fin de compte, pourquoi pas ?

J'arrive donc en face d'un problème que je n'arrive vraiment pas a résoudre ...

Voici la template vide :
upload/33081-screen1.jpg

Et lorsque j'ajoute du contenu dans le menu horizontal :
upload/33081-screen2.jpg

J'ai tout essayé, margin, padding, line-height ... sans succès.
Ma question est donc : est-ce un problème connu et serai-je passé à côté pendant toutes ces années ?
Dans le cas contraire, je suppose que vous aurez besoin du code, je le posterai alors à ce moment là.

Merci par avance,
Flo
Bonsoir,

A vue de nez, ça semble être un problème de marge externe par défaut du navigateur sur un élément de type h1, h2, paragraphe, etc.

Sans avoir au moins un extrait de code html / css, c'est à peu près tout ce que je peux te proposer comme réponse Smiley cligne
Modifié par audrasjb (02 Oct 2010 - 20:43)
Administrateur
audrasjb a écrit :

A vue de nez, ça semble être un problème de marge externe par défaut du navigateur sur un élément de type h1, h2, paragraphe, etc.

Oui, ou un cas de fusion de marge... mais sans code... Smiley decu
Tout d'abord merci pour ces réponses très rapides !

Je ne pense pas que cela vienne des marges, mais dans le doute, voici le code tant attendu : 

<!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>
    
        <link rel="stylesheet" type="text/css" href="style.css"  />
    </head>
    
    <body>
        <div id="superglobal">
            <div id="global">
                <div id="header">
                </div>
                <div id="menu">
                    <div id="menuleft"></div><div id="menucenter">
                        <a href="">Accueil</a>
                        <a href="">Présentation</a>
                        <a href="">Sorties</a>
                        <a href="">Boite a idée</a>
                        <a href="">Roadbook</a>
                        <a href="">Galerie</a>
                        <a href="">Sponsors</a>
                        <a href="">Contact</a>
                    </div><div id="menuright"></div>
                </div>
                <div id="content">
                    <p>
                    
                    </p>
                </div>
                <div id="bottom">
                    <div id="bottomleft"></div><div id="bottomcenter"></div><div id="bottomright"></div>
                </div>
                <div id="spacer"></div>
            </div>
            <div id="footer"></div>
        </div>
    </body>

</html>



*{
    padding: 0px;
    margin: 0px;
}

html{  
    height: 100%;  
} 

body{
    background-color: #5787b8;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    height: 100%;  
}

img{
    border: 0px;
}

#superglobal{  
    position : relative;  
    min-height: 100%;  
}  

#global{  
    position: relative;  
    min-height: 100%;
    width: 100%;
}  

div#header{
    width: 1020px;
    height: 120px;
    margin: auto;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-position: top left;
}

div#menu{
    width: 1020px;
    height: 50px;
    margin: auto;
}

    div#menuleft{
        display: inline-block;
        width: 40px;
        height: 50px;
        background-image: url(images/menu/left.png);
    }
    div#menucenter{
        display: inline-block;
        width: 940px;
        height: 50px;
        background-image: url(images/menu/center.jpg);
        background-position: top left;
    }
        
        div#menucenter a{
            line-height: 40px;
            padding: 0px;
            margin: 0px;
        }
    
    div#menuright{
        display: inline-block;
        width: 40px;
        height: 50px;
        background-image: url(images/menu/right.png);
    }

div#content{
    width: 1020px;
    margin: auto;
    background-image: url(images/content_bg.jpg);
    background-repeat: repeat-y;
}

div#bottom{
    width: 1020px;
    height: 50px;
    margin: auto;
}

    div#bottomleft{
        display: inline-block;
        width: 40px;
        height: 50px;
        background-image: url(images/bottom/left.png);
    }
    div#bottomcenter{
        display: inline-block;
        width: 940px;
        height: 50px;
        background-image: url(images/bottom/center.jpg);
    }
    
    div#bottomright{
        display: inline-block;
        width: 40px;
        height: 50px;
        background-image: url(images/bottom/right.png);
    }
    
div#spacer{
    width: 100%;
    height: 160px;
    margin: auto;
}

div#footer{
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 148px;
    background-color: #5787b8;
    background-image: url(images/bgdown.jpg);
    background-repeat: no-repeat;
}
Modérateur
Et l'eau,

En lisant ton code à la JFK, je dirai que ton soucis vient de :


*{ 
    padding: 0px; 
    margin: 0px; 
} 
        div#menucenter a{ 
            line-height: 40px; 
            padding: 0px; 
            margin: 0px; 
        }


Au passage, ta page comporte des petis soucis... title, meta.....

@ pluche
J'ai replacé les margin et padding à 0 sur le sélecteur de body plutôt que le sélecteur universel, c'est en effet plus propre, concernant le sélecteur des liens du menu, avec ou sans le style ça revient au même.

Le défaut d'affichage est présent même avec n'importe quelle balise, que ce soit un lien un paragraphe ou autre chose.

Pour les entêtes j'en suis conscient, la page est loin d'être terminée, merci cependant Smiley cligne
Modifié par floo51 (03 Oct 2010 - 16:52)
Je me suis débrouillé pour faire autrement avec des floats, mais j'aimerai tout de même savoir pourquoi l'affichage se comportait ainsi.

Mon code était sémantiquement correct non ?

J'ai encore du mal à comprendre certains "standard" w3c ...
Sujet clos
Aller à