28172 sujets

CSS et mise en forme, CSS3

[Résolu] J'ai un problème avec mes div.

J'ai un problème avec mes div.

L'idée :
Avoir une page d'accueil qui fait quatre fois la taille écran, pour afficher mes div sur un scroll horizontal. Mais je veux que le contenu se place au centre de ma div( donc de l'écran).

Le problème :
C'est que ma démarche ne permet pas d'avoir suffisamment de place pour placer mes quatre div (enfin je crois) et donc ma dernière div passe sous les autres.

Ma démarche :
1) je récupère la taille de ma fenêtre pour l'affecter à ma div global .wrapper et je la multiplie par 4
$(".wrapper").width($(window).width()*4);


2) je renouvelle l'opération pour mon autre div .section elle joue le rôle de conteneur à la taille de l'écran.
$(".section").width($(window).width());


Mais là je ne la multiplie pas.

3) je place une nouvelle div .center-box pour la centrer dans mon conteneur .section.
.center-box
{background-color:#FFFFFF; width:80%; margin:0 auto;}

J'usqu'ici pas trop de problèmes le comportement de mes div semble donner satisfaction sur ie et ff

Le problème arrive lorsque je place mon contenu, là, la dernière div passe sous les autres.

pour voir le problème c'est ici http://www.alidufresne.fr/
Modifié par ali13 (06 Feb 2013 - 20:08)
Administrateur
Hello,

Tu n'as pas par hasard des padding et des border sur tes div ?
La largeur d'un élément est width + padding + border
Non pas sur les div.

juste sur les h2, p, et ul

Pour les marge j'utilise sa 
*{
    margin:0;
    padding:0;
}


Puis après j'ai essayer avec un reset externe.

Pour indication sa à l'aire de marcher sur mon smartphone.

merci a+
Non sa ne marche toujours pas.
La dernière div passe en dessous. Sauf sur mon Smartphone, là sa l'aire de fonctionner.

Sa marche chez vous ?
Aucune idée d'où peut provenir ton soucis, mais après vérification, IE9, Chrome, et Firefox la place à la ligne, visiblement seul Opera semble afficher la dernière div correctement Smiley sweatdrop
Modifié par LuciferX (07 Feb 2013 - 12:28)
Bonjour ali13,

Ton problème me parait pourtant assez simple:
Selon la loi sur la relativité absolue d'un rectangle parfait, bon bon ok....

Tu as un problème dans ton javascript:
Mon écran fait 1680px de largeur.
1680 * 4 = 6720px

or tu fixes la largeur de ton wrapper (élément parent) à 6652px.
L'addition de tes enfants est plus grande que ton parent, d'où ce retour à la ligne.

Pourtant ton script me parait bon: 
$(window).width()
renvoie bien la largeur de l'écran.

Pour faire simple ton problème vient de la scrollbar vertical... Et oui ta structure html crée une scrollbar vertical, du coup ton js te renvoie : "la largeur de l'ecran - la largeur de la scrollbar".

Voici ce que je peux te proposer pour corriger ton problème (je pense que tu peux faire plus propre mais j'ai rien qui me vient en tête comme ça):

Si tu définies tes sections à une largeur de 100px par exemple, tu ne crée pas de scrollbar vertical, et du coup ton js capte bien la vrai largeur de l'écran.

Je suis conscient que ce n'est qu'une bidouille et je ne te conseil pas de passer ce genre de chose en ligne mais ca peut te permettre de continuer tes dev et de revenir plus tard dessus.
Ok, test avec ça, ça devrait être bon Smiley cligne 

 $(function () {

    $(".wrapper").width(window.innerWidth*4);
    $(".section").width(window.innerWidth);


});



PS: à tester sur ie
Modifié par UltrAs001 (08 Feb 2013 - 11:58)
Merci beaucoup
cela à l'aire de fonctionner sauf sous ie10.

apparemment cela est normal car j'ai trouvé sa:

a écrit :
Ne fonctionne pas avec Internet Explorer (dans MSIE, vous pouvez déterminer approximativement la largeur intérieure de la fenêtre avec document.body.offsetWidth).
sur le site de developer.mozilla.org/fr/docs/ ...



Enfin juste après un test comme ça à la volée.

Merci A+
Sujet clos
Aller à