oscss 1.1 page d'acceuil

Messagepar crepmaster » Jeu 01 Nov 2007, 20:57

chui en train d'essayer de modifier le template lemon en changeant les dimensions ( j'aimerai l'aggrandir) j'ai modifier toutes les mesures à mon gout...sauf que je me retrouve dans la page d'acceuil aussi bien sur IE que sur firefox avec un enorme vide en dessous de la presentation du tableau des nouveautés, comment y remedier? merci d'avance.
voici le stylesheet.css

Code: Tout sélectionner
#page{
  position: relative;
 z-index: 99;
   width: 864px; z-index: 100;
}

#top{
  background: #fff url(header.jpg) no-repeat left top;
  border-bottom: 1px solid #acb7a6;
 height: 156px;
}

#top h1 {
  display: none;
}


#pageContent{
  margin-left: 219px;
 margin-top: 0px;
  padding-left: 155px;
  /* Make IE play nice with others */
 width: 540px;
 voice-family: ""}"";
  voice-family:inherit;
 width: 489px;
 z-index: 1;
 background-color: #FFFFFF;
  background-image: url(citron.jpg);
  background-repeat: no-repeat;
 background-position: left top;
}

#sidebar {
 color: #fff;
  font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif;
 font-size: 0.85em;
  font-weight: bold;
  left: 0;
  overflow: hidden;
 position: absolute;
 top: 156px;
 bottom:10px;
  width: 219px;
 background-color: #fdbe57;
  background-image: url(curlBig.gif);
 background-repeat: no-repeat;
 background-position: center bottom;
 height: 700px;
}

#sidebar a, #sidebar h3 { font-family: Georgia, "Times New Roman", Times, serif; }
#sidebar a { color: #fff; font-size: 1.1em; font-style: italic; font-weight: normal; text-decoration: none; }
#sidebar a:hover { text-decoration: underline; }
#sidebar a.c {
  color: #fffbe2;
 font-family: Arial, Tahoma, Geneva, Helvetica, Verdana, sans-serif;
 font-size: 1em;
 font-style: normal;
 font-weight: bold;
}

#sidebar acronym { color: #f6f1c0; }

#sidebar fieldset {
  border:0px;
}

#sidebar h4 {
 color: #FFF;
  border-bottom:1px solid;
  font-size: 1em;
 font-style: normal;
 padding-top: 0.5em;
 text-align: left;
 text-transform: uppercase;
  margin-left:5px;
}

#sidebar li { padding-left: 15px;font-size:1.2em; }
#sidebar ul { list-style: none; padding: 0 10px 0.8em 10px; }

#breadCrumb {
  text-transform: uppercase;
  font-size: 0.8em;
 line-height: 1.4em;
 text-align: left;
 color:#5c7d2f;
  border-bottom:#EEE 1px solid;
 background-color: #FFFFFF;
  margin-top: 0px;
  margin-right: 1px;
  margin-bottom: 0px;
 margin-left: 218px;
}
#breadCrumb a {color:#5c7d2f;text-transform: uppercase; }
#breadCrumb a:hover { border-bottom:#000 1px solid;}
/* Footer
********************************************/
#footer{
 margin: 250px 0 0 200px;
  text-align: center;
 background:transparent;
}

#footer .copyright a { 
  margin-right: 20px;
 padding-left: 18px;
 background: url(bullet.png) no-repeat left center;
}

#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: #eee; }
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; }
crepmaster
Membre actif
 
Messages: 42
Inscription: Lun 05 Mar 2007, 17:10

Messagepar cymbeline » Ven 02 Nov 2007, 11:05

Bonjour,

Dans ton #pageContent il y a 2 valeurs width et au vu de tes différentes mesures, il faudrait conserver celui à 489px.

Cela peut-être un début.

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar crepmaster » Ven 02 Nov 2007, 17:06

merci j'apporte la correction pour commencer.
crepmaster
Membre actif
 
Messages: 42
Inscription: Lun 05 Mar 2007, 17:10

Messagepar crepmaster » Ven 02 Nov 2007, 17:12

malheuresement ça n'a pas changé grand chose, peut etre me suis je mal exprimé le vide se trouve entre la fin du tableau des nouveauté et la fin de la div. En outre j'ai remarqué que sous IE que la div va de "nouveautés du MOis de ... jusqu'à la fin du tableau...alors que sous Firefox, le tableau semble se trouver à l'exterieur de la div, j'ai essayé de voir ligne par ligne s'il n'yavait pas un </div> mais je n'en ai pas trouver un mal placé...
crepmaster
Membre actif
 
Messages: 42
Inscription: Lun 05 Mar 2007, 17:10

Messagepar cymbeline » Ven 02 Nov 2007, 18:47

OK,

C'est typique d'un problème de prise en charge des valeurs de padding et de margin d'un navigateur à l'autre si tu cherches a positionner ta boîte avec un padding par exemple.

1 ° Pour voire ta boite ajoute un :
Code: Tout sélectionner
border : 1px solid red;

sur ton #Page content et sur les autres "div"

2 ° Renseigne bien TOUTES les valeurs de tes margin et padding y compris et surtout celle à zéro dans tes div.

EX : au lieu

Code: Tout sélectionner
 
     margin-left: 219px;
     margin-top: 0px;

ecris

Code: Tout sélectionner
 
     margin : 0px 0px 0px 219px;

et pour
Code: Tout sélectionner
     padding-left: 155px;

ecris

Code: Tout sélectionner
    padding : 0px 0px 0px 155px;

Jette un oeil ici http://cerig.efpg.inpg.fr/dossier/feuilles-de-style/page05.htm car je pense que ton contenu sort de sa boîte.

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar crepmaster » Ven 02 Nov 2007, 20:40

merci, je m'y colle sur le champs
crepmaster
Membre actif
 
Messages: 42
Inscription: Lun 05 Mar 2007, 17:10

Messagepar crepmaster » Sam 03 Nov 2007, 09:13

a en devenir fou!
IE a corrigé tous les defauts mais sous Firefox, il cotinue d'avoir un vide entre
la
Code: Tout sélectionner
<class="customerGreeting">

e la
Code: Tout sélectionner
<div class="infobox newProducts">

et je ne met pas une marging-bottom enorme ça sort de la div!, ce qui est encore plus etrange dans tout le repertoire catalog je ne trouve pas le css infobox newProducts !
voici une partie de l'html generée

Code: Tout sélectionner
  <!-- new_products //-->
<div class="infobox newProducts">
 
  <h4>Nouveaux produits pour November</h4> 
 
 
 
  <dl class="newProduct">
   
   <dt class="name"><a href="http://localhost/phpSite/catalog/product_info.php?products_id=13">Lethal Weapon</a></dt>

   <dd class="image"><a href="http://localhost/phpSite/catalog/product_info.php?products_id=13"><img src="images/dvd/lethal_weapon.gif" alt="Lethal Weapon" title=" Lethal Weapon " width="100" height="80" /></a></dd> 
   
   <dd class="price">34.99EUR</dd>

 
  </dl>
crepmaster
Membre actif
 
Messages: 42
Inscription: Lun 05 Mar 2007, 17:10


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