<table>---> <Div> ?

<table>---> <Div> ? - HTML/CSS - Programmation

Marsh Posté le 07-06-2005 à 17:56:35    

Salut, j'ai un site utilisant les table pour la mise en page, j'ai cru comprendre que ce serais mieu en <div>, j'en utilise deja pour certaine chose, je sais faire un peu de css, mais je ne sais pas comment je pourrais passer la presentation general en <div>
 
Pour l'instant j'ai  
 
      -------------------
      |   En tete        |
      -------------------
      |m |               |
      |e | Corp          |
      |n |               |
      |u |               |
      |  |               |
      --------------------
 
je voudrais passer ça en <div>
 
QQ pourrait me montrer qq ligne pour faire ça?
j'ai deja suivi le tuto de base de http://openweb.eu.org/articles/initiation_float/ mais ça ne me parrais pas trés clair :)
 

Reply

Marsh Posté le 07-06-2005 à 17:56:35   

Reply

Marsh Posté le 07-06-2005 à 17:59:39    

tu vois ma signature?
tu cliquette sur le lien de gauche (celui qui est au milieu)
 
Et ça se fait pas "en quelques lignes" [:pingouino]
 
Mais bon si tu veux vraiment un exemple [:pingouino]
 
http://www.csszengarden.com [:pingouino]


Message édité par masklinn le 07-06-2005 à 18:00:26

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-06-2005 à 18:08:21    

un bon exemple (à part la pub) :
http://membres.lycos.fr/ti89prog/

Reply

Marsh Posté le 07-06-2005 à 18:10:02    

ritzle a écrit :

un bon exemple (à part la pub) :
http://membres.lycos.fr/ti89prog/


C'est quoi cette merde là? [:pingouino]
C'est bourré de tables [:pingouino]
Tu t'es vu quand t'as bu? [:pingouino]
En plus c'est moche [:pingouino]
Et le site est à chier [:pingouino]
 
Un vrai bon exemple ça serait http://www.stuffandnonsense.co.uk [:pingouino]


Message édité par masklinn le 07-06-2005 à 18:11:08

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-06-2005 à 18:12:21    

Délicatesse, quand tu nous tiens :P


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 07-06-2005 à 18:14:03    

sibelius a écrit :

Délicatesse, quand tu nous tiens :P


http://www.ougl.net/images/pubs/nietzsche.gif
 
J'emmerde la délicatesse [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 07-06-2005 à 19:02:41    

En fait, je Demandais "en quelques" lignes, parceque je voudrais avoir juste les ligne necessaire, sans le contenu des sites qui vas avec

Reply

Marsh Posté le 07-06-2005 à 19:21:50    

Pour quelques gabarit simple en css :
http://css.alsacreations.com/Model [...] age-en-CSS
 

ritzle a écrit :

un bon exemple (à part la pub) :
http://membres.lycos.fr/ti89prog/


 
Faut avouer que le site contient a peu pres tout ce qu'il ne faut pas faire.
 

  • Hébergeur moisi
  • Frames
  • Tableaux
  • Aucune sémantique
  • Du code HTML en dehors du body
  • Pas de CSS


Bref ... le citer en bon exemple est une grave erreur ...


Message édité par afbilou le 07-06-2005 à 19:22:21
Reply

Marsh Posté le 07-06-2005 à 19:26:01    

Peu etre etais ce l'exemple a ne pas suivre qu'il voulait dire? :p

Reply

Marsh Posté le 07-06-2005 à 20:09:03    

non, je me suis completement trompé. je demande votre indulgence. j'ai fait une grave erreur en citant ce site.
mais si vous pensez que c'est un exemple à ne pas suivre, ca a quand meme servi a quelque chose, j'en suis heureux.  :D


Message édité par ritzle le 07-06-2005 à 20:09:54
Reply

Marsh Posté le 07-06-2005 à 20:09:03   

Reply

Marsh Posté le 07-06-2005 à 20:11:41    

# Hébergeur moisi : en effet
# Frames : ca c'est la pub uniquement qui fait ca
# Tableaux : en effet, ca pue
# Aucune sémantique : ca veut dire quoi ca ?
# Du code HTML en dehors du body : ou ca ?
# Pas de CSS : un peu quand meme...

Reply

Marsh Posté le 07-06-2005 à 20:53:10    

Citation :

# Aucune sémantique : ca veut dire quoi ca ?


ça veut dire savoir utiliser les balises html pour ce qu'elles ont été prévu.
 
Bref les <table> pour des tableaux de données,  
<p> pour les pararagraphes,  
<h1> <h2> <h3> (etc) pour les different titres de ta page selon leur importance,  
<em> pour souligner un passage plus important dans ton texte,  
<acronym> pour définir un acronyme (au lieu de le faire dans une parenthèse à côté),  
et encore plein d'autres trucs dans le même principe...

Reply

Marsh Posté le 07-06-2005 à 22:18:13    

sémantique, j'aime bien le mot, ça saonne pas mal :pouf

Reply

Marsh Posté le 07-06-2005 à 22:53:09    

Bebopnet a écrit :

Citation :

# Aucune sémantique : ca veut dire quoi ca ?


ça veut dire savoir utiliser les balises html pour ce qu'elles ont été prévu.
 
Bref les <table> pour des tableaux de données,  
<p> pour les pararagraphes,  
<h1> <h2> <h3> (etc) pour les different titres de ta page selon leur importance,  
<em> pour souligner un passage plus important dans ton texte,  
<acronym> pour définir un acronyme (au lieu de le faire dans une parenthèse à côté),  
et encore plein d'autres trucs dans le même principe...


en effet, aucune sémantique  :pfff:

Reply

Marsh Posté le 08-06-2005 à 16:24:01    

salut, j'ai Bien pris une structure de site proposé sur  
http://css.alsacreations.com
mais j'ai un proleme, je voudrais que la molette de ma souris puisse faire defiler, mais ça me marche pas :/ coment faire ça ??
 
j'ai pris http://css.alsacreations.com/modeles/modele11.htm

Reply

Marsh Posté le 08-06-2005 à 17:13:17    

Bug Firefox, le scrolling à la molette n'est pas géré sur les zones en overflow: auto.
 
Teste sous Opera ou IE par exemple, ça marche.
 
C'est un problème de navigateur.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 17:22:22    

ha ok, merci
 
Autre petite chose, Quel est la diference entre le . et la # pour definir les classe de CSS ??
 
#header
 
.menu
 

Reply

Marsh Posté le 08-06-2005 à 17:26:51    

. = classe, il est possible de donner la même classe à plusieurs éléments et de donner plusieurs classes à un élément unique (class="bou let foo bar" fera que mon élément aura en même temps les classes "bou", "let", "foo" et "bar" )
 
# = id, identifiant unique, un seul par élément et un seul élément de chaque page peut avoir un ID donné.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 17:30:11    

^.^Ok merci  

Reply

Marsh Posté le 08-06-2005 à 19:50:00    

j'ai une question en ce qui concerne la CSS.
J'ai un truc qui me chagrinne
 
voici lexemple tiré d'un site bien connu
http://css.alsacreations.com/xmedi [...] s/tuto.htm
 
comment faire pour que la totalité du site soit centrer sur la page. Car un site qui se trouve dans un coin a gauche, c'est pas top pour les grosse resolutions d'écran.
 
jai fais différent testes mais jai tout plein de déformation, c'est une horreur.
 
merci

Reply

Marsh Posté le 08-06-2005 à 20:10:32    

prenons le code suivant :  
 

Code :
  1. <html>
  2. <head>
  3. <title></title>
  4. <style>
  5. #page{
  6.  border: 1px solid black;
  7.  height:300px;
  8.  width:500px;
  9.  text-align:center;/*Ca c'est pour corriger une merde de IE*/
  10.  margin-left:auto;
  11.  margin-right:auto;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="page"></div>
  17. </body>
  18. </html>


 
avec le doctype
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


 
le rectange sera placé à gauche sous IE, et centré sous FF
c'est IE qui fout sa merde ici.
 
avec le doctype là :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


 
ou celui là
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">


Mais préfère plutôt le premier Doctype


Message édité par gatsusat le 08-06-2005 à 20:13:34
Reply

Marsh Posté le 08-06-2005 à 20:28:24    

merci merci.
Rien a dire, c'est de la daube IE.
Ils font rien comme les autres
 
EDIT:
 
Bon apres des plusieurs nouveaux tests, je ne trouve pas la solution pour centrer le design.
Avec les tableaux, ca donnerai cela  

Code :
  1. <table>
  2.      <tr><td align="center">
  3.           <table><tr><td>.... contenue ....</td></table>
  4. </table>


 
 
Mais avec les CSS, si je fais cela, tout mon texte se centre, mais le design ne bouge pas.  :??:


Message édité par Badze le 08-06-2005 à 20:38:07
Reply

Marsh Posté le 08-06-2005 à 20:40:51    

Badze a écrit :

merci merci.
Rien a dire, c'est de la daube IE.
Ils font rien comme les autres
 
EDIT:
 
Bon apres des plusieurs nouveaux tests, je ne trouve pas la solution pour centrer le design.
Avec les tableaux, ca donnerai cela  

Code :
  1. <table>
  2.      <tr><td align="center">
  3.           <table><tr><td>.... contenue ....</td></table>
  4. </table>


 
 
Mais avec les CSS, si je fais cela, tout mon texte se centre, mais le design ne bouge pas.  :??:


Avec les CSS tu fais pas ça [:spamafote]  
 
Avec les CSS, il te faut mettre un text-align: center sur le parent de l'élément à centrer pour MSIE et des marges latérales en auto pour les autres navigateurs [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 21:21:36    

Code :
  1. .centre {
  2. text-align:center;/*Ca c'est pour corriger une merde de IE*/
  3. margin-left:auto;
  4. margin-right:auto;}


 
et si je fais apres
 
<div class="centre">  ..... mon contenu avec design et autres CSS ... </div>
 
Eba cela ne centre que mon texte et mon design ne se trouvera qu'en haut a gauche de la page (ce que je ne veux pas)
 
essai avec lexemple ci http://css.alsacreations.com/xmedi [...] s/tuto.htm
prendre le code et essai si tu le souhaite.


Message édité par Badze le 08-06-2005 à 21:23:25
Reply

Marsh Posté le 08-06-2005 à 21:24:30    

faudrait peut être lire ce que j'écris -_-


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 21:39:47    

Hum, ce n'est pas tres clair pour moi alors.
Apres plusieurs relectures, je ne vois pas vraiment.

Reply

Marsh Posté le 08-06-2005 à 21:49:29    

tu mets text-align: center sur le parent de l'élément, et les marges latérales à auto sur l'élément lui même


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 21:52:31    

voila je corrige ma connerie de tout à l'heure
met le text-align:center sur le body
 

Code :
  1. <html>
  2. <head>
  3.     <title></title>
  4.     <style>
  5.     Body{
  6.         text-align:center /*Correction de problème avec IE pour le centrage*/
  7.     } 
  8.     #page{
  9.         border: 1px solid black;
  10.         height:300px;
  11.         width:500px;
  12.         margin-left:auto;
  13.         margin-right:auto;
  14.     }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id="page"></div>
  19. </body>
  20. </html>


Message édité par gatsusat le 08-06-2005 à 21:53:37
Reply

Marsh Posté le 08-06-2005 à 22:52:56    

bon voici ce que ca donne avec les changements
http://bibi35.free.fr/test/
 
jai supprimer les autres tests avec les "auto".
La partie gauche ne veux pas suivre ainsi que la partie centrale.
 
voici le css.
http://bibi35.free.fr/test/styles.css

Reply

Marsh Posté le 08-06-2005 à 23:02:02    

Ca veut dire quoi "ne veut pas suivre" ?
 
Quel est le résultat final attendu ?


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

Marsh Posté le 08-06-2005 à 23:05:17    

Je veux que tout ce qui est afficher soit centrer sur la page.
 
Un design centrer, et mon text au centre soit coller sur la droite sans dépasser les bords du design

Reply

Marsh Posté le 08-06-2005 à 23:12:08    

Bah alors pour commencer tu centres #page au lieu de centrer chacun des DIV.


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

Marsh Posté le 08-06-2005 à 23:15:12    

ceci est fais a present, toujours rien au bou du fil :'(

Reply

Marsh Posté le 08-06-2005 à 23:15:18    

[:petrus75]
 
t'as un div d'id "page", c'est probablement le seul élément de ta page qui ait un nommage correct et sémantique, tu peux m'expliquer pourquoi tu le style pas? [:petrus75]
 
puis c'est bourré de markup à la con [:petrus75]
 
et puis pourquoi ton menu est en position: absolute? [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 08-06-2005 à 23:20:08    

c bon pour page
 
#page{  
 
  text-align:center;
  margin-left:auto;  
  margin-right:auto;  }
 
et qu'entend tu par markup.
 
Et pour labsolu, il le faut apparement
la source est http://css.alsacreations.com/xmedi [...] s/tuto.htm

Reply

Marsh Posté le 08-06-2005 à 23:22:38    

Badze a écrit :

c bon pour page
 
#page{  
 
  text-align:center;
  margin-left:auto;  
  margin-right:auto;  }


Oui mais il faut définir une largeur car sinon le DIV prends toute la largeur.
 
text-align s'applique au conteneur, cf http://incongru.webdynamit.net/CentrageHorizontal

Badze a écrit :


et qu'entend tu par markup.


Le balisage (tags et attributs)

Badze a écrit :


Et pour labsolu, il le faut apparement
la source est http://css.alsacreations.com/xmedi [...] s/tuto.htm


Oui mais ça ne marchera pas forcément si tu veux que tout soit centré. Mets le flottant celui-là


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

Marsh Posté le 08-06-2005 à 23:22:57    

sans absolu, jai un décalage entre mon menu et le HEAD1 et HEAD2

Reply

Marsh Posté le 08-06-2005 à 23:25:37    

gm_superstar a écrit :

Oui mais il faut définir une largeur car sinon le DIV prends toute la largeur.


 
Je veux justement que ca prenne tout la largeur de la page.
C'est a dire que peux importe la résolution d'écran de l'utilisateur, que la site soit centrer sur la largeur d'ecran

Reply

Marsh Posté le 08-06-2005 à 23:28:16    

Badze a écrit :

sans absolu, jai un décalage entre mon menu et le HEAD1 et HEAD2


Ca s'enlève ça. Mais mets à jour ta page qu'on y comprennent quelque chose :o

Badze a écrit :

Je veux justement que ca prenne tout la largeur de la page.
C'est a dire que peux importe la résolution d'écran de l'utilisateur, que la site soit centrer sur la largeur d'ecran


Heu [:icon15]
 
Comment quelque chose qui doit prendre toute la largeur de la page peut il être centré ?


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

Marsh Posté le 08-06-2005 à 23:31:14    

en effet pour la largeur, je ne comprennais pas dans ce sens :p
 
http://bibi35.free.fr/test/styles.css
http://bibi35.free.fr/test/

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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