[Résolu] Petite info

Sew-Oszka · le 3 février 2007

Bonjour j'ai créé cette page

Et j'aimerais que la seule partie qui puise bouger quand on appuie sur un bouton soit la partie du milieu plus foncée!

C'est là où je vais inserer du texte et je voutrais qu'on puisse faire defiler cette zone! 5 je traaille sur dreamweaver)

Merci à tous!

ricou33 · le 3 février 2007

Salut,

Je ne suis pas sûr d'avoir compris ce que tu souhaites.

Si c'est juste que le menu et le titre du site ne défile pas avec le texte et qu'il n'y ait un ascenseur que pour le cadre centrale il suffit dans le css de définir tous les objets qui ne doivent pas défiler en "position: fixed;".

Si tu veux que le menu et le titre soit identique pour toutes les pages du site, soit tu créés le titre et le menu puis tu copies le code sur toutes les pages avant de les remplir. Soit il faut faire le site entièrement en php.

Si tu veux un exemple voici mon site : http://citations.ovh.org/, le menu est en position fixed et le menu et le titre sont identiques sur toutes les pages grâce à la fonction "include" de php.

Par contre je n'ai jamais utilisé dreamweaver, je ne peux rien te dire à ce sujet, désolé.

Modifié le 3 février 2007 par ricou33

Dylav · le 3 février 2007

Bonjour Sew-Oszka, bonjour Ricou,

Si j'ai bien compris, tu souhaiterais que, lorsque ton visiteur clique sur un des choix du menu de gauche, seule ta boîte centrale se rafraîchisse, pour afficher le texte correspondant au choix exprimé. Et que le reste de l'écran reste fixe.

Ceci est (était) typique de la notion de frameset (l'écran est divisé en parties indépendantes, frames, qu'on peut donc rafraîchir indépendamment les unes des autres) ou, mieux, du bloc iframe incrusté. Ces techniques sont malheureusement (?) en train de tomber en disgrâce, et risquent de ne plus être supportées à moyen terme.

Le contournement passe alors par la méthode que t'expose Ricou ci-dessus : répéter inlassablement sur chaque page le même contexte de présentation, avec la facilité de l'include PHP.

Pour préciser le fonctionnement de ta boîte à texte centrale, regarde ci-dessous un petit exemple habillé à tes couleurs. Pour voir ce que cela donne, reprends-le par copier/coller dans un fichier d'extension .html.

<!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" xml:lang="fr" lang="fr">
<head>
<title>Exemple boîte fixe avec overflow</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
body {
 margin:0;padding:0;
 background: url(http://img111.imageshack.us/img111/9279/sitemddtl8.jpg) fixed top left no-repeat;
 overflow:hidden;
 font-size:4em;
}
#boitatexte {
 position:absolute;
 left:250px;top:225px;
 width:500px;height:275px;
 padding:5px;
 overflow:auto;
}
</style>
</head><body>
<div id="boitatexte">
C'est ici que tu insères ton texte. S'il s'avère un peu long, il apparaîtra automatiquement un ascenseur vertical.
</div>
</body></html>

Dans la feuille de style, je passe sur les spécifications du body, qui ne sont là que pour maquetter ton fond d'écran.

Le descriptif du conteneur central (le bloc div "boitatexte") est plus intéressant, bien que simplissime. Il est dans l'écran en position fixe (position, top, left) et de dimensions (width, height) fixes, avec une marge intérieure (padding). Ce conteneur vient s'incruster exactement sur la zone prévue à cet effet. Un ascenseur optionnel (overflow) n'apparaîtra que si le texte est trop volumineux pour tenir en entier dans la fenêtre.

J'ai volontairement demandé une grande taille de police (font-size) pour provoquer le débordement. Tu pourras tester en passant cette taille de 4em à 1em (standard) : le texte tient dans la fenêtre, et l'ascenseur disparaît.

Sew-Oszka · le 3 février 2007

Merci beaucoup pour ces infos! C'est parfait! Maintenant comment fait on pour avoir l'integralité de la page qui s'affiche avec des ascenceurs?

PS: c'est mon premer site internet, je n'y connais rien!

Modifié le 3 février 2007 par Sew-Oszka

Dylav · le 3 février 2007

Pour avoir un ascenseur optionnel sur l'ensemble de ta page, il suffit d'installer, dans la feuille de style, l'attribut overflow au niveau du body

body {overflow:auto;}

Si tout peut s'afficher sur l'écran, pas d'ascenseur. Sinon, il en apparaît un automatiquement.

Lorsqu'on omet l'attribut overflow, on a un ascenseur vertical permanent (même lorsqu'il est inutile).

Tu noteras que, inversement, j'avais mis cet attribut à hidden dans mon exemple ci-dessus, ce qui signifiait que je refusais qu'apparaisse un ascenseur même en cas de débordement (ce qui, bien sûr, rendait inaccessible la partie en débordement).

Sew-Oszka · le 3 février 2007

Si on remplace hidden par auto ca fait un truc bizarre avec le texte! Je suis completement paumé avec tous ces codes! Pour moi c'est du chinois!

Dylav · le 3 février 2007

Pourrais-tu préciser, éventuellement de façon imagée ?

Parce que je ne comprends pas comment une option de scrolling pourrait influer sur le contenu de la page elle-même...

En tout état de cause, tente d'enfoncer le clou ainsi :

html, body {overflow:auto;}

Essaie aussi en n'invoquant pas l'attribut overflow pour le body : tu auras un ascenseur permanent.

ricou33 · le 4 février 2007

Bonsoir,

Je viens de regarder ton code Dylav, bravo, je n'aurais pas pensé à faire ça. Mais maintenant, comme d'habitude, je pense que tu me connais maintenant, je vais semer mon p'tit grain de sel et dire tout ce que j'en pense.

D'abord votre problème d'overflow, Le premier (dans body), ne sert à rien, j'ai essayé en le supprimant. Par contre le deuxième doit être en auto, comme Dylav l'a marqué.

Ensuite, je suis désolé pour celui qui a fait l'image mais accueil, ben ça s'écrit ACCUEIL , et l'image est trop haute pour mon écran, le mot inscription est coupé à moitié.

Il est également possible de mettre l'image au centre de la page, pour cela il faut rajouter ces 2 lignes dans "body" :

width: 800px;
margin: auto;

et dans "boiteatexte" "position: relative;" Par contre cette méthode à le défaut, si on diminue la taille de la fenêtre a moins de 800 pixels à l'écran de faire sortir le texte du cadre.

Pour terminer, Sew-Oszka, si tu souhaites vraiment faire un site internet je te conseille d'aller voir le site du zéro qui explique très bien, ça prend environ 2 semaines pour faire tout le tuto mais ça vaut le coup, j'ai tout appris sur ce site.

EDIT : Je viens de voir que le texte descend en dessous du cadre marron et va dans le blanc, pour éviter cela il suffit de raccourcir un peu la hauteur en mettant le height a une valeur de 265px.

Modifié le 4 février 2007 par ricou33

Dylav · le 4 février 2007

D'abord votre problème d'overflow, Le premier (dans body), ne sert à rien, j'ai essayé en le supprimant.

Tu as raison pour FireFox, Ricou. FF applique la règle auto sans qu'on ait besoin de le lui demander.

Mas il ne faut pas oublier Internet Explorer, même sur Zébulon ! Lorsque tu n'indiques pas overflow:auto au niveau du body, IE place malheureusement un ascenseur systématique lorsqu'il n'y a pas débordement, particulièrement inesthétique (sans barre de défilement).

Pour les autres navigateurs, je ne sais pas. Je n'ai jamais eu le courage d'en télécharger d'autres.

Dylav · le 4 février 2007

EDIT : Je viens de voir que le texte descend en dessous du cadre marron et va dans le blanc, pour éviter cela il suffit de raccourcir un peu la hauteur en mettant le height à une valeur de 265px.

Tout-à-l'heure, j'ai été surpris par cette remarque, parce que j'avais le souvenir d'avoir soigneusement mesuré toutes les dimensions de cete image de fond. Et puis je m'étais dit que j'avais dû commettre une erreur.

Eh bien non ! La boîte à texte a bien une hauteur de 275 px. Ce qui cloche, c'est le padding, que j'avais ajouté au dernier moment, et dont j'avais oublié que FireFox le considère à tort comme hors bloc (comme le margin), contrairement aux recommandations et à Internet Explorer (pour une fois, c'est IE qui respecte les recos).

C'est embêtant, ces détails divergents...

Connexion

Pas encore inscrit ?

[Résolu] Petite info

Messages recommandés

Sew-Oszka

Lien vers le commentaire

Partager sur d’autres sites

ricou33

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Sew-Oszka

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Sew-Oszka

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

ricou33

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Dylav

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer