1479 sujets

Web Mobile et responsive web design

Texte responsive, comment faire des sauts de ligne vers le haut

Bonjour,
Je viens vers vous car j'ai un problème que je n'arrive pas à résoudre.

Je suis entrain de coder mon site internet et j'ai un texte que je veux caler en bas à droite d'une image (comme sur le schéma 1 que j'ai mis en pièce jointe), jusque là pas de problème.
Mais quand je rétréci ma fenêtre pour simuler l'écran d'une tablette, par exemple, la zone de texte se réduit en largeur (normal Smiley smile ) et le texte augmente donc en hauteur (toujours logique), là ou je bloque c'est que je voudrais que le texte reste caler en bas à côté de l'image (comme sur le schéma 2) mais les lignes en plus de texte allonge le bloc vers le bas (comme sur le shéma 3).

Auriez vous un moyen d'obtenir le shéma 2 et de faire "monter" les lignes qui s'ajoute quand on réduit la largeur d'un bloc de texte ?

Je vous remercie pour le temps que vous m’accorderez !

https://forum.alsacreations.com/upload/1541802320-73217-forumbplandetravail1.png
Modifié par bobette (09 Nov 2018 - 23:25)
Hello

Le comportement du texte est effectivement bizarre.

Il me faudrait voir ton code source pour fouiller un peu. Je ne sais pas comment tu as placé ces élements (float, flexbox, inline-block ?)
Salut,
Déjà merci d'avoir pris le temps de lire mon problème Smiley smile
J'ai laisser les éléments dans le flux à part le texte avec lequel je me bat, je te met le code et je te colle tout en bas une image si tu veux avoir un aperçu de ce à quoi ça ressemble

HTML :

<! DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8">
        <!-- nom de la page -->
        <title>Ariane Loizon</title>
 
        <!-- favicon -->
        <link rel="shortcut icon" type="image/x-icon" href="imagesweb/logob.png" /> 
        <link rel="icon" type="image/x-icon" href="imagesweb/logob.png" />
            </head>
    
    <body>        
        <!-- lien avec fichier css -->
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="menu.css"> <!-- Menu burger-->
        
        <img id="ligne_1_rangee_1" src="images_web/coolock_img_ligne1_boite_b.jpg" alt="coolock_img_ligne1_boite">
        <img id="ligne_1_rangee_2" src="images_web/coolock_img_ligne1_bouteouverte.jpg" alt="coolock_img_ligne1_bouteouverte">
        <img id="ligne_1_rangee_3" src="images_web/coolock_img_ligne1_zoom_plateau.jpg" alt="coolock_img_ligne1_zoom_plateau">

        <img id="ligne_2_rangee_1" src="images_web/coolock_img_ligne2_var1.jpg" alt="coolock_img_ligne2_var1">  
        <img id="ligne_2_rangee_2" src="images_web/coolock_img_ligne2_var2.jpg" alt="coolock_img_ligne2_var2">  
        <img id="ligne_2_rangee_3" src="images_web/coolock_img_ligne1_2.jpg" alt="coolock_img_ligne1_2">  

        <img id="ligne_3_rangee_1" src="images_web/coolock_img_ligne3_plateau_entier.jpg" alt="coolock_img_ligne3_plateau_entier">
        <img id="ligne_3_rangee_2" src="images_web/coolock_img_ligne3_zoom_puzzle.jpg" alt="coolock_img_ligne3_zoom_puzzle">
        <img id="TIcoolock" src="images_web/coolock_c.png" alt="titrecoolock">
 
        <div id="DTXcoolock">
            <p id="TXcoolock">Création d’un jeu de société, à la découpeuse laser et en impression 3D, de façon à mettre en avant les principes nécessaires à la cohésion  d’un groupe. Volonté de réaliser un jeu au sein duquel la collaboration et le partage de connaissance sont nécessaires pour avancer.<br> Principe du jeu : il y a quatre types de personnages qui ont chacun une couleur. Le plateau de jeu est jonché de cadenas des quatre couleurs des personnages. Chaque joueur peut ouvrir les cadenas de sa couleur mais s’il se trouve devant un cadenas d’une autre couleur que la sienne il est bloqué et à besoin que l’un de ses coéquipiers vienne l’aider. Pour gagner les joueurs doivent traverser le plateau en ramassant les portions de puzzle et en évitant les fantômes.</p>
        </div>

    </body>
</html>


et le css : 

/* COOLOCK */

#ligne_1_rangee_1 {
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 4%;
    padding-right: 1.5%;
    
    width: 31%;
    height: auto;
}
#ligne_1_rangee_2 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 28%;
    height: auto;
}
#ligne_1_rangee_3 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 28%;
    height: auto;
}


#ligne_2_rangee_1 {
    padding-bottom: 1.5%;
    padding-left: 4%;
    padding-right: 1.5%;
    
    width: 13%;
    height: auto;
}
#ligne_2_rangee_2 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 18%;
    height: auto;
}
#ligne_2_rangee_3 {
    padding-bottom: 1.5%;
    padding-right: 1.5%;
    
    width: 32.8%;
    height: auto;
}

#ligne_3_rangee_1 {
    padding-left: 4%; 
    
    width: 37%;
    height: auto;
}
#ligne_3_rangee_2 {
    padding-left: 1.5%;
    
    width: 11.25%;
    height: auto;
}
#TIcoolock {
    padding-left: 1.3%;
    
    width: 3.13%;
    height: auto;
}
#DTXcoolock {
    float: right;
    margin-right: 5%;
    padding-top: 4.7%;

    width: 36%;
}
#TXcoolock {
    font-family: sans-serif;   
}


Merci d'avance !

https://forum.alsacreations.com/upload/1541809404-73217-forum.jpg
Modifié par bobette (10 Nov 2018 - 01:24)
OK. Voyons voir tout ça.

Premières remarques:

ces 2 balises vont dans le head:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="menu.css"> <!-- Menu burger-->

On préfèrera les classes aux IDs pour styliser les éléments en CSS. On réserve les IDs pour le JavaScript ou les liens ancrés.

Pour valider ton code:
https://validator.w3.org/#validate_by_uri+with_options

Aussi, c'est <!DOCTYPE html> sans espace
Je vais m'y pencher demain mais pour commencer j'ai créé un fiddle avec ton code:
http://jsfiddle.net/ef3ntkzs/

Jette un coup d'oeil et n'hésite pas à modifier des choses pour bien récréer ton problème. Si tu apportes des modifications, pense à mettre à jour (update) et m'envoyer le lien Smiley smile
Je suppose que les images ne sont pas de même taille.
Si tu pouvais donner leurs dimensions ou les mettre en ligne quelque part, cela sera plus concret.
Oui, bazooka07 a raison. C'est une bonne idée de mettre tes images.

Néanmoins, je te donne des conseils pour améliorer ton intégration.

Je vois que les noms des images sont "ligne_2_rangee_3" et vu les propriétés que tu y rajoutes, je vois que tu utilises les images pour créér une grille ou système de grille. C'est pas bon ça. Utilise plutôt des divs pour créér ton système de grille auxquels tu rajouteras du margin et padding pour le layout: plus simple à gérer et appliquer aux images les styles qui leur concernent. Regarde la grille de boostrap pour te servir d'inspiration, tu verras c'est que des divs, ou sinon créé ta propre grille.

Il y a plusieurs façons d'intégrer ton design.

Tu peux commencer par placer toutes tes images dans un div. Ensuite placer la div des images et la div du paragraphe dans une div parent. On peut faire pas mal de choses avec flex-box et les média queries.

Comme ceci: http://jsfiddle.net/ef3ntkzs/5/

Mais je pense qu'une bonne solution ici serait de créér ta propre grille.

Inspiration içi: https://www.w3schools.com/css/css_rwd_grid.asp

Au final, c'est plus logique, plus simple à mettre en place et à maintenir.
Merci pour vos réponses, je suis désolée, j'ai eu un week-end sans internet et pas moyen de vous répondre plus tôt.
J'ai fait les petites modifications de ma syntaxe incorrect, c'est sympa d'avoir pris le temps de m'apprendre ces petit trucs Smiley smile
J'ai rangé toutes mes images et texte dans des div et j'ai suivi ce que tu avais fait dans le fiddle et magie, ça fonctionne comme je veux, le texte part bien dans le bon sens !

Un énorme merci, j'y avais passé un temps fou déjà mais je n'arrivais à rien, c'est vraiment sympa de ta part de m'avoir consacré du temps et d'en plus d'avoir résolu mon problème de m'avoir expliqué
Sujet clos
Aller à