Problème défilement image de fond.

Messagepar azaroth » Ven 07 Sep 2007, 15:38

Bonjour,

J'ai installé le skin "clean" et je suis en train de le modifier pour que graphiquement, il soit comme le reste de mon site.
Je suis en train d'étudier la possibilité de mettre une image de fond comme indiqué sur l'image ci-dessous :

Image

J'ai essayé avec un patron que vous pouvez voir à l'adresse suivante :
http://www.resistancia-ug.org/php/distro/index.php

Mon soucis est que si on développe l'arborescence des différentes catégories de produits, l'image de fond se répète, ce qui n'est pas souhaitable.

J'aurai donc voulu savoir s'il était possible de faire défiler que la partie centrale (celle comprenant les articles et l'information de manière générale) sans toucher à l'image de fond ?

Merci beaucoup pour votre aide.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar j4k » Ven 07 Sep 2007, 15:57

oui c'est possible avec un attachment fixe sur l'image du backgrond

de plus tu devrait élargir ton image sur les 2 cotés et la centrer afin que l'affichage soit ok pour tout type d'écran, ici j'ai un écran très large et le background n'est pas centré de la même façon que le content.

ça doit ressembler à un truc du genre:

Code: Tout sélectionner
background: #FFF url(bg.jpg) no-repeat  top center;
background-attachment:fixed;
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar azaroth » Ven 07 Sep 2007, 20:20

Et dernière petite question : comment faire pour que seul le texte défile. J'aurai voulu si possible, que la bannière (top.jpg) ne bouge pas.

Merci.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar j4k » Sam 08 Sep 2007, 01:30

en prenant exemple sur ce genre de construction : http://css.alsacreations.com/modeles/modele11.htm
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar azaroth » Sam 08 Sep 2007, 12:55

Finalement, je suis parvenu à y arriver.

J'ai modifié ce ci :

#page{
position: relative;
width : 800px;
margin: 0 auto 0 auto;
text-align: left;
background: transparent url() repeat-y left;

J'ai viré l'url du fichier bg.gif

Ensuite, j'ai fais un fond global qui couvre toute la page et je l'ai mis ici :

body {
width: 100%;
margin: 0; padding: 0;
text-align: center;
font: 0.8em Arial,Georgia,Tahoma,sans-serif; color: #000;
background : transparent url(images/test.jpg) no-repeat top center;
background-attachment:fixed;

J'ai aussi remplacé la bannière qu'il y avait à l'origine par une découpe de mon image de fond afin que ça puisse s'accorder comme y faut.

Le top du top serait de faire passer le texte sous la bannière, mais j'avoue avoir un peu de mal et ce malgré les explications figurants dans ton lien.
Si tu as une idée là dessus, ça serait merveilleux.

Bien sûr, c'est perfectible, je suis encore très loin du résultat final mais je pense être bien parti.
Dernière édition par azaroth le Sam 08 Sep 2007, 16:13, édité 1 fois.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar azaroth » Lun 10 Sep 2007, 14:17

Concernant ma dernière question, personne n'a de réponse à me donner ?
Ceci dit, j'ai bien progressé.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar j4k » Lun 10 Sep 2007, 15:41

je pense que c'est en utilisant la fonction overflow:auto; sur le div du content

http://www.w3schools.com/css/pr_pos_overflow.asp
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar azaroth » Lun 10 Sep 2007, 22:12

Excuse moi mais le content, je le trouve où exactement ?
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar j4k » Lun 10 Sep 2007, 22:27

ben le div du contenu que tu souhaite faire défiler avec une scrollbar
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar azaroth » Mar 11 Sep 2007, 18:10

Je pense que mon problème peut se résoudre dans le fichier Stylesheet.css

Voilà le code :

/*
$Id: stylesheet.css,v 1.2 2005/10/05 16:43:18 manmachine Exp $

osCommerce, Open Source E-Commerce Solutions
http://www.oscommerce.com

Copyright (c) 2003 osCommerce

Released under the GNU General Public License
*/

/* ------- CSS OSC --------- */
@import url(dropDownMenu.css);

@import url(css/general.css);


@import url(css/index.css);
@import url(css/product_info.css);
@import url(css/products_new.css);
@import url(css/shopping_cart.css);
@import url(css/advanced_search.css);
@import url(css/advanced_search_result.css);
@import url(css/create_account.css);

@import url(css/checkout_shipping.css);
@import url(css/checkout_payment.css);
@import url(css/checkout_confirmation.css);
@import url(css/checkout_success.css);

@import url(css/conditions.css);
@import url(css/contact_us.css);

@import url(css/account.css);
@import url(css/address_book.css);
@import url(css/account_edit.css);
@import url(css/account_history.css);
@import url(css/account_history_info.css);
@import url(css/account_newsletters.css);
@import url(css/account_password.css);


@import url(css/boxes.css);
@import url(css/whatsnew_infobox.css);
@import url(css/products_listing.css);

@import url(css/menu.css);

@import url(css/categories_dropdown.css);


/* - general - */
body {
width: 100%;
margin: 0; padding: 0;
text-align: center;
font: 0.9em Arial,Georgia,Tahoma,sans-serif; color: #000;
font-weight:bold;
background : transparent url(images/test.jpg) no-repeat top center;
background-attachment:fixed;
}

/* ----------------------------------------------------- */
/* ------------------------- template ------------------ */
/* ----------------------------------------------------- */

#page{
position: relative;
width : 800px;
margin: 0 auto 0 auto;
text-align: left;
background: transparent url() repeat-y left;
}

#top{
height: 220px;
width: 780px;
margin : 0 0 0 10px;
background: #444 url(images/top.jpg) no-repeat top center;
background-attachment:fixed;
}

#top h1 {
text-indent: -9999px;
}


#pageContent{
float : left;
width : 540px;
padding: 30px 0 0 30px;
}

#sidebar { margin: 20px 0 0 580px; }

#breadCrumb {
position:absolute;
top: 220px;
left: 0px;
padding: 2px; margin: 0 0 0 20px;
width:546px; height:20px;
background: url(images/breadcrumb.gif) no-repeat;
}


/* Footer
********************************************/
#footer{
clear: both;
margin: 0 10px 0 10px;
height: 50px;
border: 0px solid #fff;
background: url(images/footer.gif) no-repeat;
padding: 0.3em;
font: normal 0.85em Arial; color: #eee;
text-align:center;
}

#footer .copyright a {
color: #eee;
text-decoration: underline;
}

#footer .copyright a:hover {
text-decoration: none;
}

/*-------------------------*/


/* ------- forms --------- */
input#search {
width:130;
border: 1px solid #16495C;
padding: 1px;
font-size: 0.9em;
}

/* ------- original --------- */
SPAN.newItemInCart {color: #ff0000; }
SPAN.greetUser { color: #f0a480; font-weight: bold;}
SPAN.markProductOutOfStock { color: #c76170; font-weight: bold; }
SPAN.errorText { color: #ff0000;}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

J'ai essayé d'aller sur le site que tu as indiqué plus haut et testé avec différentes propriétés mais je n'obtient pas l'effet souhaité.
Pour résumer, il y a un fichier image top.jpg qui est fait office de titre, il est en premier plan. Au second plan, il y a le contenu et au 3ème plan, le fond.

Donc, j'aimerai que le second plan passe sous le premier.
Mais je n'y arrive pas, je suis au désepsoir.

Merci pour ta patience.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar j4k » Mar 11 Sep 2007, 18:54

as-tu essayé sur le div #pagecontent ?

et sinon autre idée avec un z-index:100 sur le header ?

sinon tu peux analyser cette page, c'est le même genre de construction que tu cherche à faire : http://www.csszengarden.com/?cssfile=202/202.css
~ osCSS 1.2.1 ~
Avatar de l’utilisateur
j4k
Site Admin
 
Messages: 1259
Inscription: Mer 27 Avr 2005, 09:13
Localisation: France

Messagepar azaroth » Mar 11 Sep 2007, 20:10

J'ai essayé d'analyser la page sans y comprendre grand chose. Tu sais, je rêve d'un soft qui puisse afficher de l'iziwig avec du php, javascript, css, asp etc...
Mais je crois que je peux attendre longtemps.
Tu ferai comment à partir du code que j'ai mis plus haut ?
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron