Faire un texte qui suit la déformation de la page

Gobi_01

24 mai 2019 à 12:21:38

En gros je voudrais que mon texte se déforme en fonction de la taille la page.

Voila comment c'est actuellement, il n'y a que l'image qui suit.

plein ecran

réduis

-
Edité par Gobi_01 24 mai 2019 à 12:25:15

Lamecarlate

24 mai 2019 à 12:32:15

Bonjour,

sans ton code, on ne peut absolument pour toi : poste-le ici, en utilisant bien le bouton "</>" de la barre d'outils.

Et explique ce que tu entends exactement par "suivre" : tu veux que le texte soit plus petit, se place autrement, autre chose ?

(et sinon tu pouvais dire bonjour et s'il vous plaît, on est là bénévolement, sur notre temps libre, on mérite d'être traité⋅es comme des gens et pas des robots)

-
Edité par Lamecarlate 24 mai 2019 à 12:33:17

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

Gobi_01

24 mai 2019 à 13:47:55

Lamecarlate a écrit:

Bonjour,

sans ton code, on ne peut absolument pour toi : poste-le ici, en utilisant bien le bouton "</>" de la barre d'outils.

Et explique ce que tu entends exactement par "suivre" : tu veux que le texte soit plus petit, se place autrement, autre chose ?

(et sinon tu pouvais dire bonjour et s'il vous plaît, on est là bénévolement, sur notre temps libre, on mérite d'être traité⋅es comme des gens et pas des robots)

-
Edité par Lamecarlate il y a environ 1 heure

Je reformule la question (désolée pour le manque de politesse).

Bonjour, j'ai un petit souci dans mon code, je voudrais faire faire en sorte que le texte se place autrement quand je réduis la page, qu'il "suive" le mouvement de la page. Je ne maîtrise pas encore tout à fait bootstrap donc je ne peux pas encore faire une page en responsive.

Voici mon code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>boostrap tutoriel</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="liseret"></div>
<div id="feuilleentiere">

    <header>
    <div id="titre">
        <h1>Jardani Jovanovic</h1>
        <h2>alias: John Wick</h2>
    </div>
    <div id="profile">
        <img class="john" src="image/johnwick.jpg">
    </div>

</header>
<br/>


    <br/>
    <br/>
    <section>

        <div id="bloc">

                    <div id="bloc1">
                    <h2>Mon experience</h2>
        <ul>
            <li>"Création" des Fondations d'une Mafia Russe:
Pour faire une pause dans ma carrière d'assassin,
le patron de cette mafia m'as donner une mission "impossible" a réussir, que j'ai
réussi, ce qui m'a permis a faire une pause dans ma carrière.</li>
            <li>Soldat:
J'ai été dans les Marines américaine.</li>
            <li>Beaucoup d'expérience en conduite:
Dans mon métier nous utilisons beaucoup tout les types
de transport. Ce qui fait que j'ai aquis une bonne expérience
en conduite.</li>
        </ul>


        </div>

        <div id="bloc2">

            <h2>Mes competences</h2>
            <ul>

                <li>Très bonne maitrise de tout type d'armes a feux</li>
                <li>Grandes tolérances a la douleur</li>
                <li>Je parle l'Anglais, Russe, l'Italien, l'Hébreu et le langages des signe
Ma formation
J'ai appris la plupart des choses durant mon
</li>
            </ul>
        </div>

        <div id="bloc3">
            <h2>Ma formation</h2>
            <ul>
                <li>J'ai appris la plupart des choses durant mon
services militaire et le reste sur le tas</li>
            </ul>
        </div>


        </div>


    </section>

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

#feuilleentiere{
display: flex;
}

/*header*/

#titre {
height: 115px;
position: absolute;
top: 0px;
left: 800px;
}

.john{
    width:175px;
    height:115px;
    }

#profile
{
position: absolute;
top: 0px;
right: 0px;
}

h1{
font-size: 50px;
}



/*section*/
nav{
background: red;
}

h2{
font-size: 30px}

#bloc{
display: flex;
justify-content: space-around;
width: 1500px;
position: absolute;
left: 300px;
top: 180px;
}

#bloc1{
width: 290px;
}

#bloc2{
width: 290px;}

#bloc3{
width: 290px;}

#liseret{
display: flex;
    width: 8%;
    margin-right: 3%;
    height: 750px;
    background-image: url('image/violet.png');
    border-radius: 10px;
    }

Je sais c'est un peu le bazar dans mon code :/

Merci du temps que vous allez prendre pour m'aider a résoudre mon problème

exen

27 mai 2019 à 16:52:21

Bonjour,

Je suis surpris que personne n'aient répondu à ton post.

Dans ton code tu met pas mal de position absolute, et bien souvent inutilement.

si tu donne 8% + 3% à ton liseret, donne par exemple un width 80% à ta class feuille entières.

ca évitera de forcer sa taille, et ca te permettra de profiter de plex.

De même pour ton header, un petit coup de pouce met ton image en 1er et applique lui un float right.

Veille à utiliser au minimum les position absolute.

Compos sui.