probleme de comprehension pour les css

[Mado]

bjour

voila une css dont je me sers pour un site que je suis entrain de faire

BODY {

margin: 0 ;

background-color : #FFFFFF;

font-family : Helvetica, Verdana, Geneva, Arial, sans-serif;

font-size : 12px;

font-style : normal;

font-weight : normal;

}

h1 {

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

}

h3 {

color: #000000;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

}

table {

width:100%;

spacing:0;

padding:4;

margin-left: auto;

margin-right: auto;

}

.table2 { la dans le html il faut que je mette class="table2" la ou je veux l'appliquer?

border-style:solid;

border-width:1px;

border-color:#ff9900;

margin-right: auto;

width:90%;

spacing:0;

padding:4;

}

.table3 { ce table correspondont au menu e sous nescape je le retrouve tout en bas? comment je dois faire pour qu'il reste en haut , en html on a valign="top" comment idem en css?

width: 100%;

height: 360px;

margin-left: 0;

spacing:0;

padding:4;

}

.table4 {

width: 478px;

height:360px;

spacing:0px;

padding:4px;

}

.table5 {

border-style:solid;

border-width:1px;

border-color:#99ffff;

margin-left: auto;

margin-right: auto;

width:100%;

height: 100%;

spacing:0px;

padding:4px;

}

tr,td {

color: #000000;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

padding: 3px;

}

td.aujourdhui{

width : 210px;

}

li {

font-family: Verdana, Arial, Helvetica, Geneva, sans-serif;

font-size: 12px;

color: black;

display : list-item;

}

div {

}

/*menu */

ul {list-style-type: none;} /* on supprime les puces, inutiles */ la sous IE les puces n'apparaissent pas mais sous nescape 4.7 si et decalée? comment faire pour regler ce probleme?.menu a {

width: 130px;

height: 20px;

display: block;

text-align: left;

border: 0px solid orange;

text-decoration: none;

color: #000000;

background: #ffffff;

left: auto;

}

.menu a:hover {

background: #ff9933;

border: 1px solid orange;

}

.menu a:active {

background: #A70300;

border: 1px solid gray;

color: #fff;

}

img {je voudrais que l'image soit en valign="top" comment faire en css?

margin-left: 0;

margin-top:0px;

left:230px;

}

vous avez bien compris que j'ai un tableau a 100% (css table)et dedans un tableau de deux colonnes avec le menu a gauche aussi dans un tableau (csstable3 que j'esseye de remplacer par <ul> <li> </li></ul>... ca marche ca avec nescape?)

et a droite une colonne avec encore un tableau de deux lignes 2 colonnes (csstable4)

en fait les pages bougent dans le table4 pourtant les images en haut dans la ligne 1 colspan=2 les images sont de la meme taille ensuite j'ai une image dans la colonne de gauche et du texte dans la colonne de droite

je crois que ma css n'est pas bonne... vous pouvez m'aider?

et je voulais savoir quand est ce qu'on utilise la balise id et comment fonctione les navigateurs quand on met la taille des polices en %

merci

[Mado]

j'ai pas du etre assez clair

spa grave

svp effacer ce topic

[Mado]

Les ID

Les ID servent à remplacer les classes lorsqu'il y a du JavaScript dans la page, car le JavaScript emploie lui aussi la syntaxe nom.nom (nom-point-nom).

La syntaxe est alors:

#nom_ID { propriété de style: Valeur; propriété de style: Valeur ...}

On l'appelera de la manière suivante:

<BALISE ID="nom_ID" > ... </BALISE>

On ne peut faire appel qu'à un seul même ID par page!

j'ai touve ca sur la balise id

http://www.commentcamarche.net/css/cssclass.php3

[Raphael]

Humm je nai pas trop compris quels soucis tu avais.

En tout cas, voici quelques explications :

- sur les id et les classes : http://www.alsacreations.com/articles/id_class/

- sur tes problèmes de compatibilité : http://www.alsacreations.com/articles/compatibilite/

[Mado]

voila ce que j'ai comme erreur sur le validateur acces pour tous j'ai du faire une erreur en mettant le lien de la css??? je ne comprends pas

merci de me dire la ou j'ai pas bien fait

<meta name="robots" content="index, follow">

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<META HTTP-EQUIV="Reply-to" CONTENT="">

<link rel="stylesheet" href="css.css">

</head>

Variable ! Priorité 2 - Vous devriez utiliser une feuille de style externe.

<body>

<table class="table2" summary="tableau de mise en page">

Difficile ! Priorité 1 - Identifiez les entêtes <th> des tableaux de données. Vérifiez que vous n'utilisez pas les 3 tableaux présents sur votre page à des fins de présentation.

Variable ! Priorité 2 - En déclarant vos styles CSS au sein de chaque page, vous perdez un des avantages des CSS, à savoir la facilité de maintenance.

<tbody>

<tr>

<td valign="top">

<table class="table3" summary="Menu">

Variable ! Priorité 2 - En déclarant vos styles CSS au sein de chaque page, vous perdez un des avantages des CSS, à savoir la facilité de maintenance.<caption>

Menu

</caption>

[Raphael]

C'est peut-être parce que ton link n'est pas complet.

Essaye :

<link rel="stylesheet" href="css.css" type="text/css" media="screen" />

Ou encore :

<style type="text/css">

<!--

_AT_import url(css.css);

//-->

</style>

Modifié 25 Avril 2004 par Sibelius

[Denis]

Ça fait pas mal de trucs à répondre... je suggère d'y aller un à un.

.table2 { la dans le html il faut que je mette class="table2" la ou je veux l'appliquer?

Exactement. Par exemple,

<table class="table2">

J'essaierai de répondre aux autres questions plus tard, je dois filer.

[Mado]

C'est peut-être parce que ton link n'est pas complet.

Essaye :

<link rel="stylesheet" href="css.css" type="text/css" media="screen" />

Ou encore :

<style type="text/css">

<!--

_AT_import url(css.css);

//-->

</style>

merci Sibelius c'etait bien ca sauf que j'ai pas mis /> a la fin

me reste un pro avec une balise th

[Monique]

Comme tu utilises le HTML 4.01 Strict, tu ne dois pas utiliser le / de fermeture pour les balises link, img ou br (obligatoire seulement en XHTML).

Voici un petit exemple de code de tableau, qui devrait t'aider à mieux interpréter l'effet des différentes balises.

th = le titre des colonnes

td = les données

<table border="1" width="75%" summary="sommaire">
  <caption>Tableau</caption>
    <tr>
      <th>Titre colonne 1</th>
      <th>Titre colonne 2</th>
    </tr>
    <tr>
      <td>ceci est la</td>
      <td>ligne 1</td>
    </tr>
    <tr>
      <td>et ceci est la</td>
      <td>ligne 2</td>
    </tr>
</table>

[Mado]

bonjour a tous

Merci a Denis

merci Monique ca va bien me servir

y a t-il un moyen de ne pas faire apparaitre ce qu'il y a entre les balises <caption></caption> et th

merci

[20cent]

Bonjour Marie,

caption, th
{
     display:none;
}

[Monique]

Bonjour Marie,

Tu peux créer une règle de style

.cache {
  visibility: hidden;
}

et attribuer la classe cache à l'élément de ton choix

<caption class="cache">Tableau</caption>

Par contre je ne comprends pas pourquoi tu veux masquer le contenu des cellules th.

Si leur mise en forme par défaut (texte en gras, centré dans la cellule) ne te convient pas, tu peux la modifier aussi à l'aide d'une règle de style.

[Denis]

Je prèfère personnellement recourir à visibility: hidden que display: none dans ce cas-ci.

Visibility: hidden préservera l'objet physiquement dans la page (la règle rendra le catpion simplement invisible), alors que display:none le fera physiquement disparaître (il n'existera plus). De plus, les lecteurs d'écrans traiteront le display: none comme non-existant, ce qui lui fait perdre pas mal de son intérêt... À quoi bon mettre un caption si par CSS on lui ordonne de ne plus exister ? )

[20cent]

Merci de la précision : je me posais justement la question.

[Denis]

Pas de quoi

Pour les curieux, la vérité est ici :

http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display

Display none : This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants. Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

http://www.w3.org/TR/REC-CSS2/visufx.html#visibility

Visibility hidden : The generated box is invisible (fully transparent), but still affects layout.

[20cent]

Je fais aussi partit des curieux mais je n'ai pas encore eu le courage de me plonger dans la doc, je l'avoue.

Un de ses jours, j'imprime tout (les traductions) ! Et j'en profite pour occuper mes longs trajets de transport en commun.

[Denis]

Mise en garde : l'auteur de ce message s'apprête à dire une énormité

Tu sais, lire les specs du W3C, c'est pas très excitant. Moi le premier, je ne les ai lu qu'à moitié. Et encore, souvent, je dirais au quart parce que je ne trouve pas letemps de m,y mettre à fond. Je me contente d'aller directement à l'essentiel. De manière générale, je préfère largement m'acheter un bon bouquin sur le sujet (ex : http://www.amazon.com/exec/obidos/tg/detai...=glance&s=books ) et me référer aux specs pour des cas d'utilisation précis, comme ceux mentionnés plus haut.

<enormite>
<cite>Lire un document du W3C dans le bus ? C'est le meilleur moyen de t'endormir et de manquer ton arrêt ! Le bouquin lui au moins, il a le mérite d'être un peu humanisé alors que les recommandations elles...;)</cite>
</enormite>

[20cent]

Et justement ! Pas moyen de mettre la main sur un ouvrage de qualité en français !

Je m'étais pris celui-ci mais il est plus destiné à un usage ponctuel au final.

EDIT : Pardon Marie de faire dévier ton sujet ainsi.

Modifié 27 Avril 2004 par 20cent

[Denis]

En français ? Peut-être le bouquin sur CSS écrit par Daniel Glazman ? Cependant, il commence à sérieusement prendre de l'âge (1998), je ne suis pas sûr que le contenu soit encore d'actualité. Enfin, s'il est toujours disponible, tu peux toujours vérifier :

http://www.amazon.fr/exec/obidos/ASIN/2212...2613181-3739358

[Xethorn]

Pour l'histoire du

valign="top" comment idem en css?

Je crois pas avoir vu quelqu'un donner une solution, en fait, c'est la même chose sauf que ton v devient vertical. Par contre, étant donné que j'utilise de moins en moins le html en lui-même pour définir ce genre de chose, si tu veux centrer, il faut utiliser :

vertical-align:middle

Pour le bas ce sera bottom.

+++

[LaurentDenis]

Visibility: hidden préservera l'objet physiquement dans la page (la règle rendra le catpion simplement invisible), alors que display:none le fera physiquement disparaître (il n'existera plus). De plus, les lecteurs d'écrans traiteront le display: none comme non-existant, ce qui lui fait perdre pas mal de son intérêt... À quoi bon mettre un caption  si par CSS on lui ordonne de ne plus exister ? )

Hélas :

When a page loads and JAWS parses the HTML, it also parses the linked and inline style information to determine which elements should be rendered. Any elements that use a style with "display:none" or "visibility:hidden" are not included in the JAWS rendering.

http://www.freedomscientific.com/fs_suppor...View.cfm?QC=565

(Bulletin d'information de freedomscientific, qui produit Jaws - 10/13/2003 - JAWS for Windows Version: 5.0 plus)

visibility:hidden revient donc au même que display:none pour Jaws : le caption en question ne sera pas restitué :-(

[Denis]

visibility:hidden revient donc au même que display:none pour Jaws : le caption en question ne sera pas restitué :-(

Arf... c'est loin d'être parfait un synthétiseur vocal...