Bonjour à tous.
Voilà, j'ai débuté le fabuleux travail de codage il y a trois jours pour un travail à la fac. J'ai réalisé une page html (avec un style css qui va avec) qui est toute belle, tous les éléments sont bien calés, tout est parfait...jusqu'à ce que je zoome sur ma page Smiley bawling
Là, tous les éléments s'éloignent les uns des autres, tout se décale. Alors je voudrais savoir s'il y a une chose particulière à faire pour régler ce problème.
Merci à vous pour vos réponses.
Zaza92
Salut,

Il nous faudrait une version de ta page parce que en l'état plein de chose peut casser ton design (comme l'utilisation des pourcentages).

En sachant que nécessairement quand tu "zoomeras" sur un site celui ci verra apparaitre quelque soucis graphique.

Si tu prend l'exemple de notre bien aimé alsacréations, les images deviendront pixellisées, par contre grâce à l'application de médiaqueries, la page gardera une structure propre.
Bonsoir,
Merci de votre réponse.
En effet j'ai utilisé des pourcentages pour situer les éléments (j'y arrivais pas en pixels). Voici un extrait de mon code html:
<!DOCTYPE html>
<html lang="fr">
<head>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	 <meta charset="UTF-8">
	<title>Page accueil</title> 
</head>
<img src="frise.jpg" width="2110" height="320">

<body>
	<h1 class titre><center>Implantation des sites</center></h1>
	<span style="position: absolute; top: 45%; left: 36%;">
		<img src="carte.jpg">
	</span>
        <p class="legende1" span style="position: absolute; top: 46%; left: 74.5%;">Légende</p></span>
</body>
</html>


Qu'est-ce que c'est les médiaqueries? Vous pensez que ça peut résoudre mon problème ?
Modifié par 6l20 (05 Apr 2014 - 19:10)
Tu peux mettre une version en ligne ? Parce que la c'est difficilement utilisable (tu peux utiliser cssdeck, codepen etc)

Et pendant que tu y es Smiley lol mettre 2 screen celui normal et celui zoomé pour que je puisse comprendre ton soucis Smiley cligne .
Modifié par thej8 (05 Apr 2014 - 18:58)
Bonsoir,

Quelques erreurs dans ce code (l'image en dehors de la balise body, un span qui traine, balise "center" dépréciée,...)
Il faudrait très certainement faire un petit tour dans la section Apprendre, il y a beaucoup à lire pour débuter correctement Smiley cligne
Le guide de survie du positionnement CSS notamment, mais aussi de nombreux autres tutoriels (tout ne s'invente pas), des astuces, des outils, des méthodes de travail, etc.

Bienvenue, et bon courage Smiley smile
Modifié par 6l20 (05 Apr 2014 - 19:27)
@6l20
On ne peut pas mettre d'image dans le head? Je pense que je vais aller faire un tour dans la rubrique dont vous parlez, ça ne devrait pas me faire de mal^^
Merci pour votre aide.
Zaza92
Non, on ne peut pas Smiley cligne
Oui, faite un large tour de cette partie du site, notamment le lien sur le positionnement Smiley cligne
Vous trouverez également moultes informations sur les medias queries, le Responsive Web Design.

Courage Smiley smile