Sujet: Mise en page    Lun 25 Juil 2016 - 11:03
Hello !

J'aurais besoin de votre aide parce que je ne suis pas assez douée en HTML, même si la réponse est sans doute très simple.
Je suis actuellement en train de réaliser la mise en page d'une "page" sur blogger mais j'ai un souci.

Voici ce qui s'affiche :




Voici ce que j'aimerais :



Merci d'avance pour votre aide <3
Sujet: Re: Mise en page    Lun 25 Juil 2016 - 22:29
montre moi ton code et je te règle ça en 20 secondes x)

grosso modo ce sera un truc genre

Code:

img, p {
    display: inline-block;
}

très compliqué quoi XD
Sujet: Re: Mise en page    Mar 26 Juil 2016 - 10:28
Je me disais que ça allait un truc aussi difficile... XD

Je n'ai pas de code sur la page en question pour l'instant, j'ai tout effacé quand j'ai vu que ça ne marchait pas. Mais du coup ce code c'est du CSS, est-ce que ça se met dans la partie HTML de la page ?

Spoiler:
 


Et le texte et l'image tu les mets avant le code CSS ?
Sujet: Re: Mise en page    Mar 26 Juil 2016 - 16:40
Le css, soit tu fais ine feuille de style à part, et tu la lie dans le head de ton document html, soit tu le met direct dans le html genre
Code:

<img src="monImage.jpg" style="display: inline-block;" />
<p style="display: inline-block;">bla bla bla</p>
Sujet: Re: Mise en page    Mer 27 Juil 2016 - 15:19
Je ne sais pas pourquoi ça ne marche pas, l'image se met bien en face du texte si on écrit que "blablabla" mais si c'est un gros texte il se met automatiquement en dessous...
Sujet: Re: Mise en page    Mer 27 Juil 2016 - 17:36
ouais, il faut spécifier une taille au paragraphe
Code:

<p style ="display: inline-block; width: calc(100% - [taille de l'image]);">Bouh</p>

sinon je t'invite à aller voir le petit (gros ?) tuto que j'ai posé sur flexbox, pour faire des trucs plus complexes
Sujet: Re: Mise en page    Mer 27 Juil 2016 - 22:45
Cela modifie bien la taille du paragraphe, mais l'image et le texte ne sont toujours pas alignés :(

Code:
<img height="200" src="https://1.bp.blogspot.com/-uTgj5nv0W2k/V5iz05nxqRI/AAAAAAAAAIE/_NbaBYGMcb0ypp4ZiK3_ZRHtcwr1FcEkgCLcB/s200/1.png" style="display: inline-block;" width="200" />
<br />
<div style="display: inline-block; width: calc(100% - 200px);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.
</div>
Sujet: Re: Mise en page    Mer 27 Juil 2016 - 23:15
mais normal, si tu mets un br aussi xDDDD

Code:

<img height="200" src="https://1.bp.blogspot.com/-uTgj5nv0W2k/V5iz05nxqRI/AAAAAAAAAIE/_NbaBYGMcb0ypp4ZiK3_ZRHtcwr1FcEkgCLcB/s200/1.png" style="display: inline-block;" width="200" /><!--
--><div style="display: inline-block; width: calc(100% - 200px); vertical-align: top;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.
</div>

le même code sans le br x)

et le rendu :



[EDIT] : Forum Actif a tendance à rajouter des br de lui-même un peu partout, je sais pas trop pourquoi mais en tous cas c'est dégueu
Pour éviter le problème, un ptit commentaire s'impose : #systemD #tips&tricks #csshack #lesastucesatontonweb


Code:

ligne 1 <!--
-->ligne 2
Sujet: Re: Mise en page    Mer 27 Juil 2016 - 23:38
Ah mais il ne s'était pas mis la première fois D:
Tu m'as fait rire avec tes hashtags XD

........Mais ça ne marche toujours pas hahaha


Sujet: Re: Mise en page    Mer 27 Juil 2016 - 23:44
même sans le br, avec les commentaires, et tout ? .-. pourtant moi ça marche là quand même XD
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 0:20
Ouais je comprend pas...

Code:
<img height="200" src="https://1.bp.blogspot.com/-uTgj5nv0W2k/V5iz05nxqRI/AAAAAAAAAIE/_NbaBYGMcb0ypp4ZiK3_ZRHtcwr1FcEkgCLcB/s200/1.png" style="display: inline-block;" width="200" /><!--
-->
<div style="display: inline-block; width: calc(100% - 200px);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.
</div>

(Je sens que j'ai oublié un truc et que tu vas me prendre pour une cruche)
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 1:00

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.


Code:
<img height="200" src="https://1.bp.blogspot.com/-uTgj5nv0W2k/V5iz05nxqRI/AAAAAAAAAIE/_NbaBYGMcb0ypp4ZiK3_ZRHtcwr1FcEkgCLcB/s200/1.png" style="display: inline-block;" width="200" /><!--
-->
<div style="display: inline-block; width: calc(100% - 200px);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.


Code:
<img height="200" src="https://1.bp.blogspot.com/-uTgj5nv0W2k/V5iz05nxqRI/AAAAAAAAAIE/_NbaBYGMcb0ypp4ZiK3_ZRHtcwr1FcEkgCLcB/s200/1.png" style="display: inline-block;" width="200" /><!--
--><div style="display: inline-block; width: calc(100% - 200px);"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod in neque vitae dapibus. Sed condimentum at neque sed venenatis. Praesent aliquet quis eros accumsan sollicitudin. Sed dignissim nibh ac vulputate vehicula. Vestibulum dignissim urna id hendrerit dignissim. Etiam quis finibus dui, id convallis augue. Ut eu ex lectus. Donec rutrum risus in lectus lacinia vehicula. Nam vel vehicula arcu, eget viverra metus. Fusce tortor ante, pharetra vel tortor nec, aliquam ornare mi. Morbi sed nulla lectus. Ut iaculis tellus et odio tempus consectetur. Quisque ut magna est. Curabitur lacus elit, commodo quis tincidunt vitae, venenatis ut nisi.

In hac habitasse platea dictumst. Mauris ac tincidunt turpis. Ut vulputate elementum justo vitae sagittis. Proin porttitor eget lectus et tincidunt. Maecenas in ullamcorper erat. Nullam finibus lorem libero, eu luctus nisi pulvinar efficitur. Vestibulum sem enim, euismod vel ex vitae, tincidunt viverra velit. Aenean convallis augue ex, ornare aliquet est consectetur vitae. In hac habitasse platea dictumst. Mauris non semper neque. Sed quis enim pellentesque, accumsan velit ut, tristique lectus.

Donec eleifend semper eros. Aenean lobortis sem non neque dignissim, sed commodo nunc viverra. Donec gravida urna ac nibh dapibus, a mattis lorem tempus. Aliquam vitae tempus ligula, quis vulputate purus. Suspendisse sagittis feugiat accumsan. Pellentesque leo purus, egestas id egestas id, rutrum sit amet leo. Integer in maximus felis. Suspendisse congue ut tortor at posuere. Quisque gravida orci mauris, sit amet malesuada velit feugiat rutrum.
</div>

clin d\'oeil

un indice ::
 
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 17:59
Ça ne marche toujours pas, là j'ai simplement copié/collé ton code XD

Est-ce que cela ne viendrait pas de la dimension de la page ?
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 18:03
bah à priori vu qu'on spécifie la taille du paragraphe à "100% - 200px", il faudrait que la page fasse 200px de large pour que ça vienne de là... t'utilises ce code où ? parce que là par contre c'est bizarre
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 18:17
J'utilise le code dans le html de "pages", enfin le truc basique pour éditer une page quoi...
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 19:30
ouais nan mais sur quel outil / site ?
parce que dans l'idéal du coup faudrait que j'aille tester là bas XD si tu reprend un code qui fonctionne, et que là bas il fonctionne pas, c'est que y a quelque chose qui change sur la plateforme que t'utilise
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 20:44
C'est Blogger la plateforme :) Ou alors il y a quelque chose à modifier dans le code html global ?
Sujet: Re: Mise en page    Jeu 28 Juil 2016 - 21:21
oui en effet je vois pas d'où ça viendrait
montre voir ton code complet ?
Sujet: Re: Mise en page    Mar 23 Aoû 2016 - 14:07
Du coup t'avais trouvé la faille ou pas ?
Je vais essayer de trouver une autre mise en page sinon!
Sujet: Re: Mise en page    Mar 23 Aoû 2016 - 14:56
je t'avouerai que j'avais complètement oublié xDD
je regarde ça dans les deux jours, suivant quand j'ai le temps x)
Sujet: Re: Mise en page    Dim 28 Aoû 2016 - 12:26
Problème : j'ai plus accès à ton code XD
à mon avis ça doit ton sélecteur qui va pas, parce que franchement sinon je vois pas
Sujet: Re: Mise en page