Aller au contenu

Sujets conseillés

Posté

Bonjour,

Je suis en train de faire un site et j'essaie de me mettre au CSS. Jusqu'a présent j'utilisais des <table>...

Bref... je m'y mets doucement. Pour ce faire je suis allé lire les articles du Hub et d'Alsacreations, notamment le modèle suivant : http://css.alsacreations.com/modeles/modele3.htm

Ma question est simple : comment faire en sorte que, si le contenu du menu de gauche contient plus de lignes que la partie centrale, il ne chevauche pas brutalement le pied de page ? (et que le tout se redimensionne proprement).

Merci

Posté
Ma question est simple : comment faire en sorte que, si le contenu du menu de gauche contient plus de lignes que la partie centrale, il ne chevauche pas brutalement le pied de page ? (et que le tout se redimensionne proprement).

Pour "pousser" un peu plus loin, je voudrais faire en sorte que ces deux colonnes (appelons-les "menu" et "contenu") aient exactement la même taille, quelque soit le contenu de l'une ou de l'autre...

Posté

Je ne sais pas si j'ia bien compris mais pour qu'il n'y est pas de chevauchement il faut que ton footer soit dans une troisieme div et pas dans la meme div que ta partie centrale.

Tu peux utiliser la proprieté clear:both pour ton footer, il n'y aura rien ni à droite, ni à

gauche et donc pas de chevauchement. (en principe :) )

Posté

Salut NorSeb ;)

Pour qu'un "contenu" et un "menu" (bref, 2 colonnes côte à côte) aient la même taille, c'est à la fois très simple, mais très pointilleux.

Par exemple, un "height:100%" sur chacun marche très bien.... à la condition que la taille de l'élément parent (souvent il s'agit du body) ait été spécifiée.

Ben oui, sinon le navigateur calcule 100% de quoi ? ;)

Quant au pied de page, c'est typiquement le style de conteneur à qui il faut appliquer un "clear:both" pour éviter un chevauchement. La règle clear force le passage à la ligne en annulant un éventuel float.

Bon courage, et bienvenue dans le monde magique des CSS :D

PS: halte à la "divite", un footer, selon ce qu'il contient comme infos, peut très bien trouver sa place dans une balise <address> par exemple ;)

Posté

Salut,

Si tu as seulement besoin qu'on ait l'impression visuelle que le "menu" et le "contenu" aient la même hauteur, tu peux peut-être utiliser la méthodes des "fausses colonnes" de Dan Cederholm. Tu en trouveras une traduction sur Pompage.

Posté

Bonjour,

Merci beaucoup pour vos réponses... Je vais pouvoir avancer :)

Pour qu'un "contenu" et un "menu" (bref, 2 colonnes côte à côte) aient la même taille, c'est à la fois très simple, mais très pointilleux.

Et bé ! Ca commence bien :P

Par exemple, un "height:100%" sur chacun marche très bien.... à la condition que la taille de l'élément parent (souvent il s'agit du body) ait été spécifiée.

Ben oui, sinon le navigateur calcule 100% de quoi ? ;)

Quant au pied de page, c'est typiquement le style de conteneur à qui il faut appliquer un "clear:both" pour éviter un chevauchement. La règle clear force le passage à la ligne en annulant un éventuel float.

Je vais essayer ca tout de suite...

Bon courage, et bienvenue dans le monde magique des CSS :D

Pour l'instant c'est plutôt : mais qu'est-ce que je viens faire dans cette galère.

C'est un peu comme la première fois qu'on conduit à gauche tu vois ? Tu sais conduire mais il faut quand même tout réapprendre.

Salut,

Si tu as seulement besoin qu'on ait l'impression visuelle que le "menu" et le "contenu" aient la même hauteur, tu peux peut-être utiliser la méthodes des "fausses colonnes" de Dan Cederholm. Tu en trouveras une traduction sur Pompage.

<{POST_SNAPBACK}>

Je vais regarder ca mais malheureusement (pour moi) il ne s'agit pas que d'une impression visuelle mais une taille concrète.

Merci encore :D

Posté
Pour l'instant c'est plutôt : mais qu'est-ce que je viens faire dans cette galère.

Comme je te comprends NorSeb :D

Tu verras, tu y arriveras, en t'inspirant de modèles, en lisant et relisant les excellents sites cités plus haut, en faisant des tests.

Bon courage :D

Posté
Pour "pousser" un peu plus loin, je voudrais faire en sorte que ces deux colonnes (appelons-les "menu" et "contenu") aient exactement la même taille, quelque soit le contenu de l'une ou de l'autre...

<{POST_SNAPBACK}>

Hello,

Tu cherches quelquechose dans ce genre ? :)

http://forum.alsacreations.com/faq/#item17

Posté

Merci Sibelius :)

Ca va me faire encore un peu plus de lecture... c'est bien.

Je suis en train de regarder quelques codes sources ;) Ca instruit.

Posté
Je suis en train de regarder quelques codes sources ;) Ca instruit.

<{POST_SNAPBACK}>

Oui et ca embrouille aussi :boude: Je touche au but mais à chaque fois que je modifie une chose, ca me fout le bazar en cascade...

Prenons un cas concret : http://pompage.net/pompe/cssdezero-13/

Pouvez-vous m'expliquer comment, sur cette page, les bloc "Fiche technique" et "A propos de l'auteur" sont alignés l'un en dessous de l'autre ??

Merci.

Posté

ça parait simple comme réponse:

Ce sont 2 blocs consecutifs dans le flux html donc l'un apres l'autre et comme ce sont des <div>, éléments de type bloc ils se mettent l'un en dessous de l'autre

Veuillez vous connecter pour commenter

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



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