[xhtml/css] Equivalent des cadres html

Bonjour j'ai recherché un peu partout et je ne trouve jamais de réponse très claire. J'ai un site en HTML, qui utilisent des cadres afin d'avoir un menu indépendant de la page contenant le texte.
Mais j'ai lu (et remarqué) plusieurs inconvénients aux cadres HTML.
De plus j'aimerais pour la nouvelle version utiliser le CSS et XHTML, les cadres n'en font pas partie.

J'aimerais savoir s'il existe une alternative à peu près équivalent aux cadres. Le but étant de faire défiler la page sans faire défiler le menu.

J'ai essayé avec la balise <object>, mais elle ne me permet pas de faire tout ce que je veux, en effet il y a également un bandeau vertival ainsi qu'un titre qui ne doivent pas bouger non plus.
En gros ça ressemble à ça :

http://bataillonthrash.free.fr/plan_site_v3.png

Pour apprendre comment faire une mise en page sans tableaux, voici un tuto :
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

Ensuite, dans tes div, pour intégrer des barres de défilement, il faudra que tu regarde du coté de la propriété CSS overflow ;)

OUi, bien sûr c'est tout à fait possible : penche toi sur la propriété overflow ;)

au fait, si par nouvelle version de CSS, tu veux dire la version 3, n'oublie pas qu'elle n'est pas encore au status de Recommendation, elle n'est pas terminée ;)

Je parlais de la nouvelle version de mon site =)

Merci de vos réponses, je vais regarder de ce côté là.

Bon ça marche très bien pour la mise en forme, c'est niquel. Au niveau des scrollbars également.

Par contre il me reste un soucis ^^
Avec les frames on pouvait donner des dimensions et également mettre ' * ' pour dire au cadre d'occuper l'espace restant. Avec les <div> j'ai rien vu qui puisse faire équivalent, je suis obligé de donner une dimension fixe à mon site alors ? :/

et autre chose est-il possible (comme dans les <object>) de charger le contenu à partir d'un fichier extérieur (en html) ? ça éviterait de mettre la forme et le fond dans le même panier.

pour charger un fichier extérieur, non, ça ne vas pas être possible, excepté via un langage côté serveur.

Mais si tu fais ça bien, sans tableaux (voir lien de titoumimi pour "comment faire", et celui dans ma signature pour "pourquoi le faire" ;) ), alors le code dédié à la mise en page restera peu important ^^

pour ce qui est de prendre tout l'espace de la page, tu peux tout à fait spécifier des tailles en pourcentages pour que les pourcentages englobent tout l'écran ;)

L'intérêt c'était aussi de séparer le menu et les logos de présentation, parceque là sinon je suis obligé de copier/coller toute cette partie dans chaque page. A moins que l'on puisse carrément créer un bloc image-liens dans le CSS mais si j'ai bien compris le CSS ne sert qu'à la mise en forme, pas au contenu.

L'inconvénient des pourcentages c'est qu'on doit avoir uniquement ça si on s'en sert. Avec mes cadres j'avais le menu de hauteur fixe, et le bandeau à gauche de largeur fixe. La page s'étendait ensuite sur tout l'espace restant, ça s'adaptait à toutes les résolutions.
Avec les pourcentages je suis obligé d'avoir quelque chose de totalement proportionnel. Pour les images qui seront utilisées dans le menu et le bandeau leur taille ne sera pas proportionnelle à la page.
A moins que l'on puisse adapter la taille d'une image par rapport à la taille du bloc <div> qui la contient ?

Citation:

---

Envoyé par YoniBlond

Pour les images qui seront utilisées dans le menu et le bandeau leur taille ne sera pas proportionnelle à la page.
A moins que l'on puisse adapter la taille d'une image par rapport à la taille du bloc <div> qui la contient ?

---

oui, il suffit de préciser la taille en pourcentage (c'est par rapport au conteneur ;) )

pour le reste, effectivement, il va falloir copier/coller...

à moins que tu n'utilises un langage côté serveur (exemple PHP) qui permette d'inclure des fichiers les uns dans les autres...

il y a une solution pour que ton menu à gauche ait toujours la même largeur, et que le reste soit utilisé pour ton contenu

• en mettant une marge gauche à ton body

• en positionnant ton menu en absolute gauche à 0

(c'est ce que j'ai fait sur mon site)

Ah oui c'est une bonne idée, j'ai jamais joué avec les marges. Enfin de toute façon j'ai parlé trop vite, pour cette nouvelle version du site les images devront coller à tout l'écran donc finalement je n'ai pas besoin de dimensions absolues.
Mais merci quand même.

et merci à Swoög, je croyais que les pourcentages sur les tailles d'image s'appliquaient à la dimension de l'image, là c'est niquel pour mon utilisation.

Ah j'ai encore un problème, tout ça marchait très bien avec un en-tête HTML

Code:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

---

Mais je désirais faire le site en XHTML, j'ai d'ailleurs respecté toutes les consignes de l'XHTML, sauf que quand je met l'en tête correspondant...

Code:

---

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

---

Ma mise en page ne marche plus :/
J'utilise pas mal de <div> imbriqués, les dimensions (en %) de celui qui englobe tout fonctionnent j'ai essayé, par contre les dimensions des autres (en %) ne fonctionnent pas.

C'est disposé comme ça (j'ai supprimé le contenu) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<body> <div id="page">   <div id="menu"> </div>   <div id="news"> <div id="logoNews"> </div> <div id="cadreNews"> </div> <div id="bordureNews"> </div> </div>   <div id="principal"> <div id="bordureMenu"> </div> <div id="cadrePrincipal"> </div> </div>   </div> </body>

---

Donc en gros la même chose interprétée en HTML marche et en XHTML non, pourtant je vois pas où je ne respecte pas l'XHTML.

Chaque id dans CSS a cette tête là :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div#news { float:left; width:31%; height:78%; overflow:hidden; }   div#cadreNews { float:left; width:92%; height:83%; overflow:auto; background-color : black; }

---

J'ai oublié de dire que ma page passe comme valide au test W3C

Citation:

---

This Page Is Valid XHTML 1.0 Strict!

---

Bon après quelques tests, finalement dés qu'il y a un DOCTYPE la mise en page ne marche plus
avec des résultats légèrement différents selon le type.

Avec le DOCTYPE XHTML 1

Code:

---

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

---

Les largeurs fonctionnent mais la hauteur n'est pas bloquée, il n'y a pas utilisation des scroll-bars...

Et sans aucun DOCTYPE tout marche niquel

Up, personne ne peut m'éclairer ? =(

c'est quand même bète, la page passe le validateur W3C avec le doctype mais la mise en page marche pas, et sans doctype tout marche bien...

C'est bizarre que seule la hauteur ne soit pas prise en compte, ça s'adapte au contenu à la place de ma dimension =/

Ouiiiiiiiiii :D

Je viens de voir la solution dans un autre topic, il fallait définir le body aux dimensions 100%.

Ah ça fait du bien après tout ce temps.