Problème CSS (Adaptation taille de l'écran) par Thibault'D - page 1

Bonjour, Je suis actuellement entrain de travailler sur un site local pour un projet dans le cadre de mes études. Cela fait à peine 1 mois que je commence à coder du HTML CSS. J’aurais donc besoin de votre aide.. Ici, ( http://prntscr.com/gw56j5 ) mon site a la forme que je veux qu’il est, des que la résolution de l’écran change, toutes les divs bougent au lieu de rétrécir l’écran ( http://prntscr.com/gw57iy ).

Je vous partage mes docs.

<!DOCTYPE html>
<html>
    <head>
		<!-- Nom du site. -->
        <meta charset="utf-8" />
		<link rel="stylesheet" href="Index.css" />
        <title>Encyclo iPhone</title>
    </head>

    <body>
		<!-- Bande en haut -->
			<div id="header">
			<h1><a class="titre_header" href="Index.html">Encyclo iPhone</a></h1>
			</div>
			
		<!-- Acceuil -->
        <div id="corps">
			<h2> Accueil</h2>
			<p>Bienvenue sur ce site, développé par Thibault Dargent et Aurélien Crapart.
			<br/>
			<br/>
			Dans le cadre de nos études en BTS Services Informatiques aux Organisations nous vous proposons ici, de comparer les différents caractéristiques des iPhones que propose l'entreprise Apple.<br />
			Ainsi, vous pourrez en connaitre davantage.</p>

			<p> Tout d'abord, il est important de commencer par présenter l'entreprise Apple.<br/>
			Apple est une entreprise Américaine crée le 1er avril 1976 par Steve Wozniak, Steve Jobs et Ronald Wayne qui conçoit divers produits électroniques.<br/>
			Parmis ces produits nous pouvons en lister quelque-un:
			
			<br/><br/>
			iPhone<br/>
			iPod<br/>
			iPad<br/>
			Macintosh<br/>
			Apple Watch<br/>
			Divers logiciels<br/>
			<br/>
			
			<img src="Image/all.jpg" border="1"> 

			<br/>
			<br/>
			<u>Nous contacter:</u><br/>
			Mail: thibaultdargent99@gmail.com<br/>
			Youtube: <a class="YT" href="https://youtube.com">Ici</a><br/>
			Facebook: <a class="FB" href="https://facebook.com">Ici</a>

			</p>
		</div>

		<!-- Menu Iphone -->
		<div id="menu">
			<h2> Navigation </h2>
			<ul>
			<li><a class="element_menu" href="Iphone.html">iPhone</a></li>
			<li><a class="element_menu" href="Iphone_3G.html">iPhone 3G/3GS</a></li>
			<li><a class="element_menu" href="Iphone_4.html">iPhone 4/S</a></li>
			<li><a class="element_menu" href="Iphone_5.html">iPhone 5/S/C</a></li>
			<li><a class="element_menu" href="Iphone_SE.html">iPhone SE</a></li>
			<li><a class="element_menu" href="Iphone_6.html">iPhone 6/Plus/S/S Plus</a></li>
			<li><a class="element_menu" href="Iphone_7.html">iPhone 7/Plus</a></li>
			<li><a class="element_menu" href="Iphone_8.html">iPhone 8/Plus</a></li>
			<li><a class="element_menu" href="Iphone_X.html">iPhone X</a></li>
			</ul>
		</div>
		
    </body>
</html>

h1, h2, h3, h4
{
	text-align: center;
	font-family: Impact, Arial Black, Arial, Verdana, sans-serif;
	margin: 0;
	padding: 0;
}

body
{
    background-image: url("Image/FondDuSite.jpg");
	margin:0px; 
}

#header
{ 
	height:50px; 
	background-color: black;
	color: rgb(163,189,233);
	display: inline-block;
    float :top;
    width : 100%;
}

#menu
{
	float : left;
	width : 18%;
	margin-right: auto;
	margin-left: 50px;
	margin-top: 25px;
	background-color: rgb(209,222,243);
	border-style: solid;
    border-width: 5px;
	border-color: #808080;
	border-radius: 8px;
	box-shadow: 10px 10px 25px black;
	position: absolute;
	height: 525px;
}

#corps
{
	float : right;
	width : 70%;
	margin-left: auto;
	margin-right: 50px;
	margin-top: 25px;
	border-style: solid;
    border-width: 5px;
	border-color: #808080;
	border-radius: 8px;
	box-shadow: 10px 10px 25px black;
	position: static;
	display: block;
	overflow-y: scroll;
	height: 800px;
}

.element_menu
{
	background-color: rgb(163,189,233);
    border-style: ridge;
	border-width: 3px;
	border-color: #808080;
	border-radius: 5px;
    color: black;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px;
    margin-left: 1px;
    cursor: pointer;
}

p
{
	padding: 25px;
	Font-Family: Cursive;
    text-align: center;
}

.titre_header
{
	color: white;
	text-decoration: none;
}

.YT
{
	color: red;
	text-decoration: none;
}

.FB
{
	color: blue;
	text-decoration: none;
}

ul
{
	list-style-type: none;
}

Sur le deuxième screen nous pouvons voir que la page en elle même se scroll sur cette résolution, or il ne faut pas.. Pouvez me dépanner et régler ce problème?

Je vous remercie d’avance, Bonne soirée.

Thibault'D

11 octobre 2017 à 18:33:42

FarCry

11 octobre 2017 à 18:41:58

Salut, pour remédier à ton problème il faudrait que tu met en place pour ton site un responsive web disign , renseigne toi la dessus , il y a pas mal de framework pour ça, comme boostrap grid.css flexbox etc.. regarde sur youtube il y a pas mal de formation qui sont proposé pour apprendre à mettre en place un responsiv web disign

11 octobre 2017 à 19:32:18

Je regarderai mais il me reste très peu de temps avant de devoir rendre mon projet...

Tu ne pourrais pas m’expliquer rapidement ou me dire ou édit mon site?

Skull-dragon

11 octobre 2017 à 20:08:59

Salut

Regarde ici facile à mettre en place à la suite de ton css tu définis des médias query et hop le tour est joué ce n'est ni plus ni moins qu'un autre style css à definir rien de compliquer

EmmanuelBeziat

11 octobre 2017 à 22:44:37

Salut,

Commence par retirer tes float dans tous les sens (surtout ceux qui n'ont aucun sens, comme float: top; qui n'existe pas), enlève tes width: 100%; qui n'ont aucune utilité, arrête de préciser des height à tout ce qui bouge, et laisse tomber position: absolute;.

Reprends les bases du CSS avec le tutoriel, apprends à faire des bases propres, sinon tes sites ne tiendront jamais la route.

Aussi, ne chaine pas les <br>. C'est une balise qui sert à revenir à la ligne au sein d'un bloc de texte, pas à sauter des lignes ni à créer des marges.

-
Edité par EmmanuelBeziat 11 octobre 2017 à 22:45:26

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Problème CSS (Adaptation taille de l'écran)

Problème CSS (Adaptation taille de l'écran)

Supprimer

Modérer

Signaler le message aux modérateurs