Architecture d'un site

[robfinck]

Bonjour

j'aimerai bien refaire l'architecture de mon site en respectant les standards et en utilisant beaucoup plus le css.

Voici l'adresse : http://www.lagouttiere.com

il y a un menu, une bannière fixe et une page de navigation, mais c'est en fait des cellules de tableaux comme la plupart des éléments de mon site.

Que me conseillez-vous comme méthode pour refaire l'architecture ? j'ai vu des méthodes où le menu et la bannière devaient être recopiés sur chaque page, ou un style hybride tableaux / css.

J'ai donc juste besoin d'une indication de départ pour refaire mon site, je suis un peu perdu dans tous ce que les sites proposent

merci beaucoup

[Invité]

Moi, je te conseille si tu souhaites concerver la présentation actuelle quelques voies de développement :

découper ton site en 4 zones
* <div id="header"></div> <-- Pour le titre ou la bannière ou simplement image de fond du site avec un margin pour commencer seulement en dessous
* <div id="menu"></div> <-- le contenu de ton menu sous forme de <ul><li></li>...</ul> le tout en float: left; et facultativement : position: fixed;
* <div id="contenu"></div> <-- y mettre le contenu de la page
* <div id="footer"></div> <-- copyright et autre...

avec ça t'a déjà éléminer le tableau principal.

pour chaque news par exemple :

Code : Tout sélectionner

<div class="news"><div class="posted">2005/02/31 posté par invité</div><h3>le titre de la news</h3>le contenu</div>

avec

Code : Tout sélectionner

.news {
	border: 1px solid red;
}
.news>.posted {
	background-color: red;
	color: white;
	font-weight: bold;
}
.news>h3 {
	background-repeat: no-repeat;
	background-position: 3px center;
	padding-left: 17px; /* = largeur image + 2 * 3px de marge */
	background-image: url("news.gif");
}

[calimo]

En même temps je ne sais pas si c'est une bonne idée de vouloir faire exactement pareil. Pas que ce ne soit pas bien actuellement, au contraire, mais tu va beaucoup galérer si tu veux refaire exactement la même chose, et ça ne pourra probablement pas être exactement pareil qu'actuellement, donc tu risques fort d'être décu

[robfinck]

merci pour vos conseils, j'aivais déjà penser à la solution des Div, mais en fait ce que je trouve pratique dans mon site actuellement c'est la maintenance : je ne suis pas obligé de recopier ou modifier mon menu / bannière sur chaque page (le principe des includes était très pratique).

Calimo, je veux refaire complétement mon site, pas que ce soit pareil mais garder ce principe si c'est possible bien sûr de maintenance rapide et efficace !

merci beaucoup pour vos conseils

[martin]

Mais tu peux evidement continuer sans problème à utiliser des includes (php je suppose..) pour ton menu et autre éléments de page, ce n'est en rien incompatible. Simplement, au lieu d'incorporer des contenus de cellule ou des portions de tableaux, tu incorpores d'autres éléments html.
De plus comme tu as déjà une feuille de style externe appelée dans tes pages, chaques changements effectués dans celle ci se répercutera dans toutes tes pages. Un seul fichier pour la mise en page de toutes les pages ! C'est bien une facilité de maintenance.

Je rajoute qu'à la vue du site, ce sera facile d'obtenir un rendu très proche sans tableau.

[jv2759]

Des lien pas trop mal...

http://css.alsacreations.com/Modeles-de ... age-en-CSS

http://www.alsacreations.com/articles/design/



Sinon oui les include php c'est pas trop mal, en plus j'ai vue que ton site en utiliser déjà. Un entete.html et un piedpage.html et c'est bon...

[robfinck]

hello !

bon j'ai refait un peu avec l'aide d'alsacreation (le site en 5 étapes), le style me plait assez. de plus j'ai beaucoup appris avec les différents tutoriaux des sites.

Le problème c'est que j'essaie d'inclure un autre div, à droite du div contenu, mais ce nouveau div se place bien à sa droite, mais en bas et non à côté.

j'ai mis un float:right au nouveau div.

Code : Tout sélectionner

div#contenudroit
{
  position:relative;
  float: right;
  width: 250px;
  text-align: left;
  line-height: 15px;
  margin-left:5px;
  margin-top:10px;
  height: auto;
}

merci pour vos conseils

[calimo]

Je suis pas sur d'avoir tout compris comment tu as organisé ces div, ni leur arborescence (ils est enfant ou adjascent ?), mais en tous cas c'est le bloc d'avant qui doit flotter si tu veux que celui d'après s'écoule à son côté

[robfinck]

Ok j'ai compris, en fait comme tu me l'as dit, je n'avais pas mis la propriété du float au bloc d'avant, mais à celui d'après ! merci 8)

[robfinck]

mon site est enfin refait, c'est nettement mieux maintenant

j'ai un problème concernant IE qui affiche mal la page :
http://www.lagouttiere.com/chronique.php?num=154

le cadre du div conteneur ne va pas jusqu'en bas, une fois sur deux.
j'ai mis une indication pour IE mais ça ne le respecte pas :

Code : Tout sélectionner

min-height: 800px;
height:expression(document.body.clientWidth > 800? "800px": "auto" );

avez-vous une idée ?
merci

[Thomas]

Dans un textarea ou un input quand on passe la souris dessus il y a un changement de style (:hover)
Mais quand on clique dessus et qu'on enlève la souris le style redevient come avant
Je te conseille de mettre le même style opur :hover et :focus

[robfinck]

Dans un textarea ou un input quand on passe la souris dessus il y a un changement de style (:hover)
Mais quand on clique dessus et qu'on enlève la souris le style redevient come avant
Je te conseille de mettre le même style opur :hover et :focus

j'avais pas pensé à ça, mais c'est effectivement plus logique.

je cherche toujours pour que le div conteneur aille jusqu'en bas avec IE, qui s'allonge

[calimo]

Code : Tout sélectionner

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

Ha ha ha ! Toi tu va pouvoir revenir en XHTML 1.0 Strict
http://www.w3.org/TR/xhtml-media-types/#summary

En plus ta page n'est même pas valide

Il y a une chose que je ne comprend pas : pourquoi as-tu fixé la hauteur ? Pourquoi ne la laisses-tu pas en "auto" ? Les navigateurs savent très bien agrandir le bloc autant que nécessaire, je ne vois pas de raison pour en fixer la taille...

[robfinck]

j'ai fait vite fait le petit code en haut de la page pour le 1.1 mais je ne savais pas que il y avait plusieurs possibilités à mettre (comme strict ou transitional) donc je vais voir ça après

sinon j'ai mis un min-height car le div principal contient un background sur le côté, et si le contenu du div est plus court que le background, ça faisait moche car ça coupait la moitié du background. Vous comprenez ?

[calimo]

Je vois, dans ce cas la solution est de créer un div encore plus global, contenant le bloc de fond de côté et le contenu, et de mettre le bord et le fond blanc sur celui.ci. Il s'allongera automatiquement si l'un ou l'autre des blocs est plus long

Autre option, vu que l'image contient du texte, donc de l'info, ne pas la mettre en arrière-plan mais "en dur" dans le code