Aller au contenu
  • Pas encore inscrit ?

    Pourquoi ne pas vous inscrire ? C'est simple, rapide et gratuit.
    Pour en savoir plus, lisez Les avantages de l'inscription... et la Charte de Zébulon.
    De plus, les messages que vous postez en tant qu'invité restent invisibles tant qu'un modérateur ne les a pas validés. Inscrivez-vous, ce sera un gain de temps pour tout le monde, vous, les helpeurs et les modérateurs ! :wink:

plusieurs questions sur la mise en page.


lomaster

Messages recommandés

hum....

 

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

 

122hl9.png

 

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é ?

Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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.

 

b800hz2.jpg

 

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... :P

 

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

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

Lien vers le commentaire
Partager sur d’autres sites

:P 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 :P

 

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

 

Merci et bonne soirée.

Lien vers le commentaire
Partager sur d’autres sites

:P

 

je vais pas allé te mettre des claques car c'est déjà mieux :P 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 :P

 

llot2.png

 

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é par lomaster
Lien vers le commentaire
Partager sur d’autres sites

  • Modérateurs

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".

Lien vers le commentaire
Partager sur d’autres sites

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?

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.
Remarque : votre message nécessitera l’approbation d’un modérateur avant de pouvoir être visible.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

  • En ligne récemment   0 membre est en ligne

    • Aucun utilisateur enregistré regarde cette page.
×
×
  • Créer...