Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

[Résolu] Petite info


Sew-Oszka
 Partager

Messages recommandés

Bonjour j'ai créé cette page

sitemddtl8.jpg

 

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!

Lien vers le commentaire
Partager sur d’autres sites

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é par ricou33
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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.

Lien vers le commentaire
Partager sur d’autres sites

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é par Sew-Oszka
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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

 

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.

Lien vers le commentaire
Partager sur d’autres sites

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

 

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 :P, 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é par ricou33
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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. :P

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs
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... :P

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

 Partager

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...