High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Problème de mise en forme

Dernière réponse le 20 mar 2009 à 10:33:39 gaya_102, le 18 mar 2009 à 19:09:40 
 Signaler ce message aux modérateurs

Bonjour,
voila j'ai des probleme de mise en forme de ma page.

http://www.sandrineetgwen.fr/emelinejourj.php

alors cette page a des problèmes différents suivant les navigateurs.

En fait je voudrais que mon texte rentre dans le cadre et si ca doit dépasser mettre un scrolling.
J'ai essayé mais ca marche pas.
Elle vient d'ou mon erreur?

voila le code 


body {
background-color: #FBE3DE;

} 
body2 {
background-color: #FBE3DE;
margin-right:auto;
margin-left: auto;
background-color: #FBE3DE;

} 

img {
border:0;
vertical-align:middle;
}

a { 
text-decoration:none; }

#unite
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}


#rubrique
{
position:absolute;
left:50%;
margin-left:-490px;
width: 980px;
top:50%;
margin-top:-271px;
height: 542px;
background-image: url("image/fond_rubrique.jpg");

background-repeat: no-repeat;
border :2px solid black;
}
 
 
 #texte
 {
overflow:auto;
width: 330;
margin-left:330px;
margin-top:150px;
 }
 
#rubrique2
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}

.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}

/* pour le menu deroulant */


#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}

#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: yellow;
}

#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
/* on cache tout les menus avec la propriété display none*/

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
 display: block;
 height: 1%;
 color: #FFF;
 background: #3B4E77;
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color: #F2462E;
}
 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />




<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />

	   
	   </head>
 
   <body>
       <div id="rubrique">        
           <div>
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   
		   
		  Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de simplement taper le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images, faire des liens etc...
Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend.

Il existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques connaissances en informatique.
Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Mon rôle sera de vous apprendre à vous en servir.

Bon, mais pourquoi apprendre 2 langages pour créer un site web ? Un seul n'aurait pas suffit ?

C'est vrai que, quand je vous dis que vous allez apprendre 2 langages à la fois, vous vous demandez si ce n'est pas déjà trop pour vous.
Pas d'inquiétude, vous allez vous rendre compte au fur et à mesure que tout a été très bien pensé. Chacun de ces 2 langages sert à faire quelque chose de précis, et les deux se complètent naturellement pour au final donner un site web :

    * XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Entre nous, si vous ne retenez pas ce que ça veut dire, ça ne vous empêchera pas de dormir ;)
      Ce langage XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là c'est le texte principal de la page, là il y a une image etc etc...".

      Vous avez peut-être entendu parler aussi du HTML. En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne cependant sur des règles un peu plus strictes que le HTML.
      En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML. C'est pour cela que nous étudierons XHTML dans ce cours.
		   
		   
		   
		   
		   </div>
		 
		   </div>
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>

Configuration: Windows XP
Firefox 3.0.7

Meilleures réponses pour « problème de mise en forme » dans :
Excel - Mises en forme conditionnelles illimitées VoirMises en Forme Conditionnelles Illimitées Introduction Principe Code Fichier joint Introduction La Mise en Forme Conditionelle (ou MFC) permet d'appliquer, à une cellule ou à plusieurs cellules sélectionnées, différents formats qui...
Mise en forme des articles de la base de connaissance VoirMise en forme des articles de la base de connaissance 1 - Les titres 1.1 - Exemple 2 - Les listes 2.1 - Exemple conseillé 2.1.1 - Résultat 2.2 - Exemples déconseillés 2.2.1 - Commencer par un niveau X 2.2.1.1 - Exemple 2.2.1.2 -...
Hiérarchisation et Sommaire automatique sous Word VoirHiérarchisation et Sommaire automatique L’utilisation de la hiérarchisation sous Word permet de générer automatiquement un sommaire. De plus, il permet de simplifier les modifications de style et de mise en forme appliquées aux titres des...
Mise en forme d’une feuille de calcul Voir
Mise en forme de données VoirStyles de données Que la cellule contienne une valeur littérale saisie par vous-même ou le résultat d’une formule, vous affectez un style aux données de cette cellule en définissant ce que l’on appelle le format de la cellule : cela conditionne...
LaTeX - Mise en forme VoirStyle Les commandes suivantes permettent de modifier le style du texte : \textbf{texte à mettre en gras} permet d'écrire du texte en caractères gras. \textit{texte à mettre en italique} permet d'écrire en italique. \textsc{texte à mettre...
Posez votre question Répondre

1

Dalida, le 18 mar 2009 à 20:08:26

Salut,

si tu donnes une URI pas la peine de donner le code, on sait le trouver tout seul !
-;o)

pour ta page, les problèmes de mises en pages sont logiques.
ton codes HTML contient des erreurs.
rien qu'au début : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />




<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />

	   
	   </head>

 
   <body>
       <div id="rubrique">        
           <div>
		   <html>
  <head>
    <link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>

       <script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>    


  </head>

  <body>

tu ouvres deux fois <html>, ça fait pour le moins désordre…

et pour CSS tu utilises de fausses bonnes méthodes.
pour centrer le contenu par exemple, {position:absolute;} et marges négatives.
c'est déjà risqué alors qu'on en est juste à centrer la corps de page.
alors qu'avec : 
body{
width:800px;
margin:0 auto;
}

c'est 1000 fois plus simple et surtout c'est stable.

il vaut mieux reprendre tout ton document, bien l'ordonner, mettre tout le JS dans des fichiers externes et grouper tes CSS.
ensuite construit ton document avec une vraie architecture, utilises des titres, des paragraphes…

le meilleur moyen pour savoir si un document est bien construit c'est de le regarder avec un éditeur texte.
ton doc n'a pas de titre, le menu est un enchevêtrement d'images (alors qu'elles ne servent qu'à la déco) et de liens (capturé dans Lynx).
si ce n'est pas navigable en mode texte c'est que c'est mal construit.

regarde ce tuto, c'est rapide, clair et net.
en suivant ces recommandations tu mettra en page beaucoup plus facilement et tu auras beaucoup moins de différences d'un navigateur à un autre.
[ Mathieu ] 
Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

2

gaya_102, le 18 mar 2009 à 20:29:04

En fait dans ma page html j'ai fait un include () c'est pour ca que j'avais donné le code.

   
Répondre à gaya_102

3

gaya_102, le 18 mar 2009 à 20:34:04

La je ne comprend ce que tu as voulu dire

"
ton doc n'a pas de titre, le menu est un enchevêtrement d'images (alors qu'elles ne servent qu'à la déco) et de liens (capturé dans Lynx).
si ce n'est pas navigable en mode texte c'est que c'est mal construit.
"
ma page a un titre

   
Répondre à gaya_102

4

Dalida, le 18 mar 2009 à 20:39:31

Je parle de <h1> pas de <title>.
[ Mathieu ] 

Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

5

gaya_102, le 18 mar 2009 à 20:43:11

Je comptais en mettre dans la partie texte. En fait j'ai mis ce texte pour tester la page. C'est pas du tout le texte final. J'ai juste fait un copier coller

   
Répondre à gaya_102

6

Dalida, le 19 mar 2009 à 09:04:10

Salut,

bon ben attaque toi au reste, vire les JS et regroupe les CSS, enlèves les doublons de <html> et <head>, valide ta page…
[ Mathieu ] 

Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

7

gaya_102, le 19 mar 2009 à 09:35:36

Je peux la valider ou ma page?

   
Répondre à gaya_102

8

Dalida, le 19 mar 2009 à 11:18:00

chez le W3C
[ Mathieu ] 

Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

9

gaya_102, le 19 mar 2009 à 11:41:33

C'est super interessant. mais je ne comprend pas trop mes problèmes

# Error Line 23, Column 32: character ";" not allowed in attribute specification list.

for (var i=0; i<sfEls.length; i++) {

✉
# Error Line 23, Column 32: element "sfEls.length" undefined.

for (var i=0; i<sfEls.length; i++) {

✉

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

# Error Line 41, Column 11: end tag for "sfEls.length" omitted, but OMITTAG NO was specified.

</script>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 23, Column 19: start tag was here.

for (var i=0; i<sfEls.length; i++) {

# Error Line 66, Column 72: end tag for "img" omitted, but OMITTAG NO was specified.

…au2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 66, Column 7: start tag was here.

<li><img src="image/oiseau2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>

# Error Line 85, Column 71: end tag for "img" omitted, but OMITTAG NO was specified.

…seau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>

✉

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
# Info Line 85, Column 7: start tag was here.

<li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>

# Warning Line 93, Column 21: character "<" is the first character of a delimiter but occurred as data.

for (var i = 0; i < imgs.length; i++)

✉

This message may appear in several cases:

* You tried to include the "<" character in your page: you should escape it as "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.

# Warning Line 141, Column 21: character "<" is the first character of a delimiter but occurred as data.

for (var i = 0; i < imgs.length; i++)

✉

This message may appear in several cases:

* You tried to include the "<" character in your page: you should escape it as "<"
* You used an unescaped ampersand "&": this may be valid in some contexts, but it is recommended to use "&", which is always safe.
* Another possibility is that you forgot to close quotes in a previous tag.

# Error Line 23, Column 32: XML Parsing Error: error parsing attribute name.

for (var i=0; i<sfEls.length; i++) {

✉
# Error Line 23, Column 32: XML Parsing Error: attributes construct error.

for (var i=0; i<sfEls.length; i++) {

✉
# Error Line 23, Column 32: XML Parsing Error: Couldn't find end of Start Tag sfEls.length line 23.

for (var i=0; i<sfEls.length; i++) {

✉
# Error Line 66, Column 73: XML Parsing Error: Opening and ending tag mismatch: img line 66 and li.

…2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>

✉
# Error Line 76, Column 39: XML Parsing Error: attributes construct error.

<li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>

✉
# Error Line 76, Column 39: XML Parsing Error: Couldn't find end of Start Tag img line 76.

<li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>

✉
# Error Line 85, Column 39: XML Parsing Error: attributes construct error.

<li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>

✉
# Error Line 85, Column 39: XML Parsing Error: Couldn't find end of Start Tag img line 85.

<li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>

✉
# Error Line 88, Column 8: XML Parsing Error: Opening and ending tag mismatch: li line 66 and ul.

</ul>

✉
# Error Line 89, Column 6: XML Parsing Error: Opening and ending tag mismatch: ul line 47 and div.

</div>

✉
# Error Line 93, Column 22: XML Parsing Error: StartTag: invalid element name.

for (var i = 0; i < imgs.length; i++)

✉
# Error Line 141, Column 22: XML Parsing Error: StartTag: invalid element name.

for (var i = 0; i < imgs.length; i++)

✉
# Error Line 152, Column 10: XML Parsing Error: Opening and ending tag mismatch: div line 16 and body.

</body>

✉
# Error Line 153, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 15 and html.

</html>

✉
# Error Line 153, Column 7: XML Parsing Error: Premature end of data in tag html line 2.

</htm

ca fais beaucoup non pour une simple page?

   
Répondre à gaya_102

10

Dalida, le 19 mar 2009 à 13:33:49

ca fais beaucoup non pour une simple page?
une erreur entraîne en général plusieurs autres erreurs, donc en fait il n'y en a pas réellement autant.
la plupart des problèmes viennent de tes JS.

il faut mettre tes scripts JS dans des fichiers spécifiques et les inclure à ton document avec : 

<script type="text/javascript" src="chemin/vers/ton/fichier.js"></script>

en adaptant l'URL du fichier.
[ Mathieu ] 
Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

11

gaya_102, le 19 mar 2009 à 20:21:13

Jevaus bien suivre ton conseil mais le code javascript qui est en bas de la page je peux le déplacer aussi? ca marchera quand meme? 

<script type="text/javascript">
   sfHover = function() {
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover = function() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>    


  
<div id="second">
<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />
<ul id="menuHorizon">
      <li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="lesmaries.php">Les futurs mariés</a></li>
	  <li><a href="lesparents.php">Les parents des mariés</a></li>
	  <li><a href="lesfrangins.php">Les frangin(e)s</a></li>
	  <li><a href="lestemoins.php">Les témoins</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>

      <li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="prestataires.php">Les prestataires</a></li>
	  <li><a href="deroulement.php">Le déroulement</a></li>
	  <li><a href="voyage.php">Le voyage de noce</a></li>
	  <li><a href="liste.php">La liste de mariage</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>


      <li><a href="emelineinfospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="commentvenir.php">Comment venir</a></li>
	  <li><a href="hebergement.php">Hébergement</a></li>
	  
       </ul>
      </li>
	  <li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>

      <li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
        <ul>
	  <li><a href="#">Bob Marley</a></li>
	  <li><a href="#">Israel Vibration</a></li>
	  <li><a href="#">Tiken Jah Fakoly</a></li>
       </ul>
      </li>
	  <li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>


   </ul>
</div>
<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>

   
Répondre à gaya_102

12

Dalida, le 20 mar 2009 à 10:12:28

Salut,

le code javascript qui est en bas de la page je peux le déplacer aussi? ca marchera quand meme?
bien sûr c'est exactement la même chose mais le code JS ne vient pas "polluer" le code HTML.
[ Mathieu ] 

Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

13

gaya_102, le 20 mar 2009 à 10:14:37

Ok je vais essayer de faire ca

   
Répondre à gaya_102

14

Dalida, le 20 mar 2009 à 10:29:16

J'essaie de te trouver un bon cours ou tuto pour le placement du code mais rien ne me satisfait vraiment.
tu peux regarder celui-là mais ne tiens compte ni des consignes pour les anciens navigateur, ni de "defer".

ou alors celui-ci mais il est plus théorique.
[ Mathieu ] 

Il y a sûrement des pandas pour ne dépendre de rien

   
Répondre à Dalida

15

 gaya_102, le 20 mar 2009 à 10:33:39

Ok merci de ton aide en tout cas.
Par contre est ce que tu peux m'aider avec mon java script car j'ai une erreur sur mon menu avec IE6

   
Répondre à gaya_102
Posez votre question Répondre
Ils ont besoin de votre aide