Bonjour a tous!
 
J'ai fait un petit site pour mettre mes wallpapers dessus, et je n'ai pas pu m'empêcher de le faire en tableaux    
Maintenant je veux virer ces tableaux et mettre des bloc CSS a la place, mais je ne sais pas par ou commencer.
 
Le site en question : http://perso.menara.ma/leroi14/pub [...] apers.html
 
En fait je voudrais mettre 4 blocs en tout : un pour le titre, un pour l'image, un pour la légende et un pour remplacer l'iframe.
Mais voilà, je ne comprends rien au positionnement
Si j'ai bien compris je dois mettre chaque bloc dans un <div> et mettre la classe du div dans le fichier CSS. C'est bien ca non?
 
Merci de votre aide

Non c'est pas ca ...
div n'est pas la primitive du langage HTML !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
chaque élément html peut etre positionné et stylé a ta guise grace aux css. div etant un élément html comme les autres !
 
Pour répondre a ta question  il faut que tu apprennes la sémantique qui se rattache a chaque element html ... et par la suite utiliser le bon élément en fonction de ce ke tu souhaites faire.
 
<a> pour un lien
<p> pour un paragraphe
<h1> ... <h6> pour des titres
etc ...

le contenu de ton iframe, c'est (sémantiquement) une liste d'image. Donc ton bloc sera la balise <ul> et tu placeras chaque image dans un <li>. En css, tu peux cacher la puce de la liste (list-style-type:none; ) et définir la séparation entre deux images (margin:1.2em; par exemple). Du coup, tu retomberas sur ta présentation actuelle.
 
Pour la légende, c'est du texte, donc au pire un <span>.
 
Le titre du site, c'est du texte aussi, donc normalement un <span>.
 
Ta grande image, c'est une image, donc la balise <img> suffira. Et pour obtenir l'effet de bordure, il faut regarder en css du coté de "border", border-color", ... .
 
Sinon, c'est vrai que pour placer ces quatres éléments,  il faut que l'image et la liste de valeur soit défini comme étant des blocks flotants (display:block;float:left|right) Un élément "inline" (le texte et les balises de texte sont de type "inline" par défaut) définis avant des blocs flotant sera placé au dessus d'eux. Un élément "inline" définis aprés un bloc flotant à droite sera affiché à sa gauche, et celui défini aprés un bloc flotant à gauche sera affiché à sa droite s'il y a assez de de la place pour l'afficher à cet endroit là. S'il y a pas assez de place, il sera affiché en dessous.
 
Bonne chance pour ton essai. J'espéres que t'y arriveras sans trop de difficulté.

 
Je suppose que le concept d'apprentissage progressif ca te dépasse non ...
Au lieu de l'engueuler et de lacher un pavé incompréhensible, laisse lui déja faire avec des <div> pour chaque bloc logique.
Ensuite il verra qu'il peut s'il veut virer le <div> encadrant le bloc et styler directement le bloc si celui-ci est fait d'un seul élément. Et encore ca réduira la taille du code de kks caractères mais ca change queudalle au niveau sémantique et ca améliore quand même vachement la lisibilité du code

 
Merci, je vais voir ca
 
Mais en fait l'image c'est une cellule avec l'image en question comme background, et dans la cellule il n'y a que l'image du cadre...
C'est pour ca que j'ai pensé à un bloc auquel on peut changer l'image de l'arrière plan ...

Pas d'accord, avec un div autour d'une image seule ou d'un bout de texte est sémantiquement une horreur.
Et personellement, j'ai moins de mal à lire un code sémantiquement correct qu'une page contenant 7 à 8 niveaux d'imbrication de div ou 3-4 niveau d'imbrication de table.
 
Certe vu la page qu'il a a faire, ca fera que quelques caractéres de différence et ca changera pas énormément de chôses à la lecture de la page vu qu'elle est trés simple, mais je peux t'assurer que quand t'en arrive à des pages un peu plus complexe, ca devient trés vite l'horreur pour savoir où commence et finis chaque élément.

je parle pas d'un flood de div, mais de "couper" la page en 3 ou 4 div seulement.
Et expliquement moi l'horreur sémantique du div autour d'un image parceque je vois pas trop la ....

L'écran que j'ai ici affiche trés mal les couleurs (trés trés mauvaise palette de couleur surtout dans les couleurs claires) et du coup j'ai pas bien vu si ton image était constitué de plusieurs couleurs ou d'une seule.
C'est vrai que s'il y a plusieurs couleurs, tu seras obligé de rajouter un div avec un "background-image" en attendant que les navigateurs intégrent la partie de css3 qui concerne les bordure sous forme d'image. (ca permettra dans le css d'indiquer une image pour chaque coin et chaque côté d'un élément)
 
Si c'est une seule couleur, tu peux trés bien utilisé ce que je t'ai indiqué.

Pour répondre a 0x90 :
 
L'auteur du topic a des bases en html et connais le concept des CSS. Il évoque lui meme l'idee de se debarrasser de la mise en page en tableau ... c'est donc plus que le moment de lui glisser l'idee de semantique des elements html et de lui dire de suite que div n'est pas l'element englobeur ultime que toute page bien formée se doit de contenir !
 
Pourquoi se debarrasser de la mise en page en tableau sinon dans un soucis de semantique et de coherence de la structure du document html ? Et en quoi est ce plus difficile d'ecrire :
<p>blabla</p> plutot ke <div><p>blabla</p></div>
 
Apres ca tu viendras m'expliquer en quoi j'ignore l'apprentissage progressif et pourquoi ma réponse est incomprehensible ...

Si je mets un <p> a la place ca ne change rien non? parce que j'ai un attribut "first letter" qui ne s'applique qu'a mes <p> ...
 
Pour revenir a votre débat de sémentique, je dirais que pour l'instant je me contenterait de mettre des <div> , puis je verrai si je peux les supprimer

Explique moi la valeur sémantique d'un div encadrant une unique image sans rien d'autre par ce que moi je vois pas.

D'avoir un arrière plan? parce que l'image est en arrière plan, et le cadre (un PNG transparent) est l'image qui recouvre l'arrière plan pour donner une impression de cadre  

[quotemsg=1276893,10,202145]Si je mets un <p> a la place ca ne change rien non? parce que j'ai un attribut "first letter" qui ne s'applique qu'a mes <p> ...[quotemsg]J'ai jamais eu besoin d'essayer first-letter et s'il ne marche vraiment que sur la balise <p> alors utilise cette balise là d'autant plus que d'un point de vue sémantique, elle est au moins aussi bonne que la balise <span> puisque même s'il y a une ligne seule, on peut quand même considérer qu'elle constitut un paragraphe normal.

Donc aucune valeur sémantique mais actuellement une nécessité d'un point de vue présentation.
Et quand les css3 seront bien géré, ton div n'aura plus aucun intéré au niveau présentation vu que les cadres seront faisable à l'aide de bordures affichant des images.

   
 
Sinon pour l'arrière plan , j'utilise <div> ou pas?

Pour le moment, utilise un <div> pour ton image en arriére plan vu que tu n'as pas d'autre choix pour obtenir cet effet là. Dans quelques mois/années, on poura faire pareil en css, mais pas pour le moment.

<div id="titre_de_page">
<img src="logo-de-la-boite.png" alt="canard farci" />
</div>
Le div représente la section de la page constituant son titre, l'image en est un composant, unique certes qui fait que par "optimisation" on aurait put réunir les 2. Mais si l'on se soucie de maintenabilité, le div devrait à mon idée persister. Le jour ou l'on veut ajouter un texte dans le titre de la page ( disons une citation à la con ). Il faudra soit styler le bloc texte pour l'aligner au bon endroit par rapport à l'image et ce indépendament de celle-ci. Soit ajouter un bloc logique englobant les deux, sur lequel on va déporter tout les styles anciennement appliqués à l'image.

   
 
 
Là il me reste le iframe a refaire et tout le positionnement à me taper (c'est sur ca que je sens que je vais baver)  

Heu, juste pour dire : il n'y a pas de logo sur sa page, il y a une phrase stylé comme un logo et le but de sa page est d'afficher une image au centre de la page. C'est à cet endroit là que se trouve l'image qu'il pensait mettre dans un bloc. La légende de l'image pour sa part se trouve un peu plus bas dans la page.

Bon je uppe ce topic
 
J'ai fini de convertir mon tableau en CSS, mais il reste toujours la mise en page
Finalement j'ai mis un <div> pour le titre, un <div> pour la photo, un <p> pour la légende et un <ul> pour la liste
 
Je voudrais savoir comment mettre une barre de défilement à un bloc (comme dans mon iframe) en spécifiant sa hauteur/largeur .
 
De plus , je voudrais aussi spécifier la largeur de mon bloc de légende et forcer un retour a la ligne si le texte est trop grand.
 
Je voudrais aussi parvenir a aligner correctement mes blocs (là ca ressemble à n'importe quoi, le titre est tout en haut, l'image en haut a gauche, la légende en haut a droite et la liste occupe toute la droite
 
Merci

 
   Titre = Balise <hx> avec x = 1 ou 2 ou 3.....    
 
 

 
http://css.alsacreations.com/modeles/modele12.htm
 
-> overflow:auto;
 

 
le retour à la ligne ce fait automatiquement
Pour la largeur ça dépend soit tu as pas beoisn de la spécifié car elle est prise par rapport au div quil la contient..soit avec un width;
 

 
 
Bon on va pas non plus tout te faire donc:
Pour toi:  
http://www.csszengarden.com/  
http://www.alsacreations.com  
http://openweb.eu.org/
 
 
Et apprend
 
+
 
 
 

 l'overflow j'avais déja trouvé, et l'alignement j'y suis presque