Positionner des colonnes verticalement sur le forum Création de sites web - 26-10-2014 22:41:39

Misaki_Mei_

Niveau 10

26 octobre 2014 à 22:41:39

Bonsoir
Le titre est un peu bizarre car je ne savais pas quoi mettre.

J'essaie de faire un site (un truc bidon) mais j'ai quelques soucis pour le positionnement

Voila ce que j'essaie de faire:
Bon j'ai fais sa a la va vite mais c'est pour vous montrez ce que je veux faire

Donc voici ce que j'ai fais: http://pastebin.com/FajxyEkS
Et voici ce que sa donne:

J'aimerais bien (si sa ne vous gêne pas de ne pas me donner direct la réponse mais de me donner des pistes pour que je trouve tout seul bon après si vous pouvez pas c'est rien )

1) Est -ce que deja j'ai juste pour les div, header, main, nav...
J'ai un doute pour les div, certain me disent de mettre des div sans rien, d'autre des <div id=".."> et d'autre des <div class".."> du coup je sais pas trop quoi faire

2) Donc quand je lance mon site pour voir ce que sa donne la page me mets les rectangles noirs (que j'ai dessiné sur paint) les uns en dessous des autres, alors que je les veux les uns apres les autres (comme sur mon paint)
J'ai pourtant mis dans le head:
ul {list-style-type: none;}
li {display: inline;}
Mais sa marche pas, alors que ma barre nav elle a bien marché, donc je suppose qu'il faut faire autre chose mais je vois pas

3) J'aimerais les encadrés d'un trais noir fin mais en fesant
"style="border: solid thin; color: black;" dans une balise <ul> sa me l'encardre pas comme je veux, mais je crois avoir trouvé mais je ne suis pas sur

Je pense que je dois faire un css dans le <head> du coup sa donnerais

menu1{

border: black thin solid;
width: ??px;
height: ??px;

}
Est-ce sa ou pas du tout ? Une autre question comment on fais pour savoir le pixel exact a mettre, car c'est super long a chaque fois de changé le nombre pour savoir si c'est bon ou pas .

4) Une dernière question je veux donc que main ce distingue du background, donc en gros comme sur le paint que j'ai fais , je veux faire un fond blanc comme sa sa colle pas avec le background (qui ne sera pas rouge mais sa sera une image )

Je suis désolé je pose vraiment beaucoup de questions qui sont surement bêtes mais bon je n'ai pas d'autre choix vu que c'est les vacances mon prof n'est pas la pour m'expliqué et j'aimerais bien avancé pas que je le laisse 1 semaine sans rien faire (le site)

Je vous remercie d'avance pour votre aide

Pseudo supprimé 27 octobre 2014 à 11:40:18

1) Il faut savoir faire la différence entre 'class' et 'id'. Une 'class' est réutilisable plusieurs fois dans ton code HTML, alors qu'un 'id' sera unique. Par exemple tes rectangles noirs auront certainement tous la même dimension (?), donc tu peux définir une 'class' que tu utiliseras pour chacun d'eux.

CSS:

.miniat{
width: 200px;
height: 200px;
}

HTML:

Ici les deux div ont la même taille, donc on utilise une 'class' commune. Souviens-toi, 'class' peut-être utilisé plusieurs fois, pas 'id'.

_________

2) Tu peux positionner plusieurs blocs les uns à côté des autres à l'aide de 'float'.

CSS:

.miniat{
width: 200px;
height: 200px;
float: left;
}

HTML:

Ici les blocs se mettront côte à côte tant qu'il y a assez d'espace. Par exemple, si ta page fait 1000px de large, tu ne pourras pas aligner plus de 5 blocs de 200px. A toi d'adapter ça à ta situation.
_________

3) Si tu souhaites un trait fin, utilises simplement ceci.

CSS:

.miniat{
border: 1px solid black;
}

Libre à toi d'adapter la taille de la bordure selon tes besoins.
_________

4) Il te suffit d'attribuer un background à ton main.

CSS:

html, body{
background: red;
}

main{
background:white;
}
_________

En espérant t'avoir aidé.

Misaki_Mei_

Niveau 10

27 octobre 2014 à 18:48:09

salut , merci de m'avoir aidé

Cependant j'ai toujours un soucis avec les div (j'ai du mal a comprendre)

Moi ce que je veux faire c'est donc mettre les 3 articles (chaqu'une dans un encadré) ils sont toute de la meme taille (j'ai mal reproduit le rectangle du milieu sur paint mais je veux les faire de la meme taille)

Donc ce que j'ai fais

http://pastebin.com/1HpK8zWF ( j'ai mis  )

Alors la sa marche j'ai bien mes 3 encadrés cote a cote
Le soucis c'est pour le background jaune il m'encadre juste "Les derniers articles" alors que moi je veux tous le main , je comprend pas pourtant j'ai bien fermer la balise , meme avec un margin-bottom: 3px; sa ne veut pas , Je ne sais pas trop la , je vais continuer a cherché en attendant

Juste hs j'aimerais sur une autre page (il y'aura juste 1 texte et 1 image) centré une image,
http://pastebin.com/SxjYchAB
Mais le soucis c'est que malgrès l'image centré mon texte reste en bas (alors que je le veux en haut de la page)
Donc je dois faire un <body> (ou le fond sera noir et il y'aura on message ) et je dois ensuite faire un <main> ou la il'yaura mon image et la je pourrais ensuite le centré convenablement (genre mettre les marges)
J'ai juste ou sa ne marche pas comme sa??

Encore merci pour ton aide

Pseudo supprimé 27 octobre 2014 à 20:17:24

Oui désolé, le fait de positionner des div en float les fait sortir du flux, ce qui explique le problème de background.

Tu peux tout simplement utiliser ceci au lieu du positionnement en float, de cette façon tu n'auras plus de problème:

.menu{
display: inline-block;
}
__________

Tu as mis 3 'class' identiques dans ton code pour tes encadrés. Le principe d'une 'class' est justement de pouvoir réunir des propriétés communes.

Tu peux écrire une seule 'class' .menu pour remplacer les 3 actuelles (.menu1 .menu2 .menu3). Lorsque tu as des éléments qui ont les mêmes propriétés, tu les réunis dans une même 'class', pas besoin d'en écrire 3.
__________

Il me semble que la balise <font> est dépréciée en HTML5, donc plus utilisée. Si tu souhaites afficher du texte, utilises plutôt <p>.

L'attribut 'alt' est obligatoire sur les images. A laisser vide si il s'agit d'une image de décoration, sinon il faut préciser. Et pas besoin de '/' à la fin de la balise en HTML5.

<img src="image.png" alt="">
__________

Tu peux attribuer un 'id' à ton image et spécifier qu'elle doit se comporter comme un 'block'. De cette façon, ton texte sera au dessus de ton image.

Pseudo supprimé 27 octobre 2014 à 22:56:05

Deja je te conseille d'avoir une feuille CSS a part car ta feuille de code devient longue

Et ensuite pour que tes cadres soient alignés essaye : display: inline-border;

Misaki_Mei_

Niveau 10

27 octobre 2014 à 23:27:16

House_Arryn > Je n'ai pas appris a faire sa (mon prof nenous en a jamais parlé d'ailleurs , donc je sais pas trop comment faire ( au pire je verrais sa avec mon prof je lui en parlerais)

Sinon c'est normal que mes 2 derniers cadres soit décalé
J'ai essayé de mettre des <br /> pour le 1er encadrement mais tout ce suit , meme en reglant les marges du haut de chaqu'une sa ne marche pas , et j'ai lu tout mon pdf mais rien ne parle de sa (je crois que le prof n'en a pas encore parlé)

Sinon oui j'ai enlevé le float et j'ai mis a la place le display

Pour le <font > je l'avais mis pour une raison mais je ne m'en rappelle plus pourquoi mais j'avais lu sa sur le cours des css c'est pour sa que je l'ai mis, je demanderais au prof si c'est obsolète ou pas

Pseudo supprimé 28 octobre 2014 à 09:24:34

Je voulais dire display: inline-block; *

Et sinon je sais pas quoi te dire :/

Et pour finir ton cadre jaune pour qu'il soit plis esthetique je te conseille de lui appliquer un border-radius: 10px;

[NeoShock]

Niveau 10

28 octobre 2014 à 10:20:08

Oui le <font> est devenu obsolète avec HTML5

Tu peux nous ré-envoyer ton code comme il est maintenant ?

Misaki_Mei_

Niveau 10

28 octobre 2014 à 12:15:43

House_Arryn> Oui j'avais bien mis block
Apres pour l’esthétique sa va pas rester comme sa le jaune le virerai, idem les cadres seront centré, la police sera autrement... la c'est juste plus un repère pour bien structuré (c'est pour me donner une idée ) En tout cas merci pour le radius , c'est vrai que les bords arrondis c'est assez sympa..

http://pastebin.com/hrKJ0cyA Voila sa c'est pour le site

Sinon pour le <font> j'ai mis <p> a la place sa ma donner ce que je voulais j'ai reussi donc sa c'est ok