26744 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Bonjour,

Voila je rencontre un petit problème avec mon code.

### Ce que je fais

J'ai crée un media queries et dans ce media je n'arrive pas à placer mon image au même niveau que le titre h1 et p. Ci dessous mon code html et css.

```
HTML
<!DOCTYPE html>
<html>
    <head>
    
        <meta charset="utf-8" />
        <title>CV Albert Einsten</title>
        <link rel="stylesheet" href="style.css" />
        <meta name="viewport" content="width=device-width, maximum-scale=1.0"/>

    </head>

    <body>
        <div id="liseret"></div>
            
         
        <div id="contenu">
           
            <p><a href="photo.jpg">  <img src="photo_mini.jpg" alt="Photo d'identité Dédé"/></a></p>
            <h1>Dédé</h1>
            <p>Recherche à développer mes compétences informatiques</p>

            
            <section>
                <h2>Mon expérience</h2>

                <ul>
                    <li><strong>De 2011 à 2014 :</strong> : Sauveteur Aquatique au sein du SDIS.</li>
                    <li><strong>De 2014 à 2015 :</strong> : Assitant marketing international.</li>
                    <li><strong>De 2015 à 2017 :</strong> : Assistant data analyste.</li>
                    <li><strong>De 2017 à aujourd'hui :</strong> : Développeur BI.</li>
                </ul>
            </section>


            <section>
                <h2>Mes compétences</h2>

                <ul>
                    <li>HTML5 et CSS3</li>
                    <li>SQL</li>
                    <li>PYTHON</li>
                </ul>
            </section>

            
            <section>
                    <h2>Ma formation</h2>
                    <p>J'ai tout appris sur OpenClassrooms (<a href="https://openclassrooms.com/fr/paths/68-developpeur-dapplication-python">certificat OpenClassrooms</a>) </p>
            </section>
            
            
        </div>
    </body>
</html>

CSS

/* Paramétrage ok pour affichage normal */

@font-face 
{
    font-family: 'droid_sansregular';
    src: url('DroidSans-webfont.eot');
    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('DroidSans-webfont.woff') format('woff'),
         url('DroidSans-webfont.ttf') format('truetype'),
         url('DroidSans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body
{
    background-image: url('greyzz.png');
}

h1, h2
{
    color: darkgreen;
}

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

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

h2
{
    color: darkgreen;
}

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

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

#liseret
{   
    width: 10%;
    margin-right: 3%;
    height: 500px;
    background-image: url('lodyas.png');
    border-radius: 10px;
}

#contenu
{
    width: 85%;
}


@media screen and (max-width: 1024px) /* Paramétrage pour tél 640px */
{
    #liseret {
        position: absolute;
        left: -999em;
    }
    
    h1,h1 + p {
        color: midnightblue;
        text-align: center;
    }
    
    h2 {
        color: midnightblue;
    }
    
    section {   
        width: auto;
    }
    
    #contenu {
        display: flex;
        flex-direction: column;
        width: auto;  
    }
    
}

```

### Ce que je veux

Je recherche à vérifier la syntaxe de mes différentes balise si l'utilisation est optimisé et cohérente et déplacer mon image au même niveau que mon titre lorsque je réduis ma fenêtre donc lors de mon instruction media.

### Ce que j'obtiens

L'image ne bouge même lors de mon utilisation de plusieurs instruction, je pense que cela est lié par rapport à mon ordre ou à l'intégration de mon image dans body ?

Dans l'attente de vous lire.

Alex Bs
Modifié par axel-bs (28 Jan 2019 - 15:41)
Bonjour,

Chez moi, l'image bouge et vient se placer au dessus du titre quand on réduit la largeur de la fenêtre.

Amicalement,
Bonjour Parsimonhi,

Pardonne moi du coup je pense ne pas avoir été claire, j'aimerai que mon h1 et p juste au dessus de mes première balise section soit au même niveau que mon image ?

Cdt,
A BS
Hello,
Je ne sais pas si j'ai bien compris ce que tu veux faire, mais d'après ce que je lis, tu souhaites que ton <h1> et ton <p> soit constamment au même niveau que ton image, peut importe la résolution, c'est ça ?

Si c'est le cas, il te suffit juste de retirer les règles "display:flex", et "flex-direction: column".

Par ailleurs, pour améliorer la sémantique de ton code, je te recommande de placer ton image dans une balise <figure> au lieu d'une simple balise <p>.

Du coup, ça donnerait quelque chose comme ça :


<figure>
    <a href="photo.jpg">
        <img src="https://placeimg.com/90/90/any" alt="Photo d'identité Dédé" />
    </a>
</figure>
<h1>Dédé</h1>
<p>Recherche à développer mes compétences informatiques</p>


Et ton CSS va donner ceci :

@font-face {
    font-family: 'droid_sansregular';
    src: url('DroidSans-webfont.eot');
    src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('DroidSans-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background-image: url('greyzz.png');
}

h1,
h2 {
    color: darkgreen;
}

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

figure {
    float: right;
}

img {
    border: 1% solid black;
    box-shadow: 2px 2px 2px black;
}

h2 {
    color: darkgreen;
}

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

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

#liseret {
    width: 10%;
    margin-right: 3%;
    height: 500px;
    background-image: url('lodyas.png');
    border-radius: 10px;
}

#contenu {
    width: 85%;
}

@media screen and (max-width: 1024px) /* Paramétrage pour tél 640px */
{
    #liseret {
        position: absolute;
        left: -999em;
    }
    h1,
    h1 + p {
        color: midnightblue;
        text-align: center;
    }
    h2 {
        color: midnightblue;
    }
    section {
        width: auto;
    }
  
    #contenu {
        width: auto;
    }
}

Modifié par tiloyi (29 Jan 2019 - 16:25)
tiloyi je te remercie de t'avoir penché sur le problème mais quand je réalise mon clique sur ma fenêtre ma photo ne se mais pas au même niveau que mon titre h1

J'aimerai t'envoyer un imprime écran mais je ne peux pas en gros j'aimerai obtenir sur la même ligne
h1 = Dédé
p = Recherche à développer mes compétences informatiques
image

Sur le même niveau horizontal de ma page au plus proche de du haut avec un espace quand même..

Merci quand même pour ton aide !
Bonne aprèm
Bonjour,

Tu prends un logiciel de dessin quelconque (ou bien tu utilises une feuille de papier et tu prends une photo).

Tu dessines un schéma qui montre ce que tu veux faire de tes boites h1, p et img pour le cas où la fenêtre est large, et tu dessines un deuxième schéma pour le cas où la fenêtre est étroite.

Amicalement,
upload/1548842831-74198-capture.png Bonjour Parsimonhi,
J'avais pas vu le bouton joindre une image pourtant il est en bleu...
Dsl je suis nouveau je connaissais pas, n'hésites pas si tu as des questions ..

Cdt,
Axel B
Modifié par axel-bs (30 Jan 2019 - 11:07)
Salut Alex B,
En théorie, le code que je t'ai fournis te permet d'obtenir le résultat souhaité, tel que tu l'as indiqué via ton JPEG.

Preuve, je viens d'intégrer le code que je t'ai fournis dans mon code précédent, tu peux jeter un coup d'oeil ici : https://thimbleprojects.org/tiloyi/628545/

Comme tu le verras, l'image est bien à droite, toujours au même niveau le h1 et le p.
Bonjour Tiloyi,
Je te remercie pour le partage de ton site web il est incroyable et qu'est ce que ca va pouvoir m'aider !
J'ai juste une question on est bien d'accord dans media queries la définition pour la lecture d'un site sur appareil mobile c'est : 640px ?
Bonjour,
axel-bs a écrit :
J'ai juste une question on est bien d'accord dans media queries la définition pour la lecture d'un site sur appareil mobile c'est : 640px ?

C'est n'importe quelle taille (y a des téléphones en 320px voire 240px de large), et des tablettes qui en mode paysage vont afficher plus de 1000px.

Selon moi, faut pas s'occuper de la taille des mobiles.

Il faut s'occuper de la taille de ton site, et regarder si c'est à 640 px que tu n'as plus assez de place et que tu dois changer ta présentation.

Amicalement,
Meilleure solution