28172 sujets

CSS et mise en forme, CSS3

Aide mise en page

Bonsoir,

Ce week-end, je me suis lancé à la découverte de la création de pages avec feuilles de styles CSS.
Sur 2 jours, j'ai réussi à créer ça : http://pier.free.fr/includetest.php Smiley sweatdrop
Il s'agit de la page d'accueil de mon site perso (à mouuaaa !).

Sur cette page, en cliquant sur l'un des liens situés dans le cadre à gauche, j'aimerai que la page s'affiche dans la partie centrale.
Par exemple en cliquant sur le lien "Mes réalisations", j'aimerai que la page correspondante soit affichée dans la partie centrale.
En fait actuellement en cliquant sur ce lien, je vais chercher la page "include22.php" et j'obtiens ca : http://pier.free.fr/include22.php

Je me demande juste s'il y existe une autre façon plus "propre" d'afficher le cadre de texte lié au lien "Mes réalisations" ?
(En clair, est-ce que ce que j'ai crée est correct ou pas ?)

Merci pour vos conseils.

Pierre
Bonjour,

pier_lille a écrit :
Je me demande juste s'il y existe une autre façon plus "propre" d'afficher le cadre de texte lié au lien "Mes réalisations" ?
(En clair, est-ce que ce que j'ai crée est correct ou pas ?)

Ton principe est bon (un lien -> une nouvelle page). Pour que la partie centrale de ton site (celle qui contient le texte) se mette à jour sans que toute la page se rafraichisse c'est :
- Soit des frames,
- Soit du flash.

Donc...

Sinon pour faciliter les mises à jour je te conseil d'effectuer un découpage via PHP : un fichier .php qui contient l'entête de ton site (du doctype jusque <body>), un autre pour le cadre du haut, encore un pour le menu, etc... Puis tu injectes ces pages avec la fonction include() (peut-être que tu l'as déjà fait, je ne peux pas voir ton code PHP).

Pour ce qui est de ton code HTML tu peux très largement l'optimiser : virer les styles CSS en dur dans l'HTML et les mettre dans ta feuille de styles, supprimer tous les <p>&amp;nbsp;</p> au profit des propriétés margin et padding, mettre en place un balisage plus cohérent avec des <div>, et éventuellement corriger les erreurs à la validation Smiley cligne

A bientôt
Modifié par BeliG (27 May 2008 - 12:24)
Bonjour,

Juste pour "compléter" la réponse de Belig concernant l'inclusion de "fichiers" dans une page html :
L'incontournable FAQ et l'inclusion via la balise <object>
Un lien interessant fournit par Igor sur ce sujet concernant les "Server Side Includes" en HTML

Voili, voilou, je ne faisais que passer Smiley smile

Cdt,
Sylvain
Bonjour !

BeliG a écrit :

Ton principe est bon (un lien -> une nouvelle page). Pour que la partie centrale de ton site (celle qui contient le texte) se mette à jour sans que toute la page se rafraichisse c'est :
- Soit des frames,
- Soit du flash.


Pour les frames ou le flash... je sais pas faire donc je vais en rester à un lien avec rafraichissement complet de la page (la page n'est pas "lourde" et cela ne devrait pas être gênant). Dès que possible, je chercherais à en savoir plus sur ces "frames"...

BeliG a écrit :


Sinon pour faciliter les mises à jour je te conseil d'effectuer un découpage via PHP : un fichier .php qui contient l'entête de ton site (du doctype jusque <body>), un autre pour le cadre du haut, encore un pour le menu, etc... Puis tu injectes ces pages avec la fonction include() (peut-être que tu l'as déjà fait, je ne peux pas voir ton code PHP).


Je pense que c'est en effet ce que j'ai déjà fait et que tu ne peux pas voir : (voici le code original de ma page includetest.php)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link type="text/css" href="style2.css" rel="stylesheet">
</head>

<body>
<div id="moncadre">
<div class="Style1" id="cadrehaut">
  <?php include('include-du-cadre-haut2.php'); ?>
</div>
<div class="cadredumenugauche">

  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
<?php include('include-du-menu2.php'); ?><p> </p>
  <p> </p>
  <p> </p>
  </div>

  <p> </p>
  <p> </p>
  <p> Ici le texte de la page d'Accueil</p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
  <p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>



BeliG a écrit :

Pour ce qui est de ton code HTML tu peux très largement l'optimiser : virer les styles CSS en dur dans l'HTML et les mettre dans ta feuille de styles,


Il me semble que c'est ce que j'ai fait non ? Voici ma feuille de style style2.CSS


/* ici le cadre */
#moncadre {
	width:800px;
	margin:auto;
	padding:5px;
	background-color:#858585;
	margin-top:100px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	height: auto;
}
/* ici le cadre haut */
#cadrehaut {
	height:100px;
	background-color:#858585;
	background-image: url(../images/logohaut.jpg);
	margin-bottom:1px;
	margin-top:100px
	font-size: 16px;
	line-height:18px;
	background-position: right;
	background-repeat: no-repeat;
}
/* ici le menu de gauche */
.cadredumenugauche {
	float:left;
	text-align:left;
	width:200px;
	padding:5px;
	background-image: url(../images/logogauche.jpg);
	background-position:top;
	background-repeat: no-repeat;
	background-color:#858585;
	color:#666666;
	font: small Geneva, Arial, Helvetica, sans-serif
}
ul#menu {
    list-style-type: none;
    margin: 20px 0 0 20px;
    padding: 0;
}
ul#menu a {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    background: url(images/puce0.gif) center left no-repeat;
}
ul#menu a:hover {
    background-image: url(images/puce1.gif);
}

body {
	background-color: #6699FF;
}



BeliG a écrit :
supprimer tous les <p> </p> au profit des propriétés margin et padding,


Ok merci pour la piste je n'avais pas trouvé comment éviter ces <p> </p>, je vais travailler là dessus...

BeliG a écrit :
mettre en place un balisage plus cohérent avec des <div>,


Là, j'ai pas tout compris mais je vais voir ce que je peux faire...

BeliG a écrit :
et éventuellement corriger les erreurs à la validation Smiley cligne


J'ai cru comprendre que je devais faire "valider" ma page par un validateur comme http://validator.w3.org/ par exemple.
J'essaie de comprendre et je corrige les erreurs que ce validateur me signale dès que possible...


Merci BeliG !

A bientôt...
Bonjour,

a écrit :
Pour les frames ou le flash... je sais pas faire donc je vais en rester à un lien avec rafraichissement complet de la page (la page n'est pas "lourde" et cela ne devrait pas être gênant).


C'est une très bonne initiative. Les rafraîchissements partiels posent des problèmes (impossibilité de bookmarquer le document, bouton retour qui fonctionne mal, difficultés de mise en oeuvre et de maintenance...), quelle que soit la méthode utilisée.

a écrit :
Dès que possible, je chercherais à en savoir plus sur ces "frames"...


Non, non, vraiment, ce n'est pas la peine. Ou alors, juste pour la culture générale.

C'est marrant cette envie de ne rafraîchir qu'un bout de page. Je pense qu'on est tous plus ou moins tous passés par là. Mais les protocoles du Web sont ainsi faits qu'un document HTML est un tout, et que vouloir le couper en morceau est contre nature et relève de la bidouille.

En y regardant de plus près, on s'aperçoit que très peu de sites le font. En général, c'est qu'il y a une bonne raison Smiley cligne .

a écrit :

[quote= BeliG]
mettre en place un balisage plus cohérent avec des <div>,


Là, j'ai pas tout compris [...]


Moi non plus. <div> est une balise neutre qui ne balise pas grand chose, et qui est surtout là pour aider à la mise en page par feuille de style. Des titres (h1, h2, ..), oui. D'ailleurs, le titre, "Mon site web", le mériterait éventuellement. Des divs... il y en a suffisamment à mon avis.

Petites choses :
- la balise <style> est interdite dans le <body>, elle doit être placée dans le <head>.
- Ne pas oublier de mettre un titre à chaque page(balise <title>). "Document sans nom", ça fait pas sérieux Smiley cligne , et c'est ce titre qui apparaît dans les moteurs de recherche, ou quand on bookmarque une adresse, par exemple.
Modifié par Lanza (27 May 2008 - 18:26)
Lanza a écrit :

Là, j'ai pas tout compris [...]

Moi non plus. <div> est une balise neutre qui ne balise pas grand chose, et qui est surtout là pour aider à la mise en page par feuille de style.
Mmh... je ne sais pas si c'est pier_lille qui a restructuré son code ou moi qui ai mal regardé hier, mais il m'a semblé que les parties de son site (entête, menu, contenu, ...) étaient balancées brut de pomme (d'où la multiplication des <p>&nbsp;</p>, chargées de faire la mise en page).

C'est dans ce sens que je lui conseillais de regrouper ses éléments à l'aide de la balise <div>, et ce n'était en aucun cas un message subliminal visant à grossir la secte de la "<div>ine balise". Smiley cligne
Sujet clos
Aller à