Mise en page par DIV

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 ?

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" :mrgreen: )

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 :aie:
   
   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é.

Citation:

---

Envoyé par Candygirl

Hello,

ça fait plaisir de te voir sur le forum css :)

---

Bha oui :) a force de persuasion ;)

Citation:

---

Envoyé par Candygirl

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é :)

Citation:

---

Envoyé par Candygirl

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" :mrgreen: )

---

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 :(

Citation:

---

Envoyé par Candygirl

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 ....

Citation:

---

Envoyé par Candygirl

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

---

Ca ca m'embete :(

Citation:

---

Envoyé par Candygirl

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 :aie:

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 !

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,...

Citation:

---

Envoyé par 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).

---

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

Citation:

---

Envoyé par Candygirl

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.

Citation:

---

Envoyé par 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).

---

Ben en fait la .... j'ai du mal :(
komenkonfé ? ;)

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 :mrgreen: )

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 ;) )...

merci :) je vais voir ca de plus pres ;)

T'inquites pas pour le niveau :) j'ai l'habitude de plancher sur des trucs de oufs ;) avec le boss que j'ai ......
J'ai acquis mon grade dans la section Delphi ;)

Je reviendrais te poser quelques question si besoin :)

Par cotnre quel est la diff entre @import et le lien CSS ?

Le @import n'est pas compris par les navigateurs version 4 et moins. De cette manière ils ne lisent pas les styles et donc affichent le site vierge de tout style autre que ceux par défaut du navigateur. ça permet que le site soit consultable, ce qui l'est rarement si tu leur laissent lire le css.

Mais bon, faut-il vraiment encore tenir compte de ces dinausores... ;) ?

ok .. merci :)
J'avais lut un truc en rapport avec les vieux navigateurs, mais j'avais pas compris le sens :)

Question suplementaire :
J'ai bien lu et pas trop mal compris ton exemple mais un truc me gene un peu : Les bord arrondis sont "opaque" c'est a dire que si j'ai bien compris le principe, on a 5 a 6 div, un pour 1 a 2 pour gerer les bordures vrt/hzt et les 4 autres pour les 4 coins en surimpresson.
Une 7e pour le text mais je zappe ca.

Donc mes coins arrondi en gif transparent vont donc afficher les bordures ... ou alors (comme dasn ton cas) on passe en texture opaque avec couleur de fond des coin egal a la couleur de fond qui se trouve sous la frame. Ce qui veux dire refaire tous les graphs quand on change de couleur de fond et/ou creer/modifier un set de coins dependants des X fonds possibles sur l'ensemble des pages ....

Sinon j'imagine qu'il faut gerer des divs supplementaires de largeur egal a FarmeWidth - 2*CoinWidth ... mais du coup une modification du CSS deviens plus complexe ....

Autres solutions ? ;)