Retour au site
Connexion : S'inscrire

FAQ
Forum Programmation
12 messages
Filtrer ok

Probléme HTML - Déplacement balise DIV

Un expert informatique vous aide immédiatement par téléphone.
le 24 Mai 07 à 17h46
 
Voila j'ai un petit probléme. Je réalise un petit site internet html/css pour un projet.
Ma page comprend 4 div: une entête (bandeau), un menu à gauche, le corp principale de la page et le pied de page.
Mon problème vient du fait que quand je réduit la fenétre de navigation, le div qui contient mon corp principal passe sous le menu.
J'aimerais savoir comment figer mes div pour qu'il n'y ai pas de déplacement dû au redimensionnement de la fenêtre.
 
 
le 24 Mai 07 à 17h48
 
Sans code, ça va être dur de t'aider :s
 
 
le 24 Mai 07 à 18h16
 
Oui c'est pas faux:
Html:
Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml?#34; xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</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_mecanique.css" />
       <style type="text/css">
<!--
.Style1 {font-family: Arial, Helvetica, sans-serif}
.Style2 {color: #FFFF33}
-->
       </style>
</head>
<body>
   
<div id="en_tete"></div>

<div id="menu_deroulant">
<object type="application/x-shockwave-flash" data="menu.swf" width="760" height="40">
        <param name="movie" value="menu.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
  </object>
</div>
<div id="menu">

<div class="element_menu">
   <h3>Menu</h3>
<ul class="Style1">
           <li><span class="Style2"><a href="../page1.html?#34;>Photos</a></span></li>
           <li class="Style2"><a href="../page2.html?#34;>CV</a></li>
           <li><span class="Style2"><a href="../page3.html?#34;>Anim</a></span></li>
    </ul>
</div>
<br />
<div class="element_menu">
<h3>Lecteur MP3</h3>
  <p>
    <object type="application/x-shockwave-flash" data="lecteur_mp3.swf" width="120" height="50">
        <param name="movie" value="lecteur_mp3.swf" />
        <param name="quality" value="high" />
        <p>Installez le plugin Flash pour voir l'animation : <a href="http://www.adobe.com/go/gntray_dl_getflashplayer_fr" title="LienPlugin">Cliquez ici pour le télécharger</a></p>
  </object>
  </p>
</div>
</div>
<div class="Style1" id="corps">
   <h1>Infographie</h1>

   <p>Creation d'un site internet pour le cours d'infographie</p>

   <h2>A qui s'adresse ce site ?</h2>    
   <p>
       Ce site s'adresse &amp;agrave;  </p>
   
   <h2>L'auteur</h2>    
   <p>Je me pr&amp;eacute;sente</p>
</div>

<div id="pied_de_page">
   <p>Copyright "MAxCreaT" 2007, tous droits réservés   <img src="valid-xhtml10.png" alt="" width="88" height="31" /></p>
</div>
       
</body>
</html?#62;


CSS:
Code :
body
{
   margin: 0; /* pour éviter les marges */
   text-align: center;
   width:expression(document.body.clientWidth > 800 , "800px" : "600px" );
   background-image: url(fond.png);
   scrollbar-face-color: #2c95c5; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #2c95c5;   scrollbar-3dlight-color: #2c95c5; scrollbar-darkshadow-color: #202020; scrollbar-shadow-color : #0b6097;
scrollbar-highlight-color: #83c3df;
}

/* L'en-tête */

#en_tete
{
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width:/*expression(document.body.clientWidth > 950  ? "950px" : "740px" )*/760px;
   height: 100px;
   background-image: url(baniere.png);
   background-repeat: no-repeat;
   margin-bottom: 5px;
   text-align: center;
}


#menu_deroulant
{
   position: relative;
   margin-left: auto;
   margin-right: auto;
   width: 760px;
   height: 40px;
   /*background-image: url(menu_deroul.png);*/
   background-repeat: no-repeat;
   margin-bottom: 10px;
   text-align: center;
}

#menu
{
   float: left;
   margin-left:20px;
   margin-right:auto;
   width: 130px;
}

.element_menu
{
   background-color: #FFFFCC;
   /*background-image: url(bouton.png);
   background-repeat: repeat-x;*/
   
   border: 2px solid #FF9900;
   
   margin-bottom: 20px;
}


/* Quelques effets sur les menus */


.element_menu h3
{    
   color: #0099FF;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.element_menu ul
{
   list-style-image: url(bouton.png);
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
   text-align: left;
}

.element_menu a
{
   color: #0099FF;
}

.element_menu a:hover
{
   background-color: #FFFFCC;
   color: black;
}


/* Le corps de la page */

#corps
{
   overflow:auto;
   position: relative;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
   padding: 5px;
   width: 660px;
   height: 400px;
   color: #0099FF;
   background-color: #FFFFCC;
   /*background-image: url(fonddiv.png);*/
   background-repeat: repeat-x;
   text-align: left;
   border: 2px solid #FF9900;
}

#corps h1
{
   color: #0099FF;
   text-align: left;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;

   background-image: url(images/titre.png);
   background-repeat: no-repeat;
   
   padding-left: 30px;
   color: #66CCFF;
   text-align: left;
}


/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
   padding: 5px;

   text-align: center;
width:expression(document.body.clientWidth > 950 "950px" : "740px" );
   color: #B3B3B3;
   background-color: #FFFFCC;
   background-image: url(images/motif.png);
   background-repeat: repeat-x;
   
   border: 1px solid #FF9900;
}
 
 
le 24 Mai 07 à 19h39
 
ça aurait été plus facile de t'aider avec juste le passage défaillant...
 
 
le 24 Mai 07 à 19h51
 
InSiderZ ta remarque n'aide pas vraiment !

Je dirais déjà de commencer par passer le corps en float lui aussi, comme ceci :
#corps
{
  float:left;
  overflow:auto;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 5px;
  width: 660px;
  height: 400px;
  color: #0099FF;
  background-color: #FFFFCC;
  /*background-image: url(fonddiv.png);*/
  background-repeat: repeat-x;
  text-align: left;
  border: 2px solid #FF9900;
}

Après il te faudra "casser" ce flottement pour éviter que fon footer remonte sur le corps, pour cela rajoute une classe dans ton css :
.clear
{clear:both;}

Et rajoute cette ligne dans ton fichier html :
[...]Agricole. </p>
</div>
<div class="clear"></div>
<div id="pied_de_page">[...]

Ps : Tu n'as a modifié que ce qui est en gras, je te conseil de faire des sauvegardes de tes fichiers originaux avant de tester cette solution.
 
 
le 24 Mai 07 à 20h33
 
DarKChAm a écrit:
InSiderZ ta remarque n'aide pas vraiment !


Non, j'attendais qu'il modifie tout ça. Il sait où ça merdouille mais nous donne la totalité, alors bon... autant faire simple et éviter les pages de 40 mètres de long
 
 
le 24 Mai 07 à 20h41
 
Et pour plus de propreté, on vire cette classe qui sert à rien et on met le clear dans le pied de page.
 
 
le 24 Mai 07 à 22h16
 
L'avantage de cette classe est d'être facilement exportable et reste là ou elle se doit d'être même si on modifie plus tard la structure (genre un autre cadre avant le foot).

Mais dans l'absolue tu as raison, autant mettre un clear dans le cadre d'en dessous. (Moi je le justifie avec un affichage par block qui change suivant les requetes)
 
 
le 24 Mai 07 à 22h24
 
Disons que le grand désavantage, c'est que ce div tout seul veut rien dire sémantiquement. Donc si tu peux vraiment pas faire autrement ok, mais quand tu peux éviter... autant faire les choses proprement.
 
 
le 24 Mai 07 à 22h32
 
J'avoue, et puis pour clore le débat (oui le sujet n'est pas résolu donc on peux pas polluer) je dirais que ça permet un gain de quelques octets qui sont pas négligeables sur un BP limitée si on tourne à de gros traffic...
 
 
le 25 Mai 07 à 09h11
 
Merci pour ta réponse DarKChAm mais ça ne fonctionne toujours pas. J'ai mis en ligne le début du site pour avoir une idée du probléme (il manque de nombreux contenus et il y a encore un tas de bug).
Site Internet
Lorsque que vous êtes sur la page d'accueil, réduisez la fénêtre horizontalement.
Vous vous aperceverez que la div principale de la page se retrouve en bas, coincée entre le menu et le pied de page.
Si quelqu'un a une idée que ma structure reste fixe....

(Désolé d'avoir balancé le code en entier mais hier soir j'étais un peu speed et ne sachant pas d'où vient le problème, j'ai préféré tous mettre)
 
 
le 25 Mai 07 à 18h31
 
Ok je dirais que c'est normal, c'est du au faite que tu veuilles center le cadre du milieu et que tu utilises la propriété margin-left:auto; . Enfin c'est ce que je pense, pour en être sur essaies de modifier l'id suivant ainsi (en utilisant toujours le code que je t'ai donné auparavant :
#corps
{
  float:left;
  overflow:auto;
  position: relative;
  margin-left: 40px;
  margin-right: auto;
  margin-bottom: 10px;
  padding: 5px;
  width: 660px;
  height: 400px;
  color: #0099FF;
  background-color: #FFFFCC;
  /*background-image: url(fonddiv.png);*/
  background-repeat: repeat-x;
  text-align: left;
  border: 2px solid #FF9900;
}
 
 

|
 
12 messages
Un expert informatique vous aide immédiatement par téléphone.
Filtrer ok
 
Vous devez être connecté pour écrire un message !
 

 Sujets Similaires:

Balise HTML dans une balise PHP... bien ou pas? BBCode dans une balise code Centrer une image en html - quelle balise utiliser Comportement du iframe dans un div perso Div-X en DV²D Dreamweaver et balise div !? - Pfff, quelle merde !! HTML : sons wav qui s'enchainent ? - Balise BGSOUND Informations sur la balise <a> - Tout est dans le sujet, enfin presque... Modifier format audio d'un div-x Probleme deplacement HL² - c'est...soit la souris soit le clavier Probleme souris - deplacement difficile de la souris [css] div qui passe sur un autre [css] Mise en place bloc div [CSS] Question surrement simple ? - Histoire div, de centrage, de table... [CSS]Centrer horizontalement un div [DHTML] DIV et position absolute [HTML/CSS] div(float) dans un div - Résolu [Math] Déplacement en 2D - Algo pour se déplacer dans un plan [NON RESOLU] petit probleme avec mes div - CSS [Xhtml] 2 Div sinon rien ? + margin-padding ?