taille différente pour tableau en css

Diogene · Message par **Diogene** » 20 févr. 2007, 11:59

Salut,

je voudrais faire une mise en page avec du css mais quand j'en mets un en dessous de l'autre les deux sont à la meme taille alors que je ne veux pas.

est il possible définir une taille pour chaque tableau car comme on peut le voir sur l'image la largeur du premier c'est mis à celle du second et ca pose probleme pour la mise en page.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **chinon37** » 20 févr. 2007, 12:26

conseil du jour: abandonner la mise en page par tableau qui ne pose que des problèmes au profit de la mise en page par conteneurs génériques <div>.

pour définir une largeur de cellule fixe, il suffit de double cliquer sur la cellule et de servir les renseignements adéquats dans la fenêtre qui s'ouvre.

Diogene · Message par **Diogene** » 20 févr. 2007, 21:15

c'est pourquoi j'utilise du css ou alors je comprends plus rien

maintenant le probleme que j'ai c'est que sous IE c'est nickel tout comme je veux mais sous firefox j'ai plus de fond de site et mes tableaux en css ne donne plus rien

y a t il une raison a cela

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 20 févr. 2007, 22:06

Diogene a écrit :c'est pourquoi j'utilise du css ou alors je comprends plus rien

Je dois avouer que moi non plus. D'après ce que je vois, il s'agit de mise en page par tableaux. Qu'il y ait CSS derrière pour mettre en forme les tableaux n'y change rien: cela reste des tableaux.

Un tableau sert à présenter des données tabulaires. Dans l'illustration, je ne vois que de la mise en page [gauche][centre].
Pourrions-nous avoir une adresse ou le code pour voir de quoi il retourne?

Message par **chinon37** » 21 févr. 2007, 08:21

le css sert à définir les styles d'une page web et la position des éléments à l'intérieur de cette page.
Ce n'est pas parce que les tableaux se verront attribuer des règles css que ça enlèvera les inconvénients de la mise en page par tableaux.

Diogene · Message par **Diogene** » 21 févr. 2007, 13:53

voilà le site que j'essaye de faire Mon site je précise bien que je début hein

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 21 févr. 2007, 15:34

Bon, ben... c'est quel logiciel qui produit du code comme ça?

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Association Kung Fu Club Baulois</title>
</head>
<body style="background-image: url(images/fond%20du%20site.jpg);">
<div style="text-align: center;">
<img style="width: 800px; height: 100px;" alt="Kung Fu Club Baulois" src="images/Kung%20Fu%20Club%20baulois%20-%20en%20tete.jpg"><br>
<div style="text-align: left;">
<div style="text-align: right;">
<div style="text-align: left; width: 798px;">
<script src="http://www.vbr.fr/jsClient.asp?xid=9D9A017F-D160-4B1F-9395-BC2E249D5227&cpt=cpt10&u=3&zwidth=5&nbdepart=0&s=1">
</script><br>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>News</title><style type="text/css">
#centre {
border: 0px solid red;
width: 100%;
float: left;
}
</style>
...

parce que là, franchement, je ne vois pas comment un navigateur pourrait y retrouver ses jeunes.
Des blocs <div> sont entamés, imbriqués les uns dans les autres. Et, très franchement, je ne vois pas où chacun se termine...

Code : Tout sélectionner

<div style="text-align: left;">
<div style="text-align: right;">
<div style="text-align: left; width: 798px;">
<script ...

Il faut utiliser les balises <div> comme des parenthèses, dans une expression mathématique. Chaque bloc "div" a un début et une fin. A chaque balise <div> correspond une autre balise </div>.
Faute de voir clairement où commence et se termine quoi, j'avoue ne pas être compétent pour donner un avis.
Bon courage.
Pas taper hein! Non, pas taper...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

Diogene · Message par **Diogene** » 22 févr. 2007, 11:44

c'est vrai que c'est zarb ca me l'avait jamais fait ca

, mais n'y connaissant pas grand chose je me débrouille comme je peux

sinon vous me dites que ce n'est pas comme ca que je dois faire mais alors de quel facon je dois m'y prendre pour avoir le rendu que je veux ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **chinon37** » 22 févr. 2007, 12:14

Pour les textes défilant, une lecture intéressante: http://forum.alsacreations.com/topic-5- ... ilant.html

J'ai fait un premier nettoyage grossier du code qui devrait t'aider à y voir plus clair:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
     <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
	 <title>
      Association Kung Fu Club Baulois
    </title>
   
    <style type="text/css">
#gauche {
    border: 0px solid red;
    width: 30%;
    float: left;
    }
    #centre {
    border: 0px solid red;
    width: 30%;
    float: left;
    }
    #droite {
    border: 0px solid red;
    width: 30%;
    float: left;
    }
    .deroulant {
    font-family: Arial,Helvetica,sans-serif;
    }

    </style>
  </head>
  <body linkifymax="0" linkifycurrent="0" linkifying="true" style=
  "background-image: url(images/fond%20du%20site.jpg);">
    <img style="width: 800px; height: 100px;" alt="Kung Fu Club Baulois" src=
    "index%2001_fichiers/Kung%2520Fu%2520Club%2520baulois%2520-%2520en%2520tete.jpg"><br>
    <script src="index%2001_fichiers/jsClient.htm" type="text/javascript">
</script><br>
    <marquee style=
    "border: 4px ridge rgb(130, 55, 60); background-image: url(file:///E:/Web/images/fond%20tableau.jpg); background-attachment: fixed; width: 792px;"
    behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="3" scrolldelay="3" direction=
    "left" height="20">Test pour voir si ca marche</marquee><br>
    <br>
    <div style=
    "border: 4px ridge rgb(130, 55, 60); font-family: Calibri; color: rgb(250, 250, 250); text-align: center; background-image: url(images/fond%20tableau.jpg); width: 210px;"
    id="gauche">
      <script language="javascript" type="text/javascript">
aujourdhui = new Date();
      j = aujourdhui.getDate();
      if (j<10)
      {
      j = "0"+j;
      }
      d = aujourdhui.getDay();
      m = aujourdhui.getMonth();
      a = aujourdhui.getFullYear();
      jour = new Array('Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi');
      mois = new Array('janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre');
      dater = '' + jour[d] + ' ' + j + ' ' + mois[m] + ' ' + a + '';
      </script><script language="javascript" type="text/javascript">
document.write(dater);
      </script>Jeudi 22 février 2007
    </div>
    <div style=
    "border: 4px ridge rgb(130, 55, 60); color: rgb(250, 250, 250); font-family: Calibri; text-align: center; background-image: url(images/fond%20tableau.jpg); background-attachment: fixed; width: 325px;"
    id="centre">
      centre
    </div>
    <div style=
    "border: 4px ridge rgb(130, 55, 60); width: 230px; font-family: Calibri; text-align: center; color: rgb(250, 250, 250); background-image: url(images/fond%20tableau.jpg); background-attachment: fixed;"
    id="droite">
      <script language="javascript" type="text/javascript">
function heure()
      {
      auj = new Date();
      h = auj.getHours();
      m = auj.getMinutes();
      s = auj.getSeconds();
      if(h<10)
      { h = '0'+h; }
      if(m<10)
      { m = '0'+m; }
      if(s<10)
      { s = '0'+s; }
      date = ''+h+'h'+m+'m'+s+'';
      if(document.getElementById)
      {
      document.getElementById("heure_dyna").innerHTML = date;
      }
      else if(document.all)
      {
      document.all["heure_dyna"].innerHTML = date;
      }
      }
      window.setInterval("heure()",1000);
      </script>
      <div style="position: relative; width: 220px;" id="heure_dyna">
        11h48m48
      </div>
    </div><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div style="text-align: center;">
      <img style="width: 240px; height: 200px;" alt="En construciton" src=
      "index%2001_fichiers/en%2520construction.gif"><br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <a href="mailto:kungfuclubbaulois@free.fr"><img style="border: 0px solid ; width: 128px; height: 101px;" alt=
      "Notre adresse email" src="index%2001_fichiers/e-mail.gif"></a>
    </div>
  </body>
</html>

Diogene · Message par **Diogene** » 22 févr. 2007, 16:22

apparement j'y suis pas pour grand chose parce quand je colle le code dans kompozer et bien des que j'enregistre ca remets comme avant

je crois que je vais repasser sur nvu

sinon vous ne m'avez toujours pas dit si la maniere dont je m'y prends est bonne ou non car en fait je mets le code css :

Code : Tout sélectionner

</style><meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><style type="text/css">
#centre {
border: 0px solid red;
width: 30%;
float: left;
}

pour ensuite intégrer le code javascript que j'ai

Code : Tout sélectionner

<marquee
 style="border: 4px ridge rgb(130, 55, 60); background-image: url(file:///E:/Web/images/fond%20tableau.jpg); background-position: center; background-attachment: fixed; width: 790px;"
 behavior="scroll" onmouseover="this.stop();"
 onmouseout="this.start();" scrollamount="3"
 scrolldelay="3" direction="left" height="20"><nobr><span
 class="font-size:medium"><span style="color: white;"><b>Test
Horaire d'entrainement - Lundi - tai chi chouan : 20h/21h / Mardi -
Sanda/Sanshou : 20h/21h30 / Vendredi - Tâo lu (avec arme): 20h/21h30
</b></span></span></nobr></marquee>

et pour finir je fait une mise en forme avec couleur, bordure et fond mais entre IE et firefox ca donne pas du tout pareil, soit firefox n'affiche pas tout soit IE décale la mise en page

quand au lien pour le texte défilant perso je trouve ca utile et pas agressif, d'autant que la raison pour laquelle je l'utilise c'est pour mettre des horaires sinon on peut dire la meme chose pour l'heure, la date et encore que dire de toute les pubs qu'il y a sur le net

d'autant que si l'on passe la souris dessis le texte s'arrete

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 22 févr. 2007, 17:54

Diogene a écrit :

Code : Tout sélectionner

</style><meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><style type="text/css">
#centre {
border: 0px solid red;
width: 30%;
float: left;
}

border: 0px... Il est inutile de préciser une couleur ou un type, puisqu'il n'y a pas de bordure.
Donc, cette directive de style peut être supprimée.

Code : Tout sélectionner

<marquee
 style="border: 4px ridge rgb(130, 55, 60); background-image: url(file:///E:/Web/images/fond%20tableau.jpg); background-position: center; background-attachment: fixed; width: 790px;"
 behavior="scroll" onmouseover="this.stop();"
 onmouseout="this.start();" scrollamount="3"
 scrolldelay="3" direction="left" height="20"><nobr><span
 class="font-size:medium"><span style="color: white;"><b>Test
Horaire d'entrainement - Lundi - tai chi chouan : 20h/21h / Mardi -
Sanda/Sanshou : 20h/21h30 / Vendredi - Tâo lu (avec arme): 20h/21h30
</b></span></span></nobr></marquee>

On a dit suffisamment de mal de la "balise" <marquee>. Je ne reviendrai donc pas là-dessus.
Par contre, il y a un souci au niveau de l'image de fond: sa référence est sur un disque E:. Il faut donc relativiser les URL.
Avec KompoZer, c'est facile: voir http://info.sio2.be/kpz/2/12.php au bas de la page. Avec NVU, je pense qu'il faut ajouter l'extension UrlCleaner. Si quelqu'un par ici utilise encore NVU, il/elle confirmera.

et pour finir je fait une mise en forme avec couleur, bordure et fond mais entre IE et firefox ca donne pas du tout pareil, soit firefox n'affiche pas tout soit IE décale la mise en page

Là, maintenant, je ne vois pas les directives de mise en page qui devraient être respectées. Je peux mettre un joker?

quand au lien pour le texte défilant perso je trouve ca utile et pas agressif, d'autant que la raison pour laquelle je l'utilise c'est pour mettre des horaires sinon on peut dire la meme chose pour l'heure, la date et encore que dire de toute les pubs qu'il y a sur le net

Ah, les pubs. N'en dégoûtez pas ceux qui aiment. Quant à l'heure et la date, je n'en vois pas vraiment l'intérêt: c'est affiché par mon PC en haut et à droite.

Message par **chinon37** » 22 févr. 2007, 18:04

ymai a écrit :Quant à l'heure et la date, je n'en vois pas vraiment l'intérêt: c'est affiché par mon PC en haut et à droite.

Pffouu!, moi, c'est en bas à droite

Diogene, désolé d'être désagréable, mais si le code que je t'ai donné déraille, c'est que tu l'as mal collé dans Kompozer. Il est loin d'être parfait (vite fait) mais il a le mérite de nettoyer déjà nettement ta page.
Comment l'utiliser:
- ouvrir un nouvel onglet dans Kpz (nouvelle page)
- revenir sur ce forum et sélectionner l'ensemble du code que j'ai mis ci-dessus en faisant ctrl+c
- revenir à Kpz > onglet source > ctrl+a puis ctrl+v
la page doit être opérationnelle

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

Message par **Ymai** » 22 févr. 2007, 18:34

Je m'excuse de vous demander pardon: en haut

D'accord pour le reste.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

Message par **chinon37** » 22 févr. 2007, 18:58

évidemment, t'es sous minus...
Wineuro, c'est en bas y'a pas photo!

Diogene · Message par **Diogene** » 22 févr. 2007, 23:56

chinon37 a écrit : Diogene, désolé d'être désagréable

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

non non pas désagéable, et je te remercie du petit nettoyage

mais je sais encore faire un copier coller meme d'un code

et ca s'affiche bien mais une fois enregistré ca se remets comme la code afficher sur mon site et j'y suis pour rien

sinon c'est qu'un site pour une asso sportive et sachant quand web design j'y connais pas grand chose non plus je voulais faire un truc simple, sachant que le texte défilant c'est pour mettre les horaires d'entrainement et la date et l'heure bah c'est pour voir si c'est bientot l'heure du cours

sinon pour la bordure rouge c'est pour voir au début au se trouve le cadre pour que je puissse insérer mon javascript ensuite je l'enlève mais là je l'ais pas fait

bon je vais retester avec le code nettoyé

Geckozone

taille différente pour tableau en css

taille différente pour tableau en css

Qui est en ligne ?