Aller au contenu

probleme de comprehension pour les css

Mado

Par Mado
dans (X)HTML et CSS

 Partager

Sujets conseillés

Mado

Mado

Posté
Posté

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

Mado

Posté
  • Auteur
Posté

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

Mado

Mado

Posté
  • Auteur
Posté

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

Raphael

Posté
Posté (modifié)

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é par Sibelius
Denis

Denis

Posté
Posté

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

.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

Mado

Posté
  • Auteur
Posté
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

Monique

Posté
Posté

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

Mado

Posté
  • Auteur
Posté

bonjour a tous

Merci a Denis ;)

merci Monique ca va bien me servir :up:

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

merci

Monique

Monique

Posté
Posté

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

Denis

Posté
Posté

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 ? )

Denis

Denis

Posté
Posté

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

20cent

Posté
Posté

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. :P

Denis

Denis

Posté
Posté

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

20cent

Posté
Posté (modifié)

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. :whistling:

Modifié par 20cent
Xethorn

Xethorn

Posté
Posté

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

LaurentDenis

Posté
Posté
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

Denis

Posté
Posté
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... :(

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...