[CSS] padding-Firefox & Netscape

kinky_buddah · 14 Décembre 2004

Bonjour,

Mon site est ici : kinky-buddah.

C'est mon premier et je vous remercie de votre indulgence. Mon domaine c'est plutôt le print mais je veux faire mon site depuis longtemps alors... le voici. :rolleyes:

J'ai un problème sous Firefox et Netscape avec le padding je crois. Mon texte est bouffé à l'intérieur des cellules dans les navigateurs cités.

Comment créer un espace dans mes cellules et que mon texte s'affiche correctement ?

div.Tableau_01 {
	position:relative;
	left:0%;
	top:0%;
	width:802px;
	height:628px;
	right: 0%;
	bottom: 0%;
}

div.Frame-haut {
	position:absolute;
	left:0px;
	top:0px;
	width:802px;
	height:90px;
}

div.Bord-gauche- {
	position:absolute;
	left:0px;
	top:90px;
	width:21px;
	height:538px;
}

div.Accueil-surv {
	position:absolute;
	left:21px;
	top:90px;
	width:126px;
	height:44px;
}

div.Publication-surv {
	position:absolute;
	left:147px;
	top:90px;
	width:128px;
	height:44px;
}

div.Communication-surv {
	position:absolute;
	left:275px;
	top:90px;
	width:126px;
	height:44px;
}

div.Profil-surv {
	position:absolute;
	left:401px;
	top:90px;
	width:126px;
	height:44px;
}

div.CV-surv {
	position:absolute;
	left:527px;
	top:90px;
	width:127px;
	height:44px;
}

div.Contact-surv {
	position:absolute;
	left:654px;
	top:90px;
	width:127px;
	height:44px;
}

div.Bord-droit- {
	position:absolute;
	left:781px;
	top:90px;
	width:21px;
	height:538px;
}

div.Site-perso-10 {
	position:absolute;
	left:21px;
	top:134px;
	width:760px;
	height:19px;
	background-image: url(Aucune);
}

div.Site-perso-11 {
	position:absolute;
	left:21px;
	top:153px;
	width:166px;
	height:48px;
	background-image: url(images/Site-perso_11.gif);
	padding-right: 10px;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	color: #FFFFFF;
	letter-spacing: normal;
}

div.Frame-princ--gauche {
	position:absolute;
	left:187px;
	top:153px;
	width:340px;
	height:394px;
	background-image: url(images/Frame-princ.-gauche.gif);
	text-align: justify;
	clip: rect(0px,auto,auto,auto);
	text-indent: 0px;
	white-space: normal;
	padding-right: 10px;
	padding-left: 15px;
	padding-top: 47px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

div.Frame-princ--droite {
	position:absolute;
	left:527px;
	top:153px;
	width:254px;
	height:330px;
}

div.Frame-descriptif {
	position:absolute;
	left:21px;
	top:201px;
	width:166px;
	height:346px;
	background-image: url(images/Frame-descriptif.gif);
	text-align: justify;
	text-indent: 0px;
	overflow: visible;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #993366;
}

div.Icone-rubrique {
	position:absolute;
	left:527px;
	top:483px;
	width:254px;
	height:87px;
}

div.Site-perso-16 {
	position:absolute;
	left:21px;
	top:547px;
	width:166px;
	height:23px;
}

div.Site-perso-17 {
	position:absolute;
	left:187px;
	top:547px;
	width:340px;
	height:23px;
}

div.Menu-du-bas-au-dessus {
	position:absolute;
	left:21px;
	top:570px;
	width:760px;
	height:23px;
}

div.Identite-visuelle-surv {
	position:absolute;
	left:21px;
	top:593px;
	width:126px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Plaquettes-surv {
	position:absolute;
	left:147px;
	top:593px;
	width:128px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Web-surv {
	position:absolute;
	left:275px;
	top:593px;
	width:126px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Logos-surv {
	position:absolute;
	left:401px;
	top:593px;
	width:126px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Affiches-surv {
	position:absolute;
	left:527px;
	top:593px;
	width:127px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Publicite-surv {
	position:absolute;
	left:654px;
	top:593px;
	width:127px;
	height:23px;
	background-image: url(images/Barre-menu-vide-petit.gif);
}

div.Barre-de-menu-bas-dessous {
	position:absolute;
	left:21px;
	top:616px;
	width:760px;
	height:12px;
}
.Style1 {color: #FFFFFF}

<html>
<head>
<title>Site perso</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (Site perso.psd - Slices: 00, 10, 11, 16, 17, Accueil surv, Affiches surv, Barre de menu bas dessous, Bord droit , Bord gauche , CV surv, Communication surv, Contact surv, Frame descriptif, Frame haut, Frame princ. droite, Frame princ. gauche, Icone rubrique, Identite visuelle surv, Logos surv, Menu
du bas au dessus, Plaquettes surv, Profil surv, Publication surv, Publicite surv, Web surv) -->
<!-- End ImageReady Styles -->
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="Site%20perso%205.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Style2 {color: #000000}
-->
</style>
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;" onLoad="MM_preloadImages('images/Accueil-surv.gif','images/Publication-surv.gif','images/Profil-surv.gif','images/Contact-surv.gif','images/Communication-surv.gif','images/CV-surv.gif')">
<!-- ImageReady Slices (Site perso.psd - Slices: 00, 10, 11, 16, 17, Accueil surv, Affiches surv, Barre de menu bas dessous, Bord droit , Bord gauche , CV surv, Communication surv, Contact surv, Frame descriptif, Frame haut, Frame princ. droite, Frame princ. gauche, Icone rubrique, Identite visuelle surv, Logos surv, Menu
du bas au dessus, Plaquettes surv, Profil surv, Publication surv, Publicite surv, Web surv) -->
<div class="Tableau_01">
	<div class="Frame-haut">
  <img src="images/Frame-haut.gif" width="802" height="90" alt="">
	</div>
	<div class="Bord-gauche-">
  <img src="images/Bord-gauche-.gif" width="21" height="538" alt="">
	</div>
	<div class="Accueil-surv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Accueil','','images/Accueil-surv.gif',1)"><img src="images/Accueil.gif" alt="Accueil" name="Accueil" width="126" height="44" border="0"></a>
	</div>
	<div class="Publication-surv">
      <a href="publication.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Publication','','images/Publication-surv.gif',1)"><img src="images/Publication.gif" alt="Publication" name="Publication" width="128" height="44" border="0"></a>	</div>
	<div class="Communication-surv">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Communication','','images/Communication-surv.gif',1)"><img src="images/Communication.gif" alt="Communication" name="Communication" width="126" height="44" border="0"></a>	</div>
  <div class="Profil-surv"><span class="CV-surv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Profil','','images/Profil-surv.gif',1)"><img src="images/Profil.gif" alt="Profil" name="Profil" width="126" height="44" border="0"></a></span> </div>
  <div class="CV-surv"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CV','','images/CV-surv.gif',1)"><img src="images/CV.gif" alt="CV" name="CV" width="127" height="44" border="0"></a> </div>
	<div class="Contact-surv">
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact','','images/Contact-surv.gif',1)"><img src="images/Contact.gif" alt="Contact" name="Contact" width="127" height="44" border="0"></a>	</div>
	<div class="Bord-droit-">
  <img src="images/Bord-droit-.gif" width="21" height="538" alt="">
	</div>
	<div class="Site-perso-10">
  <img src="images/Site-perso_10.gif" width="760" height="19" alt="">
	</div>
	<div class="Site-perso-11"><strong>Bienvenue sur mon site professionnel </strong></div>
	<div class="Frame-princ--gauche">
   <p><span class="Style1">Descritption<br>
          <span class="Style2">Je suis en recherche d'emploi, et donc intéressé par les offres que n'importe quel recruteur pourrait me proposer.</span> </span></p>
   <p> </p>
   <p><span class="Style1">Recherche d'emploi</span><br>
     Infographiste PAO et 2D, je suis en recherche d'emploi, et donc  intéressé par les offres que n'importe quel recruteur pourrait  me proposer.</p>
   <p><span class="Style1">Activité Free-lance</span><br>
        Inscrit en précompte à la Maison des Artistes, j'accomplis mon activité en free-lance. Vous pouvez évidemment me contacter pour me faire vos propositions de collaboration ou pour me demander quels sont mes tarifs.</p>
  </div>
	<div class="Frame-princ--droite">
  <img src="images/Frame-princ.-droite.gif" width="254" height="330" alt="">
	</div>
	<div class="Frame-descriptif">
   <p align="right">J'ai créé ce site dans le but de me présenter à toute société qui serait intéressé par mon profil. Je présente ici un certain nombre de travaux, afin bien sûr de vous exposer ma créativité, mais surtout afin de vous décrire ma méthodologie.</p>
   <p align="right">Infographiste print, je peux néanmoins créer tous types de visuels, quels que soient le support de destination.</p>
   <p align="left"> </p>
	</div>
	<div class="Icone-rubrique">
  <img src="images/Icone-rubrique.gif" width="254" height="87" alt="">
	</div>
	<div class="Site-perso-16">
  <img src="images/Site-perso_16.gif" width="166" height="23" alt="">
	</div>
	<div class="Site-perso-17">
  <img src="images/Site-perso_17.gif" width="340" height="23" alt="">
	</div>
	<div class="Menu-du-bas-au-dessus">
  <img src="images/Menu-du-bas-au-dessus.gif" width="760" height="23" alt="">
	</div>
	<div class="Identite-visuelle-surv">      </div>
	<div class="Plaquettes-surv">      </div>
	<div class="Web-surv">      </div>
	<div class="Logos-surv">      </div>
	<div class="Affiches-surv">      </div>
	<div class="Publicite-surv">      </div>
	<div class="Barre-de-menu-bas-dessous">
  <img src="images/Barre-de-menu-bas-dessous.gif" width="760" height="12" alt="">
	</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

**Perrine** · 15 Décembre 2004

Bonjour Kinky_buddha

Difficile de répondre à une telle question ... on ne sait pas dans quel langage est construit ton doc ? HTML, XHTML ? quelle version ?

Tu n'as pas spécifié de DTD (Doctype). Je t'invite à lire l'article à ce sujet paru sur pompage.net

Une fois les bases bien posées, ça marchera peut-être

Pourquoi aussi ne pas lire les excellents sites http://openweb.eu.org/ et http://www.alsacreations.com/articles/ . C'est une bonne base pour commencer à conder en respectant les standards web

Tu y liras entre autres que

<div class="Site-perso-11"><strong>Bienvenue sur mon site professionnel </strong></div>

peut être remplacé par

<h1>Bienvenue sur mon site professionnel</h1>

afin de donner du sens à ta page

Tout un programme en somme ! Mais si tu te destines à travailler dans ce domaine, autant avoir de bonnes bases

Connexion

[CSS] padding-Firefox & Netscape

Sujets conseillés

kinky_buddah

Lien vers le commentaire

Partager sur d’autres sites

Perrine

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité