28221 sujets

CSS et mise en forme, CSS3

[Résolu] Dois-je utiliser div ou galerie? ou autre

Pages :
Bonjour

Comme je l'ai mentionné dans mon dernier post, je travaille ma nouvelle version de site web. Pour le moment rien n'est terminé et les images sont encore à l'essaies.

Enfin, l'adresse est www.mikimya.com/v5

J'aimerais créer deux petits rectangle qui se situeront dans le bas de mon texte. Je ne sais pas si l'idée de créer de nouvelles div est bonne... ! L'emplacement des div à coté me semble difficile pour moi.

J'ai tester les d,dt... et ca ne semble pas s'intégrer correctement.

Voila un apperçu du résultat que je veux avoir ( image dont la qualité est mauvaise )

Quel moyen en css dois-je prendre pour réaliser ces deux petits rectangle gris en tenant compte qu'ils vont peut-être contenir des images, quel est le code à ajouter?

Merci

http://www.mikimya.com/Image01.jpg
Modifié le 14 Nov 2004 - 21:47
le mieux est de creer div avec une class boite.
Ces boites seront flottantes, d'une largeur défini avec un hr à la fin de ta derniere boite.

A toi de manipuler maintenant.
Un hr te permet de cesser le flux courant par exmple lorsque tes boites sont en flottantes.

Tu lui donnes les proprietes clear:both par exemple.
Je t'ai posé une question sur ton mail perso car ma question n'a rien à faire dans ce forum.
Je t'ai répondu pour la question

Enfin, es-ce possible de voir un exemple de code lorsque le hr est inséré... Smiley smile Je veux comprendre visuellement ! Smiley smile
Va voir sur ma principal de site en phase d'essai.
Je t'ai envoye un nouveau mail
Modifié le 14 Nov 2004 - 10:02
Administrateur
Rapidement :

a écrit :
Dois-je utiliser div ou galerie?

C'est quoi "galerie" ? c'est une balise ? Smiley eyecrazy

a écrit :
Un hr te permet de cesser le flux courant par exmple lorsque tes boites sont en flottantes.

Houla non : <hr /> est simplement une balise de ligne horizontale (horizontal rule). Elle ne fait rien sortir du flux.

a écrit :
Tu lui donnes les proprietes clear:both par exemple.

Là d'accord Smiley cligne Effectivement, c'est la propriété "clear" qui gère le flux autour des éléments flottants (mais rien n'oblige à l'appliquer sur <hr />)
La galerie, je parlais = bl,bt...

Enfin, j'aimerais avoir un model plus précis , est-ce possible d'avoir un morceau de code qui se base à partir de ma petite intro.. et de voir comment je pourrais placer ces petit rectangle ?
Administrateur
Mikimya a écrit :
La galerie, je parlais = bl,bt...

Enfin, j'aimerais avoir un model plus précis , est-ce possible d'avoir un morceau de code qui se base à partir de ma petite intro.. et de voir comment je pourrais placer ces petit rectangle ?

<dl> indique une liste de définition, c'est une structure qui n'a rien à voir avec ce que tu veux faire je pense.
Un <div> me semble apparemment l'élément le plus adapté.
Ensuite, il suffit simplement de donner des dimensions à tes deux blocs et de les placer en flottant comme dans le lien explicatif que tu as donné.
http://www.mikimya.com/v5/

Voici ou j'en suis rendu, j'ai beaucoup de misère à faire ce que j'ai montré plus haut.
Mon pied de page bouge et ne s'ajuste plus.

Enfin, j'aimerais beaucoup avoir de l'aide détaillé dans le code svp.
Je voudrais comprendre ce qu'il se passe.

Il est tard au canada
Je répondrai demain

:) Bonne nuit ! Et bon début de journée au francais !
Administrateur
Mikimya a écrit :
http://www.mikimya.com/v5/

Voici ou j'en suis rendu, j'ai beaucoup de misère à faire ce que j'ai montré plus haut.
Mon pied de page bouge et ne s'ajuste plus.

Oui voici ta classe "float" :
.float {
	margin: 1em 0;
	background-color: #3399CC;
	width: 25%;
	clear: both;
	display: block;
}

- si tu appliques un clear, tu empêche justement les blocs d'être les uns à côté des autres (c'est justement fait pour ça !)
- display block est inutile : les <div> sont déjà des balises bloc
- .... où est la propriété "float" dans tout ça ??

Il faut que tu reprennes proprement les positionnement flottants car dans ton cas tes divs ne sont pas en flottant ! (un simple float:left; suffira)

La solution est toute simple, mais je péfère que tu te renseignes encore sur les positionnements avant de te la livrer sur un plateau Smiley cligne
Administrateur
Mikimya a écrit :
http://www.mikimya.com/v5/

Voila pour le pied. Pour les rectangle , je n'arrive pas à ce qu'ils soient à coté de l'autres.

Oui, ils ne sont toujours pas en flottant ! Smiley eyecrazy 
.float {
	margin: 1em 0;
	background-color: #3399CC;
	width: 25%;
}


Si tu ne leur donnes pas la propriété "float", ils ne risquent pas de s'afficher en flottant (l'un à côté de l'autre)
Woww, faut lire un peu ce qu'on te raconte hein, sinon ça risque pas de marcher Smiley cligne

Si tu lis au dessus (plusieurs post le disent), "il faut utiliser les float"

Tu as 2 <div class="float"> qui contient des paragraphes, tu veux que ces <div> soient cote à cote, il faut donc le mettre en flottant avec float: left;

Parcours un peu le forum, il y a différents topic traitant de ce sujet.
Donc maintenant il faut utiliser un élément pour faire que le pied de page se mette où il faut, ça a été mentionné plein de fois déjà sur le forum... enfin bon, je me sens l'âme généreuse :
tu ajoutes un <hr class="clear" /> sous tes 2 divisions
et dans les CSS :

hr.clear
{
 clear: both ;
 visibility: hidden ;
}


Il ne te reste plus qu'à jouer sur les marges pour obtenir le même rendu que sur ton image, mais je vais pas tout te faire non plus, sinon ça sert à rien.
Pages :
Sujet clos
Aller à