Aller au contenu

DIV du milieu qui suit le Scroll de la page


Sujets conseillés

Posté

Bonjour tout le monde !!!

Alors voici mon soucis, je voudrais que mon DIV (placé au milieu de la page) n'ai pas de scroll mais qu'il dépende du scroll de la page (à l'extrême droite).

Actuellement voici ou j'en suis: http://flyzblog.free.fr/sons/indexviolet.html

Comme vous le voyez, le DIV du milieu dépasse en bas. Je voudrais que mon fond ne bouge pas mais que le scroll de la page ne dirige que le contenu du DIV. Je sais que c'est possible car j'ai déjà vu ça sur des sites.

Merci de votre aide et bon dimanche ensoleillé :thumbsup:

Posté

Bonjour

Tu utilises beaucoup d'iframe, dont l'usage est plutôt contesté.

Ton .html mélange le fond et la forme (html et css)

Je te suggèrerais de prendre un layout (google: "css layout")propre et valide adapté à ce que tu veux faire (ta mise en page est basique tu devrais trouver aisément), et d'y inclure ton contenu.

Pour avoir un div fixe, utilise la propriété css position : fixed (bug sous ie) ou du javascript

Bon courage

Ps: elle est jolie la dame!

Posté
Bonjour

Tu utilises beaucoup d'iframe, dont l'usage est plutôt contesté.

Ton .html mélange le fond et la forme (html et css)

Je te suggèrerais de prendre un layout (google: "css layout")propre et valide adapté à ce que tu veux faire (ta mise en page est basique tu devrais trouver aisément), et d'y inclure ton contenu.

Pour avoir un div fixe, utilise la propriété css position : fixed (bug sous ie) ou du javascript

Bon courage

Ps: elle est jolie la dame!

Merci d'avoir répondu !!! Bon alors j'ai essayé de chercher un peu avec "css layout" le problème et que je comprends pas trop ce qui correspond à ce que je veux faire. Par exemple sur ce site: http://layouts.ironmyers.com/. Lequel convient à ma mise en page? J'ai un peu de mal à imaginer et situer lequel correspond >_<.

Et pourquoi l'iframe est contesté ? Est-ce que son utilisation peu ralentir le site ?

Merci :thumbsup:

Posté

Il faut choisir en fonction de la disposition que tu souhaites adopter. Sur ta page, je n'ai pas vu de navigation, de contenu etc; mais une seule image.

Tu peux aussi chercher là http://www.alsacreations.com/static/gabarits/liste.html

Sur la balise la plus "encapsulante", tu ajoutes un background (c'est du css) correspondant à ce que tu veux (le pont avec les étoiles et arabesques j'imagine) et une propriété positon: fixed

Pour du "tout fait", j'ai ça http://www.cssplay.co.uk/layouts/background.html et çà http://www.cssplay.co.uk/layouts/fixit.html

Posté
Il faut choisir en fonction de la disposition que tu souhaites adopter. Sur ta page, je n'ai pas vu de navigation, de contenu etc; mais une seule image.

Tu peux aussi chercher là http://www.alsacreations.com/static/gabarits/liste.html

Sur la balise la plus "encapsulante", tu ajoutes un background (c'est du css) correspondant à ce que tu veux (le pont avec les étoiles et arabesques j'imagine) et une propriété positon: fixed

Pour du "tout fait", j'ai ça http://www.cssplay.co.uk/layouts/background.html et çà http://www.cssplay.co.uk/layouts/fixit.html

Voici exactement ce que j'aimerai avoir comme résultat: http://www.myspace.com/lilkim

Tu vois le background ne bouge pas mais juste le milieu bouge grâce au scrollbar de droite.

Je crois que celui là est le bon non ? : http://www.alsacreations.com/static/gabarits/modele03.html

Excuse moi je m'y connais pas en CSS la honte ... lol

Posté

Une solution possible :

ajoute

<div id="arriereplanfixe"></div>

entre body et global

et

#arriereplanfixe {
z-index: -1;
height: 100%;
width: 100%;
position: fixed;
background: url(image_arriere_plan.jpg) no-repeat center center;
}

j'ai utilisé une "image_arriere_plan.jpg" de 1024*768

Ce n'est pas propre d'ajouter une div vide, mais ça te permet de comprendre et expérimenter.

En version définitive, il vaut mieux adapter le style d'une balise existante.

Bon courage

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...