Impossible d'insérer un tableau ajustable au contenu en css ?

Bonjour, je me présente :

Guilhem, je suis développeur php, et donc accessoirement html

Je me suis récemment "autoformé" sur les css, ( je n'ai pas un grand niveau, c'est pour cela que je fais appel à vous ) notamment sur votre site, car je trouve en effet que c'est bien plus sympa graphiquement et au niveau de la légéreté du code.

Hors, j'effectue actuellement la refonte d'un site web, et je me retrouve confronté à un souci :

J'ai une bannière "haut" ajustable à la largeur du site, jusque là pas de problème.

en dessous à gauche un menu de 250 px de largeur fixe

A droite de ce menu, le contenu de mes pages qui ne dispose pas de largeur particulière

Pour résumer :

________________________________
| HAUT (140 px de hauteur) |
|_______________________________|
|Menu | Contenu |
| 250 px |(pas de largeur particulière)|
| | |
|_______|_______________________|

En ajoutant du contenu, il n'y a aucun probleme de mise en forme sur mon écran (je dispose d'une haute résolution )

Hors, pour les petites résolutions, ou si ma page de contenu est "large", tout mon "div contenu" passe en dessous comme présenté ci-dessous

________________________________
| HAUT (140 px de hauteur) |
|_______________________________|
|Menu | |
| 250 px | |
| | |
|_______|_______________________|
| Le contenu passe ici |
|_______________________________|

Hors, voici donc mes contraintes :

Mon menu doit faire 250 px de large

Certains bouts de code html qui seront intégrés au contenu sont des tableaux pouvant mesurer 800 px. J'aimerai que le "div contenu" s'intégre à droite du menu quitte à ajouter des barres de défilement en bas



Ci-joint mes fichiers, je vous remercie d'avance pour l'aide éventuelle concernant le fichier css.

Pour le html, je ne l'ai mis qu'à titre d'exemple

je vous invite à consulter mon probleme ici


Merci d'avance

Sous mac je ne vois pas tout soucis ?

En meme temps suis débutant et j'ai peut-etre rien compris a ton soucis

en gros, je montre sur ces exemples que si on met une résolution d'écran basse, que ça soit une largeur en % ou en pixels, ça passe en dessous du menu (et encore, ça dépend le navigateur)

enfin, en gros j'aimerai que le contenu soit toujours à droite du menu, que la largeur soit exprimée en pixels ou non, et ce sous n'importe quel navigateur ou n'importe quelle résolution
je deviens dingue
Modifié par guilhem48 (02 Apr 2010 - 19:11)

Tu peux ajouter la propriété overflow-x: auto; à ton div contenu pour qu'un scroll horizontal apparaisse dans le cas où le contenu est trop large.

Pour le reste tu as juste à laisser la largeur de ton div contenu en auto pour qu'il s'adapte à l'espace restant.

super !!! ça marche sur mozilla


Par contre, sur IE, ça continue à aller en dessous

div#contenu
{


overflow-x: auto;
width: auto;

}

Voila ce que propose un debutant qui peut pas tester sur IE

#haut{
	height:140px;
}
#contenu{
	position:relative;
	top:0;
	margin-left:250px;

}
#menu{
	position:absolute;
	top:140px;
	width:250px;

}

La logique est bonne ?
Modifié par OkinRebor (02 Apr 2010 - 19:31)

Salut et merci pour ton aide !

Le problème est que maintenant sur IE le menu va en plein milieu au dessus du bloc contenu

Je comprends pas le probleme (désolé de vous embêter, mais je suis débutant !!)

par contre en remerciement je viendrai vous aider sur votre forum php

mais là je suis quand meme analyste, donc censé être un minimum logique, et je ne vois aucune logique à ces problèmes ...

Peut etre que c'est IE tout simplement

bonsoir,

si tu fait usage d'un tableau , autant faire un tableau de 2 colonnes , plutot que 2 div avec 1 tableau chacun .

Autrement , il y a de nombreux gabarits ou template (x)html sur le web et ici qui peuvent te servir d'exemple ou de base .

Un width:100% dans un parent sans largeur , ça fait 100% de rien du tout , ou 100% de la largeur de la fenêtre a defaut de trouver autre chose dans certains navigateurs en mode quirks (que je ne cite pas )... , en gros pas fiable du tout si le parent a un width 'null' dans la feuille de style .

Le CSS n'est pas bien compliqué mais demande un petit moment d'apprentissage . Ce n'est pas un langage de programmation non plus .
Il y a quelques bugs et implmentations differentes , plus ou moins complete selon les navigateurs , il y a aussi la notions d'heritage a saisir (cascade).

Quelques tutoriel , bonne lecture et l'analyse de differents gabarits devrait rapidement te permettre de devenir familier de ce mode de mise en forme.
Alsacréations a deja pas mal de contenu , et pour plus débutant , le site du zero vulgarise assez bien les premiere bases.

GC