1476 sujets

Web Mobile et responsive web design

Bonjour,

Je viens de finir d’élaborer un site web pour un projet universitaire .
Je me suis aperçu en le visionnant sur mon ordinateur fixe que tous se décale car j'ai conçu mon site avec un écran de 14 pouces
C'est un petit site sans prétention et qui n'a pas vocation a être publiée.Je dois le rendre ce soir, et il fera l'objet d'une notation. Sur la forme il est finit mais j'aimerais bien qu'il s’adapte au mois aux ecrans entre 10 et 20 pouces.J'ai dans la mesure du possible rentrer toutes les dimensions en % mais ca ne marche pas
Smiley sweatdrop upload/61883-Screenshot.png

UN grand merci d'avance Smiley biggrin
Bonjour,

Bon je ne suis pas un expert, mais je vais essayer de répondre avec le peu d'éléments que tu donnes.
Effectivement les pourcentages ne permettent de résoudre tous les problèmes.
Je te donne un exemple tu fais une div carrée sur ton écran, en donnant un width et un height en pourcentage, et bien il y a de grandes chances qu'en passant sur un autre écran, tu n'es plus un carré parce que le format de l'écran est différent : sur un écran très large, la largeur de ta div sera, ainsi, trop importante, par rapport à sa hauteur.
Merci beaucoup je peux vous donner le code css et une page de mon site, c'est la première fois que je fais un site web



		<!DOCTYPE HTML>
		<html>

		<head>
			<title>Half Life 1</title>
			<meta charset="utf-8">
			<meta name="description" content="Site web sur Half Life ">
			<meta name="keywords" content="half life 1 ,action, jeux video, image, gameplay, pc, ordinateur,gordon freeman">
			<link  href="stylehl.css"  type="text/css"  rel="stylesheet" media="screen" />
			<meta name="author" content="Fabien GENTY">
			<script src="jquery.js"> </script>
			<script src="responsive.js"></script>
			
		</head>
		<header>
			<body id="hdpage">

				<nav role="navigat" id="menu">
					<ul id="menu-horizontal">
						<li><a href="index.html" title="Accueil">Accueil</a></li>
						<li><a href="hl.html"  title="L'univers de Half Life">L'univers de Half Life</a></li>
						<li><a href="hl1.html" title="Half life 1">Half Life 1</a></li>
						<li><a href="hl2.html" title="Half life 2">Half Life 2</a></li>
					</ul>
				</nav>
				<div id=baniere_test>
					<p>H&lambda;LF - LIFE </p>
				</div>  
				
			</header>
			<content>
				<h1> Half Life 1 :Le début du mythe</h1> 

				<h2>Résume </h2>
				<p>L'action se situe essentiellement dans une zone désertique reculée du Nouveau-Mexique dans une installation connue sous le nom de Black Mesa Research Facility (Centre de recherche de Black Mesa), un lieu fictif complexe ayant de nombreuses similitudes à la fois avec le Laboratoire national de Los Alamos et la Zone 51. Elle se déroule le 16 mai 2000</p>

				<h2>Début du jeux</h2>
				<p>Half-Life relate les aventures de Gordon Freeman, chercheur au Laboratoire des matériaux anormaux du centre de recherche de Black Mesa, un gigantesque complexe scientifique top secret installé dans une base militaire désaffectée totalement enterrée sous la surface. Alors qu'il participait à une expérience sur un mystérieux échantillon de cristal, Freeman ouvre involontairement une brèche interdimensionnelle vers un monde parallèle, Xen, peuplé de créatures extraterrestres. Des aliens d'espèces et de races diverses font irruption un peu partout dans le centre et attaquent sauvagement son personnel. La salle de test est partiellement détruite par la résonance en chaîne, mais Freeman, équipé d'une combinaison de protection en milieu hostile (HEV), parvient à en sortir indemne après avoir été pris dans une tempête de portails. Après s'être remis d'un court évanouissement, il prend conscience de la catastrophe…</p>
				<p>Une petite video du début </p>

				
				<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/ODjmzgq4_Co" frameborder="10" allowfullscreen></iframe>
				

				<p>Voici une petite video des graphismes , il faut se rappler que le jeu date de 1998</p>

				<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/tWVTYPtZYmA?rel=0" frameborder="10" allowfullscreen></iframe>
				 
				<h2>Gallerie d'images</h2>
				<p>La gallerie d'image c'est par ici appuyer sur le lambda</p>
				<a href="gallerie/galleriehl1.html"><img id="logo_lambda" src="img/hllogo.png" alt="logo lambda"/></a>


			</content>
			<footer>
				<ul>
					<li>Si vous voulez me <a href="mailto:maxime.renard01@etu.univ-paris-diderot.fr?subject=Probleme-de-connection" title="contact"target="_blank"> contacter </a></li>
					<li><a href="http://store.steampowered.com/search/?snr=1_5_9__12&term=half+life" target="blank">Liens vers le store Steam</a></li>
				</ul>
				
				<a href="#hdpage" alt= "haut de page" title="haut de page">
					<img id="hdp" src="img/ap.png" width="100" height="100"  alt="haut de page" title "haut de page"/></a>
				</footer>
			</body>
			</html>


/* remise des parametres a zero*/
*
{
	margin:0px;
	padding:0px;
	color:black;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

em
{
	font-style:normal;
}

strong
{
	font-style:normal;
}

/*Mise en page des contenus */
body
{
	color:#d9d9d9;
	width:60%;
	height:80%;
	margin right:5%;
	margin left:10%;
	padding:5% auto;
	font-family:"Comic Sans MS",Arial,sans-serif;
	font-size:1em;
	background:url("img/background.jpeg") no-repeat center fixed;
	background-size:cover;
	-moz-background-size:cover;
}

h1
{
	text-align:center;
	margin: 10% 4%;
	padding: 2% 2%;
	border: solid 5px;
	-moz-box-shadow: 13px 2px 130px 10px #fcff2f;
	-webkit-box-shadow: 13px 2px 130px 10px #fcff2f;
	-o-box-shadow: 13px 2px 130px 10px #fcff2f;
	box-shadow: 13px 2px 130px 10px #fcff2f;
	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
}

h2
{
	font-size: 30px;
	text-align: center;
	padding: :1% auto;
	margin:2%;
	color:#C0C0C0;
	text-decoration : underline;
	text-shadow: 2px 2px black;
	margin-top: 5%;
}

li.sous_titre
{
	margin-left:20%;
}

li.sans_puce
{
	slist-style-type: none;
	color: grey;
text-shadow: green 0.1em 0.1em 0.2em}

content ul div#menu_episode
{
	color:#b3b3b3;
	font-size: 20px;
	color: white;
	text-shadow: black 0.1em 0.1em 0.2em;
	list-style-type: none;
	text-align: left;
}

content ul li,p
{
	margin:3.5%;
	padding: 1%;
	text-align: justify;
	color:#b3b3b3;
	font-size: 20px;
	color: white;
	text-shadow: black 0.1em 0.1em 0.2em;
}

li.menu
{
	list-style-type: none;
}

/* mise en page des video et images*/
div img
{
	border: white 50px;
	border-radius: 10px;
	margin :auto;
}

.video
{
	margin-left: 100px;
}

/*Menu simple avec ul*/
nav#menu
{
	font-size: 25px;
	margin:auto;
	width:70%;
	height:auto;
	border-radius: 15px;
	background-color:#ffff33;
	background: -moz-linear-gradient(top , #b30000, #4d4d4d);
	box-shadow: 0px 0px 0px 1px #000;
	margin-top: 10px;
}

ul#menu-horizontal li
{
	display:inline;
	padding: 0.5em;
}

ul#menu-horizontal
{
	list-style-type:none;
	text-align:center;
}

ul#menu-horizontal a
{
	text-decoration:none;
	width:30px;
	height:50px;
	color:black;
	line-height:60px;
	text-align:center;
}

ul#menu-horizontal a:hover
{
	color:#333333;
	text-shadow: 5px 5px 10px #ff6600;
	padding:6px 1px;
	background:url("img/fleche.gif") top center no-repeat;
}

nav
{
	margin:auto;
	width:400px;
}

div#liste
{
	margin-left: 5%;
	margin-right: 1px;
	list-style-type: none;
	column-count:2;
	-moz-column-count:2;
	column-width:10px;
	-moz-column-width:10px;
	column-gap:10px;
	-moz-column-gap:10px;
	column-rule:2px solid black;
	-moz-column-rule:2px solid black;
}

/* parametres pour la baniere*/
div#baniere_test p
{
	color:rgb(104,104,104) ;
	text-shadow: 6px 4px 4px black;
	font-size: 50px;
	text-align: center;
	line-height: 100px;
	letter-spacing: 22px;
}

div#baniere_test
{
	background-color:#000000;
	width:70%;
	height: 60%;
	margin: 0 auto;
	font-size:1.5em;
	border-radius:5px;
	box-shadow:0px 0px 65px #404040 inset,0px 0px 20px black inset;
}

img#logo_lambda
{
	height:80px;
	width:140px;
	position: relative;
	left: 70%;
	bottom: 100px;
}

img#hdp
{
	position: fixed;
	right: 1%;
	bottom: 50px;
}

footer
{
	border: solid 4px grey;
	border-radius: 4px;
	width:auto;
	height: 70px;
	position: relative;
}

footer ul li
{
	display: inline-block;
	margin: 10px;
	padding: 10px;
	font-style : italic;
	font-size: 30px;
	overflow: 
}
Je ne vois pas ce que tu veux dire par "tout se décale" : en redimensionnant la fenêtre du navigateur, je ne vois pas trop.
Sinon tu as un problème avec les caractères accentués ...
Si tu trouves que les vidéos se décalent vers la droite, lorsque l'écran est de moins en moins large, c'est normal car ton css :

.video
{
	margin-left: 100px;
}

donne une marge fixe, donc plus l'écran est petit en largeur, plus le décalage vers la droite est
important puisque la marge, elle ne change pas. Tu peux donner une marge en pourcentage.
Thomas237 a écrit :
Tu peux donner une marge en pourcentage.

Mieux, tous les éléments de type block peuvent être centrés avec cette méthode :
.element {
    margin: 0 auto;
}
Je viens de voir vos messages ,merci beaucoup pour vos réponses .
Je vais tenter vos solutions .Mon petit problème c'est avec le logo lambda qui va sur le texte quand je diminue la taille de la fenêtre et ma bananière du haut ou j'ai marque half life qui se met sur deux lignes au lieu d'une
Olivier C a écrit :

Mieux, tous les éléments de type block peuvent être centrés avec cette méthode :
.element {
    margin: 0 auto;
}

Oui, mais je pensais qu'il voulait laisser à gauche avec une marge Smiley cligne