Résolu Placer un bloc dans un texte

Wiligan

Wiligan

Membre
Inscription
31 Octobre 2011
Messages
1 157
Réactions
161
Points
7 403
RGCoins
25
Salut !

Je souhaiterais placer un bloc dans un texte (dans un paragraphe, donc pas de div) de manière à ce que le texte soit autour ou sur les cotés du bloc en question, le tout sans utiliser de float !

Voila le bloc en question:

HTML: 
<div class="blocimg droite">
                  <a target="_blank" href="images/image.jpg">
                       <img class="imgarticle" src="images/image.jpg" alt="image">
                  </a>
              <div class="imgdesc">Description de l'image</div>
</div>

Une idée ?

Merci !
 
Trier par date Trier par votes
Pourquoi ne pas utiliser de div et vouloir utiliser un paragraphe ? Pourquoi ne pas utiliser de float ? C'est dans le cadre d'un exercice ? :mmh:
Tu aurais un schéma de ce que tu voudrais faire ? Car j'ai pas tout suivi :mdr:
 
Voter positivement 0 Voter négativement
Paul GTP a dit:
Pourquoi ne pas utiliser de div et vouloir utiliser un paragraphe ? Pourquoi ne pas utiliser de float ? C'est dans le cadre d'un exercice ? :mmh:
Tu aurais un schéma de ce que tu voudrais faire ? Car j'ai pas tout suivi :mdr:
Cliquez pour agrandir...

C'est pour un exercice et le prof n'est pas trop copain avec les float (strictement interdits).

Pour ce que je voudrais faire ça serait genre ça:

Texte texte texte texte texte texte texte
//////////////////// texte texte texte texte
//////////////////// texte texte texte texte
///// Image ////// texte texte texte texte
//////////////////// texte texte texte texte
Description //// texte texte texte texte
/////////////////// texte texte texte texte
texte texte texte texte texte texte texte

(Meilleur schéma au monde ! Je sais !)

Soit quelque chose comme (avec le code que j'ai donné plus haut):

39f8198a14a941cfb10d290690298b0c.png


Sauf qu'ici j'ai utilisé un float ET je ne peux pas (ou difficilement) gérer la position du cadre avec l'image dans le texte !
J'aimerais par exemple pouvoir mettre le cadre avec l'image en plein milieu du texte, à droite, à gauche ... facilement, ET sans float !

On m'a dit d'utiliser display: inline-block; mais je sèche complètement quant à son utilisation !
 
Voter positivement 0 Voter négativement
Wiligan a dit:
C'est pour un exercice et le prof n'est pas trop copain avec les float (strictement interdits).

Pour ce que je voudrais faire ça serait genre ça:

Texte texte texte texte texte texte texte
//////////////////// texte texte texte texte
//////////////////// texte texte texte texte
///// Image ////// texte texte texte texte
//////////////////// texte texte texte texte
Description //// texte texte texte texte
/////////////////// texte texte texte texte
texte texte texte texte texte texte texte

(Meilleur schéma au monde ! Je sais !)

Soit quelque chose comme (avec le code que j'ai donné plus haut):

39f8198a14a941cfb10d290690298b0c.png


Sauf qu'ici j'ai utilisé un float ET je ne peux pas (ou difficilement) gérer la position du cadre avec l'image dans le texte !
J'aimerais par exemple pouvoir mettre le cadre avec l'image en plein milieu du texte, à droite, à gauche ... facilement, ET sans float !

On m'a dit d'utiliser display: inline-block; mais je sèche complètement quant à son utilisation !
Cliquez pour agrandir...
Ton prof est étrange, on utilise la propriété float pour ce type de cas justement :mmh:

Tu peux faire un width au niveau de la première partie du texte pour éviter qu'elle ne touche l'image et tu fais un deuxième paragraphe sans width pour le deuxième afin qu'il prenne automatiquement toute la largeur disponible ?
 
Voter positivement 0 Voter négativement
Rivals a dit:
Ton prof est étrange, on utilise la propriété float pour ce type de cas justement :mmh:

Tu peux faire un width au niveau de la première partie du texte pour éviter qu'elle ne touche l'image et tu fais un deuxième paragraphe sans width pour le deuxième afin qu'il prenne automatiquement toute la largeur disponible ?
Cliquez pour agrandir...

C'est pas pratique et difficilement ajustable non ?

Paul GTP a dit:
Tu peux utiliser flexbox sinon, je pense :mmh:

Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.


Mais je me demande si c'est au programme :xD:
Cliquez pour agrandir...

Justement, c'est au programme, mais j'ai du mal à voir comment obtenir ce résultat avec ça ! x)
 
Voter positivement 0 Voter négativement
Wiligan a dit:
C'est pas pratique et difficilement ajustable non ?

Justement, c'est au programme, mais j'ai du mal à voir comment obtenir ce résultat avec ça ! x)
Cliquez pour agrandir...
Essaie de suivre la page du cours que je t'ai envoyé :p
Si tu n'y arrive vraiment pas je peux essayer un truc pour toi mais le but c'est surtout que t'y arrives seul :p
Car comprendre un code c'est bien, le réussir c'est mieux :D
 
Voter positivement 0 Voter négativement
Paul GTP a dit:
Essaie de suivre la page du cours que je t'ai envoyé :p
Si tu n'y arrive vraiment pas je peux essayer un truc pour toi mais le but c'est surtout que t'y arrives seul :p
Car comprendre un code c'est bien, le réussir c'est mieux :D
Cliquez pour agrandir...

Finalement je recommence mon site depuis le début, donc quand j'en serais à là je verrais comment ça se passe !

Merci !
 
Voter positivement 0 Voter négativement
Wiligan a dit:
Finalement je recommence mon site depuis le début, donc quand j'en serais à là je verrais comment ça se passe !

Merci !
Cliquez pour agrandir...
D'accord ;) Si besoin, voici quelque chose que je t'ai fait en 10 minutes. Ne l'utilise que si tu bloques vraiment !

Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Flex Box</title>
        <link rel="stylesheet" href="flex.css">
    </head>
 
    <body>
        <h1>Titre principal</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero tempor, rutrum libero nec, ornare sapien. Etiam auctor felis quis turpis egestas, quis efficitur sapien vestibulum. Sed lorem metus, varius vel tempus id, tempus quis neque. Quisque dui augue, eleifend at laoreet blandit, viverra ac mauris. In ante enim, molestie in tincidunt non, laoreet et turpis. Quisque nibh sem, pulvinar eu neque quis, aliquam rhoncus odio. Vivamus pellentesque, neque quis fermentum vehicula, quam mi congue ante, id bibendum orci lorem ut sem. Praesent mattis rutrum orci vel blandit. Nullam nec dignissim lacus. In eleifend sapien lectus, a placerat neque commodo quis. Mauris ultricies sem ipsum, et ultrices tortor viverra vitae. Etiam accumsan turpis metus, quis pharetra turpis feugiat ac. Curabitur id condimentum tortor. Cras vel interdum erat, convallis elementum urna. Etiam dui nunc, lacinia sit amet ipsum ac, cursus posuere arcu. Cras massa eros, viverra a euismod in, suscipit a sapien. Phasellus auctor lacinia molestie.Maecenas nec nunc interdum quam tristique feugiat. Vestibulum id dictum nunc. Quisque accumsan arcu ut sem volutpat, nec posuere lectus ullamcorper. Proin sollicitudin rhoncus ex, eu tempus mauris. Phasellus mattis quam mauris, in ornare augue vestibulum sed. Morbi quis libero molestie, interdum lectus et, commodo eros. Vestibulum iaculis ut neque sit amet facilisis. Fusce eu risus ac diam consectetur viverra suscipit vitae eros. Curabitur mi orci, gravida eu est eget, fringilla convallis justo. In placerat arcu quis facilisis viverra. Etiam et tellus ultrices, iaculis dui vitae, interdum purus. Sed tristique at leo quis efficitur. Maecenas maximus tincidunt egestas. Aenean porta felis in nisi placerat mattis. Vestibulum venenatis faucibus dui vitae venenatis. Curabitur a semper arcu. Proin et risus orci. Mauris faucibus orci finibus est varius, vitae luctus arcu lobortis. Etiam at velit feugiat, sollicitudin justo eget, vulputate justo. In maximus vulputate purus, id iaculis sapien euismod vel. Mauris nulla diam, dapibus sed bibendum ac, vehicula non massa. Ut at ipsum accumsan, cursus lorem ut, volutpat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vitae neque nunc. Pellentesque eu odio accumsan, elementum arcu ut, molestie orci. Suspendisse id ultricies lorem. Donec consectetur tempor congue. Quisque id suscipit elit, eget convallis dolor. Aliquam id fringilla tellus, et hendrerit nulla. Donec suscipit eros ut orci mollis, sed sollicitudin erat feugiat. Quisque at mattis tellus. Sed commodo ante ac nisl faucibus, rhoncus iaculis tortor dictum. Fusce lorem turpis, semper et tellus vitae, aliquet mollis quam. Duis quis lectus ut est vestibulum laoreet. Proin eu leo ac turpis eleifend congue.
            <a target="_blank" href="images/image.jpg"><img class="imgarticle" src="images/image.jpg" alt="image"></a>
        </p>
    </body>
</html>
Code: 
body {
    font-size: 20px;
}

p {
    display: flex;
    /* justify-content: center; */ /* Cette ligne sert à aligner l'image verticalement, comme tu le souhaite. Enlève le commentaire si tu veux qu'elle le soit */
}

h1 {
    text-align: center;
    text-transform: uppercase;
}

Aperçu
​
a4f2d1ebec6941b1b71d11de1be9a59a.png
 
Voter positivement 0 Voter négativement
Paul GTP a dit:
D'accord ;) Si besoin, voici quelque chose que je t'ai fait en 10 minutes. Ne l'utilise que si tu bloques vraiment !

Code: 
<!DOCTYPE html>
<html>
    <head>
        <title>Flex Box</title>
        <link rel="stylesheet" href="flex.css">
    </head>
 
    <body>
        <h1>Titre principal</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec libero tempor, rutrum libero nec, ornare sapien. Etiam auctor felis quis turpis egestas, quis efficitur sapien vestibulum. Sed lorem metus, varius vel tempus id, tempus quis neque. Quisque dui augue, eleifend at laoreet blandit, viverra ac mauris. In ante enim, molestie in tincidunt non, laoreet et turpis. Quisque nibh sem, pulvinar eu neque quis, aliquam rhoncus odio. Vivamus pellentesque, neque quis fermentum vehicula, quam mi congue ante, id bibendum orci lorem ut sem. Praesent mattis rutrum orci vel blandit. Nullam nec dignissim lacus. In eleifend sapien lectus, a placerat neque commodo quis. Mauris ultricies sem ipsum, et ultrices tortor viverra vitae. Etiam accumsan turpis metus, quis pharetra turpis feugiat ac. Curabitur id condimentum tortor. Cras vel interdum erat, convallis elementum urna. Etiam dui nunc, lacinia sit amet ipsum ac, cursus posuere arcu. Cras massa eros, viverra a euismod in, suscipit a sapien. Phasellus auctor lacinia molestie.Maecenas nec nunc interdum quam tristique feugiat. Vestibulum id dictum nunc. Quisque accumsan arcu ut sem volutpat, nec posuere lectus ullamcorper. Proin sollicitudin rhoncus ex, eu tempus mauris. Phasellus mattis quam mauris, in ornare augue vestibulum sed. Morbi quis libero molestie, interdum lectus et, commodo eros. Vestibulum iaculis ut neque sit amet facilisis. Fusce eu risus ac diam consectetur viverra suscipit vitae eros. Curabitur mi orci, gravida eu est eget, fringilla convallis justo. In placerat arcu quis facilisis viverra. Etiam et tellus ultrices, iaculis dui vitae, interdum purus. Sed tristique at leo quis efficitur. Maecenas maximus tincidunt egestas. Aenean porta felis in nisi placerat mattis. Vestibulum venenatis faucibus dui vitae venenatis. Curabitur a semper arcu. Proin et risus orci. Mauris faucibus orci finibus est varius, vitae luctus arcu lobortis. Etiam at velit feugiat, sollicitudin justo eget, vulputate justo. In maximus vulputate purus, id iaculis sapien euismod vel. Mauris nulla diam, dapibus sed bibendum ac, vehicula non massa. Ut at ipsum accumsan, cursus lorem ut, volutpat dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vitae neque nunc. Pellentesque eu odio accumsan, elementum arcu ut, molestie orci. Suspendisse id ultricies lorem. Donec consectetur tempor congue. Quisque id suscipit elit, eget convallis dolor. Aliquam id fringilla tellus, et hendrerit nulla. Donec suscipit eros ut orci mollis, sed sollicitudin erat feugiat. Quisque at mattis tellus. Sed commodo ante ac nisl faucibus, rhoncus iaculis tortor dictum. Fusce lorem turpis, semper et tellus vitae, aliquet mollis quam. Duis quis lectus ut est vestibulum laoreet. Proin eu leo ac turpis eleifend congue.
            <a target="_blank" href="images/image.jpg"><img class="imgarticle" src="images/image.jpg" alt="image"></a>
        </p>
    </body>
</html>
Code: 
body {
    font-size: 20px;
}

p {
    display: flex;
    /* justify-content: center; */ /* Cette ligne sert à aligner l'image verticalement, comme tu le souhaite. Enlève le commentaire si tu veux qu'elle le soit */
}

h1 {
    text-align: center;
    text-transform: uppercase;
}

Aperçu
​
a4f2d1ebec6941b1b71d11de1be9a59a.png
Cliquez pour agrandir...

Merci !
En fait c'est presque ça, j'aimerais que le texte puisse également passer en haut et en bas de l'image et mettre une bordure autour de l'image et sa description, un peu comme ça:

a53270fc98cc4759b1cb066dc4b2340a.png


Mais avec le texte autour, ou en haut en bas et à droite/gauche (en fonction).

(en bref: ce qui est facile à faire avec un float, mais sans float)
 
Voter positivement 0 Voter négativement
Wiligan a dit:
Merci !
En fait c'est presque ça, j'aimerais que le texte puisse également passer en haut et en bas de l'image et mettre une bordure autour de l'image et sa description, un peu comme ça:

a53270fc98cc4759b1cb066dc4b2340a.png


Mais avec le texte autour, ou en haut en bas et à droite/gauche (en fonction).

(en bref: ce qui est facile à faire avec un float, mais sans float)
Cliquez pour agrandir...
Avec flex ça me paraît compliqué de mettre l'image entourée par du texte :mmh:
Il faudrait peut-être passer par du code CSS un peu plus avancé je pense, c'est à discuter :mmh:
Pour la bordure et la description on peut rajouter un truc dans le genre en modifiant le code:
Code: 
<u>
<a target="_blank" href="images/image.jpg"><img class="imgarticle" src="images/image.jpg" alt="image"></a>
Description de l'image
</u>
Et en rajoutant dans le css:
Code: 
u {
    text-decoration: none;
    border: 1px solid gray;
}

Le cadre sera de la taille de ton paragraphe (tu peux modifier la taille en rajouter un height: 230px; en propriété dans le u par exemple.
 
Voter positivement 0 Voter négativement
Retour
Haut