Adapter son site à toutes les résolutions

21 janvier 2020 à 18:52:36

Bonjour,

Depuis quelques temps j'essaye d'apprendre le HTML5 et le CSS3 avec les tutoriels du site, et jusqu'ici j'ai toujours trouvé solution à mes problèmes. Malheureusement, c'est sur quelque chose de tout con que je bute vraiment là. J'aimerais rendre mon site "responsive", donc faire en sorte qu'il s'adapte à toutes les résolutions sans avoir besoin de scroller horizontalement.

Sur mon site, j'ai mis une div "bloc_page" sur l'ensemble de mon body, avec une width de 80% et une margin: auto. Ça fait son taf quand ma fenêtre est large, mais dès que je réduit, ça ne donne pas l'effet voulu. La scrollbar est toujours présente car les images ne s'adaptent pas. J'ai tenté les media queries avec aussi peu de succès. Je dois mal m'y prendre, ou alors l'une des manipulations que j'ai effectué auparavant m'empêche d'avoir le résultat voulu, je ne sais pas.

Du coup me voilà, je sollicite votre aide pour qqch de tout simple... Merci d'avance !

-
Edité par Mocassin 21 janvier 2020 à 18:58:40

Mehddii

21 janvier 2020 à 18:56:54

Bonjour,

Peux-tu nous fournir le code en question ?

Sinon un codePen ou jsFiddle pour te proposer de meilleures solutions

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Mocassin

21 janvier 2020 à 18:59:27

Le code entier ? La page HTML et la page CSS ?

Et merci pour les deux sites, je ne connaissais pas mais ça me semble intéressant.

EDIT : Je donne donc mon code entier.

<!DOCTYPE html>

<head>

<title>Mocassin's Creed</title>

</head>

<body>

<h1>Mocassin's Creed</h1>

</a>

</header>

<nav>

<a href="" class="navigation">FILMS</a>

<a href="" class="navigation">SERIES</a>

<a href="" class="navigation">COMICS</a>

<a href="" class="navigation">JEUX-VIDEOS</a>

<a href="" class="navigation">CONTACT</a>

</nav>

<div class="derniers"><h2>LES DERNIERS ARTICLES</h2></div>

<div id="review_arrow"><h3>REVIEW TV - <br/>ARROW SAISON 8</h3></div>

</a>

</div>

<div id="coulisses_titans"><h3>DANS LES COULISSES DE L'ATTAQUE DES TITANS</h3></div>

</div>

<div id="mewtwo"><h3>MEWTWO : LE CLONE VENGEUR</h3></div>

</div>

</div>

</section>

<aside>

<p>

<label for="recherche"><div id="rechercher">Rechercher</div></label> <input type="search" name="search" id="search" placeholder="Ex : L'attaque des Titans">

</p>

</form>

</div>

<h2>Mocassin</h2>

<p class="aside">Dernier représentant de la tribu des Mocassins, il prit le nom de celle-ci afin de la faire perdurer. <br/><br/> Avant de s'exiler sur les terres dites civilisées, il trouva une pantoufle précieuse. Plus tard, il comprit qu'il avait en sa possession la pantoufle unique, la maîtresse des dix-neuf autres chaussons. Il était devenu le seigneur des godasses. <br/><br/>Avec ce nouveau pouvoir, il fonda la communauté des fragiles, où seuls les braves osant exprimer leurs sentiments étaient acceptés.</p>

</aside>

</div>

</body>

</html>

________________________

#bloc_page

{

width: 80%;

margin: auto;

}

header

{

display: flex;

justify-content: space-around;

align-items: center;

}

img

{

border: 2px black groove;

border-radius: 5px;

margin: 5px;

width: auto;

}

nav

{

height: 50px;

display: flex;

justify-content: space-around;

align-items: center;

flex-wrap: wrap;

margin: 1px;

}

aside

{

width: 20%;

min-width: 200px;

padding: 10px;

margin: 10px;

float: right;

}

.aside{

font-family: verdana;

}

{

text-align: center;

}

{

display: none;

}

h3 {

display: block;

text-align: center;

}

{

text-align: justify

}

.navigation

{

color: black;;

text-decoration: none;

font-weight: bold;

font-size: large;

}

.rechercher {

display: flex;

justify-content: center;

color: red;

font-weight: bold;

font-size: 20px;

border: 2px red groove;

border-radius: 5px;

}

#rechercher {

text-align: center;

}

a.navigation:hover{

color: red;

background-image: url(images/MCDD.png);

background-repeat: no-repeat;

padding-left: 30px;

padding-top: 2px;

}

section

{

width: 75%;

float: left;

margin-top: 5px;

}

.Photo_profil

{

display: flex;

justify-content: center;

}

.Arrow

{

display: flex;

justify-content: center;

position: relative;

max-width: 75%;

margin: auto;

}

#review_arrow {

position: absolute;

bottom: 20px;

right: 10px;

font-size: 25px;

color: white;

}

#coulisses_titans {

margin-top: -10px;

margin-bottom: -20px;

max-width: 500px

}

#mewtwo {

max-width: 270px;

margin-top: -10px;

margin-bottom: -20px;

}

.main {

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.article {

width: auto;

}

.derniers {

font-size: large;

}

.main img

{

filter: grayscale(0);

-webkit-filter: grayscale(0);

-moz-filter: grayscale(0);

-o-filter: grayscale(0);

-ms-filter: grayscale(0);

}

.main img:hover

{

filter: grayscale(1);

-webkit-filter: grayscale(1);

-moz-filter: grayscale(1);

-o-filter: grayscale(1);

-ms-filter: grayscale(1);

}

-
Edité par Mocassin 21 janvier 2020 à 19:32:03

Mehddii

21 janvier 2020 à 19:31:32

En effet, si tu pouvais reproduire ton problème sur un de ces deux sites ,ça serait bien

Oui le code HMTL / CSS

Edit : Alors au niveau de ton code, déjà passe le au validateur W3C car tu as plusieurs erreurs notamment le label qui contient une div. Puis la balise p qui ne contient pas de texte.

Sinon je ne vois pas de media dans ton code, comment veux-tu qu'il soit responsive ?

L'utilisation des media est très simple, tu ajoutes un bloc media à chaque fois que tu en as besoin par rapport à ton design et non pas rapport à la taille de l'écran. Essayes de le faire et si tu as un soucis, on t'aidera

-
Edité par Mehddii 21 janvier 2020 à 19:39:27

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Lamecarlate

21 janvier 2020 à 19:40:05

Bonjour,

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton Code de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Mocassin

21 janvier 2020 à 19:58:13

@Mehddii Merci pour ta réponse. Je ne suis pas sûr d'avoir bien saisi, mais je réessaierai en prenant ça en compte. Et s'il n'y a pas de media dans mon code, c'est parce que je l'ai supprimé, vu qu'il ne fonctionnait pas :/

@Lamecarlate Merci pour la précision, je me disais aussi que ça semblait très archaïque de le copier juste comme ça.

Mehddii

21 janvier 2020 à 20:03:53

C'est très simple, par exemple :

/* CSS ... */

/* CSS ... */

/* Je dispose ici d'un h2 et je voudrais qu'il soit à 2rem */
h2 {
font-size:2rem;
}

/* Je réduis la taille grâce à inspecter l'élément, une fois à 400px, oups .. problème, mon h2 est trop grand pour cette taille d'affichage, donc je fait un @media */
@media (max-width:400px)
{
   h2 {
     font-size:1rem;
   }
}

Remet les et on verra pourquoi ils fonctionnent pas

-
Edité par Mehddii 21 janvier 2020 à 20:06:19

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Mocassin

22 janvier 2020 à 0:10:52

J'ai pu tester vite fait et en effet, ça fonctionne déjà mieux. Mais je ne peux pas faire en sorte que ce soit tout simplement proportionnel à la taille de l'écran ? Je dois forcément appliquer des valeurs précises ?

Mehddii

22 janvier 2020 à 5:25:06

Pas forcément, tu peux faire en sorte d'avoir uniquement les media nécessaire aux point de ruptures dont tu as besoin, comme pour chaque taille d'écran. Tout dépend de tes besoins, à toi de voir comment veux-tu que ton site soit fait.

Mais généralement, on fait comme ça. C'est plus simple que de répéter toute nos propriétés pour chaque taille d'écran

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Lamecarlate

22 janvier 2020 à 8:13:52

> je me disais aussi que ça semblait très archaïque de le copier juste comme ça.

Et du coup tu n'édites pas ton message comme demandé ? Tu peux aussi poster un nouveau message avec le code coloré si tu n'y arrives pas (on a un bug aléatoire du forum qui fait que parfois le bouton d'édition n'apparaît pas).

Pas d'aide concernant le code par MP, le forum est là pour ça :)