Passage D'une Page Aux Css

Misdre · le 8 novembre 2005

Bonjour :transpi:

J'ai quelques bases de CSS mais... pour le positionnement de blocs, je suis à la rue. Mais vraiment.

Et en ce moment, avant d'aller plus loin, je cherche à passer la mise en page d'un site en tableaux et tout le toutim vers xhtml et surtout, CSS.

Et là, donc, j'ai besoin d'aide...

Voici le code source de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?

require("connexion.php"); // fichier de connexion

$NomDuSkin = "default";

$Emplacement = "img/skins/$NomDuSkin/";

require("$Emplacement/skin.php"); // Recherche du Skin

?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Project'N : Project-Nintendo</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="fr" />

<meta name="Description" content="Nintendo, Actu, previews, tests et autres, mais surtout bonne humeur, qualité et ambiance, venez vite nous rendre visite sur Project'N !" />

<meta name="Keywords" content="..." />

<meta name="Category" content="videogames" />

<meta name="Author" content="project'n team" />

<meta name="Identifier-URL" content="http://www.project-nintendo.com/" />

<meta name="Revisit-after" content="14 days" />

<meta name="Robots" content="all" />

<style>

body {text-align:justify;}

a {text-height:10px; color:<? echo $CouleurDesLiens; ?>; font-family:verdana; text-decoration:none;}

a:hover {text-height:10px; color:<? echo $CouleurDesLiens; ?>; font-family:verdana; text-decoration : underline;}

p a {text-height:10px; color:<? echo $CouleurBrevesLiens; ?>; font-family:Verdana; text-decoration:underline;}

p a:hover {text-height:10px; color:<? echo $CouleurBrevesLiens; ?>; font-family:verdana; text-decoration : underline;}

</style>

<link rel="icon" href="img/icone.png" type="image/png" />

<? require("scripts.php"); ?>

</head>

<body background="<? echo $Emplacement.$ImgDeFond; ?>" topmargin="0" bottommargin="0">

<center>

<table border="0" cellpadding="0" cellspacing="0" width="772">

<tr><td height="82" width="772"><img src="<? echo $Emplacement.$Bannière; ?>" /></td>

</tr>

<tr><td>

<table border="0" cellpadding="0" cellspacing="0"><tr>

<td height="26" width="266"><img src="<? echo $Emplacement.$ImageMenuDroite; ?>" /></td>

<td height="26" width="506"><? require("menu_flash.php"); ?></td>

</tr></table>

</td></tr>

<tr><td>

<table border="0" cellpadding="0" cellspacing="0"><tr>

<td height="50" width="151"><img src="<? echo $Emplacement.$TitreBreves; ?>" /></td>

<td height="50" width="65"><img src="<? echo $Emplacement.$CoinHautGauche; ?>" /></td>

<td height="50" width="491" bgcolor="<? echo $FondDuContenu; ?>"><center><? require("index_citation.php"); ?></center></td>

<td height="50" width="65"><img src="<? echo $Emplacement.$CoinHautDroit; ?>" /></td>

</tr></table>

</td></tr>

<tr>

<td><tr></td></tr>

<tr>

<td><td bgcolor="<? echo $FondDuContenu; ?>"></td></tr>

<table border="0" cellpadding="0" cellspacing="0">

<tr><td width="151" bgcolor="<? echo $FondDesBrèves; ?>" style="padding-left:5;padding-right:5;text-align:justify;" valign="top" rowspan="4"><? require("breves.php"); ?></td></tr>

<tr>

<td><tr></td></tr>

<tr>

<td><td bgcolor="<? echo $FondDuContenu; ?>" style="padding-left:15;padding-right:0;text-align:justify;" valign=top></td></tr>

<? require("index_contenu.php"); ?>

<tr>

<td></td></td></tr>

<tr>

<td></tr></td></tr>

<tr>

<td valign="bottom" bgcolor="<? echo $FondDuContenu; ?>">

<table border="0" cellpadding="0" cellspacing="0" width="621"><tr>

<td height="50" width="65"><img src="<? echo $Emplacement.$CoinBasGauche; ?>" /></td>

<td height="50" width="491" bgcolor="<? echo $FondDuContenu; ?>"></td>

<td height="50" width="65"><img src="<? echo $Emplacement.$CoinBasDroit; ?>" /></td>

</tr></table>

</td>

</tr>

<tr><td bgcolor="<? echo $FondDesBrèves; ?>" style="padding-top:10;padding-bottom:10" height="80"><? require("affilies.inc.php"); ?></td></tr>

</table>

<tr>

<td></td></td></tr>

<tr>

<td></tr></td></tr>

</table>

</center>

</body>

</html>

J'aurais aimé vous présenter ce que ça donne en ligne mais le serveur a beaucoup de mal en ce moment... Je sais, c'est pas l'idéal...

Alors, de ce que j'en pense, il faudrait déjà éviter toutes les variables genre $fonddesbrèves pour transférer ça dans une CSS (externe), en appliquant une couleur de fond au bloc par exemple...

Dès que possible, j'essaye d'avoir une version en ligne de cette page, avec les images et le reste, et avec plus d'infos

désolé en attendant, et si certains arrivent à m'aider rien qu'avec le code plus haut, merci beaucoup ^^"

Jiriki · le 8 novembre 2005

Salut.

Moi aussi je viens de me mettre au xhtml/css.

Spa facile au début, je peux pas trop d'aider mais j'ai trouvé ça:

http://www.siteduzero.com/xhtml-css/ (très bon cours d'initiation)

http://www.martiusweb.net/tutoriaux,01_00.html (partie trois pour ce qui t'intéresse)

Misdre · le 8 novembre 2005

J'ai trouvé une capture d'écran qui ressemble énormément à ce que donne le code source plus haut :

http://happinet.happicoin.org/pnfichiers/ebauche02.jpg

Merci pour les liens Jiriki, j'imprime ça et je vais lire ça au lit :reflechis:

Jiriki · le 11 novembre 2005

Re.

J'ai passé un peu de temps à essayer de reformater une page en css.

Deux choses:

- Sans tableau impossible d'aligner deux textes sur la même ligne horizontale

ex: année1 diplôme1

année2 diplôme2

année1 aligné avec diplôme1 et année2.

année2 aligné avec diplôme2 et année1.

annéeX ont une police différente de diplomeX

sachant que si on augmente la taille de la police, je veux que ça reste aligné.

Faire ça sans tableau => impossible (ou alors montrez moi :roll: )

- Je ne comprends pas l'utilité du xhtml, écrire du xhtml m'énerve: on cherche à séparer le contenu de la présentation. Très bien! mais alors allons jusqu'au bout. xhtml comportera toujours des indications de mise en forme (les balises bloc déjà). Alors moi je préfère aller jusq'au bout, écrire mes données au format xml et les mettre en forme avec une feuille xslt ou du css...

an0nyme · le 12 novembre 2005

Re.
- Je ne comprends pas l'utilité du xhtml, écrire du xhtml m'énerve: on cherche à séparer le contenu de la présentation. Très bien! mais alors allons jusqu'au bout. xhtml comportera toujours des indications de mise en forme (les balises bloc déjà). Alors moi je préfère aller jusq'au bout, écrire mes données au format xml et les mettre en forme avec une feuille xslt ou du css...

ben si les blocs sont des structures d'information : un div = une news par exemple, c'est pas de la présentation

les listes pareil

tu vas pas faire un fichier xml ou toutes tes informations sont stockées dans la balise root sans arbre des données

Jiriki · le 12 novembre 2005

Bien sur mais pour reconnaitre tes div, il te faut les nommer par l'intermédiaire des classes.

et la façon dont tu va structurer tes div va te limiter après dans la mise en page que tu vas choisir.

En fait quand tu écris tes div, tu penses quand même un minimum à ta mise en page, puisque ce que tu vas mettre en page, c'est les balises block et inline.

J'essaie aussi dans ce que j'écris de respecter la sémantique c'est à dire de pas nommer une classe quand j'en ai pas besoin => utilisation des balises de titre h1/h2 ...

or utiliser une balise de titre ou autre reviens à faire de la mise en page.

Donc je préfère avoir une fichier xml, qui bien sur aura une arborescence pour structurer les données qu'écrire un xhtml "batard" ou je n'aurais que des <div class="..."> ce qui reviens au même mais relève d'une philosophie de développement moins clean.

Je sais pas si je suis très compréhensible :mdr:

an0nyme · le 13 novembre 2005

ben comme tu veux alors mais google y comprend pas xml

mais c'est vrai que caymieux le XML

Tartopom · le 13 novembre 2005

pour le div, le plus souvent il vaut mieux utiliser les id, les class c'est juste si tu retrouve le meme element plusieurs fois dans ta page.

Sentinel · le 13 novembre 2005

Si tu penses que les balises que tu places (div, span, etc...) limitent ta mise en page, permets-moi de t'orienter vers le saint-graal du design CSS :

http://www.csszengarden.com/

Ce site n'a pas de contenu réel. Son but est de montrer qu'avec une page HTML identique, on peut radicalement changer la présentation grâce aux CSS. Il y a un menu qui permet de choisir le style à afficher. Tu vas voir, c'est très impressionnant, et j'insiste sur le fait que le code html est *toujours* le même !

Misdre · le 20 novembre 2005

Petit retour !

Donc, je n'ai absolument pas avancé ou presque, ou du moins j'ai révisé et fait quelques essais avec les boîtes, les positionnements et tout ça en CSS.

Je m'attaque dès demain sur le passage aux CSS de ma page d'accueil, ensuite je passe tout le site sous cette mise en page, puis après je programme les nouvelles fonctionnalités =)

Je vous tiendrai au courant...

njoyard · le 23 novembre 2005

- Sans tableau impossible d'aligner deux textes sur la même ligne horizontale

ex: année1 diplôme1

année2 diplôme2

année1 aligné avec diplôme1 et année2.

année2 aligné avec diplôme2 et année1.

annéeX ont une police différente de diplomeX

sachant que si on augmente la taille de la police, je veux que ça reste aligné.

Faire ça sans tableau => impossible (ou alors montrez moi )

si, c'est possible... http://www.touche-a-ton-nez.com/groupe.php

vodnok · le 24 novembre 2005

Quand on dit séparer le contenu de la présentation ce n'est pas tout à fait exacte.

Il n'y a pas que des DIV. Remplacer tout les tableaux par des div n'est pas non la solution.

Ton code html doit refletter la nature de l'information.

Et ensuite ton css permet sa mise en forme.

Il y a un très bon livre en FR sur le CSS2 qui s'appel d'ailleur CSS2 :zarb: C'est une très bonne initiation au css2. Je te le conseil vivement. Il t'explique comment faire mais surtout pourquoi et qu'elle est la philosophie du css2.

Je pense que c'est indispensable avant de se mettre au css2.

Ton code html doit être lisible en mode texte. Cad si tu lit le code html tu dois pouvoir le comprendre. Ce qui avec des tab est plus que difficile et même des div.

Par exemple un menu qui est une liste d'éléments voir une liste de liste. Dans ton code html cela doit être évidement via li ul avec soit une classe soit un id. Ensuite via ton css2, tu vas dire OU tu veux positionner ton menu (sur une ligne, à gauche l'un en dessous de l'autre, ect) et COMMENT (couleur, tailler ect)

Ton html et ses balises doivent dire ce que l'information est (contenu et nature (menu, texte, titre, paragraphes) et le css2 doit dire comment tu présentes l"information.

Pour l'xhtml: le but est d'un peu plus standardiser l'html. Car de nos jour on peut faire n'importe quoi avec html. Le simple fait que toutes les balise doivent être fermée c'est déja magique.

Connexion

Passage D'une Page Aux Css

Messages recommandés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Archivé