Mise en forme : tableaux et blocs CSS

loufpad · 10 Janvier 2006

Hello la troupe

Je vais refondre mon site pour qu'il soit "propre" et surtout compatible avec FF :wink:
Je me pose une question : le mieux est-il de concevoir la mise en page
1) en utilisant des tableaux imbriqués (pas top à ce que j'ai lu)
2) en utilisant 1 tableau principal pour structurer la page et y insérer des blocs CSS pour la finition
3) en n'utilisant que des blocs CSS ?

Mon objectif le plus important : la compatibilité avec les autres navigateurs :wink:

Thanks

Ah oui, autre petite question : si je spécifie une valeur en pixels pour margin-left par exemple, celle-ci créera-telle un décalage avec FF par rapport à IE ? Mieux vaut utiliser une valeur en pourcentage ? (je pense que oui, mais bon :wink: )

juliofromlille · 10 Janvier 2006

Choix Numéro 3 : un site agencé avec les DIV du XHTML et positionné grace aux CSS.

Travaille en PX et non en % sauf si ton site est dit "Elastique".

biddybulle · 10 Janvier 2006

oui evite les tableaux c est un cauchemar et c est trop vieux maintenant
Div + CSS

xenoox · 10 Janvier 2006

Le mieux reste les "em".

Il permet de mieux s'adapter aux personnes malvoyantes (zoom du navigateur).

"les tailles en em sont préférables aux tailles en pixels car elles s'adaptent aux réglages personnels des utilisateurs et sont ainsi plus accessibles… "

loufpad · 10 Janvier 2006

Bonne idée :wink:

Donc, si je procède avec des divs et des css, mon site sera-t-il compatible pour tous les navigateurs ?

xenoox · 10 Janvier 2006

Oui si tu n'utilise pas des fonctions avancées de css (par là j entend compatible par tous les navigateurs.)

Mais il faut toujours vérifier que son site est compatible avec IE et FireFox (au minimum) car ils ne gèrent pas tous les objets de la même façon ! On a souvent des surprises.

Sinon il existe des techniques (hack) pour palier aux différences de navigateurs (pour le moment j'en ai pas eu l'utilité)

Tu as plein de docs sur le css en ligne de toute façons.

jOoL · 10 Janvier 2006

div + css + font em

HawkEye · 11 Janvier 2006

Un bon partenaire valant mieux qu'un long discours: http://css.alsacreations.com/

jOoL · 11 Janvier 2006

D'ailleurs, en parlant d'Alsacréations, ils ouvrent une agence web spécialisée dans les standards. (Plus d'infos sur leur blog)

Belle initiative, joli site, clean, efficace.

Je leur souhaite bon succès.

loufpad · 11 Janvier 2006

Merci pour les infos
J'ai fait des tests
Composition de ma page :
header.php
corps.htm
footer.php
+ un style.css

Dans mon header, je mets une bannière dans un tableau. Ca passe sans souci, mon corps.htm s'affichant juste en dessous.
puis je rajoute la même bannière dans mon header juste en dessous la 1è (dans le tableau) avec une DIV :
<DIV class="boite1" style="position:absolute; left:100px; top:100px; width:491px; height:80px; z-index:1;"></DIV> (boite1 fait référence à mon style.css)
Et là, cette DIV s'affiche au dessus de mon corps.htm
:? et cache sa partie haute.
Comme si elle était considérée comme un élément flottant de mon header qui pourrait se permettre de venir déborder sur mon corps.htm.
Malpolie !!!
:lol:

J'ai essayé plein de bidouilles, sans résultats...

jOoL · 11 Janvier 2006

met style="postion:relative"

illicotravel · 11 Janvier 2006

mets surtout la définition de tes styles dans un fichier CSS à part. Au lieu d'avoir:

<DIV class="boite1" style="position:absolute; left:100px; top:100px; width:491px; height:80px; z-index:1;"></DIV>

il vaut mieux:

<DIV class="boite1 style1"></DIV>

avec en fichier css:

.style1 {
position:absolute;
left:100px;
top:100px;
width:491px;
height:80px;
z-index:1;
}

C'est plus propre et plus maintenable.

En gros, ta page ne doit jamais contenir une seule définition de style, uniquement des id et des class. Pour avoir un exemple, tu peux regarder mon site. Ca te donnera une idée. (il est compatible IE, FF et Opera)

loufpad · 12 Janvier 2006

Merci pour ces conseils. Je n'ai pas eu le temps de m'y remettre depuis mais dès que je peux, je teste tout ça :wink:

Thanks :wink:

loufpad · 12 Janvier 2006

Merdouille ! Malgré vos conseils, mon header est toujours affiché PAR DESSUS (et pas au dessus :lol: ) ma page...

Voilà mon header :
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">@import "test.css";</style>
</head>
<body>
<DIV class="boite1"></DIV>
</body>
</html>

Mon test.css (extrait)
.boite1
{
background-image: url("./pics/accueil/banniere.gif") ;
position:absolute;
left:10px;
top:100px; (exprès pour voir si mon corps de page s'affiche en dessous)
width:491px;
height:80px;
}

Et j'appelle mon header dans ma page de manière classique :
<body>
<?php include ("header.php");
?>
<table width="142" height="612" border="0" cellspacing="0" bordercolor="#990000" summary="Menu">
<tr>
<td height="21" bordercolor="#990000"> </td>
(ici le reste du code de mon tableau)
</tr>
</table>

<?php include ("footer.php");
?>
</body>

Mon footer s'affiche bien à la suite de ma page par contre...

Là je sèche :? J'suispas encore bien doué mais bon...

Merci pour votre aide :wink:

illicotravel · 12 Janvier 2006

le squelette d'une page doit être sous la forme:

<html>
<head>
</head>
<body>
</body>
</html>

là, tu fais:

<body>
<html>
<head>
</head>
<body>
</body>
</html>
</body>

loufpad · 12 Janvier 2006

je crois avoir compris

mais pourrais tu m'expliquer un peu mieux ?
tu veux dire que L'ENSEMBLE header + corps + footer doit être sous la forme :
<html>
<head>
</head>
<body>
</body>
</html>

Alors que moi mon header a cette forme et que mon corps aussi :?: et que du coup ça fait double emploi ?

illicotravel · 12 Janvier 2006

exactement: ton header est simplement une partie de ta page finale que tu as décidé d'exporter. Pour ne pas faire d'erreur, dessine ta page finale en premier, puis exporte la partie que tu souhaites, comme ça tu es sur de garder une cohérence d'ensemble.

loufpad · 12 Janvier 2006

Ok mais alors çomment expliquer que mon header se superpose à mon corps de page ?

Ma nouvelle structure :

header :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">@import "test.css";</style>

</head>
<body leftmargin="0" topmargin="0">
<DIV class="boite1"></DIV>

mon corps de page :
<?php include ("header.php");
?>
<table width="142" height="540" border="0" cellspacing="0" bordercolor="#990000" summary="Menu">
<tr>
...
</tr>
</table>

<?php include ("footer.php");
?>

mon footer :
FOOTER
</body>
</html>

Et comme d'hab, le footer lui colle parfaitement avec le corps de page :?

:?: :?: :?:

illicotravel · 12 Janvier 2006

Si je comprends bien, tu veux savoir pourquoi ta div avec la classe "boite1" se trouve au dessus du reste. Si c'est ta question, c'est parce que la position de cette classe est définie en absolute, donc décorrélée du reste des éléments de ta page.

Si tu cherches à avoir un header, un body et un footer, procède comme suit:


<html>
<head>
</head>
<body>
<div class="header">
<div class="boite1"></div>
</div>






</body>
</html>


la classe "header" définie l'espace total de ton header (position: relative)
la classe "boite1" définie ta pub (sa position dans le header en fait)

loufpad · 13 Janvier 2006

Disons le tout net : je t'aime !!! :lol: :lol: 8)

Merci beaucoup d'avoir pris le temps de m'expliquer (longuement

) les choses. J'ai appris pas mal de trucs avec tes conseils et en faisant des tests à partir de ceux-ci.

Vraiment, merci :wink:

illicotravel · 13 Janvier 2006

anytime :wink: