span et div

Mado · 3 Mai 2004

bonjour a tous,

j'ai plusieurs questions je bosse avec des feuille de style externe

1 . c'est quoi la difference entre span et div svp et la difference entre class et style? merci

quand dans une feuille de style externe, on a un point (exemple .enfants) on appelle une class dans le code html? c'est bien ca?

2 . j'ai une image ou j'ai ajouté un texte en css comme suit :

CSS

.enfants {

position: absolute;

top : 100px;

left : 28px;

}

.img_acc {

}

HTML

<body>

</div>

le coin des enfants

</div>

est ce que le texte ainsi restera a la meme place sur differente resolutions d'ecran? et autre question ,

(je crois que je l'ai deja posée au sujet du positionnement milieu horizontalement de l'image, je ne retrouve plus le topic) un positionnement middle horizontale pour l'image comment j'ecris ca dans la css

merci infiniment

**Dan** · 3 Mai 2004

Salut Marie,

Une balise <span> est une balise inline dont l'affichage se fait dans le flux normal de ton navigateur, sans saut de ligne. Tu peux donc changer uniquement la couleur d'un mot en gardant ta mise en page:

Le dernier mot est <span style="color:red;">rouge</span>

affichera: Le dernier mot est rouge

Une balise <div> est une balise de type bloc, qui force donc des mages autour du document, au même titre qu'une balise <H1> pour les titres.

On peut forcer un élément de type bloc de s'afficher "en ligne" en lui donnant l'attribut display:inline

Un style est la définition d'un certain nombre de paramètres de rendu visual applicables à un élément. Pour éviter d'avoir à répéter souvent les mêmes informations, on a créé les classes qui permettent de centraliser les informations concernant le rendu.

Par exemple, si tu as de nombreux paragraphes définis avec un avec style comme:

<p style="font-size:12pt;font-family:sans-serif;color:#003366;">...</p>

Il vaut mieux définir une classe et l'utiliser comme suit:

<style>
.monparagraphe { font-size:12pt;font-family:sans-serif;color:#003366; }
</style>
<p class="monparagraphe"> ... </p>

Si tu veux changer le rendu visuel de tes paragraphes, tu n'auras à changer ton code qu'à un seul endroit... pratique si tu as quelques centaines de pages pour lesquelles tu veux changer un détail tel que la couleur de l'écriture, non ?

Dan

PS: essayes d'éviter 36 questions dans le même post, sinon tu auras des réponses pêle-mêle, et tu ne t'en sortiras plus.

Raphael · 3 Mai 2004

Sans vouloir faire de pub excessive, je dirais que tu auras des explications à tes questions ici :

http://www.alsacreations.com/articles/div/

LaurentDenis · 4 Mai 2004

2 . j'ai une image ou j'ai ajouté un texte en css comme suit :

CSS

.enfants {

position: absolute;

top : 100px;

left : 28px;

}

.img_acc {

}

HTML

<body>

<div class="img_acc" align="center">

<IMG src="images/acc_jaj_001.jpg">

</div>

<div class="enfants">

le coin des enfants

</div>

est ce que le texte ainsi restera a la meme place sur differente resolutions d'ecran? et autre question ,

(je crois que je l'ai deja posée au sujet du positionnement milieu horizontalement de l'image, je ne retrouve plus le topic) un positionnement middle horizontale pour l'image comment j'ecris ca dans la css

Ton texte en position absolue restera en effet à cette position dans tous les écrans. Mais pas ton image ou le reste de ta page. Tu risques donc d'avoir des suprises.

Si je comprends bien, tu cherches à associer une image et une légende, toutes deux centrées horizontalement ?

Dans ce cas, la solution la plus directe est :

.img {
text-align: center;
width: ...;
}

(width: ... à utiliser et modifier si tu veux que la légende s'affiche dans une largeur donnée, celle de l'image par exemple)

et pour une légende en dessous de l'image :

<p class="img">
    <img src="..." alt="..." width="..." height="...">
    <br>
    Ici le texte de légende de l'image
</p>

ou pour une légende au-dessus de l'image :

<p class="img">
    Ici le texte de légende de l'image
    <br>
    <img src="..." alt="..." width="..." height="...">
</p>

Mado · 4 Mai 2004

merci pour vos reponses a tous je vois mieux clair ainsi

en fait je veux mettre a droite le coin des enfants en lien et a gauche le coin des parents, le texte devra etre sur l'image

voila l'image

http://www.zengrafom.org/site/fonds2.html

et je souhaiterai que cette image qui est dans 3 div soit centree quelque soit la résolution d'ecran et le navigateur du visiteur

merci

:1eye:

le code :up:

<HTML>
<HEAD>
<TITLE>fonds2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="index_acc.css" media="screen">
</HEAD>
<BODY>
     <div class="float_g">
          <IMG SRC="images/fonds2_01.jpg" WIDTH=168 HEIGHT=450 ALT="</span>">
     </div>
     <div class="float">				
          <IMG SRC="images/fonds2_02.jpg" WIDTH=424 HEIGHT=450 ALT="">
     </div>
     <div class="float_g">
          <IMG SRC="images/fonds2_03.jpg" WIDTH=168 HEIGHT=450 ALT="">
     <<span style='color:blue'>/div>
</BODY></HTML>

Modifié 4 Mai 2004 par mariepetroni

Mado · 4 Mai 2004

bon j'ai reussi a modifier mes pages pour que le titre soit sur l'image mais le positionnement en hauteur pas terrible

et avec Nescape 4.7 ca ne marche pas

les deux titres se mettent a gauche

http://www.zengrafom.org/site/fonds2.html

quand on regarde la source y'a beaucoup de div imbriques dans les autres

c'est génant ca?

voila ce que j'ai mis en css

body {

background-color : #DF5900;

}

.conteneur {

margin-left: 100px;

margin-right:100px;

}

.enfants {

position: absolute;

margin-left:10%;

margin-right: 90%;

width : 168px;

}

.parents {

position: absolute;

margin-left: 10%;

margin-right: 70%;

width : 168px;

}

.bloc1 {

height: 450px;

width: 168px;

float: left;

}

.bloc2 {

height: 450px;

width: 424px;

float: left;

}

.bloc3 {

height: 450px;

width: 168px;

float: left;

}

merci pour votre aide

LaurentDenis · 4 Mai 2004

Bon, je vais essayer quelque-chose qui va peut-être te sembler déroutant, mais où on peut t'aider à arriver à un bon résultat et surtout à comprendre le couple mystérieux HTML/CSS:

- oublie temporairement http://www.zengrafom.org/site/fonds2.html qui est juste l'apparence que tu souhaites donner à ta page (on y reviendra après). Il n'y a pour l'instant aucun contenu, juste de la déco, à part cette répartition en 3 zones qui suggère un contenu en trois parties (Je suppose, deux menus et un texte ?)

- fais une page sans aucune présentation, couleur, images, positions... qui contienne toutes les informations réelles que tu veux mettre dans ta page. Quelque-chose d'affreux (temporairement), mais avec ton texte réel, tes liens... Si tu veux, fait un fichier texte, peu importe : ce qui compte à ce stade, c'est ce que tu as à dire, pas comment le dire.

A partir de cette page (on l'appelera ton "contenu"), on procèdera par étapes rapides :

1. on lui donnera une bonne structure (pas de div superflues qui t'embêtes à juste titre), lisible par tous les navigateurs, plus facilement exploitable pour la présentation ;

2. on refera une feuille de style à partir d'une structure saine, en reprenant l'idée de ton projet graphique http://www.zengrafom.org/site/fonds2.html

Pour l'instant, tu procèdes en faisant la démarche inverse : présentation d'abord, structure et contenu ensuite. Or bien utiliser CSS, c'est le voir comme l'étape finale de la création d'une page, après le contenu et sa structure.

Voici un excellent résumé de la "bonne" démarche, librement traduit de la source anglaise :

Le contenu, c'est votre texte brut. Le contenu, c'est bien, mais sans aucune indication sur sa structure (ce qui inclut des choses comme des espaces, des titres et des listes), vous aboutissez à un méli-mélo confus de textes. C'est totalement inutilisable.

La structure est une surcouche qui découpe ce texte confus en blocs logiques et qui l'organise de manière à donner des informations sur les éléments spécifiques qui composent le document. Comment seront rendues ces informations supplémentaires ? Cela peut être induit par la structure elle-même (par exemple vous constaterez que, le plus souvent, le titre principal de la page est rendu avec une plus grande taille de caractères que le reste du texte). Mais cette structure ne détermine pas grand-chose quant à la présentation.

La présentation est une surcouche supplémentaire d'information, par-dessus la structure du document. Elle transforme la structure non visuel en quelque-chose de bien plus attrayant pour l'oeil. Cette couche de présentation, c'est CSS...

http://www.mezzoblue.com/archives/2004/04/30/a_roadmap_to/

Veux-tu jouer le jeu ? Il en vaut la chandelle

Modifié 5 Mai 2004 par LaurentDenis

Mado · 4 Mai 2004

oui oui je veux bien jouer le jeu

d'façon ce que j'ai fait la ca marche en 1024 mais pas en 800x600 le dernier div de droite se met en dessous

sur le lien que j'ai mis c'est la page d'accueil elle a ete fait ainsi parce qu'il n'est pas necessaire que les enfants aient acces aux rubriques des parents

il sagit d'un site de parents confrontés au cancer de leur enfants, bien sur une telle presentation de leur interdira pas d'avoir acces a la partie des parents... mais bon c'est un choix que nous avons fait

donc je fais la suite avec le contenu et les liens

ok merci

Mado · 5 Mai 2004

j'ai essayé de comprendre, là mais le probleme que je rencontre par exemple sur les pages des enfants

dans la partie centrale

il y aura quelque fois des pages avec rien que des dessins et le nom des enfants, d'autres avec des photos, d'autres avec texte et photos d'autres avec des coloriages a telecharger etc...

bon c'est sur que pour les parties droite et gauche les menus seront structurés de la meme manière suele la partie centrale sera modifiée en fonction des liens

voilà les graphismes (qui sont reduits la) des differents pages pour avoir une idée

http://www.zengrafom.org/site/ind2.htm

je vois pas comment on peut structurer une page quand on ne connait pas la forme du graphisme, il fait bien parti du contenu?

y'aura bien different bloc pour mettre le graphisme en place?

pffffffff je comprends vraiment rien a la façon de faire des css

:nono:

Monique · 5 Mai 2004

Bonjour Marie,

Pas facile de tout oublier

Et pourtant c'est ce que tu dois faire... tu prépares une page avec tout le contenu que tu veux y mettre sans penser à la façon dont ce contenu pourrait être positionné sur ta future page Web, donc tout à la queue leu leu.

Bien sûr qu'il y aura des blocs, mais ce sera l'étape suivante : ils seront définis en fonction des différentes parties de ton contenu et de l'aspect que tu souhaiteras donner à ta page... donc n'y penses pas pour le moment.

Pour te donner une idée de la démarche, observe un peu Jardin Zen css.

Regarde d'abord quelques-unes des conceptions proposées.

Clique ensuite sur le fichier d'exemple html, des dizaines de mises en page totalement différentes ont toutes ce même contenu ! (et c'est une page de ce type que tu dois d'abord préparer)

En complément, pour t'aider à comprendre l'esprit du travail avec les CSS, tu peux lire Les coulisses d'un design où Douglas Bowman (spécialiste du design conforme aux standards du web) explique sa démarche pour créer sa mise en page pour Zengarden.

LaurentDenis · 6 Mai 2004

D'après http://www.zengrafom.org/site/ind2.htm, ton site a clairement 3 séries de pages :

- la page d'accueil

- les pages enfants

- les pages parents

La structure de la page d'accueil devrait être du type :

- Titre du site et texte/graphisme de présentation :

<h1>ASBL jour après jour</h1>
<h2>Association des Parents confrontés au Cancer de leur Enfant</h2>
<p>bla bla bla</p>
<p><img src="..." ></p>

Il y a un titre principal (<h1>), un sous-titre (<h2>), un ou plusieurs paragraphes de texte (<p>) et une ou plusieurs images (<img>) qui font partie du contenu si elles donnent une information. Sinon, on ne s'en occupe pas maintenant et elles seront ajoutées par la CSS.

Je te recommande de prévoir en page d'accueil un texte bref, mais assez explicite qui indique dès l'entrée dans le site la nature, le propos... de celui-ci. Le titre et le sous-titre ne donnent pas suffisamment d'informations à eux seuls.

- Liens de navigation du site vers les deux sections Enfants / Parents :

<ul>
<li><a href="...">Le coin des enfants</a></li>
<li><a href="...">Le coin des parents</a></li>
</ul>

C'est une liste (<ul>), puisqu'on énumère des liens.

Les pages parents et enfants auront une structure quasiment identique :

-section titre de page

<h1>ASBL jour après jour</h1>
<h2>Le coin des Parents</h2>

-section menu enfant, une liste de liens. Par exemple :

<ul>
<li><a href="...">Coloriages</a></li>
<li><a href="...">Jeux</a></li>
</ul>

-section menu parent, une autre liste de liens :

<ul>
<li><a href="...">bla bla bla</a></li>
<li><a href="...">bla bla bla</a></li>
</ul>

-section contenu propre à chaque page. Tu peux prévoir certains éléments permanents, et des éléments-types qui reviendront régulièrement dans ce contenu. Une sorte de page-test, comme :

<h3>Le titre spécifique de cette page</h3>
<p>Un exemple de paragraphe de texte, avec <a href="">des liens</a></p>
<ul>
<li>Un exemple</li>
<li>de liste</li>
<li>avec <a href="">des liens</a> aussi</li>
</ul>
<p>Un exemple d'image avec une légende<img src="..."></p>

A toi d'ajouter à cet exemple les éléments nécessaire d'après le contenu prévisible du site. Je me suis limité ici à l'essentiel. Peut-être prévois-tu de citer des textes (élément <blockquote>), d'indiquer des adresses (élément <address>). S'il y a des pages avec des formulaires pour une recherche ou autre (<form>), il vaudra mieux les traiter à part par la suite.

Tu devrais pouvoir aboutir ainsi à 3 modèles de pages (accueil, parents, enfants).

Modifié 6 Mai 2004 par LaurentDenis

Mado · 6 Mai 2004

merci a tous pour vos conseils

pis j'ai pas pratiqué comme vous avez dit encore, le contenu d'abord pis ensuite la mise en page ... heu c'est pas facile a faire quand on a pris d'autres habitudes

le cadre du milieu va etre blanc

http://www.zengrafom.org/site/index.htm

voila j'ai fait ca

le probleme que je rencontre c'est que j'ai utilisé <li> pour faire mon menu mais j'aimerai qu'il n'y ai pas d'ecart entre les couleurs comment dois je faire?

merci

voila la css

je sais que j'ai deja fait une erreur j'ai pas utiliser ul

li.coloriage {

width : auto;

font-size: 12px;

line-height: 22px;

margin-top: 20px;

margin-bottom: 10px;

background-color:#F9A954;

}

li.jeux {

width : auto;

font-size: 12px;

line-height: 22px;

margin-top: 20px;

margin-bottom: 10px;

background-color:#FAD455;

}

Modifié 6 Mai 2004 par mariepetroni

Mado · 7 Mai 2004

bijour

j'ai trouve la soluce a mon prob d'espace entre les lignes c'est good

mais un avis sur le site m'interesserait

est ce que c'est good avec vos navigateurs?

merci de votre attention

jpv · 7 Mai 2004

Bonjour marie,

Ton site à l'air bien sympathique.

Malheureusement il comporte quelques erreurs au niveau des CSS et aussi du code HTML.

Le fait qu'il s'affiche comme tu le veux dans IE est un tour de force d'IE mais ta syntaxe et ton gabarait CSS posant problème il ne s'affiche plus du tout correctement dans les autres navigateurs.

Ce n'est jamais une bonne idée d'utiliser IE comme browser de test, essaye plutot mozilla ou firefox puis une fois que ca fonctionne bien de regarder le résultat sur IE et de faire les corrections nécessaires pour que tout colle.

Ci-dessous ton gabarit CSS que j'ai corrigé (il y aurait d'autres solutions mais bon j'avais juste quelques minutes avant de manger... )

body {
margin : 0px; 
padding : 0px; 
font-family : verdana, arial, helvetica, sans-serif; 
background-color : #ff6600; 
font-size : 0.8em; 
} 
a {
color : #ffffff; 
font-size : 1.2em; 
} 
.enfants {
position : absolute;
top : 80px; 
left : 50px; 
width : 150px; 
} 
.parents {
position : absolute;
top : 200px; 
left : 580px; 
width : 150px; 
} 
.accueil {
background-image : url(images/fonds_acc.jpg); 
background-repeat : repeat; 
width : 780px; 
height : 430px; 
} 
p{
background-color : #ffffff; 
margin-left:5%;
margin-right:5%;
padding:10px;
}

Quelques remarques :

Ta page index est constituée d'un div "accueil" qui va servir de contener pour tout le reste, c'est à dire l'image, les liens et le texte.

Tous les éléments seront positionnés par rapport à ce contener principal, donc ils doivent être tous contenus dans "accueil".

Ce contener étant par défaut positionné en haut à gauche du body, tu n'a pas besoin de spécifier de position.

Partant de cette base le reste est simple :

L'image et le texte viennent l'un au dessus de l'autre, et les deux liens vont être encapsulés dans deux divs, que l'on va positionner en "absolu" par rapport au contener accueil de manière à les positionner exactement ou tu veux.

Dernière remarque :

l'élément blockquote est destiné à afficher une citation, ce qui n'est pas le cas de ton texte, dans ce cas un élément p suffit, dont on modifie les marges gauche et droite pour l'afficher "au centre" du contener principal "accueil".

Comme tu l'à compris ton squelette HTML doit se modifier en conséquence :

div class="accueil">
  <img src="http://www.zengrafom.org/site/images/acc_jaj_001.jpg" alt="Graphisme page d'accueil de l'Asbl jour après jour" width="780">
  <p>Parce qu'un enfant à l'hôpital, ce n'est jamais juste et quand il s'agit de maladie comme le cancer, la révolte est encore plus grande.
    Parce qu'il faut organiser le mieux possible le quotidien de ces enfants, ainsi que le soutien moral et parfois financier de leurs familles.
   Parce que ces enfants, plus que jamais, ont besoin de cadeaux et d'amis sincères, mais aussi de voyages et de rêves. 
   Parce que le rêve, c'est l'espoir, et qu'au royaume de l'espoir, il n'y a pas d'hiver...
  </p>
  <div class="enfants">
    <a href="enfants/index.html" title="Lien vers les pages pour les enfants">le coin des enfants</a>
  </div>
  <div class="parents">
    <a href="parents/index.html" title="Lien vers les pages pour les parents">Le coin des parents</a>
  </div>
</div>

Corrigé de quelques erreurs (la balise title du premeir lien...)

N'hésite pas à essayer de t'inspirer de ce modèle pour les pages suivantes qui comportent aussi beaucoup d'erreurs.

J'essayerai d'y jeter un oeil dés que j'ai un petit moment.

Bon courage pour la suite

Mado · 7 Mai 2004

j'ai fait les modification que tu m'as dit de faire et je t'en remercie

j'ai modifie aussi mes menus en utilisant <ul>

et ca marche aussi dans firefox, puis je en conclure que c'est good? :unsure:

Mado · 9 Mai 2004

bonjour

je m'en sors pas en fait pourtant je fais des recherches et essai par moi meme mais je galère grave

Connexion

span et div

Sujets conseillés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter