Passer d'un tableau html à un tableau css?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Passer d'un tableau html à un tableau css?

absot77

Slt, je voudrais refaire tout ce code mais en css pur, autrement dit en virant tout ce qui est en html, donc je pense qu'il faudrais enlever tout les td et tr pour mettre des div mais ça je trouve quelquechose de bizarre à la fin donc il doit y avoir des choses à modifié?

Voici le code en html

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<table>
<tr>
<td rowspan="5" width="215"></td>
<td class="entete" colspan="5" width=930><h1>EVEREST</h1></td>
<td width="215" colspan="5"></td>
</tr>
<tr>
</tr>
<tr class="an">
<ul>
<td class="annexe" class="in"><li><a href="index.html">Accueil</a></li></td>
<td class="annexe"><li><a href="camp-base.html">Camp base</a></li></td>
<td class="annexe"><li><a href="icefall.html">Icefall</a></li></td>
<td class="annexe"><li><a href="camps.html">Camps</a></li></td>
<td class="annexe"><li><a href="sommet.html">Sommet</a></li></td>
</ul>
</tr>
<tr class="toto">
<td class="marge" colspan="5"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div> </td>
</tr>
<tr>
<td colspan="5" height="25"><h6>Réalisé par </h6></td>
</tr>
</table>
</body>
</html>

Et le code après avoir enlever les tr et td.

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe" class="in"><li><a href="index2.html">Accueil2</a></li></div>
<div class="annexe"><li><a href="camp-base2.html">Camp base2</a></li></div>
<div class="annexe"><li><a href="icefall2.html">Icefall2</a></li></div>
<div class="annexe"><li><a href="camps2.html">Camps2</a></li></div>
<div class="annexe"><li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto" class="marge" class="colonne1"> <h2>Camp de base</h2>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id=image> <img src=images/basecamp.jpg alt=camp-de-base /> </div>
</div>
<div height="25"><h6>Réalisé par </h6></div>
</body>
</html>

Message édité par absot77 le 14-12-2008 à 13:55:44

Publicité

FlorentG

Faut déjà nettoyer un peu le code initial. Genre dans un <ul>, on n'a pas le droit de mettre des <td>, juste cash des <li>.

Aussi, il ne suffit pas de tout remplacer par des <div>, faut faire gaffe à la sémantique des balises.

Et les trucs genre <div height="25"> ne sont pas non plus valide, il n'y a pas d'attribut height sur div, tout doit être dans le CSS.

Attention aussi, tu te lances dans une fantastique aventure qui va te prendre du temps Faut y aller bout par bout, genre commencer par juste mettre quelques div pour apprendre à faire des colonnes correctement et tout

absot77

Voilà à quoi ça ressemble après quelque changement...

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="centrer">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe"><li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li></div>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par </h6></div>
</div>
</body>
</html>

Le fichier CSS.

Code :

body
{
margin: 10px 0 ;padding: 0 ;text-align: center ;background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;color:white;text-align:center;
}
.toto
{
background-color : white;padding-left:20px;padding-right:20px;width:250px;height:250px;
}
.annexe
{
height:25px;width:125px;color:white;}
.entete
{
background:url(images/everest.jpg);padding-left:50px;width:750px;height:151px;
}
.an
{
background-color:#0099FF;
}
h2
{
text-align: center ;color:#0099FF;text-decoration:underline;
}
a
{
color:white;text-decoration:none;text-align:center;
}
h1
{
text-align:center;color:#DDDDDD;
}
div#image
{
text-align:center;
}
.height
{
height:25px;
}
.centrer
{
margin:auto;
}

J'ai tout mis à la suite pour ne pas que ça soit trop long mais sinon das mon code tout est dessous des uns des autres.

Message cité 1 fois
Message édité par absot77 le 14-12-2008 à 14:40:41

FlorentG

absot77 a écrit :

<div class="annexe"><li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li></div>

Ca c'est pas bon, les <li> ne peuvent aller que dans un <ul>

absot77

Comme ça?

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="centrer">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe"><li><a href="index2.html">Accueil2</a><br/>
<a href="camp-base2.html">Camp base2</a><br/>
<a href="icefall2.html">Icefall2</a><br/>
<a href="camps2.html">Camps2</a><br/>
<a href="sommet2.html">Sommet2</a></div>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par </h6></div>
</div>
</body>
</html>

Message édité par absot77 le 14-12-2008 à 15:02:02

FlorentG

C'est encore pire

Une liste se fait comme ça :

Code :

<ul>
  <li><a href="index2.html">Accueil2</a></li>
  <li><a href="camp-base2.html">Camp base2</a></li>
  <li>....
</ul>

absot77

C'est bon cette fois-ci?

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="centrer">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe">
<ul>
<li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li></div>
</ul>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par Aurélien Laval</h6></div>
</div>
</body>
</html>

FlorentG

Ouais là c'est mieux

FlorentG

Attention, y'a encore un </div> qui traîne à la fin de la liste

Message cité 1 fois

absot77

FlorentG a écrit :

Attention, y'a encore un </div> qui traîne à la fin de la liste

C'est normal, c'est la fin du div avec la classe centrer qui normalement devrai centrer ma page mais ce n'est pas le cas.

J'ai mis ça pour la classe:

Code :

.centrer
{
margin:auto
}

Publicité

FlorentG

Pour centrer faut aussi préciser une largeur.

Attention à ne pas donner des noms de classes genre "centrer". Si un jour tu changes d'avis et que tu veux que ta liste soit à gauche, ça fera bizarre une classe "centrer" alignée à gauche Et l'interêt du CSS étant de ne pas toucher au code HTML pour faire des modifs de mise en page

absot77

Je l'ai changer et mis en decaller".

FlorentG

C'est pas mieux, parce que si tu ne veux plus le décaler

Le mieux est de donner un identifiant à ta liste :

Code :

<ul id="menu">

Code :

#menu {
margin: 0 auto;
width: 600px;
}

Par exemple...

Message cité 1 fois

absot77

FlorentG a écrit :

C'est pas mieux, parce que si tu ne veux plus le décaler

Le mieux est de donner un identifiant à ta liste :

Code :

<ul id="menu">

Code :

#menu {
margin: 0 auto;
width: 600px;
}

Par exemple...

Pourquoi tu as mis un "#" devant menu?

Ca veut rien dire "margin: 0 auto;"?

FlorentG

Dans le CSS pour faire référence à un id, on utilise #id

Et margin: 0 auto est une forme contractée de margin: 0 auto 0 auto;, ce qui en conjonction avec la largeur permet de centrer

absot77

Pourquoi ça ne centre pas avec tes trucs et les miens?...

Message édité par absot77 le 14-12-2008 à 15:55:36

absot77

Pour décaler, c'est quoi la balise à utiliser déjà?

Ce n'est pas le padding-left vu qu'il agrandi sur la gauche...

J_D_

Il y a margin et padding.

Ce ne sont pas des balises mais des propriétés que tu peux appliquer aux éléments.

absot77

Je viens de corriger et c'est vrai que c'est mieux avec un margin-left..

absot77

Ils servent à quoi les "<li></li>

Parce que je voudrais faire en sorte que mes menus se suivent..

Message cité 1 fois

FR-DarkRod

Informag€€k

absot77 a écrit :

Ils servent à quoi les "<li></li>

Parce que je voudrais faire en sorte que mes menus se suivent..

A faire des points

<ul>

<li></li>

</ul>

liSTER ^^

Message cité 1 fois

absot77

Pourquoi mes menus se mettent les uns endessous des autres alors que je n'ai pas de "<br/>"?

FlorentG

Parce que les li sont de type list-item, du coup c'est normal qu'ils passent à la ligne. Met un display: inline; dessus par exemple.

absot77

Je l'ai mis dans uns de mes classes seulement l'effet que ça eu c'est qu'ils se sont centrés mais les uns en dessous des autres.

Code :

<html>
<head>
<title>Création d'un design étape par étape </title>
<link rel="stylesheet" type="text/css" href="fichier_style.css">
</head>
<body>
<div class="decaller">
<div class="entete"><h1>EVEREST</h1></div>
<div class="annexe" class="decaller">
<ul>
<li><a href="index2.html">Accueil2</a></li>
<li><a href="camp-base2.html">Camp base2</a></li>
<li><a href="icefall2.html">Icefall2</a></li>
<li><a href="camps2.html">Camps2</a></li>
<li><a href="sommet2.html">Sommet2</a></li>
</ul>
</div>
<div class="toto"> <h2>Camp de base</h2></div>
<p>Situé à 5200 mètres d'altitude, le camp de base de l'Everest est la base logistique des différentes expéditions qui ont lieu chaque année sur l'Everest.</p>
<div id="image"> <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
<div class="height"><h6>Réalisé par </h6></div>
</div>
</body>
</html>

Code :

body
{
margin: 10px;
padding: 0;
text-align: center;
background-color:#87CEFA;
}
pre
{
overflow: auto ;
}
h6
{
background-color:#87CEFA;
color:white;
text-align:center;
}
.toto
{
background-color : white;
padding:20px;
width:500px;
height:250px;
margin-left:544px;
}
.annexe
{
height:25px;
width:125px;
color:white;
background-color:#0099FF;
display:inline;
}
.entete
{
background:url(images/everest.jpg);
padding-left:50px;
width:750px;
height:151px;
margin-left:300px;
}
.an
{
background-color:#0099FF;
}
h2
{
text-align: center ;
color:#0099FF;
text-decoration:underline;
}
a
{
color:white;
text-decoration:none;
text-align:center;
}
h1
{
text-align:center;
color:#DDDDDD;
}
div#image
{
text-align:center;
}
.height
{
height:25px;
}
.decaller
{
margin: 0 auto;
}

Message édité par absot77 le 14-12-2008 à 18:40:57

Profil supprimé

FR-DarkRod a écrit :

A faire des points

<ul>

<li></li>

</ul>

liSTER ^^

non, à faire des éléments de liste [:aloy]

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

Passer d'un tableau html à un tableau css?

Sujets relatifs
aide tableau de chaines et allocation dynamique !?	Trie tableau dans un autre tableau
[HTML] Lien pointant sur un raccourci	WYSIWYG - Enregistrer code HTML - Recuperer format interprétée
Passer un tableau 2D vers un thread	Tri d'un tableau
Importer textes en html sous excel pour les traiter avec vba	C#: Comment faire un tableau de structs ?
Tableau en C [niveau faible ^^]	[HTML] Passer 1 tableau en parametre d'une page vers une autre ...
Plus de sujets relatifs à : Passer d'un tableau html à un tableau css?

Page générée en 0.133 secondes