[xhtml/css] Equivalent des cadres html

**ymoreau** · 15/06/2006, 21h41

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 :

**titoumimi** · 15/06/2006, 21h46

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

**Swoög** · 15/06/2006, 21h47

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

**ymoreau** · 15/06/2006, 22h59

Je parlais de la nouvelle version de mon site =)

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

**ymoreau** · 16/06/2006, 03h52

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.

**Swoög** · 16/06/2006, 08h58

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

**ymoreau** · 16/06/2006, 15h39

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 ?

**Swoög** · 16/06/2006, 16h16

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...

**francis m** · 16/06/2006, 23h47

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)

**ymoreau** · 17/06/2006, 01h23

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.

**ymoreau** · 26/06/2006, 18h51

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

This Page Is Valid XHTML 1.0 Strict!

**ymoreau** · 28/06/2006, 03h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**ymoreau** · 07/07/2006, 04h05

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 =/

**ymoreau** · 07/07/2006, 04h09

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.

[xhtml/css] Equivalent des cadres html

CSS

Discussions similaires

Partager

Partager