[HTML] Utilisation des cadres

Version imprimable

15/11/2006, 22h25
Chibi_boy

1 pièce(s) jointe(s)

[HTML] Utilisation des cadres

Bonjour à tous !

Bon voilà ma question est un peu compliquée, je vais essayer de vous expliquer simplement mon problème.
En fait, je voudrais pouvoir afficher le contenu d'une page (page fonctionnant avec cadres) au milieu de l'écran avec des espaces de chaque côté pour qu'on voit le fond dérrière.
J'avais pensé à créer une page avec un cadre au milieu de l'écran pour charger l'autre page de cadres qui ferait son travail normalement.
Seulement voilà, je ne sais pas si c'est possible, et je n'arrive pas vraiment à comprendre comment je pourrais créer un cadre au centre d'une page avec des espaces de chaque côté. (non définis par des cadres)

Je ne sais pas si vous comprennez ma question... Alors je vous ai aussi fait un petit dessin :

Pièce jointe 6720

J'attends vos conseil avisés ! :mrgreen:

Merci d'avance
15/11/2006, 23h47
Neroptik

Ton probleme est dans la redaction de ton code css ?
16/11/2006, 00h00
stanley

Tu pourrais rendre ta page dynamique, par exemple utiliser les pseudo-frames (pseudo-cadres) en PHP, tu pourras garder des parties fixes dans ta page est une partie variable au centre dans laquelle le code chargera la page voulue au moment du clik sur un lien.

donc la page du centre sera entièrement personalisable et donc tu pourra laisser les espaces dont tu parle

:salut:
ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
 
<body>
<div style="background-color:#f00; padding:20px;">
	<div style="background-color:#CCFF66;">rfhfghyy</div>	
	<div style="float:left; background-color:#CC0066; width:50%;">rfhfghyy</div>
	<div style="float:right; background-color:#00FF66; width:50%;">rfhfghyy</div>	
	<div style="clear:both;"></div>
</div>
</body>
</html>

???

16/11/2006, 18h21
Chibi_boy

Bon je vais essayer de tous vous répondre !

Neroptik : Non c'est un problème d'utilisation des cadres.

stanley : Euh, je ne suis pas à un niveau très élevé pour l'instant et pour le peu de PHP que j'ai fait, je ne pense pas pouvoir créer une page comme celle-là même si c'est vrai que créer un site dynamique m'intéresserait beaucoup pour ajouter facilement des "news" plutôt que de devoir éditer la page... (si quelqu'un a une astuce je suis preneur d'ailleurs ^^)

trotters213 : Oui c'est ce que je voulais faire ! Si je comprends bien j'aurais du inclure "float:left" et "float:right" ?
16/11/2006, 18h35
Neroptik

Tu a essayer de centrer un tableau par dessus tout ca (d'une taille inferieur a ton cadre) et tu habille le background du Tableau dans ton css grace a un id, ensuite tes zones sont tracée et avec des jeu de marge tu pourra tout placé comme tu le veux.
Ou deuxieme solution tu gere tout en <div>, en leur affectant un id.
Dans tous les cas tu est obligé de passé par la meme si tu veux faire un site dynamique fonctionnant avec sql.
16/11/2006, 23h11
Chibi_boy

Après avoir un tout petit réfléchis sur le code proposé par trotters213, construire tout ça avec des tableaux ne me plaît pas beaucoup... Enfin, je veux dire que je vais plutôt me pencher sur les CSS, chose que j'ai, à tord je sais, un peu mis de côté, mais bon je n'ai pas très bien compris leur fonctionnement... ^^
17/11/2006, 08h35
trotters213

L'interêt des CSS est tout bête : ça permet de séparer le fond de le forme.
Cherches sur Google tu trouveras vite de nombreux tuto ;)
Ton problème est-il résolu ?

PS : en effet tu as raison : oubli les tabeaux qui ne sont pas fait pour ça.
17/11/2006, 17h44
Chibi_boy
Hum... Après avoir lu quelques tutoriels/articles sur les CSS, j'ai essayé d'utiliser une CSS.
Voilà le code de ma CSS :
Code:

1 2 3 4 5 6 /* CSS Document */ body { background-color:white; margin:10px 137px 137px 10px; }
Très simple puisque la seule chose qui m'intéresse pour l'instant est de créer une marge autour des cadres...

J'ai donc inclu le code :

Citation:

<STYLE TYPE="text/css"media="screen">@import"Marges.css";</STYLE>

Dans le <head> de mon jeu de cadre pour que la feuille de style s'applique aux cadres (et non pas aux pages que je charge), mais voilà, cela n'a eue aucun effet sur mes cadres, pas de marges.
J'ai mon idée sur le problème, je pense que cela vient du fait que ma CSS agit sur le <body> et pas sur le <head> (donc les cadres) mais je ne sais pas si l'on peut faire agir une CSS sur le <head>.

Mais il y a une autre question que je me pose, pourquoi ne pourrais-je pas définir une marge dans le <head> de mon jeu de cadres ? Y'a-t-il vraiment besoin de créer une CSS juste pour cela ?

tu n'as pas bien lu les tutos apparemment :mrgreen:
Alors si on reprend mon code, tu peux faire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> @import url(marges.css); /*évite les majuscules et pas de guillemets amis url(...)*/ </head> <body> <div id="conteneur"> <div id="haut">rfhfghyy</div> <div id="mid_gauche">rfhfghyy</div> <div id="mid_droit"> rfhfghyy</div> <div id="foot"></div> </div> </body> </html>
Code:

1 2 3 4 5 6 7 #conteneur, #haut, #mid_gauche, #mid_froit, #foot { margin:10px 137px 137px 10px; }
En suite pour chaque id donné à un div tu y donnes les définition que je t'avais posté 6 post plus haut.

Si tu mets body {...} ton style s'appliquera au body, si tu veux appliquer un style sur une balise h1 alors dans ton CSS tu mettras h1{...}.
C'est plus clair ?

PS : import est utilisé dans CSS2 mais n'est pas reconnu par les anciens navigateur.
Tu peux utiliser ceci sinon <link rel="stylesheet" href="marges.css" type="text/css" media="screen" />

25/11/2006, 13h34
Chibi_boy

Oui c'est plus clair comme ça. ^^ Les tutoriels que j'ai trouvés sont vraiment abstraits, mais c'est vrai que ce n'est pas simple à expliquer. =)