Les float et div d'un de vos tutoriel

Bonjour,

j'ai 2 petites questions suite à la lecture du livre css2 et le gabarit de cette page :
http://css.alsacreations.com/modeles/modele16.htm

Vous dites que trop de div tue les divs , n'y aurait il pas trop de div dans cet exemple ? avoir toute la page dans le div conteneur est ce obligatoire ? ne peut on pas s'en passer et avoir toujours le même effet?, quel est le nombre de div imbriqué pour respecter une sémentique correcte.

ma seconde question concerne toujours cette page :
quand on réduit la fenetre de façon considérable la partie droite chevauche le contenu central , comment y remedier ?

merci.
bonne journée.

boman,

Hé non, il n'y a pas trop de DIVs dans ce modèle Il respecte une architecture simple et basique de page :
- un conteneur global pour positionner
- 1 header, 1 colonne gauche, 1 colonne centrale, 1 colonne droite, et 1 footer pour englober les contenus et les positionner plus simplement dans le conteneur global.

Sans compter le div contenant le lien de retour, bien sûr.
Il n'y a donc pas "trop" de div dans ce modèle.

On peut, bien évidemment, toujours se passer de quelques div, mais pas de tous ! Certais sont essentiels dans la structure de la page, pour le positionnement ou certains "trucs" difficilement réalisables autrement.

Il n'y a pas vraiment de "nombre limite" de div pour avoir une sémantique correcte. Même si tu uses et abuses de DIVs dans une structure mais que tu utilises pour les contenus des élements sémantiquement bons tels que p, ul ou encore pre, ta sémantique restera correcte.

Quant à ta dernière question, il n'existe aucune méthode pour éviter le chevauchement des différents éléments de la page. En effet, contrairement au bloc central dont les dimensions sont fluides, les mots ne peuvent pas se scinder et s'afficher sur plusieurs lignes. Donc même si ton bloc vient à se retrouver avec une largeur de 3 pixels, les mots dépasseront quand même du bloc, faisont donc chevaucher les deux contenus : central et droite.

Une solution alternative à ceci pourrait être l'utilisation d'un modèle à largeur FIXE, ou de préciser les dimensions minimales du bloc via la propriété CSS min-width, mais cette dernière n'est pas supportée par Internet Explorer.
Toutefois, en utilisant min-width, tu seras certain que les contenus ne se chevaucheront plus en cas de réduction massive de la taille de la fenêtre !
Modifié par Ladytron (04 May 2006 - 11:56)

Merci Ladytron,

Ok pour les div .
pour le chevauchement , j'ai pu voir sur certains sites quand la fenetre est trop petite le div droit passe en dessous du div central ? cela se fait comment ?en gardant toujours le meme esprit les div des cotés sont de tailles fixes width:150px;

en tout cas merci c'est un peu plus clair pour le nombre de div.

boman.

"Pourquoi, lorsque la fenêtre est trop petite, le div de droit passe sous le div central ?"

Il faut voir que, quand on a 3 div alignés, ils sont généralement (presque tout le temps) placés en relatif, et en flottant !
Ce qui fait que si tu réduis la fenêtre, les div se placent en fonction de leur largeur et de l'espace disponible horizontalement : s'il n'y a pas assez de place, ils se décalent en dessous pour s'afficher
Ils respectent simplement le flux normal de positionnement par les navigateurs : de gauche à droite et de haut en bas, comme la lecture des lignes d'un livre
Modifié par Ladytron (04 May 2006 - 12:40)

Justement Ladytron , les div ne se décalent pas en dessous , mais se superposent l'un en dessous de l'autre( celui qui est à droite se met sous celui qui est a gauche).
je voudrais bien arrivé a faire en sorte qu'ils se décalent , et là je ne sais pas faire...
si quelqu'un pourait m'aider.
merci
boman

Peux-tu faire un screenshot, histoire d'avoir un exemple pour mieux analyser et solutionner ce problème ?

tiens prends l'exemple suivant ( http://css.alsacreations.com/modeles/modele16.htm ) , je suis en train d'apprendre donc je me sert d'exemple concret que j'essaie de comprendre et de refaire.

diminue la fenetre et voiiiiiiiiiii....l'empilement et non le décalage.

merci en tout cas pour ton accueil et ton aide.

boman.

Je constate, en effet, qu'au-delà d'un certain seuil il y a empilement. Mais c'est là le comportement 'standard' : tout navigateur réagira ainsi.
Disons que si la fenêtre est trop petite, il est impossible de décaler les éléments (le bloc en lui-même est "redimensionné", mais son contenu ne peut pas nécessairement l'être)

En règle générale, toutefois, aucun utilisateur n'a un écran ou une résolution trop petite
Modifié par Ladytron (04 May 2006 - 15:52)

Oui tas raison , pour avoir une fenetre aussi petite il ya problème ...

mais c'est juste une interrogation et surtout une comparaison avec le cas ou il y aurait que deux div alignés, car dans ce dernier cas , la div de droite se décale , voir la page d'accueil d'alsacreation ( par exemple).

c'est quand même bizar qu'on y arrive avec deux mais pas trois ????

Cela fait partie des mystères du design CSS et du comportement de ses propriétés

il ya une chose qui me rassure c'est qu'on soit d'accord... ouf .

Voici un exemple avec apparamment 3 div et celle du milieu se décale vers le bas , quel est l'astuce ?
h-tt-p://www.mp82.com/
je ne connais pas ce site j'y suis arrivé par hasard , et je ne fais pas de pub pour ce site !!!

merci pour vos commentaires et explications.

boman.

Tu parles de quels div ? Ceux du bas, ou les deux gros du haut de la page ?
Modifié par Ladytron (04 May 2006 - 16:38)

alors je n'ai pas eu le temps de regarder le code source , mais le coté droit : là ou il y a inscrit ( les 4 dernières mises à jour) ne s'empile pas sur le texte du centre.

c'est ceci ce que je voudrait arriver a faire...

hmmm ... en fait, le bloc dont tu parles est flottant à DROITE.
Un bloc défini comme flottant à droite sera toujours affiché sur la droite de son élément conteneur.

C'est pour ça, je pense.

oui il y a un float a droite et un width fixe en px, mais l'exemple de ce matin , celui d'alsacreations aussi et pourtant cela ne donne pas le même effet , une fois rétrécie.

je pige plus riennnn .

Personnes d'autres aurait une explication a me donner

merci.

Bizarre, je suis allé voir les pages données comme exemple et j'ai repéré un comportement normal des flottants…

Sur le comportement des flottants, la page suivante pourra peut-être t'aider (à visualiser avec un navigateur gérant la transparence PNG) :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Le comportement standard d'un flottant, c'est de ne pas repousser les blocs (il flotte par dessus les blocs), mais de repousser le contenu en ligne, en particulier le texte.
Dans le deuxième exemple donné, avec le bloc flottant à droite : il reste à droite, et repousse le texte (le menu reste en haut, le reste n'a plus la place et vient alors se placer carrément en bas du flottant).

Maintenant, pour une mise en page à trois colonnes, il y a plusieurs modèles. En gros, on a surtout le choix entre :
– trois colonnes flottantes ;
– deux colonnes flottantes et un bloc central en positionnement normal.
Pour le deuxième cas, cf l'exemple suivant :
http://web.covertprestige.info/test/11-page-fluide-avec-trois-colonnes-1.html
(cliquer sur le lien à gauche pour une nouvelle illustration du comportement flottant).

Voilà, je ne sais pas trop quoi dire d'autre… il me semble juste que le tout premier exemple cité correspond bien à ma page de test n°11 (trois colonnes).

Sinon, à propos du chevauchement de texte, il se produit parfois quand le début d'un mot n'est pas dans la zone d'influence du flottant, mais que le mot n'a pas la place de s'inscrire en entier. Il semblerait que Firefox considère que tant que le tout début (à gauche) du mot tient, le mot entier doit être affiché.
Il se produit la même chose quand on place du texte dans un bloc de 10px de large. Vu qu'il ne peut pas mettre le texte à la ligne pour trouver plus de place (tout le bloc fait 10px de large…), il affiche un mot par ligne, mais ces mots dépassent.

En même temps, mpop, tu seras d'accord sur le fait qu'il serait bête de couper un mot pour n'en afficher qu'une lettre par ligne Un mot est, en soi, une "entité" à part entière.

C'est comme quand on range des objets : si on n'a pas la place de le ranger dans un carton, on va lui attribuer un espace où il tiendra en entier

C'est ce principe qu'utilisent probablement les navigateurs

Ladytron a écrit :
En même temps, mpop, tu seras d'accord sur le fait qu'il serait bête de couper un mot pour n'en afficher qu'une lettre par ligne Un mot est, en soi, une "entité" à part entière.

Vi vi, je suis tout à fait pour