28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Placement div

Bonsoir, je suis bloque depuis plusieurs heures sur le probleme suivant, j'ai une div conteneur qui contient toute la page, j'ai decalle celle-ci de 3 % depuis le haut de la page pour un effet de style seulement quelque soit sa taille le decalage provoque laparition dune barre deroulante qui nous fait descendre 3 % en dessou de la div.

voici le code
#conteneur
{
background: #252625 ;
position:relative;
margin:3% auto;
width:90%;
min-height:90%;
}

Modifié par devyl (29 May 2011 - 17:42)
Bonjour,

Que veux-tu dire par "barre déroulante"? S'agit-il de la "barre de défilement verticale"?
Personnellement, je ne constate pas ce phénomène ni sur IE8, ni sur FF 3.6.17

Aurais-tu quelques précisions?
Place un "overflow:hidden;" dans le style pour "body" dans le fichier "style.css", mais je ne suis pas certain que ce soit ce que tu souhaites, car cela risque de bloquer l'accès au bas de la page sous certaines résolutions ou certaines dimensions d'écran.

J'ai relevé (grâce à Web Developer) quelques erreurs dans tes fichiers:
- dans index.html : il faut supprimer "px" dans l'attribut width pour les img "titre.png" et "logo.png",

- dans style.css : pour #menu-centre, "float:center;" n'existe pas,

- dans style.js : "bouton3" est null, car il n'y a pas de " < span id="bout-act3">< /span> " dans la page "index.html"
- dans style.js : "bouton3" est null, car il n'y a pas de " < span id="bout-act3">< /span> " dans la page "index.html" ----> il existe dans la version hors ligne
- dans style.css : pour #menu-centre, "float:center;" n'existe pas, ---> je corrige (hors ligne)
- dans index.html : il faut supprimer "px" dans l'attribut width pour les img "titre.png" et "logo.png" ----> la definition de leur taille me permet de les centrer

Et pour finir le overflow:hidden n'est en effet pas la solution adapte
devyl a écrit :
la definition de leur taille me permet de les centrer

Il faut mettre width="313" et width="80" SANS les lettres "px" Smiley cligne

Pour la barre de défilement, il me semble que la taille de l'image de fond du body pourrait en être la cause. Elle fait 1024px de hauteur. Je crois qu'il n'est pas nécessaire qu'elle soit aussi haute étant donné ce qu'elle représente. On peut facilement supprimer la seconde moitié de sa hauteur et donner la couleur #000 comme background-color au body.
Modifié par lddsoft (29 May 2011 - 15:56)
Bonjour tu essaies ça (si j'ai bien saisi ton problème):

#conteneur {
    background: none repeat scroll 0 0 #252625;
    border-radius: 15px 15px 15px 15px;
    margin: 0 auto 3%;
    min-height: 90%;
    opacity: 0.9;
    position: relative;
    width: 90%;
    padding-top:3%;
}


j'ai modifié ton margin et j'ai ajouter un padding-top !
Modifié par unami (29 May 2011 - 16:29)
iddsoft : Cela ne regle pas mon probleme la barre de defilement est toujours presente
unami : Ce serait inutile en effet mettre un padding va egalement toucher la couleur e fond du conteneur, cela aura donc pour unique effet d'abaisser ma baniere avec au dessus un morceau du conteneur, rend toi sur l'adresse que j'ai donne pour voir par toi meme.
Alors revoilà :

body {
    background-attachment: fixed;
    background-image: url("images/fond.png");
    color: white;
    min-height: 100%;
    padding-top: 3%;
}
#conteneur { 
    background: none repeat scroll 0 0 #252625; 
    border-radius: 15px 15px 15px 15px; 
    margin: 0 auto 3%; 
    min-height: 90%; 
    opacity: 0.9; 
    position: relative; 
    width: 90%; 
}


tu modifie ton margin au niveau de conteneur et tu mets le padding pour ton body.
C'est peut-être le script "style.js" qui est la cause du problème. Je ne sais plus trop.
Quoiqu'il en soit, je maintiens ce que je disais à propos de la dimension de l'image de fond du body. On peut avantageusement en réduire la hauteur pour diminuer sensiblement son poids.
cette image a etait reduite mais je ne l'ai pas mis en ligne, ce n'Es pas le sujet
j'ai teste en supprimant le style.js et les paragraphe qu'il cachait, le probleme persiste
Modifié par devyl (29 May 2011 - 17:21)
Excuse moi j'oublie trop ces jours là, j'ai ajouté padding-top au body et j'ai oublié de te demandé de le soustraire à ton body c'est pour cela que ton problème persiste; alors ce que je te propose est ainsi:


body, html {
    height: 97%;
    margin: 0;
    padding: 0;
}
body {
    background-attachment: fixed;
    background-image: url("images/fond.png");
    color: white;
    min-height: 97%;
    padding-top: 3%;
}
#conteneur {
    background: none repeat scroll 0 0 #252625;
    border-radius: 15px 15px 15px 15px;
    margin: 0 auto 3%;
    min-height: 90%;
    opacity: 0.9;
    position: relative;
    width: 90%;
}


J'ai soustrait le padding-top ajouté au height du body, je crois que ca marcherai cette fois là Smiley smile

N:Toute fois si tu travailles avec une résolution de 1024 768 tu dois enlever un peu de ton texte des paragraphes pour que tu puisses vérifier le résultat.
Modifié par unami (29 May 2011 - 17:24)
Unami Je t'aime Smiley biggol

Ca marche merci ! Depuis hier soir que je suis bloque sur lesiteduzero meme personne n'a reussi a m'aider !

Mille merci Smiley ravi
Sujet clos
Aller à