SUGGESTION pour améliorer l'esthétique

Messagepar azaroth » Sam 26 Jan 2008, 15:01

Bonjour,

Voilà mon idée, plutôt que de faire un long discours, je vous ai fait un schéma.
Image

Le but du jeux est de faire en sorte que la bannière du site, le menu de droite ou de gauche et celui du haut soit toujours visible quand on scroll la page et de faire en sorte que la contenu glisse sous le footer, le menu du haut et la bannière du site.

C'est tout, d'un point de vue esthétique, je trouve ça plus sympa et surtout, ça fait tout de suite plus "pro".
Si on est un commerce, l'image de celle-ci passe aussi par son design et ma suggestion va en ce sens.
Je me doute que ça doit être horrible à développer, c'est peut-être pour celà que personne l'a jamais fait mais ça mérite réflexion.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar oscim » Sam 26 Jan 2008, 20:48

Bonjour,

tu parle d'un template particulier ou d'une remarque d'ordre general.

Perso, je l'ai déjà mise en place sur certain site, mais pense a IE6, qui lui ne sait pas bloquer une element, tout en scrollant le reste.

Certe IE6 nous em... vieux et ...

Enfin, d'aprés moi, c'est pas compliqé outre mesure. question de style avant tout.
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar azaroth » Dim 27 Jan 2008, 13:18

Je parlais en général. Pour ce qui est de cette m...e d'IE, j'ai trouvé une parade pour mes site, ça consiste à superposer des calques. Tiens, vas voir le code de mon site de radio, en espérant que ça puisse t'aider.
Tout est mentionné dans le code pour te faciliter la tâche, tu verra :
http://balistiq.free.fr/index2.htm

En ce qui concerne les sites dont tu as mis un tel système, tu as des adresses que j'aille voir à quoi ça ressemble ? Tu as modifier un template ou tu as modifié d'autres éléments d'oscss ?
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar oscim » Dim 27 Jan 2008, 14:23

En fait, tu souhaite juste rendre le div central mobile, avec la totalite du reste fixe ?.

Moi je pensai a rendre le footer, le central quii scroll, et la banniere haute voir les menu fixe.

Disons que sur ton example, je travial avec reso de 1600*1400 sur 20p et 1600*1150 sur 22p a coté. Ton site ne peut se redimensionner, même pas prendre la hauteur. dommage.

Et puis aveec konqueror, il rajoute les scrol bas dans la div, est perso, je trouve sa moche.
De l'avoir sur le coté, intégres au bord di navigateur, je trouve ca moins moche.

Pour ce qui est d'un example. JE suis pas graphiste, est c'est pour ca que maintenant je fais appel à un graphiste.

Il y as 2 ou 3 ans j'ai fait ca: c'est tres moche, mais ca explique le fonctionnement dont je t'ai parlé.
http://fermedansvent.com

Par contre si tu veut aller voir, ne trade pas dés que j'ai un peu de etmsp j'ai la nouvelle version qui remplace tous ca.
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar azaroth » Dim 27 Jan 2008, 20:42

Oui, finalement, t'a pas tord, j'ai réfléchi et faire scroler le central et le footer seulement me parait une meilleure idée.
Dès que t'a développé un plugin qui correspond à ça, je suis volontaire pour tester.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar azaroth » Mar 05 Fév 2008, 21:50

J'ai péniblement réussi à faire ça :
http://www.resistancia-ug.org/php/distro/index.php
C'est pas génial, ce que j'aimerai c'est que le menu de droite ne bouge pas dans un premier temps, que dois-je modifier et comment ?

J'y connais pas grand chose en css mais si qq pouvait me modifier mon fichier stylesheet.css de façon à ce que ça fasse comme mentionné plus haut, ça serait vraiment sympa.
Voilà le code :
Code: Tout sélectionner
/*
  $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; color: #000;
   font-weight:;
   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;
  position : absolute;
  Z-index :1;
}

#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;
 text-align:center;
}


/* Footer
********************************************/
#footer{
 clear: both;
  margin: 0 10px 0 10px;
  height: 50px;
 border: 0px solid #000;
 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: #eeeeee; 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: Arial; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Arial; font-size: 10px; color: #000000; }
Dernière édition par azaroth le Mar 05 Fév 2008, 22:33, édité 1 fois.
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar oscim » Mer 06 Fév 2008, 18:46

Salut,

pluseiru chose, mais perso, pour commencer, je n'utiliserai pas un systeme de css qui me multiplie le nombres de fichier. la il y en as bcp trop d'apres moi.

En plus je trouve un peu plus rapide de charger un gros fichier plsu que petit. sauf dans le cas ou certain ne se charge qu'en cas de besoins. mais vu que ce n'est pas le cas ici ...


Et le cas ecehant si bcp de css, un compresseur de code

En dehors de ces consideration technique.

Je ne te modiferai pas directement ton fichier, sinon, j'appel ca du travail, et je le vend.

PAr contre, le principe de fixer certain element dans la page, uitlise la propiété css
Code: Tout sélectionner
position:fixed

Cette propiété tu l'applique sur les eleme,t soumis au scroll dont tu veux les fixer à la page
Donc pour ce faire :
Code: Tout sélectionner
body > .nuage {
position:fixed;
}

pour une structure html de ce type:
Code: Tout sélectionner
<body>
<div id="encapsulationmenu2"> </div>
<div id="boite"> </div>
<div id="hautmenu"> </div>
<div class="nuage"/>

Dernier chose, fait attention a ce que les div contenant ton element fixed ne doit pas bouger.

Dans l'exemple seul ta div nuage restera fix

Bon, courage
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33

Messagepar azaroth » Jeu 07 Fév 2008, 12:03

Et tu le vends combien ce travail sinon ?
azaroth
Membre actif
 
Messages: 47
Inscription: Lun 03 Sep 2007, 22:35

Messagepar oscim » Jeu 07 Fév 2008, 13:05

Je t'ai repondu par mail.
Pour un web au normes du W3C, pour un web plus propre !

- Download osCSS Toutes versions
- stable osCSS 2.1.0 (help|info|new dev) Official help|wiki|Tuto for osCSS 2 | doc doxygen
- Utiliser le tracker pour suivre les évolutions et développements
- Inscrivez vos sites sur oscss pour présenter vos réalisations
Avatar de l’utilisateur
oscim
Site Admin
 
Messages: 1643
Inscription: Mar 25 Sep 2007, 11:33


Retourner vers Plugin

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités