[Résolu] Aligner un div a droite

Le titre est pas super explicite pour le coup, mais voilà le contexte :

codepen : https://codepen.io/Efeelios/pen/yLLoVgy

second : vous voyez le bloc "liste d'anime" a droite ? bah de base il est en bloc en dessous du bloc "A la une". Et je l'ai remonté comme ça :

.listanime1{
    vertical-align: top;
    float: right;
    background-color: #555555;
    border: 1px #555555 solid;
    box-sizing: border-box;
    width: 230px;
    margin: -828px 0px 0px 0px;
}

sauf que bah quand on dézoom, ça casse le truc et c'est pas aligné fin c'est clairement pas la bonne méthode je pense. Quelqu'un a un tuyeau pour aligner le bloc <listanime1> a droite de "A la une" ? Comme le résultat là mais avec une vraie méthode quoi ^^

mon code est sur le codepen

Hello,

Pourquoi tu parles de zoom ? Quand tu codes, laisse le zoom par défaut (100%).

Quand on dézoom, ça détruit l'aspect du site et j'aimerais éviter ça. Ce qui fait que ma div de droite est mal placé. Et ça m'embête un peu

Je pense que le mieux serait de créer le layout pour le site. Je m'explique: créer une grille qui correspond à ton site. En css, il faudrait créer des classes qui vont contenir le contenu du site et isoler ces classes dans un fichier spécifique. Cela permet d'avoir un code plus propre et maintenable et de séparer les responsabilités.

Si on prends le cas de boostrap, on observe que certaines classes ne gèrent que le layout et rien d'autres. Je pense que c'est ce qu'il te faudrait ici. Sur le long terme, tu auras une grille adaptée à ton site.

https://getbootstrap.com/docs/4.0/layout/grid/

allan00958 a écrit :
Je pense que le mieux serait de créer le layout pour le site. Je m'explique: créer une grille qui correspond à ton site. En css, il faudrait créer des classes qui vont contenir le contenu du site et isoler ces classes dans un fichier spécifique. Cela permet d'avoir un code plus propre et maintenable et de séparer les responsabilités.

Si on prends le cas de boostrap, on observe que certaines classes ne gèrent que le layout et rien d'autres. Je pense que c'est ce qu'il te faudrait ici. Sur le long terme, tu auras une grille adaptée à ton site.

https://getbootstrap.com/docs/4.0/layout/grid/

Super merci beacoup, mais je comprends vraiment pas comment je suis censé faire marcher le truc. J'ai compris l'utilité de boostrap rapidement je pense, mais pour le coup je bloque, je vois pas comment je suis censé m'y prendre. Ton message est très clair, et il explique bien. Mais de moi-même je bloque.

up : ok j'ai compris, tu me parler des "col-xs, sm, md, et lg" ? row etc?
Modifié par Efeelios (17 Nov 2019 - 16:16)

allan00958 a écrit :
Re,

Ce n'est pas compliqué. Pour utiliser Bootstrap, il faut inclure le CSS dans la balise &lt;head&gt; et si besoin le JS dans la balise &lt;body&gt;. Les liens sont données sur la documentation officielle:
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Ensuite, pour ce qui est de la grille, les classes en question sont listées ici:
https://getbootstrap.com/docs/4.0/layout/grid/

Tu peux t'entrainer à Bootstrap sur jsFiddle! https://jsfiddle.net/boilerplate/bootstrap

Le mieux, c'est de créer sa grille soi-même mais cela peut s'avérer compliqué pour un débutant.

Super, j'étudie tout ça et je reviens vers toi si je comprends pas.
Merci du coup de main!

allan00958 a écrit :
Re,

Ce n'est pas compliqué. Pour utiliser Bootstrap, il faut inclure le CSS dans la balise &lt;head&gt; et si besoin le JS dans la balise &lt;body&gt;. Les liens sont données sur la documentation officielle:
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Ensuite, pour ce qui est de la grille, les classes en question sont listées ici:
https://getbootstrap.com/docs/4.0/layout/grid/

Tu peux t'entrainer à Bootstrap sur jsFiddle! https://jsfiddle.net/boilerplate/bootstrap

Le mieux, c'est de créer sa grille soi-même mais cela peut s'avérer compliqué pour un débutant.

Re², je comprends pas. Le rendu est plus du tout le même ? Je dois mal m'y prendre mais avec la documentation et tout le rendu est pas du tout le même ?
Modifié par Efeelios (19 Nov 2019 - 19:48)

Le rendu n'est pas du tout le même, c'est à dire ?

Si la grille de Bootstrap détruit le design original, le mieux est donc de créer ta propre grille. Maintenant que tu es plus familier avec le concept de grille et les media queries, tu peux créér une grille qui te convient.

As-tu un visuel du site en formats suivants: mobile, tablette et desktop ?

Du coup, as-tu toujours besoin d'aide ?

allan00958 a écrit :
Du coup, as-tu toujours besoin d'aide ?

non; merci beaucoup l'ami