Site internet: problème d'affichage

Résolu/Fermé

Littleredblood Messages postés 3 Date d'inscription mercredi 28 octobre 2015 Statut Membre Dernière intervention 29 octobre 2015 - Modifié par Littleredblood le 28/10/2015 à 19:27
Littleredblood Messages postés 3 Date d'inscription mercredi 28 octobre 2015 Statut Membre Dernière intervention 29 octobre 2015 - 29 oct. 2015 à 11:40

Bonjour tout le monde,

J'ai appris récemment les bases pour créer un site en html/css et cela va faire maintenant quelques semaines que j'ai un problème avec mon site que je compte mettre en ligne dans une à deux semaines.
Lorsque je zoom ou que je diminue la taille de la fenêtre mon site s'étend sur la droite comme le prouve l'overflow horizontal que j'ai laissé volontairement pour mieux comprendre l'origine du problème. Je suis sur un écran 17.3 pouces en 1920x1080 donc il est possible que le site ne s'affiche pas correctement sur un autre sans pour autant zoomer.
Je vous mets le code html et css de mon site pour que vous puissiez avoir une meilleur idée, à coller dans un fichier html donc.

Au fait je suis nouveau sur CCM donc si mon poste est inapproprié ou si j'écris trop de texte n'hésitez pas à me le dire ^^.
Merci d'avance de votre aide.

Code html/css :

<!DOCTYPE html>
<html>
<head>
<title>L'A-PROPOS_Accueil</title>
<meta charset="utf-8"/>
<style>
/*définition polices */

/* Eléments principaux de la page */

body{
background-color: #EAE9E8;
background-image: url("ressources/wallpaper_journaux_petits.jpg"); /* mettre une couleur plus foncée sur le background (genre #EAE9E8 ) + ne pas oublier de modifier l'image pour qu'elle domine tout l'écran et ne soit pas multipliée, sinon c'et moche*/
/* overflow-x: hidden; */
margin: 0px;
padding: 0px;
color: black;
font-family: Helvetica, Georgia;
}
/*
si l'on veut un menu qui ne prend pas toute la largeur, remmettre ce code

#bloc_page{
width: 1000px;
margin: auto;

}

/* En-tête*/

header{
width: 100%;
}

#titre{
display: inline-block;
width: 100%;
border-bottom: solid black 1px;

}

#titre h1{
text-align: center;
font-weight: bold;
margin: 0;
background-color: #A5A5A5;
font-size: 35px;
font-family: American Typewriter;
}

#titre h2{
font-family: Helvetica ;
font-style: italic;
text-align: center;
}
/* Citation Pindare

#pindare{
font-style: normal;
}

/* Menu*/
nav{
display: inline-block;
width: 100%;
min-width: 1800px;
background-color: #181b1d;
margin-bottom: 50px;

}

nav ul{
float: left;
position: relative;
left: 50%;
margin-left: -40px;

}

nav ul li{
float: left;
list-style-type: none;
position: relative;
left: -50%;

}

nav ul li a{
font-size: 18px;
text-align: center;
display: inline-block;
width: 180px;
color : #9B9B9B;
text-decoration: none;
background-color: #181b1d;
text-transform: uppercase;
padding-top: 10px;
height: 30px;

}
/* Changer le focus

nav ul li a:focus{

}

nav ul li:hover .rubrique_possedant_sous_liens {
color: black;

}

nav ul li ul {
display:none;

}
nav ul li:hover ul {
display:block;

}
nav li:hover ul li {
float:none;
}
nav ul li a:hover{
color: white;

}
nav li ul {
position:absolute;
}

.premier_sous-lien{
padding-top: 30px;
}

/* Les articles, le corps de la page quoi */

#corps{
background-color: white;
margin: auto;
width: 1300px;
margin: auto;
font-size: 18px;
overflow: hidden;
font-family: Georgia;
box-shadow: 2px 2px 20px black;

}

#main{
width: 800px;
margin: auto;
padding-top:30px;
text-align: justify;
font-size: 20px;
}
#main_image{
width: 800px;
height: 400px;
display: inline-block;
border-left: solid black 0px;
border-radius: 5px;
/*border-top: red solid 2px;*/
/*box-shadow: 10px -5px 30px grey;*/

}
#video{
margin: auto;
width: 1000px;
height: 500px;
display: inline-block;
border-left: solid black 0px;
border-radius: 5px;
}

.derniers_articles {

padding:1px;
margin: 15px;
float: left;
width: 400px;
position: relative;
border-radius: 8px;
text-align: justify;
height: 350px;
}
section a{
text-decoration: none;
color: black;
}
section img{
width: 400px;
display: inline-block;
/*box-shadow: 10px -5px 30px grey;*/
height: 250px;
border : solid black 0px;
border-radius: 5px;
border-bottom: black solid 4px;
}

section strong{
text-transform: uppercase;
color: purple;
}
.lire_la_suite{
display: none;
padding: 2px;
height: 15px;
background: url('ressources/fond_degraderouge.png') repeat-x;
border: 1px solid #760001;
border-radius: 4px;
color: white;
text-decoration: none;
position: relative;
top: 5px;
left: 10px;
}

section:hover .lire_la_suite{
display: inline;

}
section .nom_article{
text-transform: uppercase;
font-weight: bolder;
}

/*ici pour changer la couleur de la bordure du bas pour rubriques */

section #main_image{
border-bottom-color: red;
}

section #image2{
border-bottom-color: blue;
}
section #image3{
border-bottom-color: green;
}
section #image4{
border-bottom-color: grey;
}
section #image5{
border-bottom-color: purple;
}
section #image6{
border-bottom-color: maroon;
}
section #image7{
border-bottom-color: magenta;
}

/* Pied-de-page */

footer{
display: block;
background-color: #A5A5A5;
height: 180px;
width: 100%;
margin: auto;
text-align: center;
border-radius: 2px;
box-shadow: 2px 2px 20px black;
position: relative;
}
footer ul li{
list-style-type: none;
display: inline-block;
width: 60px;
}
footer .logo_social{
width: 40px;

}

</style>
</head>

<body>
<div id="bloc_page">



<header>
<div id="titre">
<h1 >Mon super site</h1>


</div>



<nav id"menu1">
<ul>
<li><a href="index.html">accueil</a></li>
<li><a href="news.html">(l')à-propos</a></li>
<li><a href="infos.html">grand angle</a></li>
<li><a href="politique.html">politique</a></li>
<li><a href="hitsoire.html" class="rubrique_possedant_sous_liens">histoire</a>
<ul>
<li><a href="histoire_antique.html" class="premier_sous-lien">antique</a></li>
<li><a href="histoire_contemporaine.html">contemporaine</a></li>
</ul>
</li>
<li><a href="culture.html" class="rubrique_possedant_sous_liens">culture</a>
<ul>
<li><a href="culture_musique.html" class="premier_sous-lien">musique</a></li>
<li><a href="culture_cinema.html">cinéma</a></li>
<li><a href="culture_series_tv.html">séries TV</a></li>
<li><a href="culture_jeux_videos.html">jeux vidéos</a></li>
</ul>
</li>
<li><a href="fable.html">fable</a></li>
</ul>

</nav>
</header>



<div id="corps">



<section id="main">
<a href="#">
<img id="main_image" src="ressources/image.jpg" alt="Mon Image3" >
<p><strong>Grand Angle.</strong><span class="nom_article"> Le site de MoA enfin ouvert !! </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque quis ultrices. Pellentesque accumsan ex vitae egestas tincidunt. Vestibulum nec commodo ex. Cras sed libero lorem<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>

<section id="article2"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image4.jpg" alt="image_article2" id="image2"><br/>
<p><strong>Cinéma.</strong><span class="nom_article"> Peter Pan, ce héros </span>Morbi sit amet aliquam semper blandit neque quis ultricesAliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article3"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image2.jpg" alt="image_article2" id="image3"><br/>
<p><strong>Musique.</strong><span class="nom_article"> La France en finale !! </span>Morbi sit amet sodales ligula. Aliquam neque quis ultrices. Aliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article4"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image3.jpg" alt="image_article2" id="image4"> <br/>
<p><strong>Fable.</strong><span class="nom_article"> Justin bieber en tournée </span>Morbi sit amet sodales blandit neque oliquam semper blandit<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article5"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image3.jpg" alt="image_article2" id="image5"><br/>
<p><strong> Histoire.</strong><span class="nom_article"> La vie </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque quis ultrices. Yamelo lio apetui<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article6"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image4.jpg" alt="image_article2" id="image6"><br/>
<p><strong>Jeux Vidéos.</strong><span class="nom_article"> L'appât du gain </span>Morbi sit amet sodales ligula. Aliquam semper blandit neque emper blandit neque<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
<section id="article7"class="derniers_articles">
<a href="#">
<img class="images_derniers_articles" src="ressources/image2.jpg" alt="image_article2" id="image7"><br/>
<p><strong>Politique.</strong><span class="nom_article"> Révolution des kiwis </span>MorAliquam semper blandit neque quis egestas tincidunt<span>...</span><span class="lire_la_suite"> Lire la suite</span>
</p>
</a>
</section>
</div>



<footer>
<div id="footer">
<h1>L'A-PROPOS | Tous droits réservés</h1>
<h2>Suivez nous sur les réseaux sociaux !!</h2>
<ul>
<li><img src="ressources/logo_facebook_bruit.png" class="logo_social" alt="logo_facebook" title="L'APRPSfb"></li>
<li><img src="ressources/logo_twitter_bruit.png" class="logo_social" alt="logo_twitter" title="#L'APRPS"></li>
<li><img src="ressources/logo_snapchat_bruit.png" class="logo_social" alt="logo_snapchat" title="L'APRPSdesnap"></li>
<li><img src="ressources/logo_instagram_bruit.png" class="logo_social" alt="logo_instagram" title="L'APRPSinsta"></li>

</ul>

</div>
</footer>
</div>
</body>
</html>

A voir également:

Site internet: problème d'affichage
Site de telechargement - Accueil - Outils
Site comme coco - Accueil - Réseaux sociaux
Url site internet - Guide
Site inaccessible - Guide
Site pour vendre des objets d'occasion - Guide

1 réponse

Réponse 1 / 1

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
Modifié par Tomy2e le 29/10/2015 à 01:49

Bonjour, effectivement ton div#corps dépasse de la page quand la résolution diminue, c'est dû au fait que tu utilises une valeur de largeur fixe, ici 1300px, donc automatiquement dès que la résolution de l'utilisateur est en dessous de 1300px en largeur, il y a aura un dépassement et donc une scrollbar. Pour éviter ça, au lieu d'utiliser des pixels (px) comme valeurs, on utilisera plutôt des pourcentages (%), avec bien sûr une largeur minimale à partir du quel on fera dépasser le #corps pour éviter que tout soit déformé (min-width:[valeurfixe]px)
Donc pour résoudre le problème de dépassement, au lieu de mettre
width:1300px;
mets
width:70%;
min-width:800px;

Ton menu cause aussi des dépassements, qui sont dus aux propriétés "left" sur tes balises <ul> et <li>.
En les supprimant ça résout le problème bien que le menu ne soit pas centré (je ne sais pas comment est censé être le menu donc si tu as besoin d'aide dessus montre moi comment les éléments sont positionnés).
Supprime le min-width de ton nav si tu veux qu'on puisse réduire la largeur sans avoir la scrollbar horizontale aussi

Littleredblood Messages postés 3 Date d'inscription mercredi 28 octobre 2015 Statut Membre Dernière intervention 29 octobre 2015
29 oct. 2015 à 02:07

Bonjour Tomy2e et merci à toi de prendre le temps de m'aider à résoudre mon problème !!
J'ai suivi tes instructions et effectivement plus de dépassements, mais j'aimerais conserver les trois colonnes qui apparaissent sur mon #corps et ce quel que soit la résolution, est ce que tu sais comment je pourrais faire ? J'aimerais bien que le menu soit centré effectivement.

Tomy2e Messages postés 816 Date d'inscription jeudi 21 février 2013 Statut Membre Dernière intervention 18 août 2016 858
29 oct. 2015 à 02:33

Pour que les trois colonnes s'adaptent aussi:
mets width: 28%; sur .dernier_article
et width: 100%; sur section img
en fait pour le menu remets les left que je t'ai dit de supprimer, il y a eu un problème dans le copier coller que tu a mis dans ton post original un commentaire était mal fermé, tout était bien centré avant.
voila le code que j'ai au final: https://pastebin.com/PAviFWxH
il y a toujours un petit bug avec le menu quand on redimensionne mais tu peux cacher la scrollbar avec l'overflow-x:hidden; c'est pas très important, vu qu'aucun texte ne dépasse.

Littleredblood Messages postés 3 Date d'inscription mercredi 28 octobre 2015 Statut Membre Dernière intervention 29 octobre 2015
29 oct. 2015 à 11:40

Impeccable merci Tomy2e ! Au final e pense que je vais faire utiliser des medias queries sur les images de mon #corps pour qu'elles ne soient pas déformées par le zoom pour le reste je vais garder comme tu m'as dis.
Encore merci de t'être penché sur mon problème et d'avoir répondu aussi vite !!

Discussions similaires

[SUJET GROUPÉ] Le site COCO.GG est définitivement fermé.

C'est quoi le site qui remplace coco chat

35 GO à l'étranger