Soucis, Adaptation écran

  1. Accueil
  2. Forum
  3. Programmation
  4. HTML / CSS
  5. Soucis, Adaptation écran
Suivre ce topic
Ce topic est suivi par : ZouZoupet
ZouZoupet

ZouZoupet Le 22 novembre 2022 à 18:15

Salut à tous ! je bosse sur un très gros projet que j'ai presque finis, il me reste maintenant que les bugs a régler malheureusement 😅 bref du coup comme dis dans le titre je n'arrive pas du tout à adapter mon site web à la taille de mon écran, ce qui fais que certains blocks ou textes passe au dessus de certains, et inversement ce qui n'est pas hyper pratique et lisible, si vous pouvez m'aider à régler se problème je vous en serais éternelement reconnaissant ! (PS: Désolé si le code est assez long) (Premier code css et ensuite code html)

/** Début copiage **/
html {
    position: static;
    background-color: #FFFFFF;
}
body {
    width: 100%;
}
/* Modification du bouton permettant de remonter les pages */
.btn {
    text-decoration: none;
    height: 100px;
    width: 100px;
    background: orange;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    z-index: 10;
}
.icone {
    width: 50px;
}

/* Modification de la barre de navigation*/
ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li
{
    float: left;
}

li a
{
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    text-decoration: underline #FF8119;
}

.Top {
    color: black;
    font-family: arial, sans-serif;
    background: #FFFFFE;
    height: 60px;
    width: 200px;
    overflow: hidden;
    font-size: 1.3em;
    z-index: 0;
    position: relative;
    display: block;
    margin: auto;
}
.Top::before { /**Permet de creer un arrière plan a la couleur que l'on veut et les bords que l'on shouaite qui va se superposer sous notre bouton**/ 
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FF8119;
    border-radius: 50% 50% 0 0;
    transition: all .5s;
    z-index: -1;
}

.Top:hover::before { /**Permet de monter notre arrière plan lorsque que on survole le bouton **/
    top: 0;
    border-radius: 0;
}
#TopImage {
    max-width: 15%;
    float: left;
}
#Top6 {
    max-width: 7%;
}
/** fin du copiage **/

hr {
    border: 1px solid black;
}

/** Zone du Carrousel **/

#Carrousel {
    width: 1500px;
    overflow: hidden;
    border: 4px solid #FF8119;
}
.image_carrousel {
    display: flex;
    animation-duration: 60s;
    animation-name: Carrousel_Top;
    animation-iteration-count: infinite;
}

@keyframes Carrousel_Top {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-1500px);
    }
    50% {
        transform: translateX(-3000px);
    }
    75% {
        transform: translateX(-4500px);
    }

}
#Background_carrousel {
    position: relative;
    text-align: center;
    color: white;
}
.texte_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    font-family: "Helvetica", sintony;
    font-style: italic;
}

#text_center_orange {
    text-decoration: underline #FF8119;
}

/** Zone de l'actu **/

#TextActu {
    text-align: center;
    font-size: 60px;
    font-family: "helevtica", sintony;
    font-style: italic;
}
#textRadiant {
    color: #FF8119;
    text-align: center;
    font-size: 60px;
    font-family: "helevtica", sintony;
    font-style: italic;
}
#TextActu2 {
    text-align: center;
    font-size: 25px;
    text-decoration: underline #FF8119;
}
#ActuMangaImg1 {
    border: 4px solid black;
    max-width: 65%;
    margin: 0 15px;
}

#ActuMangaImg2 {
    border: 4px solid black;
    max-width: 40%;
    margin: 0 15px;
}

#ActuMangaImg3 {
    border: 4px solid black;
    max-width: 42%;
    margin: 0 15px;
}
#ActuAcceuil {
    display: flex;
}
.TextActu3 {
    color: blueviolet;
    display: flex;
    align-items: center;
    margin-left: 100px;
    font-size: 22px;
}
/** Modification du boutton **/
button {
    display: block;
    margin: auto;
    border: 0;
    background: transparent;
    position: relative;
    overflow: hidden;
    padding: 10px 40px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.5em;
    box-shadow: 0px -0px 0px 0px rgba(143, 64, 248, .5), 0px 0px 0px 0px rgba(39, 200, 255, .5);
    transition: all .2s;
}

button::after {
    content: "";
    width: 400px;
    height: 400px;
    background: linear-gradient(225deg, #FE3A26 0%, #FE8B26 50%, #FEE026 100%);
    position: absolute;
    top: -105px;
    left: -100px;
    z-index: -1;
    transition: all .5s;
}

button:hover::after {
    transform: rotate(150deg);
}

button:hover {
    transform: translate(0, -6px);
    box-shadow: 10px -10px 25px 0 rgba(254, 139, 38, .25), -10px 10px 25px 0 rgba(38, 139, 254, .25);
}

/** Zone Histoire **/
#TextHistoire {
    text-align: center;
    font-size: 80px;
    font-family: "Helvetica", sintony;
    font-style: italic;
    color: whitesmoke;
}

#HistoireAcceuil {
    background-image: url("../Projet Radiant/images/image_histoire2_ccexpress.jpeg"); border: 4px solid #FF8119;
    background-repeat: no-repeat;
    background-attachment: absolute;
}

/** Zone Théorie **/
div.TheorieAcceuil {
    width: 350px;
    height: 350px;
    margin: 3px;
    display: inline-block;
}

#SectionTheorie {
    text-align: center;
}
#TextTheorie1 {
    text-align: center;
    font-size: 60px;
    font-family: "helevtica", sintony;
    font-style: italic;
}

#Theorie1 {
    border: 4px solid black;
    max-width: 50%;
    display: block;
    margin: 0px auto;
}
#Theorie2 {
    border: 4px solid black;
    max-width: 50%;
    display: block;
    margin: 0px auto;
}

#Theorie3 {
    border: 4px solid black;
    max-width: 55%;
    display: block;
    margin: 0px auto;
}

#Theorie4 {
    border: 4px solid black;
    max-width: 20%;
}

.TextTheorie {
    color: blueviolet;
    display: inline-block;
    align-items: center;
    font-size: 22px;
    text-align: center;
}

/** Zone Forum **/
#ForumAcceuil {
    background-image: url("../Projet Radiant/images/image_forum2.jpg"); border: 4px solid #FF8119;
    background-repeat: no-repeat;
    background-attachment: absolute;
}

#TextForum {
    text-align: center;
    font-size: 80px;
    font-family: "Helvetica", sintony;
    font-style: italic;
    color: whitesmoke;
}

/** Modification de la barre du dessous **/
#barre_end {
    background: #E7D9CE;
    text-align: center;
}
#img_end {
    max-width: 15%;

}
.text_end1 {
    font-size: 150%;
    font-family: "Helevtica", sintony;
    font-style: italic;
}
.text_end2 {
    display: inline-block;
    margin: 0 15px;
    font-family: "Helevtica", sintony;
    font-style: italic;
    color: darkred;
    text-decoration: none;
}
.text_end_orange {
    font-size: 100%;
    font-family: "Helevtica", sintony;
    font-style: italic;
    color: #FF8119;
}
<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>
            Radiant-Fan
        </title>
        <link rel="stylesheet" href="acceuil.css" />
        <link rel="icon" href="https://pbs.twimg.com/media/EX4sIsEXYAAam8t.jpg" />
        <!--ChatBot-->
        <link rel="stylesheet" href="jquery.convform.css">
        <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
        <script type="text/javascript" src="custom.js"></script>
        <script type="text/javascript" src="jquery.convform.js"></script>
        <script type="text/javascript" src="bot.js"></script>
    </head>
    <body media="screen and (max-width: 1280px)">
            <div class="btn">
                <img src="https://cdn-icons-png.flaticon.com/512/959/959157.png" alt="" class="icone">
            </div>
<!-- Creation de la barre de navigation -->
            <ul>
                <img id="TopImage" src="../Projet Radiant/images/radiant-logo.png">
            <li id="Top1" class="Top"><a href="acceuil.html">Accueil</a></li>
            <li id="Top2" class="Top"><a href="histoire.html">Histoire</a></li>
            <li id="Top3" class="Top"><a href="news.html">Nouveautés</a></li>
            <li id="Top4" class="Top"><a href="theorie.html">Théorie</a></li>
            <li id="Top5" class="Top"><a href="forum.html">Forum</a></li>
            <img id="Top6" src="../Projet Radiant/images/brooby.jpg">
        </ul>
        <br>
        <hr />
<!-- Creation du carrousel avec les images qui défile -->
        <div id="Background_carrousel">
            <div id="Carrousel">
                <div class="image_carrousel">
                    <img src="../Projet Radiant/images/image_acceuil_ccexpress1.png" alt="Carrousel 1">
                    <img src="../Projet Radiant/images/image_carrousel2_ccexpress.jpeg" alt="Carrousel 2">
                    <img src="../Projet Radiant/images/image_caroussel3_ccexpress.jpeg" alt="Carrousel 3">
                    <img src="../Projet Radiant/images/image_caroussel4_ccexpress.jpeg" alt="Carrousel 4">
                </div>
            </div>
            <div class="texte_center">Radiant-fan, ensemble trouvons <span id="text_center_orange">le berceau des némésis !</span></div>
        </div>
        <hr />
        <br><br><br><br>
<!-- Création du coin actu (ne pas oublier de changer les images et le texte suite au nouvelle actu) -->
        <p id="TextActu">Retrouvez toutes les actualités sur <span id="textRadiant">Radiant</span>, aussi bien au niveau du manga que de l'animé !</p>
        <p id="TextActu2">Nos informations sont sourcées, et proviennent en général des posts officiels ou encore des annonces des studios d'animations.</p>
        <br><br>
        <div id="ActuAcceuil">
            <a class="TextActu3"><img id="ActuMangaImg1" src="https://images-na.ssl-images-amazon.com/images/I/51z+G8dNuzL._SY344_BO1,204,203,200_.jpg" title="La possible date de sortie du tome 17 !">La possible date de sortie du tome 17 !</a> <!-- A changer suivant les actus -->

            <a class="TextActu3"><img src="https://www.manga-news.com/public/images/dvd/Radiant-S2-anime.jpg" title="La saison 2 de Radiant est disponible sur Netflix" id="ActuMangaImg2">La saison 2 de Radiant est disponible sur Netflix</a> <!-- A changer suivant les actus -->

            <a class="TextActu3"><img src="https://www.afjv.com/2022/05/220505-affiche-japan-tours-festival-2022.jpg" title="Tony Valente, invité du Japan Tours Festival 2022 !" id="ActuMangaImg3">Tony Valente, invité du Japan Tours Festival 2022 !</a> <!-- A changer suivant les actus -->
        </div>
        <br><br>
        <form>
            <a href="news.html" style="text-decoration: none;">
                <button id="actu_button" type="button">Lire plus d'actualité</button>
            </a>
        </form>
        <br><br>
        <hr />
<!-- Création du coin Histoire -->
        <div id="HistoireAcceuil">
            <div id="TextHistoire">Découvrez toute l'histoire de Radiant<br>laissez-vous embarquer dans les aventures de Seth et explorez les origines de l'histoire</div>
            <br></br><br></br><br><br></br><br></br><br></br>
        </div>
        <br><br>
            <form>
                <a href="histoire.html" style="text-decoration: none;">
                    <button id="histoire_button" type="button">Lire L'histoire</button>
                </a>
            </form>
        <br><br>
        <hr />
<!-- Création du coin théorie -->
        <p id="TextTheorie1">Lisez toutes nos théories sur la série !</p>
        <section id="SectionTheorie">
            <div class="TheorieAcceuil">
                <a class="TextTheorie"><img src="https://i.ytimg.com/vi/Fw2qSYnPh_w/maxresdefault.jpg" title="Le secret des némésis par Fumigène H" id="Theorie1" class="IMGtheorie"><br /><span>Le secret des némésis par Fumigène H</span></a>
            </div>
            <div class="TheorieAcceuil">
                <a class="TextTheorie"><img src="https://pbs.twimg.com/media/EX4sIsEXYAAam8t.jpg" title="Seth, un demi Némésis ?" id="Theorie2" class="IMGtheorie"><br /><span>Seth, un demi Némésis ?<span></a>
            </div>
            <div class="TheorieAcceuil">
                <a class="TextTheorie"><img src="https://pm1.narvii.com/7018/7e32e6ca573c520c0418a5ad98a923542fbc0f75r1-704-396v2_hq.jpg" title="Que se trouve t-il à la base du monde, sous les nuages ?" id="Theorie3" class="IMGtheorie"><br /><span>Que trouve t-on à la base du monde, sous les nuages ?</span></a>
            </div>
        </section>
        <br>
        <a class="TextTheorie"><img src="https://i.pinimg.com/originals/f4/63/08/f463085bfc62008b2a1e4ab9aed3b719.jpg" title="Quelles sont les véritables intentions de Grimm ?" id="Theorie4"><br /><span>Quelles sont les véritables intentions de Grimm ?</span></a>
        <br><br>
        <form>
            <a href="theorie.html" style="text-decoration: none;">
                <button id="theorie_button" type="button">Lire Les Théories</button>
            </a>
        </form>
        <br><br>
        <hr />
<!-- Création du coin forum -->
        <div id="ForumAcceuil">
            <div id="TextForum" style="display: flex;justify-content: center;align-items: center;">Regardez les rendez vous à ne pas manquer !</div>
            <br></br><br></br><br><br></br><br></br><br></br><br></br><br></br><br><br></br><br></br><br></br>
        </div>
        <br><br>
        <form>
            <a href="forum.html" style="text-decoration: none;">
                <button id="forum_button" type="button">Voir le forum</button>
            </a>
        </form>
        <br><br>
<!-- Création de la barre de fin -->
            <div id="barre_end">
            <img id="img_end" src="../Projet Radiant/images/radiant-logo.png">
            <p class="text_end1">Toute l'actualité manga et animé sur <span class="text_end_orange">Radiant</span></p>
            <p class="text_end1">Rejoignez dès maintenant une communauté passionnée par ce manga et cet animé !</p>
            <p class="text_end1"><span class="text_end_orange">Ensemble trouvons le berceau des némésis !</span></p>
            <hr />
            <a href="mentions_legales.html" style="text-decoration: none;"><span class="text_end2" style="float: left;">Nos mentions légales</span></a>
            <a href="mailto:radiant.fan.officiel@gmail.com"><span class="text_end2">Nous contacter pour conseil, aide, critique, etc, ...</span></a>
            <a style="float: right";><span class="text_end2">Crée par Sven Le Garrec</span></a>
        </div>
        <script src="top.js"></script>
    </body>
</html>
Vous devez être connecté pour poster une réponse. Se connecter ou Créer un compte

Programmation, développement web, high-tech, etc. Je partage ma passion pour l'informatique à travers des tutos vidéos et articles en espérant qu'ils vous soient utiles ;-)

Échange
Articles / Vidéos
Ressources

© 2024 PrimFX.com. Tous droits réservés. Propulsé par Single Quote.