prendre le contrôle uniquement du texte dans un par JohanLt - page 1

Bonjour, je vous explique mon problème j'essaie depuis 5h à mettre un texte à la vertical dans mon liseret , le soucis c'est que j'arrive pas à avoir le contrôle de mon texte sans que le reste ce mette à bouger , j'aimerai comprendre surtout je veux que ca reste responsive , et je cherche une autre méthode que la position absolue qui casse mon responsive ! J'aimerai mettre mon nom et prénom sur le liseret en le mettant à la vertical et le centré !

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Mon CV</title>
        <link rel="stylesheet" href="style.css" />
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
    <body>
        <div id="liseret"><p class="TextV">Johann Leroy</p>
        </div>
        <div id="contenu">
            <p><a href=""><img src="" alt="Photo d'identité Johann leroy" /></a></p>
            <h1>Johann leroy</h1>
            <p>Apprenant à l'école e2n noyon</p>
            <section>
                <h2>Mon expérience</h2>
                <ul>
                    <li><strong>De 2014 à 2018</strong> : Second de cuisine, chef de cuisine en normandie ( Cabourg )</li>
                    <li><strong>De 2010 à 2014</strong> : Cuisinier dans différent établissement.</li>
                    <li><strong>De 2018 à aujourd'hui</strong> : Apprenant à l'école e2n noyon, et auto formation en parallèle sur le site udemy html/css </li>
                </ul>
            </section>
            <section>
                <h2>Mes compétences</h2>
                <ul>
                    <li>Terminal de commande linux</li>
                    <li> HTML5 </li>
                    <li>CSS3</li>
                    <li>Nano/Atom</li>
                </ul>
            </section>
            <section>
                <h2>Ma formation</h2>
                <p>Actuellement je débute ma formation Web bac +2 avec l'école e2n (en cours) </p>
            </section>
            <section>
                <h2>Mes Loisirs</h2>
                <ul>
                    <li>Tennis</li>
                    <li>Pétanque</li>
                    <li>Montage vidéo</li>
                    <li>Musique</li>
                </ul>
            </section>
            <section>
                <h2>Contact</h2>
                <ul>
                    <li><strong>Phone number</strong> : 06 06 06 06 06</li>
                    <li><strong>Adress</strong> : 15 rue du chevalier blanc , Paris</li>
                    <li><strong>Mailbox</strong> : johannleroy@wanadoo.fr </li>
                </ul>
            </section>
            <section>
                <h2>Contactez-moi</h2>
                <p>Remplissez le formulaire ci-dessous afin de m'envoyer un message. Je vous répondrais dans les plus bref délai.
                      <br><em>Tous les champs sont requis.</em></p>
                          <p class="grid_10"><textarea name="message" placeholder="Votre message" class="required"></textarea></p>
                          <p class="grid_6">
                              <input name="nom" placeholder="Nom - Prénom" class="required" type="text">
                              <input name="email" placeholder="Adresse email" class="required" type="email">
                              <input name="envoi" value="Envoyer le message" class="required" type="submit">
                              <span class="messageform"></span>
            </section>

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

* MAIN PAGE */


body
{
    background-image: url('img/fond.png');
    font-family: 'Lato', sans-serif;

}

h1, h2
{
    font-family: 'Lato', 'droid_sansregular', 'Arial', sans-serif;
}

h1, h1 + p
{
    text-align: center;
}

img
{
    float: right;
    border: 1px solid black;
    box-shadow: 3px 3px 3px black;
}

h2
{
    color: #6E4A46;
    background-color:aliceblue;
    box-shadow: 5px 5px 5px black;

}

section
{
    display: inline-block;
    vertical-align: top;
    width: 30%;
    margin-right: 2%;
}

/* LISERET GAUCHE */

#liseret, #contenu
{
    display: inline-block;
    vertical-align: top;

}

#liseret
{
    width: 10%;
    margin-right: 3%;
    height: 750px;
    background-color:#d72c2d;
    border-radius: 10px;

}



#contenu
{
    width: 85%;
}

.TextV{

display: inline-block;
text-align: center;
color: black;
font-size: 10px;
height: 150px;
  width: 150px;
ms-transform: rotate(20deg);
webkit-transform: rotate(20deg);
transform: rotate(-90deg);

font-weight: bold;
}


/* RESPONSIVE MEDIA QUERIE */
@media all and (max-width: 1024px)
{
    section
    {
        display: block;
        width: auto;
    }

    #liseret
    {
        display: none;
    }

    #contenu
    {
        width: auto;
    }

}

-
Edité par JohanLt 10 janvier 2019 à 15:57:04

JohanLt

10 janvier 2019 à 15:43:08

Domi65

10 janvier 2019 à 21:08:17

« J'aimerai mettre mon nom et prénom sur le liseret en le mettant à la vertical et le centré ! »

Bonjour. Quel liseret ? (ou quel liseré ?)

PS : Ça n'a rien à voir, mais si tu comptes répondre, c'est « Je vous répondrai ». Ajouter un s au verbe en fait un conditionnel.

Cordialement.

prendre le contrôle uniquement du texte dans un

prendre le contrôle uniquement du texte dans un

Supprimer

Modérer

Signaler le message aux modérateurs