Aller au contenu

positionnement vertical


Gakman

Sujets conseillés

Salut à tous.

Alors je souhaiterais placer correctement certains éléments de ma page.

En fait j'ai une colonne et dedans je voudrais une case alignée en haut et une autre en bas. Seulement j'ai essayé de créer un un tableau à 3 lignes en spécifiant la hauteur des 2 extrèmes mais celle du milieu ne s'agrandit pas, il apparait un vide au-dessus et en-dessous du tableau si la colonne d'à coté est plus longue.

Comment faire pour que l'espace entre mes 2 blocs soi de la bonne hauteur pour remplir cette colonne ?

Petit dessin explicatif :

--------

|...|...| = 2 colonnes

|...|...|

|...|...|

--------

dans ma 1e colonne il y a 2 blocs (image + texte chaque) que je veux aligner 1 en haut, l'autre en bas :

--------

|x1|...|

|...|...|

|x2|...|

--------

et ce quelque soit la taille de la colonne de droite, donc il faudrait que l'espace entre les 2 augmente si elle est plus grande.

J'ai donc essayé avec u ntableau mais je n'ai pas réussi, et après moultes recherches je n'ai pas trouvé ma réponse.

Merci de votre aide ! :-)

Lien vers le commentaire
Partager sur d’autres sites

je crois que ce n'est pas clair.

En xhtml / CSS, il est assez délicat de gérer les hauteurs.

Il y a la soution des tableaux, mais tu n'es plus dans la norme ni les recommandations W3C.

pourquoi ne fais tu pas 2 tableaux, un pour la gauche et un pour la droite ?

Lien vers le commentaire
Partager sur d’autres sites

je crois que ce n'est pas clair.

En xhtml / CSS, il est assez délicat de gérer les hauteurs.

Il y a la soution des tableaux, mais tu n'es plus dans la norme ni les recommandations W3C.

pourquoi ne fais tu pas 2 tableaux, un pour la gauche et un pour la droite ?

Heu ... pas d'accord. Il est déconseillé d'utiliser les tableaux pour la mise en page quand on peut s'en passer. Cependant, l'utilisation d'un tableau de mise en page ne rendra pas le site invalide (si on les a utilisés correctement, évidemment) et ne l'empêche pas de respecter les spécifications HTML et CSS du W3C !

Il existe des cas où les tableaux sont la solution la plus adéquate, car plus simples et plus robustes qu'un bidouillage CSS, notamment lorsqu'on veut obtenir plusieurs colonnes de même hauteur ...

Sinon, Gakman, est-ce que tu nous parles de la mise en page générale du site, ou d'une partie de celui-ci ?

Lien vers le commentaire
Partager sur d’autres sites

Merci de vos réponses. :)

Alors j'essaye d'expliquer plus clairement : ;)

_ le site a 2 parties (je vais les appeler colonnes pour la suite) : un menu à gauche et le contenu à droite.

_ je voudrais que le menu ai 2 parties et que la 1e soit collée en haut de la colonne menu et la 2e partie en bas de cette colonne.

Donc je ne sait pas comment considérer la chose. J'ai essayé de créer un tableau de 100% de la colonne avec 3 lignes d'1 cellule chaque, en fixant la taille de celle du haut et de celle du bas, en me disant que celle du milieu prendrait la taille nécessaire pour combler l'espace, mais ça ce marche pas elle reste toujours de la même taille, et donc si le contenu (l'autre colonne) est plus long que le menu, le menu laisse apparaître un espace en haut et/ou en bas au lieu d'ajuster la longueur de l'espace entre les 2 parties.

Pour l'instant je voudrais juste que ça marche ! Que se soit en tableaux ou en CSS, même si se n'est pas parfait niveau recommendations W3C (utilisation de tableaux), je prends toutes les propositions !

Merci.

J'ai réussi à être plus clair ? :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites

Entièrement d'accord avec sopo...

Gakman :

"Que se soit en tableaux ou en CSS" => rien à voir...

On parle de tableau ou de div, mais dans les 2 cas, on utilise le css. (je te conseille un petit tour sur ce site, cela t'aidera dans la compréhension de tout ça...)

Pour ce qui est de ton problème, voici un exemple d'une méthode possible et très simple :

- dans ton code html, pour ton menu :

CODE
<div id="menu">

<div id="haut"></div>

<div id="bas"></div>

</div>

- dans ton code css :

CODE
#menu {

width: 200px;

height: 800px;

}

#haut {

width: 200px;

height: 100px;

}

#bas {

width: 200px;

height: 100px;

margin-top: 600px;

}

Je re précise bien qu'il s'agit d'un exemple d'une méthode possible, avec ses avantages et ses incovénients, en fonction de ton besoin exact...

Lien vers le commentaire
Partager sur d’autres sites

Merci de ta réponse.

En fait ta solution ne correspond pas car je souhaite une colonne avec une taille variable, or là elle est fixée. Justement la taille cette colonne (de gauche) doit être la même que la taille de la 2e colonne (de droite), et mes 2 parties s'aligner une en haut et l'autre en bas de la colonne. Ainsi l'espace entre les 2 grandira si la colonne de droite est plus longue.

J'arrive à être clair ? Je sais que se n'est pas facile :nonono: .

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...