28172 sujets

CSS et mise en forme, CSS3

Un soucis que personne ne trouve :/

Bonjour a tous je suis actuellement en cours de correction de mon site web qui a un soucis de redimensionnement avec les médias queries .

Voici un lien ou j'ai détaillé mon soucis :
http://fr.openclassrooms.com/forum/sujet/besoin-d-aide-pour-comprendre-les-medias-queries?page=1#message-84946534

Je vous transmet la page ou je réalise ce dernier : http://egamestudio.fr/Builds/END/
Et voici les différents écran ou je rencontre ce soucis Smiley ohwell

PB = Soucis de redimensionnement
OK = Correct Smiley langue

1024/600>OK
1024/768>OK
1280/800>OK
1366/768>PB
1440/900>PB
1600/900>PB
1680/1050>OK
1920/1080>PB
1920/1200>PB


TEL/TABLETTE > OK
TV > OK


Merci de votre aide car je bloque sa me gaveee Smiley ohwell
Bonjour,

Il faut que tu revois la manière de gérer la mise en page.
Ta div #page fait 1000px de large, alors que ta div #content (qui est à l'intérieur) possède un margin-left de 60px... pourquoi faire ?
Je te conseille de :
- redéfinir correctement la largeur de ton conteneur.
- supprimer tout tes margin-left et left qui ne servent à rien.

Déjà ça sera un bon début. Smiley cligne
Administrateur
Bonjour,

Selon moi, et en toute franchise, ton problème ne vient pas des Media Queries (bien trop nombreux d'ailleurs au passage), mais de tes divers positionnements de boîtes qui me semblent bien mal gérées, voire mal comprises.

Par exemple ton image de bandeau (#slide-runner) est positionnée en absolute sans lui avoir donné de Référent, elle ne s'affiche donc pas par rapport à son parent #slide-holder et donc - forcément - tout est décalé.

Tu devrais plutôt revoir en détail les différents modes de positionnement que tu emploies.

Bonne chance ! Smiley smile

EDIT : ah ben j'ai été devancé dans mes conseils Smiley cligne
Modifié par Raphael (12 Dec 2013 - 10:07)
J'ajouterai aussi que sans définir un doctype dans ta page, l'affichage risque effectivement de partir un peu en vrille...

http://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html

Sans parler qu'il y a aussi des soucis dans les déclarations de tes Media Queries, si je lis au hasard un exemple repris dans ton code, tu cherches à cibler les écrans dont la largeur est comprise entre minimum 1365 et maximum 767 pixels ? Smiley biggol 
@media screen and (min-width: 1365px) and (max-width: 767px) { }
Bref, ca semble un peu impossible, ca devrait plutôt être l'inverse, d'autant plus que Raphael a raison, il y en a trop !

Sinon, quand je vois la liste que tu mentionnes:

egamestudio a écrit :

1024/600>OK
1024/768>OK
1280/800>OK
1366/768>PB
1440/900>PB
1600/900>PB
1680/1050>OK
1920/1080>PB
1920/1200>PB


je pense que que tu n'as pas bien saisi comment les Media Queries fonctionnaient, ici on ne parle que de largeur d'écran (jamais de hauteur) or, je crois que tu confonds ca avec la "définition d’écran", ce qui n'est pas la même chose.

Encore un peu de lecture Smiley cligne

http://www.alsacreations.com/article/lire/930-css3-media-queries.html
Modifié par LuciferX (12 Dec 2013 - 11:05)
Modérateur
bonjour
egamestudio a écrit :

Je vous transmet la page ou je réalise ce dernier : http://egamestudio.fr/Builds/END/

1024/600>OK
1024/768>OK
1280/800>OK
1366/768>PB
1440/900>PB
1600/900>PB
1680/1050>OK
1920/1080>PB
1920/1200>PB

La feuille de style dans laquelle sont définis ces medias-query est elle-même limitée globalement:

<link rel="stylesheet" media="screen and (max-width: 1280px)" href="http://egamestudio.fr/Builds/END/css/smallreso.css" />

Et donc aucune de ces media-queries ne sont appliqués pour des largeurs au-dessus de 1280px
Bonjour,

attention également à l'utilisation du 
width: 100%;
. C'est, souvent, une mauvaise pratique. Celui que tu as mi sur 
#wrapper
ne sert à rien.
Modifié par jQzz (12 Dec 2013 - 16:40)
Sujet clos
Aller à