peut on choisir un tableau préci avec CSS ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : peut on choisir un tableau préci avec CSS ?

vincz51

Bonjour à tous et merci de m'accueillir, je suis actuellement en train de réaliser un site internet (pas de problème jusque là...). Cependant mes talents en Css ne s'arrête que pour la mise en forme des liens, c'est pas grand chose mais ça aide...

Ma question concerne ce site : www.ikki63.fr dont voici le code de la page d'accueil (j'ai remis le menu dans le code car il est en principe en php sur un fichier à part).

Code :

<html>
<head>
<title>IKKI63.fr, Le site de la communauté Saint Seiya</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="conception de logos boutons lignes publicité interface pour page web">
<meta name="keywords" content="gratuit,image,images,photo,photos,sms,internet,mp3,interface,kit,recherche,gif,referencement,gifs,bouton,france,logos,logo,pub,publicité,">
<meta name="Author" content="phil by www.imalog.fr.st">
<link rel="stylesheet" type="text/css" href="ikki63-1.css" /></head>
<BODY BGCOLOR="#F4F4F4"BGPROPERTIES=FIXED LEFTMARGIN=5 MARGINWIDTH=5 TOPMARGIN=5 MARGINHEIGHT=5>
<script language="Javascript">
</script>
<TABLE width=828 align=center font color="black" >
<TBODY>
<TR vAlign=top>
<TD width="933" height="923" vAlign=top class=navigation>
<TABLE width="96%" height="895" cellPadding=0 bgcolor="#FFEEDD">
<TBODY>
<TR vAlign=top>
<TD width=150 height="19"> </TD>
</TR>
<TR vAlign=top>
<TD vAlign=top width=150 rowSpan=2><TABLE width="150" height="836" align=center>
<TR borderColor=#ffffff>
<TD width="143" height="830" align="left" valign="top" bgcolor="#FFEEDD">
<img src="design/ikki.gif" width="36" height="41" />Manga
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">L'oeuvre originale</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Episode G</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Next Dimension</a>
<img src="design/menu-puce3.gif" width="9" height="14" align="left"> <a href="#">Lost Canvas</a>
<img src="design/ikki.gif" width="36" height="41" />Animé
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">La série télé</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Le Sanctuaire</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Asgard</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Poséidon</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Hadès</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Les films</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Eris</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Asgard</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Abel</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Lucifer</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Tenkaï - Hen</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Les projets</a>
<img src="design/menu-puce3.gif" width="9" height="14" align="left"> <a href="#">Les DVD</a>
<img src="design/ikki.gif" width="36" height="41" />Figurines
<img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Les Vintages</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Rééditions</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Bootlegs</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Décors</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Customs</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Les Myth Cloth</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint de Bronze</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint d'Argent</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint d'Or</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Marina</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Spectres</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Décors</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Customs</a>
<img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Divers Goodies</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Cellulo</a>
<img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Art Book</a>
</TD>
</TR>
<TBODY>
</TBODY>
</TABLE></TD>
<TD width="676" height="835">
<HR COLOR="#000080">
<TABLE width="661" height="83" bgcolor="">
<TR VALIGN="TOP" BORDERCOLOR="#000000">
<TD WIDTH=651><DIV align=center><img src="design/banniere1-copie.jpg" width="656" height="120" align="absmiddle"></DIV></TD>
</TR>
</TABLE>
<HR COLOR="#000080">
<TABLE width="99%" bgcolor="#FFEEDD">
<TBODY>
<TR vAlign=top>
<TD height="23" colSpan=2 vAlign=top bgcolor="#FFEEDD">
<DIV align=left>
<DIV align=left><a href="http://www.ikki63.fr" target="_top">Accueil</a> - <a href="http://www.forum-ikki63.com/" title="Allez vers le forum" target="_top">Forum</a> - <a href="http://www.ikki63.fr/ikkior.php" target="_top">Ikki d'Or</a></DIV></TD></TR>
<TR vAlign=top>
<TD width=449 height="622" align="center" vAlign=top bordercolor="#FFFFFF" bgcolor="#FFEEDD">
<DIV align=center>
<TABLE width="83%" align=center bordercolor="#FFFFFF">
<TBODY>
<TR vAlign=top>
<TD width=355 height="247" align="center" bgcolor="#FFEEDD">
<TABLE width="90%" border=1 align="center" borderColor=#000000>
<TBODY>
<TR borderColor=#ffffff>
<TD align="center" valign="top" bgcolor="#FFFFFF"><CENTER>
<?
if(!isset($_GET['page'])) { $i = '1'; } else { $i = $_GET['page']; }
include('http://www.ikki63.fr/news/index.php?page='.$i);
?>
</CENTER></TD></TR></TBODY></TABLE>
<HR COLOR="#000080">
<DIV ALIGN="center">
</DIV>
</TD>
</TR></TBODY></TABLE> </DIV></TD>
<TD width=196 vAlign=top bgcolor="#FFEEDD">
<TABLE WIDTH=93% BORDER=1 align="center" BORDERCOLOR="#FFFFFF" BGCOLOR="#FFFFFF">
<TR VALIGN="TOP" BORDERCOLOR="#000000">
<TD bordercolor="#FFFFFF" bgcolor="#FFEEDD"><DIV align=CENTER><FONT
color=#000000>
<div align="center">
CHAT
<?php
define('MYSPEACH_TEST', 1);
$my_ms['root']="/home/www/509deb4638439704f72efea607403400/web/myspeach";
include($my_ms['root'].'/chat.php');
?>
</div></TD>
</TR>
</TABLE>
</TD>
</TR></TBODY></TABLE></TD></TR>
<TR></TR>
<TR>
<TD width=150 height="37"><div align="center">designed By <a href="mailto:dautel.vincent1@free.fr">Vincz</a></div></TD>
</TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</BODY></HTML>

Comme vous pouvez le voir j'ai utilisé le code CSS suivant qui ce situe à la racine de mon site sur une feuille à part

Code :

@charset "windows-1252";
a:link {color: #000000; text-decoration: none}
a:visited {color: #000000; text-decoration: none}
a:hover {color: #666666; text-decoration: none}
TABLE { border: 1px solid #F87136; }

Cependant avec ce code table, tous mes cadres sont mis en avant avec la bordure. Or ce n'ai pas du tout ce que je recherche, je souhaite juste pouvoir sélectionner le cadre dont j'ai seulement besoin afin de lui appliquer la bordure adéquate et non obtenir l'ensemble des bordures de mes tableaux comme cela est le cas actuellement est qui et vraiment peu esthétique.

S'il y a un moyen de réaliser ça je suis preneur. En fait je recherche juste la manière afin de comprendre pourquoi je n'y arrive pas, j'ai surfer pas mal sur le net, mais je n'ai trouver qu'une sombre histoire de balise <class> et <div> auquel je n'ai absolument rien compris car le vocabulaire est vraiment obscure et je n'arrive même pas à comprendre pourquoi il faut remettre le CSS dans le code de la page principale alors que pour pas mal d'autres ça marche sur un fichier à part ?

J'ai bien sur rechercher sur le forum, mais je n'ai pas du tout trouver une explication m'indiquant ne serai-ce la marche à suivre ou offrant une timide explication sur ce thème bien précis.

merci pour vos futurs réponses

cordialement

Publicité

skeye

Il faut donner un id à la table en question (<table id="toto"> ), et ensuite mettre le style qui va bien sur #toto au lieu de le mettre sur table.

---------------
Can't buy what I want because it's free -

vincz51

D'accord, ce qui veut dire qu'il faut que je fasse ça sur la feuille de style

Code :

TABLE id="cadre1" { border: 1px solid #F87136; }
TABLE id="cadre2" { border: 1px solid #F87136; }
TABLE id="cadre3" { border: 1px solid #F87136; }

Mais après sur ma page html ça devrai ressembler à ça ?

Code :

# <TABLE style="cadre1" width="96%" height="895" cellPadding=0 bgcolor="#FFEEDD">
# <TBODY>
# <TR vAlign=top>
# <TD width=150 height="19"> </TD>
# </TR>
# <TR vAlign=top>
# <TD vAlign=top width=150 rowSpan=2><TABLE width="150" height="836" align=center>
# <TR borderColor=#ffffff>
# <TD width="143" height="830" align="left" valign="top" bgcolor="#FFEEDD">
# <img src="design/ikki.gif" width="36" height="41" />Manga
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">L'oeuvre originale</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Episode G</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Next Dimension</a>
# <img src="design/menu-puce3.gif" width="9" height="14" align="left"> <a href="#">Lost Canvas</a>
# <img src="design/ikki.gif" width="36" height="41" />Animé
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">La série télé</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Le Sanctuaire</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Asgard</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Poséidon</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Hadès</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Les films</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Eris</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Asgard</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Abel</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Lucifer</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"> <a href="#">Tenkaï - Hen</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"> <a href="#">Les projets</a>
# <img src="design/menu-puce3.gif" width="9" height="14" align="left"> <a href="#">Les DVD</a>
# <img src="design/ikki.gif" width="36" height="41" />Figurines
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Les Vintages</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Rééditions</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Bootlegs</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Décors</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Customs</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Les Myth Cloth</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint de Bronze</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint d'Argent</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Saint d'Or</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Marina</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Spectres</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Décors</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Customs</a>
# <img src="design/menu-puce2.gif" width="9" height="14" align="left"><a href="#">Divers Goodies</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Cellulo</a>
# <img src="design/menu-puce4.gif" width="26" height="14" align="left"><a href="#">Les Art Book</a>
# </TD>
# </TR>
# <TBODY>
# </TBODY>
# </TABLE>

Si j'ai bien compris ce que tu me dit bien sur, n'hésites pas à me corriger.

skeye

non.

Dans le html, au lieu de <table> tu mets <table id="cadre1">.
Et dans le css, tu mets juste #cadre1{border: 1px solid #F87136;}.

Sauf que là tu en as besoin pour plusieurs tableaux, donc mieux vaut utiliser les classes. Ce qui donnerait <table class="cadre"> dans le html, et .cadre{border: 1px solid #F87136;} dans le css.

---------------
Can't buy what I want because it's free -

vincz51

Ok merci j'avais pris le truc à l'envers lol ^^ ça fonctionne superbement bien !

Dernière question :

<table class="cadre"> je peut mettre cadre1 2 3 etc etc etc et pareil dans le CSS ? ou bien je doit donner un nom différent ?

skeye

tu peux avoir plusieurs éléments avec la même classe, tandis que tu ne peux avoir qu'un élément ayant un id donné. Ca répond à la question?

---------------
Can't buy what I want because it's free -

vincz51

C'est bien compris, je viens de faire quelques test pour vérifier et ça fonctionne très bien. En fait CSS réagira selon ce qu'on je lui demande donc si je lui demande une classe il fera selon ce que je lui ordonne pour une classe bien précise, dans ce cas, un cadre ! c'est vraiment bête, j'ai l'air un peu crétin sur ce coup là ! :lol:

Merci beaucoup pour ton aide, cela me retire une très belle épine du pied. Je vais de ce pas retourner au développement du site ! :bounce:

Merci encore pour ta gentillesse et tes réponses rapides !

Au plaisir !

cordialement

vincent :hello: :hello: :hello:

FORUM HardWare.fr

Programmation

HTML/CSS

peut on choisir un tableau préci avec CSS ?

Sujets relatifs
[XMLHttpRequest] Passage de tableau en paramètre POST possible ?	tableau a imprimer hauteur des cellules
Affichage d'un tableau dans une page web avec jsp	Problème, 2 colonnes de texte en CSS
Remplir un tableau à partir d'un fichier - ifstream -	Code CSS interprété différement par IE et les autres...
[Resolu ] Probleme CSS assez inexplicable : Espace blanc avec IE7	Problème d'alignement d'image avec CSS
[HTML/CSS] Site avec images uniquement, votre avis !
Plus de sujets relatifs à : peut on choisir un tableau préci avec CSS ?

Page générée en 0.297 secondes