changement de platform

Par youmma, il y a 3 ans

Les bases HTML/CSS

Bonjour tout le monde !
Je suis un peu perdu, j'ai du effectuer une page HTML et le problème que j'ai c'est que les éléments ne rest pas bien imbriqué en fonctions des écran ou je me connecte. Par exemple je suis opbligé de superposer des buttons les uns sur les autres mais quand je fait un changement d'écran le tout n'est pas bien imbriqué.... Quelqu'un aurait une idée ?

C'est sans doute une erreur mais dans le css je les ai mis en element statique %

8 réponses

Carouge10, il y a 3 ans

bonjour.
qu'est-ce ce tu appelles plateforme ?

il faut que ton site soit responsive.

pas forcément besoin de les mettre en % mais tu peux laisser sans taille pour certains.

quels sont les codes que tu as ? insérer sur le forum avec les outils du markdown pour le rendre plus lisible

youmma, il y a 3 ans

Par exemple je travail avec plusieur écran, un petit et un grand. Lorsque j'essaie de placer les boutons pour que ça face quelques chose de précis, quand je passe sur l'autre écran la disposition n'est plus du tout la même ;

HTML ;

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Résonnance</title>
<link rel=" stylesheet" href="css/style.css">
</head>
<body>
<img src="css/images/résonnance.png">
<center><h1>Accompagnement de l'enfant et</h1></center>
<center><h1>de l'adolescent</h1></center>

<div>
    <a class="button slide3button1" href="8.html"><input type="image" src="css/images/slide2/Image1.png"></a>

    <img class="slide3button5" src="css/images/slide2/Méta besoin sécurité.png" width="663" height="663">
    <a class="button slide3button4" href="6.html"><input type="image" src="css/images/slide2/besoin de protection.png"></a>
    <a class="button slide3button3" href="10.html"><input type="image" src="css/images/slide2/Besoin affectif et relationnel.png"></a>
    <a class="buttons slide3button2" href="4.html"><input type="image" src="css/images/slide2/besoin physiologique de santé.png"></a>

    <a class="button slide3button6" href="7.html"><input type="image" src="css/images/slide2/Besoin d_un cadre.png"></a>
</div>

<div>
    <a class="button slide3button7" href="8.html"><input type="image" src="css/images/slide2/besoin d_estime de soi.png"></a>
    <a class="button slide3button8" href="8.html"><input type="image" src="css/images/slide2/besoin d_identité.png"></a>
</div>

<div>
    <a class="button slide3button9" href="2.html"><input type="image" src="css/images/retour.png" /></a>
</div>

</body>
</html>

CSS:

.slide3button1{
position: absolute;
left:500px ;
top:350px ;

}
.slide3button2{
position: absolute;
left: 1010px;
top: 735px;
}
.slide3button3{
position: absolute;
left: 930px;
top: 560px;
}
.slide3button4{
position: absolute;
left: 880px;
top: 470px;
}
.slide3button5 {
position: absolute;
left: 820px;
top: 350px;
}
.slide3button6{
position: absolute;
left: 1500px;
top: 350px;
}
.slide3button7{
position: absolute;
left: 500px;
top: 900px;
}
.slide3button8{
position: absolute;
left: 1500px;
top: 900px;
}
.slide3button9{
position: absolute;
left: 3%;
top: 100%;
}

(et oui je suis obligé de me cassé le cul comme ça -_-

Carouge10, il y a 3 ans

il ne faut pas utiliser du absolute à tout va.
je te conseil de regarder du côté des flexbox.

autre chose. la balise center est obsolète depuis plus de 20 ans
les accents dans les noms de variables, fichiers, class.... c'est à bannir.
pareil pour les espaces dans les noms de fichiers.

youmma, il y a 3 ans

J'ai essayer en enlevant les obsolute et ça les met simplement à la chaines...
Ouais je vais regarder ça

Je devrias mettre quoi à la place ? J'avoue avoir simplement regardé différent langage et le center revenais le plus souvent...
Oui ça je sais le ik c'est ce qu'on ma demandé

youmma, il y a 3 ans

Oui ça j'ai compris. Mais final ma question est de savoir comment faire adapter mon rpogramme en fonction de la taille des écran, mais aussi sur les téléphone

Carouge10, il y a 3 ans

regarde du côté des flexbox en css et des média