Discussion :

[Clorish]

Hello
J'essaye de voir comment je peux mettre en page mon site web a l'aide de div.

vu que je debute, j'au un tit ensemble de questions a poser :
1 - Peut on a l'aide d'un "div" gerer une zone etirable avec une image en fond dont les bords sont arrondi ou faut il a la maniere des tableaux creer plusieurs DIV ..... (et eventuelement comment )
2 - peut on definir une sorte de "modele" c'est a dire qu'une mise en page incluant plusieurs div imbriqué soit accessible via une seule balise ou bien faut il creer systematiquement l'ensemble des balises ?
3 - Les div flotant sotn assez sympas pour la mise en page. Mais (de meme que les Div) sont ils globalement reconnu ? ou existe t il encore des navigateur grand public (IE, FF, Opera, Netscape, Mozilla) qui foirent un peu la mise en page ?

[Candygirl]

Hello,

ça fait plaisir de te voir sur le forum css

Une première chose, évite de parler de mise en page par div, mais parle plutôt de mise en page à l'aide des css.

La mise en page se fait en stylant les balises existantes (h1,h2,p,ul,li,...) du document (x)html. Les div et span sont ajoutés uniquement, au besoin, pour des raisons structurelles ou de présentation. Tu peux très bien assigner ton float directement à une balise img ou un titre, pas besoin de recourir systématiquement à l'utilisation d'un div (ceux qui qui y recourent abusivement sont communément atteints d'une maladie curable appelée "divite" )

Pour répondre à tes questions:

1. Actuellement css2.1 n'accepte qu'une image de background. Pour un bloc avec des coins arrondis étirable on est donc obligé de passer par une imbrication de plusieurs éléments (là tu as le droit de rajouter des divs ). En général des imbrications en jouant avec les positions du background, les padding/margin est la meilleure solution. Après il faut voir si c'est du png transparent,...
   
   Pour faire plus léger, il y aurait moyen de jouer avec les pseudo-class :before et :after mais IE7 ne les reconnaît pas. Par contre lorsque css3 sera implémenté largement (pas demain la veille), ce genre de mise en page deviendra beaucoup plus simple grâce à l'acceptation de plusieurs images de fond dans un même élément.
   
   
2. Non on doit créer l'ensemble des balises (si j'ai bien compris la question)
   
   
3. Tous les navigateurs actuels interprètent suffisement bien css2.1 pour l'utiliser largement. Après il est clair que chaque navigateur a ses manques/mauvaises interprétations, petits bugs. De ce côté-là IE est assez prise de tête, surtout si tu ne connais pas le concept de haslayout ou la longue liste de bug d'IE6 ou encore les propriétés qu'IE6 ou 7 ne gèrent tout simplement pas nativement. Mais ce n'est pas plus prise de tête que quand il fallait faire un montage en tableau un peu graphique qui rendent parfaitement bien sur NS4.x
   
   Cependant il est tout à fait possible d'obtenir une mise en page correcte sur IE6 et 7,FF1.5 2, seamonkey, opera et safari dernières moutures, konkeror. Netscape tourne maintenant sur Gecko et donc n'est plus trop un souci d'autant que le nombre d'utilisateurs est inférieur à 1%. On arrive à avoir un site consultable sur IE->5.01 et il y a moyen de faire en sorte que les navigateur 4.x (netscape ou explorer) ne prennent pas du tout en compte le css (à l'aide du @import), de cette manière le site est tout à fait consultable sous sa forme brute grâce au balisage html approprié.

[Clorish]

Hello,

ça fait plaisir de te voir sur le forum css

Bha oui a force de persuasion

Une première chose, évite de parler de mise en page par div, mais parle plutôt de mise en page à l'aide des css.

Ok c'est noté

La mise en page se fait en stylant les balises existantes (h1,h2,p,ul,li,...) du document (x)html. Les div et span sont ajoutés uniquement, au besoin, pour des raisons structurelles ou de présentation. Tu peux très bien assigner ton float directement à une balise img ou un titre, pas besoin de recourir systématiquement à l'utilisation d'un div (ceux qui qui y recourent abusivement sont communément atteints d'une maladie curable appelée "divite" )

Oui ca je sais
Je connait plutot assez bien les bases du CSS. J'en suis a mon 3e site serieux et j'utilise pas mal les CSS ... mais j'ai quand meme encore bcp a apprendre
En fait c'est pas le CSS qui me gene mais les Divs a la abse

Actuellement css2.1 n'accepte qu'une image de background. Pour un bloc avec des coins arrondis étirable on est donc obligé de passer par une imbrication de plusieurs éléments (là tu as le droit de rajouter des divs ). En général des imbrications en jouant avec les positions du background, les padding/margin est la meilleure solution. Après il faut voir si c'est du png transparent,...

C'ets du GIF transparent (notement pour les bordures)
Donc si j'ai bie nsaisi, pour un effet similaire, il faut une technique proche de celle des Tableaux : 9 cases ....

Non on doit créer l'ensemble des balises (si j'ai bien compris la question)

Ca ca m'embete

Tous les navigateurs actuels interprètent suffisement bien css2.1 pour l'utiliser largement. Après il est clair que chaque navigateur a ses manques/mauvaises interprétations, petits bugs. De ce côté-là IE est assez prise de tête, surtout si tu ne connais pas le concept de haslayout ou la longue liste de bug d'IE6 ou encore les propriétés qu'IE6 ou 7 ne gèrent tout simplement pas nativement. Mais ce n'est pas plus prise de tête que quand il fallait faire un montage en tableau un peu graphique qui rendent parfaitement bien sur NS4.x

Cependant il est tout à fait possible d'obtenir une mise en page correcte sur IE6 et 7,FF1.5 2, seamonkey, opera et safari dernières moutures, konkeror. Netscape tourne maintenant sur Gecko et donc n'est plus trop un souci d'autant que le nombre d'utilisateurs est inférieur à 1%. On arrive à avoir un site consultable sur IE->5.01 et il y a moyen de faire en sorte que les navigateur 4.x (netscape ou explorer) ne prennent pas du tout en compte le css (à l'aide du @import), de cette manière le site est tout à fait consultable sous sa forme brute grâce au balisage html approprié.

Notre site est un site professionel (celui de la societe) dont le but est la fortmation aeronautique, donc le public ciblé n'est pas un public a forte tradition informatique. IE et Win sont les plus utilisés.
Mais par soucis de compatibilité (et de lute anti MS ) je voudrails porter le site sous Linux et les navigateurs freeware.
Firefox/Opera sur distrib linux classique (Debian/Ubunut/Redhat/mandrake/suze) devrais suffire

Sinon je pense qu'il va faloir combiner les 2 techniques pour optenire le meilleur de chacunes.

Actuelement je genre mon site sous forme de tableaux, dont certaines cellules font office de "frames" et a la maniere des templates Dreamweaver, j'y inclut a l'aide d'une variable PHP une autre page php. Sur cette derniere je defini un tabelau de 1x1 aux dimentions de la cellule hote, qui me permet de gerer ma mise en page via la preview de Dream.

Pour info, voila l'une des pages du site en cours de construction pour donner un appercu de ce a quoi j'essaey d'arrive
Toute infos et conseils sont les bienvenue
http://digitalisland.free.fr/divers/screen.jpg
Merci et a bientot !

[Candygirl]

Vu ton exemple, non pas besoin de rajouter 9 divs à chaque fois. Déjà tu peux utiliser la propriété border pour faire la bordure et placer des 4 coins par-dessus (sans la tranparence vu qu'elle est inutile).

Après, ça dépend de ton site. Si le home>> et les flags sont toujours présents, tu peux profiter de les utiliser pour placer ton background du coin sans ajouter de div.

De même tu peux utiliser le footer.

Après ça dépend aussi du contenu présent sur chaque page, à quel point ton site est extensible,...

[Clorish]

Vu ton exemple, non pas besoin de rajouter 9 divs à chaque fois. Déjà tu peux utiliser la propriété border pour faire la bordure et placer des 4 coins par-dessus (sans la tranparence vu qu'elle est inutile).

A ouais .... pas bete ca !
Par contre je comprends le principe mais je ne vois pas trop comment le faire
un tit exemple ?

Après, ça dépend de ton site. Si le home>> et les flags sont toujours présents, tu peux profiter de les utiliser pour placer ton background du coin sans ajouter de div.

Oui ca ca ne me pose pas trop de soucis. J'ai compris un peu comment fonctionne les divs.
Creer un div avec une image de fond, je gere ... c'est juste la dimention de l'image de fond car le principe est de pouvoir modifier le CSS pour etirer ou retrecir la page et/ou les differentes zones (que j'appelle frames) qui la compose.

[Clorish]

Vu ton exemple, non pas besoin de rajouter 9 divs à chaque fois. Déjà tu peux utiliser la propriété border pour faire la bordure et placer des 4 coins par-dessus (sans la tranparence vu qu'elle est inutile).

Ben en fait la .... j'ai du mal
komenkonfé ?

[Candygirl]

Un petit exemple qui fonctionne sur IE5.01->ie7, ie5 mac, et tous les navigateurs récents (FF, seamonkey, opera, safari, konkeror)

Tu peux resizer la fenêtre pour voir comme il réagit.

Mais il faut avouer que ce type de montage est déjà assez "avancé" pusiqu'il fait appel à un margin négatif et qu'on doit donner le layout pour IE (je dis ça pas que cela te décourage pour la suite )

Tu peux aussi le faire une version avec des position:relative ou encore positionner tes images aux 4 coins (div vide ou images alt vide = bof).

Perso je préfère celui-ci qui est très simple à part les contournements IE (je t'ai mis la panoplie )...