comment gerer des div (plutot qu'un tableau) ?

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : comment gerer des div (plutot qu'un tableau) ?

jokaritaff

Bonjour,

je dois faire la refonte d'un site qui actuellement est structuré en tableau
La refonte consiste a respecter les convetnions XHTML
disposer les elements de la page avec des div pour assouplir la mise en page, et avoir un temps de chargement meilleur

Le probleme est le suivant:
la page se décompose en 3 zones:
1 bandeau a droite
1 bandeau a gauche
1 zone de contenu au milieu

les bandes doivent se réduire/s'effacer en fonction de la resolutrion de l'ecran.
La zone de contenu doit rester fixer en taille mais doit pouvoir se decaler vers la gauche si on redimentionne.

et ce qui bloque c que actuellement les div que j'ai défini avec des CSS, restent fixes au lieu de s'adapter.

voici un code de test :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<style type="text/css">
BODY {
margin:0px;
}
#page {
width:100%;
height : 100%;
background-color: #0000FF;
}
#principal {
position:absolute;
width:100%;
height : 95%;
border:1px solid #FF0000;
}
#bord_gauche {
position:absolute;
left:0px;
top: 0px;
width:185px;
height : 100%;
background-color: #EFF6CC;
border:1px solid #000000;
overflow:none;
}
#centre {
position:absolute;
left:186px;
top:0px;
width:910px;
height:90%;
border:1px solid #0000FF;
}
#bord_droit {
position:absolute;
left:1097px;
top: 0px;
width:164px;
height : 100%;
background-color: #EFF6CC;
border:1px solid #000000;
}
</style>
</head>
<body>
<div id="page">
<div id="principal">
<div id="bord_gauche">
BORD GAUCHE
</div>
<div id="centre">
CENTRE
</div>
<div id="bord_droit">
BORD DROIT
</div
</div>
</div>
</body>
</html>

Publicité

nargy

voui, c'est Le cas particulier dans lequel tu as besoin d'un tableau. Puis tu mets des divs à l'intérieur.

jokaritaff

cas particulier ?
pourtant c une structuration de page qu'on retrouve tres souvent...

nargy

tu peut fouiller le forum, il y a moultes discussions sur le sujet, aucune solution CSS pure ne réponds exactement au problème d'avoir des colonnes de même hauteur étirables suivant la plus grande.
Par contre, à l'intérieur de ce tableau, tu peut avoir des colonnes étirables.

Hermes le Messager

Breton Quiétiste

+1

Les tableaux dans certains cas ne sont pas un mal à condition comme dans le cas présent de n'en avoir qu'un et que ces propriétés évidemment soient précisées à l'aide de CSS et non dans le code HTML.

jokaritaff

en fait le truc c que
si dans ma page html j'ai que la colonne centrale avec un margin left et right en auto, et avec 2 bandes latérales vides qui se réduisent lors du redimetionnement ca marche tres bien, le décalage s'effectue

Seulement dans mon cas ces 2 bandes laterales vides doivent etres utilisées pour y integrer des images

Donc je sais pas trop comment organiser mon interface de div
pour que les choses suivantes fonctionnent ensemble :
1 - que la colonne centrale se décale bien
2 - que les bandes latérales s'écrasent bien pendant le décalage
3 - que les bandes latérales contiennent des images au lieu d'etre simplement des espaces vides "non physique" rendus par un margin auto

et tout ca sans utiliser le moindre tableau.

Je sais pas si je suis tres clair.

merci si vous avez des idées !
parce que si une solution existe ca me servira énormément.

Message cité 1 fois
Message édité par jokaritaff le 08-06-2006 à 18:16:19

Hermes le Messager

Breton Quiétiste

jokaritaff a écrit :

Quel est le but de ne pas utiliser DU TOUT de tableau si c'est au final pour avoir un truc bancal avec pleins de divs inutiles + des hacks CSS dont la pérénité sera plus que douteuse ?

jokari34

le but est de:
- alleger le plus possible le code HTML
- un meilleur referencement
- démontrer que c'est possible a faire (OpenWeb le fait sous diverses formes)

disons que je veux vraiment une structure de base en DIV
Apres dans le contenu, les articles, les menus etc...
je les arrangerai probablement en tableau

Message cité 2 fois

mIRROR

Chevreuillobolchévik

jokari34 a écrit :

j aurais plutot fait l inverse c est marrant
surtout si tu veux alleger ton code :sweat:
pour le referencement je crois bien que les spiders s en cognent
et openweb l a prouvé a ta place

Message cité 1 fois

Hermes le Messager

Breton Quiétiste

jokari34 a écrit :

le but est de:
- alleger le plus possible le code HTML

Dans ton cas, ça va alourdir le code.

Citation :

- un meilleur referencement

C'est pas une table dans ton code qui va changer quoi que ce soit au référencement.

Citation :

- démontrer que c'est possible a faire (OpenWeb le fait sous diverses formes)

Ben non, dans ton cas, c'est pas possible à faire à moins de ruser comme un malade, d'utiliser des hacks etc... etc... pour finallement avoir un résultat bancal.

Citation :

disons que je veux vraiment une structure de base en DIV
Apres dans le contenu, les articles, les menus etc...
je les arrangerai probablement en tableau

C'est exactement le contraire qu'il faut faire dans ton cas : N'avoir qu'un seul tableau pour les colonnes et ensuite n'utiliser que des divs (sauf cas de données tabulaires bien sûr).

Publicité

nargy

jokari34> laisse tomber

C'est, comme on te le propose, le contraire qu'il faut faire: utiliser un tableau global, et des divs à l'intérieur.

gatsu35

Blablaté par Harko

mIRROR a écrit :

j aurais plutot fait l inverse c est marrant
surtout si tu veux alleger ton code :sweat:
pour le referencement je crois bien que les spiders s en cognent
et openweb l a prouvé a ta place

Les mises en pages sans tableau c'est le bonheur absolu, il est vrai que l'on se fait chier au départ et qu'on applique des hacks, mais pour changer la mise en page c'est le bonheur
Le html fait sémantiquement c'est bien, c'est même bien pour les moteurs de recherche, pour les lecteurs d'écran, et c'est bien quand tu fais du Javascript par le DOM, tu parcoures les éléments et paf, c'est tout magique [:dawa]

Et ça allège fortement le code et ça le rend surtout plus lisible et plus propre quand on le fait correctement

Message cité 2 fois

---------------
Blablaté par Harko

afbilou

pouet your life

pour faire des colonnes il existe display: table/table-cell/table-row et compagnie ... apres qu'IE soit LE SEUL navigateur qui ne sache pas de quoi ca parle c'est un probleme dont ne devrait pas avoir a se soucier

edit : http://wiki.media-box.net/documentation/css/display

Message cité 1 fois
Message édité par afbilou le 08-06-2006 à 20:56:27

Hermes le Messager

Breton Quiétiste

gatsu35 a écrit :

Les mises en pages sans tableau c'est le bonheur absolu, il est vrai que l'on se fait chier au départ et qu'on applique des hacks, mais pour changer la mise en page c'est le bonheur

Même pas. Dans son cas, tout changement de mise en page sera un cauchemard surtout quand on considère les divs totalement inutiles qu'il devra utiliser...

Citation :

Le html fait sémantiquement c'est bien, c'est même bien pour les moteurs de recherche, pour les lecteurs d'écran, et c'est bien quand tu fais du Javascript par le DOM, tu parcoures les éléments et paf, c'est tout magique [:dawa]

Oui. Mais dans son cas, l'utilisation des divs n'aura rien de sémantique. On sait parfaitement que les ruses qu'il faut utiliser pour avoir 3 colonnes qui s'allongent mutuellement en fonction des deux autres reposent non seulement sur des hacks CSS, mais aussi sur des divs suplémentaires qui ont des fonctions complêtement détournées et plus du tout sémantiques.

Citation :

Et ça allège fortement le code et ça le rend surtout plus lisible et plus propre quand on le fait correctement

Oui, mais pas dans son cas. [:spamafote]

Dans son cas, ça alourdit le code et ça le rend moins lisible.

mIRROR

Chevreuillobolchévik

gatsu35 a écrit :

pour changer la mise en page c'est le bonheur

bah franchement jusque la j ai toujours tout fait en divs
et dernierement j ai eu exactement le meme probleme
et au bout de quelques heures sans solution bah tu reviens vite a ta table
le site d openweb lé bien beau mais avec deux colonnes et sur fond blanc
le site du w3c est tellement gavé de liens que forcement les trois colonnes touchent le sol mais la c est juste la gravité

donc j ai peut etre choisi la facilité mais bon [:spamafote]

mIRROR

Chevreuillobolchévik

afbilou a écrit :

remarque gatsu avait déniché un hack pas mal pour ca ^^

edit
tu crois que ca marche le hasLayout pour ca ?
(je vais tester tiens ^^)

Message cité 1 fois
Message édité par mIRROR le 08-06-2006 à 21:15:20

gatsu35

Blablaté par Harko

Je suis tout à fait d'accord qu'il faut plus d'un DIV pour reussir une mise en page de warrior au niveau graphique.

c'est le cas actuellement, on refait la refonte du site d'un gros gros client, et on fait tout en CSS, ben on a quand même un systeme de base en tableau et derriere il y a une grosse quantité de DIV , malheureusement à l'heure actuellement on ne peut pas faire mieux, mais les CSS c'est clairement de la balle pour la simplification du taf lorsque tu fais du cheuteumeuleu

---------------
Blablaté par Harko

gatsu35

Blablaté par Harko

mIRROR a écrit :

remarque gatsu avait déniché un hack pas mal pour ca ^^

des hacks et des merdes sur les CSS j'en découvre tous les jours, depuis bientot 3 mois je fais du HTML et des CSS (surtout des CSS 8h par jour) sous FF, IE et Safari (opera n'est pas encore à l'ordre du jour)
et je peux te dire que des bugs et d'autres joyeuseté tu en rencontre tous les jours.

par exemple :

Code :

<div class="divtotable">
<form style="display:table">
<input type="text" value="mon formulaire s'affiche pas sous SAFARI">
</form>

sous Safari, si le champ père est en display:table, le formulaire fils ne s'affiche pas [:dawa] , super

et d'autres exemples joyeux comme le principe du layout ((lien) (merci masklinn pour le tuyau) qui me permet de me sauver de bien des situations tordus sous IE
genre : rien que le fait de forcer le layout sur un élément, me permet de l'afficher sous IE (il ne s'affiche pas sinon [:dawa]

---------------
Blablaté par Harko

FORUM HardWare.fr

Programmation

HTML/CSS

comment gerer des div (plutot qu'un tableau) ?

Sujets relatifs
Tronquer les données d'un tableau	un code pour calculer le minimum des donnés d'un tableau
Fichier .txt => Tableau Array() ?	[Fin] Gérer les évenements sur des boutons créés dynamiquement
gérér extension lors de upload	Parcours d'un tableau de char
[PHP] Lire les données d'un tableau	[résolu]gérer les colonnes d'un tableau comme des objets javascript ?
[PHP] Gérer un tableau à 4 dimensions	[VB / .NET] Gérer un tableau de string
Plus de sujets relatifs à : comment gerer des div (plutot qu'un tableau) ?

Page générée en 0.085 secondes