Sujet Précédent Sujet Suivant

Problème de mise en forme

Fermé
gaya_102 - 18 mars 2009 à 19:09
 gaya_102 - 20 mars 2009 à 10:33
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>

4 réponses

Réponse 1 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
18 mars 2009 à 20:08
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.
0
gaya_102
18 mars 2009 à 20:29
En fait dans ma page html j'ai fait un include () c'est pour ca que j'avais donné le code.
0
gaya_102 > gaya_102
18 mars 2009 à 20:34
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
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > gaya_102
18 mars 2009 à 20:39
je parle de <h1> pas de <title>.
0
gaya_102 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
18 mars 2009 à 20:43
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
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > gaya_102
19 mars 2009 à 09:04
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…
0
Réponse 2 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
19 mars 2009 à 13:33
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.
0
gaya_102
19 mars 2009 à 20:21
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>
0
Réponse 3 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
20 mars 2009 à 10:12
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.
0
gaya_102
20 mars 2009 à 10:14
ok je vais essayer de faire ca
0
Réponse 4 / 4
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
20 mars 2009 à 10:29
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.
0
gaya_102
20 mars 2009 à 10:33
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
0

Discussions similaires

Boucle sur la première diapositive d'une présentation
ND83 -
ndubau -

3 réponses
Mise en forme conditionnelle 2 conditions
happydays -
Emilie -

7 réponses
titre encadré
calimero -
Raymond PENTIER -

5 réponses
liste de noms par ordre alphabétique
alma -
alma13 -

23 réponses
Table des matières dont les titres n'apparaissent pas..
Synua -
ggg -

10 réponses