Pb affichage site

Signaler
Messages postés
115
Date d'inscription
mercredi 27 août 2003
Statut
Membre
Dernière intervention
7 mars 2008
-
Messages postés
115
Date d'inscription
mercredi 27 août 2003
Statut
Membre
Dernière intervention
7 mars 2008
-
Bonjour tout le monde, c'est la première fois que je vois ca:
Je travaille en 1200 * 1024 et lorsque je teste mon site dans une resolution inférieure, mon contenu dépasse vers le bas de l'écran.
Mon problème c'est qu'il n'y a pas la barre de défilement verticale.
J'utilise css, php & AJAX.
Voici mon CSS,
body {

 position:fixed !important;
position:absolute;

margin-top:-19px;
margin-left:0px;

    margin: -20;
    padding: 1;
    font-family: Verdana, Arial, sans-serif;
    font-size: 80%;
    color: #545454;
   
    text-align: center;
    background-image: url(fond.jpg);
   

}

p {
    margin: 0.1em 0 0.1em 0;
}

h1 {
    margin: ;
    padding: 0;
    font-size: 222%;
    font-weight: normal;
    color: #FF3399;
}

h2 {
    margin: 0.1em;
    padding: 0.1em;
    background-color: #A7BAEF;
    color: #333333;
    font-size: 100%;
    font-weight: normal;
}

div {
    margin: 0;
    padding: 0;
    display: block;
}

a:link {
    color: #4169E1;
    text-decoration: underline;
}

a:hover {
    color: #FF6699;
    text-decoration: none;
}

a:active {
    color: #4169E1;
    text-decoration: underline;
}

a:visited {
    color: #B840E1;
    text-decoration: underline;
}

.container {
        background-image: url(header2.jpg);
    margin: 0 auto 0 auto;
    padding:0;
   
    width: 90%;
    max-width: 1280px;
    min-width: 700px;
}

.header {
   
    background-image: url(header.jpg);
background-repeat: repeat-x;
}

.header p {
    text-indent: 8em;
    color: #CC0066;
}

ul.navigation {
    list-style-type: none;
    float: left;
    display: block;
    width: 740px;
    line-height: 0.1em;
    clear: both;
    margin: 0;
    padding: 0;
    background-color: White;
    border-bottom: 1px solid #C4C4C4;
}

.left {
    float: left;
    clear: both;
    width: 14em;
    margin: 0 0 0 0.1em;
    padding: 0;
}

.leftcontent {
    margin: 0.5em;
    padding: 0.3em;
    border: 1px solid #C4C4C4;
    text-align: left;
}

.leftcontent p {
    padding-left: 1em;
}

.leftcontent p a:link, a:visited{
    color: #545454;
    text-decoration: none
   
}

.leftcontent p a:hover{
    color: #72C32B;
}

.leftcontent p a:active {
    color: #545454;
    text-decoration: none
}

.left h2 {
    text-align: left;
    padding: 0 0 0 1em;
}

.leftlinks a {
    display: block;
}

.content {
    clear: right;
    text-align: left;
    margin: 0.5em 0.5em 0 14.2em;
    padding: 0.3em 1ex 0.3em 1ex;
    border: 1px solid #C4C4C4;
}

.content h2 {
    padding: 0 0 0 1em;
}

.footer {
    font-size: 75%;
    margin: 0.1em;
    padding: 0.3em;
    text-align: center;
    clear: both;
}

.footer p {
    border: 1px solid #C4C4C4;
    padding: 0.5em;
    margin: 0.3em;
}

J'ai lutté dans les tutos css mais j'ai pas trouvé grand chose;
Merci.

5 réponses

Messages postés
20
Date d'inscription
vendredi 9 juin 2006
Statut
Membre
Dernière intervention
22 février 2007

Bonjour, voilà peut etre de quoi te mettre sur la voix d'une solution

<script type="text/javascript">
document.write("Votre resolution et de : " + screen.width + " x " + screen.height);
</script>

ceci est le script qui donne la résolution de l'ecran avec l'affichage d'un message.

Cela ne t'aide peut pas, mais si tu effectué une detection de la résolution de l'ecran de l'internaute afin d'appeler une CSS en conséquence ?

Sa ne répond pas à ta question certe mais cela te donne une idée de solution.

Cordialement Alexandre.
Messages postés
20
Date d'inscription
vendredi 9 juin 2006
Statut
Membre
Dernière intervention
22 février 2007

Je viens de relire ta CSS, tu as un bloc au milieu ou tu affiches tes informations et tu veux pouvoir faire un scroll dessus ?

si oui ajoute

overflow: auto; /* cette propriété va permettre le scroll de ce bloc */

dans ta classe ou tu veux permettre le scroll.
Messages postés
403
Date d'inscription
mercredi 19 avril 2006
Statut
Membre
Dernière intervention
7 août 2020
1
Bonjour,

ton probleme vient peut-etre de la :

Préambule : Les marges négatives verticales en CSS posent des
problèmes sur Explorer Mac ainsi que divers problèmes lors du
redimensionnement de la page (bords mangés, pas de barre de défilement
horizontal quand on réduit la page, etc.). Il est donc fortement
conseillé d'éviter cette méthode sauf si vous en maîtrisez les
conséquences.

Source : alsacreations
Messages postés
115
Date d'inscription
mercredi 27 août 2003
Statut
Membre
Dernière intervention
7 mars 2008

Viens de tester sans les marges inférieures, puis avec overflow: auto; mais c'est toujours le meme problème;
J'aurais dû faire ce genre de test avant.
Pour le <script type="text/javascript">
document.write("Votre resolution et de : " + screen.width + " x " + screen.height);
</script> cela ne m'arange pas trop car il faudrais quand meme que je refonde une grande partie du code.
Je bidouille puis je vous tiens au courant au cas ou un jour, ca puisse servir pour quelqu'un d'autre.

Merci beaucoup quand meme.
@Bientôt.  <-SbooL->
Messages postés
115
Date d'inscription
mercredi 27 août 2003
Statut
Membre
Dernière intervention
7 mars 2008

Lol enfait le probleme venait tout simplement de

 position:fixed !important;
position:absolute;

ce que j'avais parfaitement appliqué selon un site (je sais plus lequel) afin d'étirrer la page en fonction de la résolution.

En tout cas ca marche mieux sans.
Aller; Tchao!