Voilà j'en suis rendu là... Y'a plein de choses à dire probablement ... à faire encore plus. Comme par exemple mettre mon nom collé à gauche dans le bloc et la photo à droite, mais avec les flexbox etc.. je me perds.
Puis les formations/compétences etc... fin bref, je déprime
Je sais qu'il doit y avoir des erreurs grosses comme des maisons, j'apprends le HTML et CSS depuis une semaine. J'en suis rendu à être accroc complet. Mais là ça fait plusieurs jours que je suis bloqué là-dessus et je suis tellement perdu ...
Pour ton liseret, si tu veux quelque chose comme l'exemple de Mathieu, je te conseille de créer une balise que tu modifieras à ton aise. Pour "recopier" une image je te conseille d'essayer de la quadriller pour imaginer sa construction.
Par exemple:
Les deux balises parrents seraient ici le liseret et le corps de la page, se qui donnerait:
<body>
<div id="liseret"></div>
<div id="blocPage">
<!-- Le reste du code -->
</div>
</body>
Puis avec flex tu pourras mettre tes deux balise cote à cote
Pour le liseret, il faudra lui donner une largeur, arrondir les angles, une couleur de fond...
- Edité par Mr R0b0t 9 août 2017 à 15:59:42
"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
Je vais essayer de me servir de ça ! Mais en fait je crois que je fais une fixette sur le "display : flex;" J'ai la sensation qu'il faut toujours agencer son site avec ça. Seulement j'ai encore du mal à comprendre comment fonctionne les blocs etc... Bref ça viendra
Flexbox est plutot magique, faut pas en avoir peur
N'hésite pas à utiliser le debugger du navigateur pour comprendre la taille et la disposition de tes blocs. Tu peux aussi imposer une couleur temporairement a tes blocs pour voir leur taille. Lis, relis et rerelis le cours sur Flexbox il est très bien expliqué.
Bonne chance
"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
J'avance petit à petit. J'ai appliqué ce que tu m'as dit Mr Robot et j'arrive à quelque chose comme ça.
Maintenant je n'arrive pas à mettre mon bloc content gris collé au liseré... Je suis vraiment désolé de vous déranger avec ça, pourtant je devrais pouvoir y arriver avec les cours ... Mais j'ai encore du mal avec le positionnement des blocs. Absolute, fixed, relative, display flex, inline-block etc... Tout ça fait beaucoup d'un coup
Alors avant le fameux flexbox, quelques petits problèmes/conseils:
Tu as une balise </div> en trop entre <!-- END BLOCK PAGE --> et <!-- END CONTENT PAGE -->
Ta paire de balise <div id="bloc"></div> ne sert pas car elle est comprise dans la paire <div id="blockpage-redblock"></div>. Qu'une des deux paires est utile ici.
Je te conseille de mettre des id plus en rapport avec le contenu que par rapport au schema architectural (si c'est pour coller avec les posts précédent c'est très bien )
Maintenant le css !
Se que tu veux pour les deux blocs rouges c'est qu'ils aient un comportement "en line". Tu appliques donc la propriété flex au conteneur parent (ici body), et hop les blocs se placent cote à cote:
body{
display: flex;
}
Ensuite essais de ne pas trop brider tes blocs avec les tailles, laisse leurs de la liberté
Par exemple pour ton liseret, n'impose pas de hauteur, par defaut il va prendre toute la hauteur. Par contre il faut lui indiquer une largeur. Ici tu lui imposes 15%, soit 15% de la largeur de la page, donc en fonction de la largeur de la page le liseret va varier. Si c'est se que tu veux, c'est parfait (mais moi je lui indiquerais une valeur fixe ).
Edit: Le liseret va prendre 15% de la page car son parent est body soit "la page". Quand tu appliques un % à une balise, le % est calculé par rapport au parent. C'est pour ça que les % quand je peux m'en passer je le fais.
Normalement dans 99% des cas, flex suffit pour placer ces blocs. Et dans certains cas exeptionnels tu utilises relative ou absolute. Donc ne te prends pas la tete, et fais tout avec cette page.
- Edité par Mr R0b0t 17 août 2017 à 18:03:32
"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
L'insersion du js se fait plutot après la balise</body>
Non, juste avant. On appelle le JS juste avant de refermer body, mais il ne doit rien y avoir en-dehors.
Pour le reste, je plussoie tout ton commentaire ; mais je continue de dire que ce liseret n'a pas besoin d'être une div vide. Un border-left sur body suffit.
Autre conseil @HaestanLudo : laisse tomber les ID, garde ça pour les ancres. Pour ton CSS, préfère les classes.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Oui, si tu veux arrondir les angles, c'est sûr ; par contre, à chaque fois que je vois ce liseret avec ces angles arrondis, c'est toujours aussi moche.
Pour la couleur, aucun souci on peut changer la couleur, l'épaisseur et le style d'une bordure. Pour l'espace, de façon tout à fait normale, en ajoutant une marge sur le corps. Et pour le réutiliser ben… Il suffit de remettre la propriété ; ça prend une ligne.
Mais on ne peut pas réaliser se qui est demandé dans ce sujet c'est à dire ceci; se qui est dommage
Sinon je suis effectivement d'accord avec toi sur l'utilisation de border-left. Quand on peut se passer d'une balise vide vaut mieux mais parfois s'en passer c'est se prendre la tete.
"Intelligence is the ability to avoid doing work, yet getting the work done." L.T.
Quitte à devoir vraiment faire ça, je ferais avec un pseudo-élément plutôt qu'une balise vide ; propreté, propreté. ^^
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Activité HTML5
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !