affichage xhtml et css ... prob positionnement IE et Firefox

affichage xhtml et css ... prob positionnement IE et Firefox - HTML/CSS - Programmation

Marsh Posté le 17-06-2004 à 16:20:31    

suite a un conseil je réedite le post ...
 
Je me met  au xhtml et css pour nos futurs site et j'essai d'adapter un  script de http://openweb.eu.org/ et rien a faire, j'ai un scroll en bas de ma fenetre c'est la memerde !!!
 
si kkun as une idée en passant  sinon je continu bien qu'il ne me reste plus beaucoup de cheveux      
 
Une image etant plus parlant voila le source ...  

Citation :


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>grrrrrrrrrrr css :D</title>
<style>
  BODY {
 PADDING: 0px;  
 MARGIN: 0px;  
 PADDING-TOP: 0px;  
 FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
 font-size : 0.8em;
}
 
.content {
  width: 100%;
  border: 1px solid #000000;
 margin-left:150px;
}
.menu {
  border: 1px solid #000000;
  width: 150px;
}
 
html>body .menu {
  position: fixed;
}
.centre {
width:30%;
float : left;
BACKGROUND-COLOR: #FFFFC8;
}
.gauche {
BACKGROUND-COLOR: #D4D0C8;
float : left;
width: 30%;
}
.droite {
BACKGROUND-COLOR: #C8C8FF;
float : left;
width: 40%;
 
}
</style>
</head>
<body>  
   <div class="menu">menu</div>
 
  <div class="content">  
   <div class="centre"> centre</div>
   <div class="gauche"> gauche</div>
  <div class="droite"> droit</div>
  </div>
 
<br /><br />
 
Et ce le resultat que je cherche :
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>  
  <td width="150">menu</td>
  <td>
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
     <td width="30%" bgcolor="#FFFFCC" >centre</td>
     <td width="30%" bgcolor="#CCCCCC">gauche</td>
     <td width="40%" bgcolor="#CCCCFF">droit</td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>
 

Reply

Marsh Posté le 17-06-2004 à 16:20:31   

Reply

Marsh Posté le 17-06-2004 à 16:43:17    

Personne ? sniff quelqu'un connaitrai un forum special css alors ????

Reply

Marsh Posté le 17-06-2004 à 16:47:53    

je regarde ca plus tard ;)


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 17-06-2004 à 16:54:12    

merci m'sieur ... ça fait des heures que je suis dessus !!!
je réponds aussi aux messages quand je sais, c'est comme l'auto-stop ça, ne s'arette que ceux qui en ont déja fait ;)

Reply

Marsh Posté le 17-06-2004 à 17:07:43    

Pffffff, cela me rappelle de mauvais souvenirs, d'ailleurs il y a des trucs que je ne maitrise toujours pas entre Internet Explorer et Mozilla par exemple :
 
Couleur de fond d'un bloc derrière un autre bloc auto-dimensionnable... Internet Explorer n'y arrive pas ! Mozilla si...  :(

Reply

Marsh Posté le 17-06-2004 à 17:13:23    

Citation :


Pffffff, cela me rappelle de mauvais souvenirs, d'ailleurs il y a des trucs que je ne maitrise toujours pas entre Internet Explorer et Mozilla par exemple :
 
Couleur de fond d'un bloc derrière un autre bloc auto-dimensionnable... Internet Explorer n'y arrive pas ! Mozilla si...


 
ça me rassure a moitié :( ... et la pour mon code t'as pas une idée ?

Reply

Marsh Posté le 17-06-2004 à 17:24:00    

tout a fait normal que ton navigateur se comporte de la sorte....
 
si je prend et j'additionne les width je trouve  
 
150px (menu) + 100% (content)
 
 
donc forcement, il y a un dépassement de 150px   [:spamafote]  
 
il faut que tu passes ton menu en %.
 
essayes par exemple 20% et passe ton content à 80%
 
ca derait déjà être mieux


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 17-06-2004 à 17:24:05    

Bon, tu me diras ce que tu en penses, j'ai essayé cela :

Code :
  1. body {
  2. padding: 0px; 
  3. margin: 0px; 
  4. font-family: Verdana, Arial, Helvetica, sans-serif;
  5. font-size : 0.8em;
  6. }
  8. .content {
  9.   width: 100%;
  10.   border: 1px solid #000000;
  12. }
  13. .menu {
  14.   border: 1px solid #000000;
  15.   width: 150px;
  16.   float : left;
  17. }
  19. .centre {
  20. width:30%;
  21. float : left;
  22. background-color: #FFFFC8;
  23. position:relative;
  24. }
  25. .gauche {
  26. background-color: #D4D0C8;
  27. float : left;
  28. width: 30%;
  29. position:relative; 
  30. }
  31. .droite {
  32. background-color: #C8C8FF;
  33. float : left;
  34. width: 40%;
  35. position:relative;
  37. }


Code :
  1. <div class="menu">menu</div>
  2. <div class="content">
  3.    <div class="centre"> centre</div>
  4.    <div class="gauche"> gauche</div>
  5.   <div class="droite"> droit</div> 
  6. </div>


bonne chance....
perso moi j'aurais gardé la structure en tableau et j'aurais juste changé les attributs

Reply

Marsh Posté le 17-06-2004 à 17:28:33    

Oui, je crois qu'il s'agit d'un problème de boite :
 
--> Pour le même code source XHTML/CSS, deux présentations différentes :
 
http://perso.wanadoo.fr/alpha-beta.123/images/proble_11.jpg
 
 
--> Va voir cette page si ça aide :
http://openweb.eu.org/articles/dimensions_boites_css/
 
 
Bonne chance.
 
 
Voici pour information le code source XHTML 1.0 correspondant à l'image ci-dessus :
 
Code:
 

Citation :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <title>Test XHTML -- CSS</title>
  <link rel="StyleSheet" type="text/css" href="style_testbloc.css" />
</head>
<body>
  <div class="conteneur">
   <div class="boite1"><p>Contenu</p></div>
  </div>
</body>
</html>


 
 
 
Et la CSS externe correspondante au document HTML ci-dessus :
 
Code:
 

Citation :

body {
   background: #996699;
   text-align: center;
   margin: 0;
   padding: 0;
   border: 0;
}
.conteneur {
   background: #999999;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   width: 778px;
}
.boite1 {
   background-color: #990099;
   margin: 48px;
   padding: 24px;
   border: 12px outset #336699;
   width: 250px;
}
p {
   background-color: #993399;
}


Message édité par S1290 le 17-06-2004 à 17:35:44
Reply

Marsh Posté le 17-06-2004 à 17:31:52    

S1290 a écrit :

Oui, je crois qu'il s'agit d'un problème de boite :--> Pour le même code source XHTML/CSS, deux présentations différentes


terrrrrible
c'est trop bien comme schéma....

Reply

Marsh Posté le 17-06-2004 à 17:31:52   

Reply

Marsh Posté le 17-06-2004 à 17:37:49    

:lol:  :lol:  :lol:


Message édité par S1290 le 17-06-2004 à 17:39:14
Reply

Marsh Posté le 17-06-2004 à 17:42:51    

il faut savoir s'étonner de pas grand chose ;)

Reply

Marsh Posté le 17-06-2004 à 18:12:44    

Merci a tous ;)
 
je vais tacher de repondre a tous ... dans l'ordre !!
 
simogeo

Citation :


si je prend et j'additionne les width je trouve  
 
150px (menu) + 100% (content)
 
 
donc forcement, il y a un dépassement de 150px    
 
il faut que tu passes ton menu en %.
 
essayes par exemple 20% et passe ton content à 80%  
 


vi vi ok, mais justement je ne veux pas que mon menu soit redimentionnable ;) ... d'ou la taille fixe !! j'ai essayé et meme comme ça IE me met un decalage en haut ????  merci ;)
BODY {
PADDING: 0px;  
MARGIN: 0px;  
PADDING-TOP: 0px;  
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
}
.content {
  width: 80%;
 float:right;
}
.menu {
  width: 20%;
}
 
html>body .menu {
  position: fixed;
}
.centre {
width:30%;
float : left;
BACKGROUND-COLOR: #FFFFC8;
}
.gauche {
BACKGROUND-COLOR: #D4D0C8;
float : left;
width: 30%;
}
.droite {
BACKGROUND-COLOR: #C8C8FF;
float : left;
width: 40%;
 
}
 
shabata :

Citation :


bonne chance....
perso moi j'aurais gardé la structure en tableau et j'aurais juste changé les attributs  


non ça marche po avec ton code, je veux vraiment faire un affichage css pour passer tout par feuille de style, les tableaux ne me servant qu'a l'affichage de données, merci ;)
 
S1290

Citation :

v
--> Va voir cette page si ça aide :
http://openweb.eu.org/articles/dimensions_boites_css/
 
 
Bonne chance.  


;( vi vi je connais que trop ce site ... bon ben je vais tester encore cette nuit et sinon on prendra le prob autrement ;) merci ...
 
en tout cas merci a tous je fini les quelques touffes de cheveux qui me reste et aprés je me met a la couture, ou au point de croix j'hésite :D ... bonne soirée

Reply

Marsh Posté le 18-06-2004 à 01:43:27    

Et la prochaine évite de faire 50000 topics pour le même problème ça m'évitera de répondre pour rien...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed