Passer un tableau html en tableau css Fermé

Question

Bonjour, 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] Création d'un design étape par étape

EVEREST

Accueil	Camp base	Icefall	Camps	Sommet
Camp de base 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.
Réalisé par Aurélien Laval

/code Et le code après avoir enlever les tr et td. [code] Création d'un design étape par étape

EVEREST

Camp de base

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.

Réalisé par Aurélien Laval

/code

PandaNemo · Answer

Bonjour, est-ce que tu peux poster ton code css stp ? C'est "bizarre" comment?

Lacide · Answer

Salut,

Est-ce qu'on pourrait avoir le code css stp ?
Sinon, tu peux jeter un coup d'oeil sur ces liens pour t'aider :

https://openweb.eu.org/articles/initiation_absolue/
https://openweb.eu.org/articles/initiation_float/
https://openweb.eu.org/articles/tableaux_css/

@+

Absot · Answer

Voilà 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;
}

.annexe
{
height:25;
width:125;
color:white;
}

.entete
{
background:url(images/everest.jpg);
padding-left:50px;
width:750;
height:151;
}

.an
{
background-color:#0099FF;
}

.in
{
color:white;
}

h2
{
text-align: center ;
color:#0099FF;
text-decoration:underline;
}

a
{
color:white;
text-decoration:none;
text-align:center;
}

.marge
{
padding-left:20px;
padding-right:20px;
}

h1
{
text-align:center;
color:#DDDDDD;
}

div#image
{
text-align:center;
}

.colonne1
{
width:250px;
height:250px;
}
/code

Absot · Answer

C'est bizarre dans le sens, la page ne correspond pu...

Tout est décallé.

PandaNemo · Answer

Tu peux mettre tout ton menu dans une seule div, ça te facilitera les choses. Pour que tes liens soient les uns à côté des autres tu peux les mettre en flottants. Pour centrer ta page, il suffit de mettre body {margin: auto;} Sinon, tu as oublié les guillemets dans ton

Tu n'as pas besoin de mettre plusieurs "class" à la même

, les "class" servent à donner un nom à ta

pour que le css sache où s'appliquer, donner plusieurs noms l'embrouille. Tu as aussi oublié plusieurs fois de préciser "px" dans ton css. Tu dois toujours donner l'unité width: 500px ; en collant "px" aux chiffres. Tu trouveras plein d'infos dans les liens de Lacide et aussi ici.

Lacide · Answer

Je n'aurais pas mieux dit. Essai d'arranger déjà tout ce que te dit PandaNemo et aide-toi des liens pour voir si tu parviens déjà à un meilleur résultat.

Bonne soirée,
L.

PandaNemo · Answer

:p merci Lacide

Ah, un petit "truc" aussi : si tes div se placent n'importe comment et que tu ne comprends pas pourquoi, mets dans le css:
{border: 1px solid black;}

Tu les verras apparaître (et parfois ça étonne)
Bonne soirée

olivier · Answer

Bonjour, à mon sens "passer une page html en css pur" tel que tu le dis pour moi revient à changer par exemple une balise

par

ou tout autre balise. Les tableaux HTML sont excellent, et on peut leur attribuer très bien des classes css. Je conseille de les garder et de leur appliquer un style. C'est beaucoup plus commode que de tout travailler en div, je trouve. Et ça reste très "css pur" en tous cas. Olivier.

Absot · Answer

Voilà à quoi ça ressemble après quelque changement... ------------------------------------------------------------------------------------------------------------------------------------------------------------------- Création d'un design étape par étape

EVEREST

Camp de base

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.

Réalisé par

------------------------------------------------------------------------------------------------------------------------------------------------------------------- Le fichier CSS. ------------------------------------------------------------------------------------------------------------------------------------------------------------------- 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.

Absot · Answer

Le "padding-left", c'est bien pour décaller la marge?

Parce que quand j'augmente le nombre genre 200px, ça augmente la tailler en largeur et moi je voudrais décaler la case, donc ce n'est pas ça?

Passer un tableau html en tableau css

10 réponses

Discussions similaires