plusieurs questions sur la mise en page.

[lomaster]

re,

 

de espace-web, tu ne le vois peut être pas parce que justement la résolution est trop petite? (dans la bannière.)

[Dylav]

Bonsoir Lomaster,

 

Voici ma vue de ta bannière, en résolution 1024x768. Mais où est Charlie oups l'ordinateur ?

 

[lomaster]

hum....

 

moi je la vois très bien... sur mon site ?

 

 

mais en gros le problème est là : quelle que soit la résolution, peut-on faire en sorte que l'image soit affichée dans sa totalité ?

[Dylav]

J'ai vu le pb.

J'ai une idée de solution pour toi.

Simple.

Laisse-moi un peu de temps pour la rédiger.

[lomaster]

lol okay pas de probleme je suis entrain de prendre modèle sur le site de Tangui

[Dylav]

Voilà l'idée. Ce qu'il te faut, c'est une sorte de coulisse, comme le tiroir qui rentre dans la boîte d'allumettes. Ton bloc <div> "entete" va avoir une largeur à ta convenance (par exemple, en % de la largeur de l'écran), et être rempli par l'image "banniere" en image de fond. Quant à l'ordi, ce sera un bloc <span> "ordi" flottant, cadré à droite dans le bloc <div>, et contenant l'image "ordi". Ainsi, l'ordi flottera sur la bannière, se positionnant à droite en fonction de la largeur allouée à la bannière. A noter que c'est la hauteur de l'image "ordi" qui imposera la hauteur de la <div> "entete".

 

Pour cela, deux documents à modifier.

 

1. la feuille de style

 

1.1. dans le paragraphe #entete, tu remplaces la ligne background-color par une ligne

background: white url(photo/banniere.gif) fixed top left no-repeat;

qui signifie que, sur ton fond blanc, tu poses l'image banniere.gif (tu mets son url dans la parenthèse : attention, l'adresse est relative et dépend donc des emplacements respectifs, sur ton site, de la feuille de style et de l'image), qui doit rester fixe, positionnée en haut et à gauche du bloc, et non répétée : c'est l'expression courte de l'ensemble des paramètres background en une seule ligne (tu connais sans doute cette écriture).

 

1.2. tu ajoutes un paragraphe #ordi dont nous verrons plus bas l'usage

#ordi { float:right; }

 

2. la page HTML

 

<div id="entete">
<span id="ordi">
<img src="photo/ordi.jpg" alt="ordi" title="ordi">
</span>
</div>

Dans le bloc <div> "entete", on ne voit plus la description de l'image "bannière", puisqu'elle a été exprimée en image de fond dans la feuille de style. Pour l'image "ordi", la situation a également changé : elle est incluse dans un bloc <span> "ordi", réputé flottant calé à droite dans le bloc <div> "entete" (c'est ce que dit le paragraphe #ordi en 1.2. ci-dessus).

 

Ainsi, l'ordinateur se placera là où on le lui demande (comme une justification à droite, en imprimerie), en coulissant sur la bannière. Si au pire tu n'accordais qu'une largeur de 142px à ta colonne, la bannière serait tronquée automatiquement à cette largeur, et serait par ailleurs invisible, totalement recouverte par l'ordi (dont la largeur est justement 142px). Toujours est-il qu'il n'y aura plus de pavé blanc au bout à droite, puisque c'est la place réservée à l'ordi.

 

Pour finir, voici l'aspect actuel de ta page d'accueil dans la résolution 800x600 : comme tu peux le voir, ce n'est pas heureux : l'image "bannière" déborde. En revanche, la nouvelle solution devrait donner un rendu impeccable. Je ne peux pas te montrer l'effet actuel en 640x480 (mon écran ne me propose pas cette résolution), mais c'est probablement encore moins beau. Ceci dit, ils ne doivent plus être très nombreux, les internautes utilisant cette résolution.

 

 

En conclusion, même si tu indiques que tu as conçu ton site pour une vision optimale dans la résolution 1280x1024, tu ne dois jamais oublier que tout le monde n'en est pas là. La preuve, nous ne nous comprenions pas parce que je suis en 1024x768 : eh oui, c'est pour mon confort, avec mon 17", mes oeils ne sont plus tout jeunes...

 

Mais qu'est-ce que je suis bavard, pour quelques lignes à modifier !

Si en plus cela ne fonctionne pas, tu seras autorisé à me mettre des claques... virtuelles

[lomaster]

Okay enfaite je pensé que la banniere était toujour en un seul morceaux ce qui n'est pas le cas. Okay bon je suis repartie dans les changements

 

Un grand merci a toi je te tiens au courant si je n'y arrive pas.

 

Merci et bonne soirée.

[lomaster]

 

je vais pas allé te mettre des claques car c'est déjà mieux mais le problème c'est que la banniere n'apparaît plus...l'ordi parfais le menu trop haut du coup et la banniere elle apparaît pu

 

 

le code html :

   <body>

<div id="tout">


<div id="entete">


<span id="ordi">
<img src="photo/ordi.jpg" alt="ordi" title="ordi">
</span>



</div>
<div id="entetee">

<font face="Dungeon" size="3" color=#000000><div class="element_entetee"><a href="index.html">Acceuil</a><img src="photo/1.jpg" alt="titre" title="titre">		 <a href="securite/securite.html">Sécurité</a>	<img src="photo/1.jpg" alt="titre" title="titre">	<a href="windows/windows.html">Windows</a>	<img src="photo/1.jpg" alt="titre" title="titre">	<a href="tutorial/tutorial.html">Tutoriaux</a> 	<img src="photo/1.jpg" alt="titre" title="titre">	<a href="liens/liens.html">Liens</a> 	<img src="photo/1.jpg" alt="titre" title="titre">	<a href="annuaires/annuaires.html">Annuaires</a></div></font>

</div>

 

et le css :

 

#tout

{

margin-left: 10%;
background-position: center;
width: 75%;
background-color:#fc7200; 
vertical-align:middle;
height:500px;
margin:auto;
margin-top:10%;
}


#entete
{
 position: relative; 
 background: white url(photo/banniere.gif) fixed top left no-repeat; j'ai essayer de rajouter " " avant photo et apres gif mais cela ne chage rien..
 width:100%;
}

#ordi { float:right; }

#entetee
{
 height: 20px;
 width: 100%;
 background-color: #f5e0cb;
 text-align: center;
 margin-top:10%;

}

 

enfaite c'est juste la banniere que l'on ne voit plus le menu (entetee) apris ça place. pourtant lorsque je rajoute un margin-top: 20%; dans entete tout ce baisse..

Modifié le 7 novembre 2006 par lomaster

[Dylav]

J'ai déjà eu ça, quand je donnais une mauvaise URL pour l'image de fond. Dans ce cas, contrairement à la réaction de la balise <img> (croix rouge dans un petit carré blanc), la feuille de style dédaigne la chose et n'affiche aucune indication.

 

Peux-tu me décrire l'arborescence de rangement des objets de ton site, en indiquant où tu ranges la page HTML, où tu ranges la feuille de style, où tu ranges les images ? Et on retrouvera le chemin relatif à donner à l'image de fond de la <div> "entete".

[lomaster]

heu oui, mais il me semble que l'indication est bonne.. puisque tu as copier l'adresse que j'avais donnée au début du topicc ou tu là recopier sur le site et la banniere s'affiche bien pourtant...

 

Sinon sa donne ça :

1. le dossier model qui contient :
   

la page index.html et index.css

 

ainsi que les dossier suivants :

• Windows
  
• Tutoriaux
  
• sécurité
  
• annuaires
  
• liens
  
• archive
  
• photo
  

 

et la banniere se trouve dans le dossier photo.... Donc le chemin est le bon..non?