création d'un site web

svernoux · Post by **svernoux** » 05 Oct 2005 14:20

Au fait, je viens juste de voir que mon dernier problème en date est très bien expliqué (et résolu) ici (au cas où y'en aurait qui n'auraient pas compris ce que je voulais ou bien qui rencontreraient le même problème

)

iubito · Post by **iubito** » 05 Oct 2005 19:08

OK merci svernoux, c'est exactement le principe auquel j'avais songé. Mais il me manquait des éléments pour que ça marche

svernoux · Post by **svernoux** » 05 Oct 2005 20:50

Eh voilà, je pouvais pas vous laisser tranquille plus d'une journée

La question du jour : existe-t-il une propriété css permettant de centrer une image même si on lui a attribué une marge à gauche ?

Je lis chez alsacréations :

Pour centrer horizontalement un élément (bloc, balise ou un site web entier) en CSS, il suffit de donner une largeur (width) à l'élément et les valeurs "auto" aux marges latérales.

Seulement, je veux pas donner la valeur auto à ma marge de gauche, puisque je lui ai déjà donné une autre valeur. Pour vous donner une idée :

html

Code: Select all

<div id="tete">
	  <span id="logo"><img src="images/logo.gif" alt="Logo" /></span>
	  <span id="banniere"><img src="images/banniere.gif" alt="Bannière" /></span>
			<p>
			<a href="page1.html">Accueil</a> | <a href="page2.html">Forum</a> | <a href="page3.html">Remerciements</a> | <a href="page4.html">Contact</a>
			</p>
	  </div>

css

Code: Select all

#tete {
height: 110px;
background-color: #0074b9;
padding-top: 20px;
}

#logo
{
   padding: 0px;
   padding-left: 20px;
}

#banniere
{
   padding: 0px;
   margin-left: 150px;
   text-align: center;
}

#tete p
{
   padding: 0px;
   margin-left: 150px;
   margin-bottom: 10px;
   color: #ffffff;
   font-size: 12px;
   text-align: center;
}

#tete a
{
   padding: 0px;
   margin-bottom: 10px;
   color: #ffffff;
   font-size: 12px;
   text-align: center;
}

Je sais que le text-align, c'est forcément pas bon sur mon id bannière, puisque c'est pas du texte, mais je cherche ce que je pourrais mettre à la place...
Ou bien il faut s'y prendre complètement autrement ?
Je veux que le logo et la bannière soient sur la même ligne, le logo à gauche et la bannière centrée mais pas par rapport à la page, plutôt par rapport au corps du texte, c'est à dire page - 150 px à gauche

Je suis en train de chercher sur le net, mais si quelqu'un a une idée...

svernoux · Post by **svernoux** » 05 Oct 2005 22:06

J'ai trouvé un début de réponse ici, où l'ont dit qu'il faut mettre l'attribut display à la balise span dans le html, mais je ne sais toujours pas quoi lui mettre comme valeur... block, comme ils proposent ?

PS : je vien d'essayer, avec bloc, forcément il ne me met aps les images sur la même ligne, et avec inline, ça marche pas non plus

svernoux · Post by **svernoux** » 05 Oct 2005 22:31

Bon, j'ai pas trouvé ce que je cherchais...
Par contre, j'ai trouvé autre chose :

Code: Select all

#banniere
{
   padding: 0px;
   margin-left: 250px;
}

En passant ma marge à 250px, ça s'affiche parfaitement comme je veux chez moi (sur IE, FFX et Opera). Ceci dit, je soupçonne fortement que c'est susceptible de ne aps s'afficher aussi centré chez tout le monde, selon la résolution... Je me trompe ?

iubito · Post by **iubito** » 05 Oct 2005 22:54

en fait tu peux mettre text-align:center; mais sur un div ou un p, sur un span ça ne fera pas grand chose

donc je propose (pas testé) :

Code: Select all

<div id="tete">
  <div id="centrage">
     <img src="images/banniere.gif" alt="Bannière" />
  </div>
  <span id="logo"><img src="images/logo.gif" alt="Logo" /></span>

  <p> 
     <a href="page1.html">Accueil</a> | <a href="page2.html">Forum</a> | <a href="page3.html">Remerciements</a> | <a href="page4.html">Contact</a> 
    </p> 
</div>

et le css :

Code: Select all

#tete {
height: 110px;
background-color: #0074b9;
padding-top: 20px;
} 

#logo
{ /* il faut arranger left et top pour positionner le logo */
   position: absolute;
   top: 0px;
   left: 20px;
}

#banniere
{
   padding: 0px;
   margin-left: 150px;
   text-align: center;
}

#tete p
{
   padding: 0px;
   margin-left: 150px;
   margin-bottom: 10px;
   color: #ffffff;
   font-size: 12px;
   text-align: center;
}

#tete a
{
   padding: 0px;
   margin-bottom: 10px;
   color: #ffffff;
   font-size: 12px;
   text-align: center;
}

la bannière sera centrée dans un div qui laisse de l'espace à gauche (150px) pour le logo.
le logo sera placé en absolu à 0 du haut et 20px de la gauche.

svernoux · Post by **svernoux** » 06 Oct 2005 10:43

Merci iub', je vais faire un essai.

svernoux · Post by **svernoux** » 06 Oct 2005 12:01

Je viens de faire un essai un peu à l'arrache, donc à confirmer ce soir, mais à priori, ça marche !

PS : t'avais juste oublié de me mettre le #centrage et ses propriétés dans le css, iub', mais j'ai trouvé toute seule

Latinus · Post by **Latinus** » 06 Oct 2005 23:00

n'aurait-il pas écrit "centrage" en lieu et place de "banniere" dans un petit moment de distraction ?

svernoux · Post by **svernoux** » 06 Oct 2005 23:20

Euh, oui, t'as aprfaitement raison Latinus, d'ailleurs, j'avais même pas remarqué que si je rajoutais un id centrage avec les bonnes propriétés, l'id banniere n'avait plus raison d'être...

Comme quoi, j'ai encore de quoi apprendre !

Mais en tout cas, grand merci à iubito, ça marche !
Vais enfin pouvoir mettre du contenu, moi !

svernoux · Post by **svernoux** » 08 Oct 2005 17:30

Nouvelle question, pas très grave, mais ça m'intrigue : que faut-il mettre dans la balise DOCTYPE du fichier html ?
Selon les modèles que j'ai suivis, j'ai dans l'un :

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Et dans l'autre :

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

==> J'ai l'impression qu'il y a du superflu dans le deuxième, non ?

Et sinon, quelle différence entre le 1.0, le 4.0, le strict, le transitional ??? Je suppose qu'il faut annoncer une norme, puis la respecter dans le document ?

svernoux · Post by **svernoux** » 08 Oct 2005 18:39

Bon je viens de lire sur alsacréations qu'il veut mieux utiliser XHTML 1.0 Strict, pour des raisons qui me dépassent carrément mais soit...
Mais faut-il garder l'hyperlien vers le dtd ou pas ?

Latinus · Post by **Latinus** » 09 Oct 2005 02:50

De la norme dépend de la manière dont vont être utilisées les balises, de ce qu'elles admettent comme arguments <balise argument="valeur"> ou non.

Si tu as fait tes pages en te basant sur l'html 4.0 trans, alors tu renseignes un doctype html 4.0 trans. Si déjà tes pages sont conformes à cette norme, c'est déjà bien mieux que la plupart des sites web proposés sur la toile ! (et les navigateurs qui auront du mal sont de toute façon dépassés depuis des lustres).

L'xhtml 1.0 strict est recommandé dans le sens "puriste" du terme, en ce sens qu'il est sensé répondre à une norme interprétable par tout programme xml 1.0 compatible et donc générer un affichage identique sur toute plate-forme.
Si je ne m'abuse, l'xml n'admet aucune mise en forme dans le document lui-même, il admet uniquement le squelette et les données brutes. Tout le reste étant renseigné via feuille de style.

Qu'on n'hésite surtout pas à en dire plus ou à me contredire si nécessaire !

Edit : c'est mieux de laisser l'hyperlien

<!ENTITY % HTML.Version "-//W3C//DTD HTML 4.01 Transitional//EN"
-- Typical usage:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
...
</head>
<body>
...
</body>
</html>

The URI used as a system identifier with the public identifier allows
the user agent to download the DTD and entity sets as needed.

http://www.w3.org/TR/html4/loose.dtd

Latinus · Post by **Latinus** » 09 Oct 2005 03:00

http://www.w3.org/MarkUp/

Three "flavors" of XHTML 1.0:

XHTML 1.0 is specified in three "flavors". You specify which of these variants you are using by inserting a line at the beginning of the document. For example, the HTML for this document starts with a line which says that it is using XHTML 1.0 Strict. Thus, if you want to validate the document, the tool used knows which variant you are using. Each variant has its own DTD - Document Type Definition - which sets out the rules and regulations for using HTML in a succinct and definitive manner.

*

XHTML 1.0 Strict - Use this when you want really clean structural mark-up, free of any markup associated with layout. Use this together with W3C's Cascading Style Sheet language (CSS) to get the font, color, and layout effects you want.
*

XHTML 1.0 Transitional - Many people writing Web pages for the general public to access might want to use this flavor of XHTML 1.0. The idea is to take advantage of XHTML features including style sheets but nonetheless to make small adjustments to your markup for the benefit of those viewing your pages with older browsers which can't understand style sheets. These include using the body element with bgcolor, text and link attributes.
*

XHTML 1.0 Frameset - Use this when you want to use Frames to partition the browser window into two or more frames.

The complete XHTML 1.0 specification is available in English in several formats, including HTML, PostScript and PDF. See also the list of translations produced by volunteers.

svernoux · Post by **svernoux** » 09 Oct 2005 09:35

Merci Lat !

Latinus wrote:Si tu as fait tes pages en te basant sur l'html 4.0 trans, alors tu renseignes un doctype html 4.0 trans.

Le problème, c'est que je sais pas sur quoi j'ai fait mes pages justement... Je les fais surtout comme je peux !

Mais je suppose qu'il vaut mieux mettre un standard plus bas et être sûr de le respecter que de mettre le standard le plus haut...
Et sinon, j'imagine que le moyen de vérifier, c'est de passer les fichiers au validateur ?