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

Par lomaster
dans Programmation

 Partager

Messages recommandés

  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Bonjour Lomaster,

 

Voilà. J'ai reproduit une arborescence similaire à la tienne avec, en premier niveau, la page html et la feuille de style, ainsi qu'un sous-répertoire "photo", qui contient 3 images, "banniere.gif", "ordi.jog" et "1.jpg".

 

J'ai ensuite appliqué exclusivement les modifications ci-dessous (marquées en gras).

 

Dans la feuille de style,

 

#ordi {float:right}

 

#entete

{

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

[...]

}

 

et, dans la page HTML,

 

<div id="entete">

<span id="ordi">

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

</span>

</div>

 

Résultats :

 

Avec InternetExplorer, ça fonctionne exactement comme attendu.

 

Avec FireFox, c'est agaçant, on ne voit pas la bannière, mais son espace est bien réservé. On voit bien l'ordi, qui flotte à droite correctement. Bizarre, le menu déroulant est tronqué à droite, sans raison apparente.

 

C'est d'autant plus infernal que,

1) il semble que ça ne réagisse pas comme pour toi,

2) les recommandations W3C sont respectées, à mon avis, mais je n'ai pas soumis la page HTML et la feuille de style aux validateurs W3C.

 

Je dois t'abandonner maintenant, pour la journée. A ce soir.

Il faut quand même que je me mette au taf... :P

Lien vers le commentaire
Partager sur d’autres sites
lomaster Extrem Member

lomaster

Posté(e)
  • Auteur
Posté(e) (modifié)

Bonjour dylav,

 

 

Avec InternetExplorer, ça fonctionne exactement comme attendu.

 

 

et bien sous IE moi j'ai ce que toi tu sas sous Mozilla.. J'ai l'espace réservé a la photo mais sans la photo..

 

Avec FireFox, c'est agaçant, on ne voit pas la bannière, mais son espace est bien réservé. On voit bien l'ordi, qui flotte à droite correctement. Bizarre, le menu déroulant est tronqué à droite, sans raison apparente.

 

 

Et sous Mozilla moi j'ai le menu qui se colle en haut de mon cadre.. a la place de la photo..

 

En rajoutant un taille ( height) dans la balise entete je me retrouve avec l'espace mais sans la photo..

 

 

En faisant ainsi dans le fichier css :

 

 

#entete
{
 position: relative; 
 background: white url("photo/banniere.gif");
 background-position: fixed top left no-repeat;
 width:83%;
 height: 80px;
}

 

Cela fonctionne tres bien. Il me manque juste à refaire une image au bonne dimenssion puisque maintenant je me retrouve avec un trou orange apres l'ordi ( normal l'image n'est pas assait grande)

 

Pour le probleme de départ je termine et je mets en ligne pour voir si tu trouve quelques bug okay?

 

Encore merci.

Modifié par lomaster
Lien vers le commentaire
Partager sur d’autres sites
lomaster Extrem Member

lomaster

Posté(e)
  • Auteur
Posté(e) (modifié)

re,

 

bien je viens de mettre le tout en ligne.. POur ta résolution, sous mozilla il me semble que c'est bon mais sous IE en 1024 par 768, la banniere se trouve haut bon endroit mais beaucoup trop bas...je me retrouve avec un gros trop ( la ou la banniere devrait se trouver...)

 

http://lomaster.perso.cegetel.net/

 

c'est pareil pour toi?

 

pour pourvoir mettre le texte en haut à droit j'ai pas mal galéré..donc a mon avis c'est lui qui doit poser problème en 1024 par 768 sous IE...

 

je te montre le code html :

<body>




<div id="tout">

<div id="contact">

<p><ins>Contacte:</ins> <a href="mailto:[email protected]">[email protected]</a><br/>
<ins>Copyleft Attitude</ins><br/>
<ins>Création : </ins> 8 Novembre 2006</p>

</div> 

<div id="entete">	



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



</div>






<div id="entetee">

<marquee><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></marquee>

</div>

 

et le css :

 

#contact
{
 float: right;
 background-color: #fc7200;
 height: 80px;
 width: 17%;
 text-align: center;
 font-size: 0.8em;

}





#contenu/*le gros du site sera ecrit là*/
{

 background-color:#fc7200;
 text-align:center;
 width: 64.5%;
 margin-left: 2%;
 margin-right: 2%;
 margin-top: 2%;
 margin-bottom: 2%;
 float: justify;


}

#tout

{
border-style: inset;
border-style: ouset;
border-color: grey;
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");
 background-position: float top left no-repeat;
 width:83%;
 height: 80px;


}

#ordi 
{
 float:right; 
}

#entetee
{
 height: 20px;
 width: 83%;
 background-color: #f5e0cb;
 text-align: center;
}

 

bon a mon avis pal mal d'erreurs... :P

Modifié par lomaster
Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Je ne suis pas entré dans les détails, mais il me semble qu'il serait bon de mettre ta div "contact" après la div "entete" (et non avant). En plus, il doit falloir y indiquer un truc genre "position:relative", pour qu'elles restent sur la même "ligne" (regarde pour ça l'exemple des 3 colonnes de "sourisfolle").

 

Autre solution (peut-être plus simple), tu remplaces la div "contact" par un <span> "contact" dans la div "entete". Tu le décris avant le <span> "ordi", en "float:right" aussi, pour qu'il se situe à droite de "ordi". Du coup, en-dessous, le bandeau menu déroulant prendra bien toute la largeur de la <div> "tout", ce qui n'a pas l'air d'être le cas dans ta solution intermédiaire actuelle.

 

Excuse-moi d'être un peu approximatif et peut-être incomplet, mais je suis au boulot, avec des moyens moins confortables que chez moi. En particulier, je n'ai pas FF sous la main...

 

Je me reconnecterai vers 18 ou 19 h.

@+ :P

Dylav

 

Nota tout bête : ne mets pas de "e" à "contact".

 

Conseil tout bête : ne mets pas l'adresse e-mail en clair. Une bonne solution consiste à remplacer le @ par le mot "at" (ou "chez" en français, par exemple, toto.dupont chez free.fr). Ainsi, les robots ne détectent pas qu'il s'agit d'une adresse e-mail, ton interlocuteur comprend quand même, et tu évites le spamming sauvage...

Lien vers le commentaire
Partager sur d’autres sites
lomaster Extrem Member

lomaster

Posté(e)
  • Auteur
Posté(e)

re,

 

j'ai mis en ligne, je pense que ça devrait être bon maintenant?

 

me reste plus cas me débrouiller sur le model de tangui pour que le texte ne déborde pas du cadre... pour le moment pas trop )ça...

Lien vers le commentaire
Partager sur d’autres sites
  • Modérateurs
Dylav Devil Member !

Dylav

Posté(e)
  • Modérateurs
Posté(e)

Pour le bandeau bannière, il semble que le résultat soit conforme à tes voeux ! :P

 

Néanmoins, sans vouloir être perfectionniste, je trouve que la mise en page évolue bizarrement lorsque tu diminues la largeur de ton écran. Au lieu de pratiquer un affichage pleine page agud8.jpg pour la fenêtre de ton navigateur, mets-toi en affichage personnalisé apdk8.jpg, puis amuse-toi (je ne sais pas si c'est le mot :P) à diminuer la largeur de la fenêtre.

 

En toute sincérité, je ne saisis pas pourquoi (sous IE en tout cas),

- la largeur de la zone "contact" semble augmenter (même en valeur absolue),

- le bandeau menu défilant n'occupe plus toute la largeur de la colonne centrale.

 

Je vais tenter des investigations plus poussées ce soir. Ceci dit, il faut savoir faire la part des choses : si ces anomalies ne se produisent que pour des largeurs inférieures à 800px, je crois qu'on peut les ignorer, car il ne doit pratiquement plus rester personne avec des résolutions inférieures à 800x600. Mais je n'aime pas les problèmes inexpliqués.

 

Il reste également à élucider la présence non désirée d'un bandeau noir important et inutile en haut de page (au moins sous IE. Pour FF je regarderai ce soir). De toute manière, si tu souhaites un étroit bandeau noir, la solution est simple : tu qualifies le <body> avec une marge en haut,

 

body {margin-top: 20px } <-- 20 px ou 1%, par exemple,

 

et tu n'imposes rien d'autre, de sorte que ta colonne centrale s'étalera sur le reste de la hauteur de la page.

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.

×
 Partager
Aller sur la liste des sujets

  • En ligne récemment   0 membre est en ligne

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