[RESOLU] Faire mon site entièrement en css et <div>

Bonjour,

J'ai actuellement un petit site perso que j'ai fait hâtivement avec des bouts de code source que je disposais déjà de mes anciennes pages.

Or je suis jusqu'à présent habitué à bâtir mes pages qu'avec des <table><td> etc.
Vous me direz qu'il est évident de tout faire en <div> et en css, mais il se trouve que la disposition des éléments sur ma page ne me permet visiblement pas de faire mon site 100% CSS et sans tables.

J'ai beau réfléchir sur les float:left/right, clear:both, pour imaginer chacun des éléments déjà présents sur mon site, mais cela ne donne jamais l'aspect que je veux (çàd l'aspect actuel, les barres verticales, le pied de page, l'entête, le corps, etc.

Faudrait-il mieux dans certains cas rester sur les bonnes vieilles tables dont nous sommes certains de son rendu sur tous les clients web ?
Le débat fait rage parfois, des arguments très poussés sont avancés de part et d'autre comme j'ai pu le voir de temps en temps, mais là j'avoue être coincé sur mon cas.

Ma page : http://dsofficial.free.fr/public/new_theme
EDIT : cette page n'existe plus, rendez-vous sur cette nouvelle page http://dsofficial.free.fr/public/new_theme2
Pour voir l'ancienne page voir ici : http://dsofficial.free.fr/public/new_theme2/articles/cc_05.jpg

PS. Si vous naviguez avec Firefox 3, faites CTRL + clic sur les cellules pour les voir, si ça vous aide.
Modifié par darkstar2023 (07 Nov 2009 - 13:37)

Hello,

A priori, il n'y a rien que tu ne puisses pas faire avec HTML + CSS.

En tout cas ton site ne m'évoque aucune réelle difficulté. Commence par apprendre les bases de la chose et tu verras assez vite qu'il est souvent plus simple d'utiliser les div, ne serait-ce que pour gagner du temps niveau maintenant derrière.

Merci de m'avoir répondu assez vite.

C'est vrai que les div sont plus modulables pour les modifications. En revanche, pour certains qui disent que le code source devient plus léger, je doute.
Ouvrir une table demande 2 balises, une cellule 1 balise... alors que le positionnement des div nécessite souvent plus d'un seul DIV, sans parler de la feuille CSS...

http://img39.imageshack.us/img39/1853/sanstitreyh.png

Et impossible de reproduire exactement la même disposition.
Modifié par darkstar2023 (03 Oct 2009 - 03:39)

Coucou,

Pour tes div verticales, laisse float left comme tu as fait.
Pour es div horizontales, met un float right avec un clear:right;

Salut,

En fait la question serait : est-tu prêt à remettre en cause ta façon de programmer, ou préfère tu la conserver en prétendant qu'on ne peut pas faire autrement ?

Car concrètement, comme cela t'a été dit, il est tout à fait possible de se passer des tableaux pour se genre de mise en page.

Après, évidemment, dans ce cas, la différence de légèreté de code ne sera pas forcément énorme, mais elle y sera quand même. Par contre le gain en accessibilité sera important, car ton tableau, non renseigné correctement, est complètement inaccessible pour certaines personnes. Or comment renseigner un tableau qui sert à la mise en forme ?

Donc la différence de code ne sera pas énorme, mais cela vient surtout de ta conception avec des liens verticaux, qui nécessite cela. Pour un procédé inadapté sur un écran d'ordinateur, par les outils fournis et par son manque de praticabilité. Tout le monde n'a pas un écran qui tourne à 90°, ni un portable qu'il peut manipuler plus facilement.

Je comprend pas ou est le problème là ?
Les deux versions sont quasi identiques, il ne te reste que 2 ou 3 réglages a faire ...

Voilà, j'ai à peu près réussi, sauf pour les barres verticales...
Faut-il avoir toujours inévitablement recours à l'image de fond pour faire descendre les couleurs des barres jusqu'en bas ?
Modifié par darkstar2023 (03 Oct 2009 - 14:45)

Oui c'est ce qu'il y à de plus simple.

Assez chiant le jour où je désirerai bouger un petit peu la largeur de chaque barre verticale, il faudra aussi retailler l'image...
Enfin bon.

Le résultat est là.
J'espère que le rendu sera le même avec IE, FF, Opera... je m'inquiète surtout pour IE, notamment IE6 ou plus vieux :s
Je n'ai pas de mac pour tester avec Safari...

PS. Pour votre test j'ai renommé les fichiers :
Nouvelle page (DIV) : http://dsofficial.free.fr/public/new_theme
Ancienne page (tableaux) : http://dsofficial.free.fr/public/new_theme/index_tables.php
Modifié par darkstar2023 (03 Oct 2009 - 15:15)

encore un autre problème :

Sur mon site, vous pouvez constater que le contenu de gauche et le contenu à droite sont de longueur à peu près égales.

Or, si vous allez à l'adresse suivante :
http://dsofficial.free.fr/public/new_theme/?bd=test

Ca désactive l'affichage de la publicité, et le contenu de droite devient plus court que celui de gauche...

et le footer se relève aussi... laissant place à du vide tout en bas.

Y a-t-il un équivalent de {vertical-align:bottom;} qui s'applique aux DIV pour que le footer se cantonne en bas du DIV parent, quelque soit le contenu du haut ?
Modifié par darkstar2023 (04 Oct 2009 - 23:49)

J'ai en partie trouvé une (non-)solution à mon problème

http://forum.alsacreations.com/topic-9-23943-1-Tableau-Vs-CSS-avantages-de-chacun.html

Pour les alignements verticaux et les colonnes de même longueur, le CSS ne fait pas encore ce qui est possible avec les tableaux.

Tant pis...

darkstar2023 a écrit :
Y a-t-il un équivalent de {vertical-align:bottom;} qui s'applique aux DIV pour que le footer se cantonne en bas du DIV parent, quelque soit le contenu du haut ?

Il y a par exemple le positionnement absolu. (Re)lire le Guide de survie du positionnement CSS.

darkstar2023 a écrit :
Pour les alignements verticaux et les colonnes de même longueur, le CSS ne fait pas encore ce qui est possible avec les tableaux.

C'est vrai qu'il est parfois plus simple (ou tout simplement plus compatible) d'utiliser un tableau de mise en forme mais ça ne me semble pas être le cas ici. Quoi qu'il en soit ça ressemble plus à une bonne excuse pour ne pas prendre le temps d'apprendre le css !


Edit: au passage et en référence à ton titre lire Arrêtons de remplacer systématiquement les tableaux par des div.
Modifié par Heyoan (05 Oct 2009 - 06:22)

J'avais testé le positionnement absolu

position: absolute;
bottom: 0;
left: 188px; /* largeur de la colonne de gauche */

l'élément se place effectivement en absolu... par rapport à l'écran d'ordi !

et en lisant les docs que tu m'as montré, effectivement les lacunes du CSS aujourd'hui ne sont pas encore comblés (à part avec les hacks mais ceci n'est pas une vraie solution à tout) : les hauteurs des colonnes, l'alignement vertical (le CSS 3 fera l'affaire surement)
Ce qui donne encore une dernière raison de vivre aux tableaux, mis à part pour les données tabulaires.

Heyoan a écrit :
Edit: au passage et en référence à ton titre lire Arrêtons de remplacer systématiquement les tableaux par des div.

Cet article résume bien.
Et les arguments avancés en matière de facilité d'entretien/édition des sites "sans tables" sont faits pour des sites à plusieurs pages ou à contenu étoffé, etc. Et encore, le PHP peut faire l'affaire...
Pour mon cas - un site à une seule page et quelques sous-pages déployées - l'utilisation des DIV, ironie du sort, rend l'édition plus compliquée.
Et le code source html un peu plus lourd (l'effet contraire).

J'avais un blog fait avec des tables qui était extrêment bien référencé par Google, comme quoi...
Cela s'explique aussi, par la pertinence des balises utilisées : <blockquote>, <hn>, <p>...
J'avais rebidouillé un theme Dotclear justement pour les mêmes raisons exactement : les colonnes et les alignements verticaux
Modifié par darkstar2023 (05 Oct 2009 - 13:26)

Salut,

pour être tout à fait exact, ce n'est pas une lacune de CSS, mais bien une implémentation de CSS encore incomplète qui empêche de réaliser des colonnes de même hauteur facilement. Les tableaux sont la solution la plus simple pour des raisons de compatibilité avec les navigateurs.

En ce qui concerne tes problèmes de positionnement, il me semble qu'ils indiquent plus un manque de maîtrise de CSS qu'autre chose. Le design ne me semble pas particulièrement compliqué à intégrer en utilisant des div (et des Hn, des UL, et toutes les balises qui vont bien), mais on n'apprend pas CSS en deux jours. Il faut passer pas mal de temps dessus et acquérir de l'expérience avant d'être efficace. Quand tu auras bien digéré tout ça, tu verras que la légèreté et la maintenabilité de ton site seront sans commune mesure avec ce que tu as fais jusqu'ici avec des tableaux.

Les éléments positionnés en absolu sont placés par rapport à leur plus proche ancêtre positionné, c'est tout à fait normal que ton pied de page se retrouve tout en bas de la page. Lire à ce sujet cet article de Benjamin.

Courage, et bon travail

Thomas D. a écrit :
Les éléments positionnés en absolu sont placés par rapport à leur plus proche ancêtre positionné, c'est tout à fait normal que ton pied de page se retrouve tout en bas de la page.

Courage, et bon travail

merci.

... mais mon div en position:absolute imbriqué dans un div parent se positionne pas par rapport au div parent mais au <body>...

Je verrai ceci plus clairement ce soir.

6 ans déjà : http://www.pompage.net/pompe/clarence/

Toujours sympa à lire.

J'ai fait des tests,

Et effectivement, on joue sur l'alignement vertical avec position:relative; et non absolute (sinon l'élément se place selon body donc l'écran d'ordi).
J'utilise Firefox 3.5.
Sur IE8 ca donne le même rendu.

Finalement ce n'est pas trop grave, le footer peut flotter juste en dessous du corps, le rendu ne sera pas trop mauvais.

Reste plus qu'à espérer que les navs complètent leur implémentation à l'avenir.

darkstar2023 a écrit :
Et effectivement, on joue sur l'alignement vertical avec position:relative; et non absolute (sinon l'élément se place selon body donc l'écran d'ordi).

C'est juste que tu n'as pas bien compris la notion de premier ancêtre positionné. Un petit exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#bloc1 {
	width: 600px;
	background: yellow;
	height: 400px;
	margin: 20px auto;
}

#bloc2 {
	position: relative;
	width: 400px;
	background: blue;
	height: 200px;
	float: right;
}

#bloc3 {
	width: 100px;
	background: red;
	height: 100px;
	position: absolute;
	bottom: 0;
	right: 0;
}
</style>
</head>
<body>
<div id="bloc1">
	<div id="bloc2">
		<div id="bloc3">
			<p>Loremp Ipsum</p>
		</div>
	</div>
</div>
</body>
</html>

Le DIV #bloc3 se positionne par rapport à son premier ancêtre positionné qui est le DIV #bloc2.

En l'occurrence le positionnement relatif seul peut poser problème car la place qu'aurait normalement occupée le bloc dans le flux est conservée et peut générer des décalages. Cela dit le positionnement absolu peut lui aussi poser problème comme cela est expliqué dans les tutos.