Jump to content

positionnement vertical


Recommended Posts

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 ! :-)

Link to post
Share on other 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 ?

Link to post
Share on other 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 ?

Link to post
Share on other 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:

Link to post
Share on other 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...

Link to post
Share on other 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: .

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...