18041 sujets

Questions générales et questions de débutants

Positionnement box

bonjour
voilà ma prise de tête de la semaine .....

http://codepen.io/vamos/pen/YpxqMY

j'ai mis des borders colorées pour visualiser mon souci

question 1 : je n'arrive pas à positionner la boite jaune en bas à droite de mon conteneur global Smiley confus

question 2 : pourquoi mes boites , qui sont dimensionnées en 50%-50% du conteneur , ne font pas ......100% quand elles sont côte à côte. On voit bien qu'elles dépassent de la border rouge du conteneur global.

j'ai bien compulsé tous les tutos , mammouthland , openclass , ma cousine , et une voyante , mais je trouve pas.
Aspirine time , je sèche
Bonjour,

Je vais essayer de t'aider.

Question 1
Ta <section> a une 'height' fixe, donc bien sûr que ça va dépasser. Faut pas fixer la hauteur.

Question 2:
#pompe et #cheminé met un display: inline-block
Il y a tout à refaire mais je vais te donner un bon conseil pour la mise en page de ton site. C'est l'utilisation d'une grille. Je te propose un exemple simple d'une grille qui correspond à ton désign:

https://jsfiddle.net/01msxh9x/

Déplace la barre du milieu vers la droite pour réduire sur la largeur et regarde le comportement. C'est une grille responsive de 12 colonnes. Une grille peut simplifier vraiment la vie! Il suffit juste ensuite de "placer" ton contenu dans des colonnes.
pourquoi le fait d'avoir un heignt fixe impliquerait que les boxs dépassent ????
si je demande 50% + 50% de n'importe quelle valeur , chez moi ça ne fait toujours que 100%
est-ce que le CSS fonctionne différemment ?
j'ai essayé ta méthode , mais ça n'a pas l'air de fonctionner

je vais essayer également ton exemple de grille , et je te remercie pour le tuyau

par contre , pourrais-tu argumenter le "il y a tout à refaire"
j'apprends seul HTML et CSS , et je prends volontiers tous les conseils si ma syntaxe ou ma logique de'écriture n'est pas bonne
Oui je sais que tu débutes, comme moi d'ailleurs, mais le html n'est pas correct. Il y vraiment tout à refaire. Tu utilises les mauvaises balises et tu imbriques mal. Par exemple, tu peux pas avoir un <h1> dans un </a>, parce que tu ne peux pas mettre une balise de type 'block' dans un balise 'inline'. Pour les listes c'est <ul> suivi de <li>. Il ne devrait pas avoir de <br> et chaque catégorie ou rubrique devrait être dans un 'li'. Les 'href' des 'a' sont pas correct. Le CSS applique dans la ballise est déconséillé. Il y a 3 façons de rajouter du CSS: dans la balise de l'élement avec l'attribut 'style', dans la balise 'head' et dans un fichier externe. Le dernier est conseillé, le fichier externe, parce que le css appliqué dans la balise de l'élément prendra le dessus sur le css appliqué dans la balise 'head' qui prendra le dessus du css appliqué dans le fichier externe. Et si en plus, tu ulises jQuery pour une manipulation du DOM, lui il va rajouter du CSS en ligne, donc je sais pas quelle marmelade ça va donné. Aussi les IDs pour cibler les éléments, c'est une mauvais pratique à cause de problèmes de spécificités. Utilises plutôt des classes.
vamos a écrit :
par contre , pourrais-tu argumenter le "il y a tout à refaire".
j'apprends seul HTML et CSS , et je prends volontiers tous les conseils si ma syntaxe ou ma logique de'écriture n'est pas bonne

Lorsqu'on débute, il est essentiel de ne pas être trop ambitieux (et ce n'est pas une critique...) mais de commencer plutôt par une toute petite page HTML affichant le classique texte de bienvenue, en s'aidant de la pléthore de tutoriels disponibles sur le net.
Il est en effe essentiel de bien comprendre :
- ce que sont les sections HTML / HEAD / BODY d'une page
- puis quelles sont les balises que l'on peut (ou non) ajouter dans chacune de ces sections
- avant d'affiner le tout et comprendre quelles sont les balises que l'on peut ou non insérer dans un paragraphe, une liste, une table, etc.
Dans cet ordre là.
Oublies javascript, JQuery et autres joyeusetés, tant que tu ne maîtriseras pas les fondamentaux de cette structure.
Ensuite, investis dans CSS pour positionner tes blocs et texte (et je parle bien de CSS, pas de LESS et autres moteurs qui occultent le ba-ba de ce que sont les balises de mise en forme).
Au fur et à mesure que tu montes ta page HTML et découvre son architecture, tu lances une validation sur le service mis à disposition par le W3C à cette adresse :
W3C Markup Validation Service
Chaque erreur sera signalée.
Tu corriges, tu testes, tu corriges, tu testes... jusqu'à ce que mort s'ensuivre (enfin... presque Smiley biggrin ).
Ceux qui aujourd'hui maîtrisent les domaines HTML / CSS et consorts ont tous commencé de cette façon et appris par strates successives, par essai / échec.
Ce n'est absolument pas une leçon de morale que je te livre ici, mais simplement un retour d'expérience, afin d'éviter que tu t'embrouilles dans tout un tas de technos et spécifications mélangées au petit bonheur la chance, ou par copier / coller récupéré depuis le web avec pour résultat que tu ne pourras pas aller à l'essentiel pour comprendre / déboguer, simplement parce que les bases ne seront pas maîtrisées.
Y aller sans rigueur, c'est un peu comme au loto... à force de modifier / rejouer les combinaisons, il arrive parfois que ça fonctionne... ou pas.
Modifié par sepecat (26 Nov 2016 - 18:32)
Bonsoir Vamos,
je ne suis pas certain de tout y comprendre de toi.

Parfois un simple retour à la ligne du code .html impose au nav-web (FireFox) de considérer un espace horizontal de 4px entre des display:inline-block. Plus un margin, plus un padding, plus un border qui ajoutent autant de px.

Donc un retour à la ligne immanquable ... malgré 2 x width:50%
Modifié par pictural (27 Nov 2016 - 03:43)
Sujet clos
Aller à