18041 sujets

Questions générales et questions de débutants

Pb même affichage selon navigateur + pb positionnement fixe

Bonjour à tous!

Je suis débutante dans tout ce qui est code, et donc je me suis informée sur plusieurs sites afin de comprendre le langage HTML et CSS.
J'ai donc réussi à faire un 1er jet de la page d'accueil du futur site de l'association où je suis en stage.
Vous trouverez mon code HTML et ma feuille CSS plus loin.
J'ai plusieurs problèmes :
- Comment positionner mes éléments pour que ma page reste lisible sous IE ?
- Comment rendre valide mes animations Flash sous IE?
- A la base, mon tuteur voulait que toute la page reste fixe, même les cadres. Ainsi lorsqu'on réduit la page rien ne bouge. Mais malheureusement je n'ai pas réussi, j'ai essayé de mettre tous mes cadres sur le contenu de la page ainsi que le haut de page et le bas de page en position fixe, mais suite à cela ma barre de défilement sur mon navigateur (mozilla firefox) restait bloquée je ne pouvais pas descendre en bas de page. Comme je n'ai pas réussi à résoudre le problème j'ai donc mis mes cadres en position absolute.
- Enfin, je voulais savoir si utiliser des modèles dans Dreamweaver est plus simple que d'avoir différentes feuilles de styles pour chacune des pages du site?

Désolée, si mes explications ne sont pas très claires, je ne connais pas tous les mots technique ^^
Merci d'avance.

Emilie



Mon code html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>index.htm</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<style type="text/css" media="all">@import url(style1.css);</style> 
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
 position:absolute;
 }
</style>
<!--><![endif]-->

</head>

<body>
<div id="head">
<div id="en_tete">
  <object type="application/x-shockwave-flash" data="bandeau.swf" width="1000" height="140" class="bandeau">
    <param name="movie" value="fichierflash.swf" />
    <param name="wmode" value="transparent" />
  </object>
  <table  class="table" width="235" height="143">
    <tr>
      <td height="131"><object type="application/x-shockwave-flash" data="diapo.swf" width="235" height="134">
        <param name="movie" value="fichierflash.swf" />
        <param name="wmode" value="transparent" />
        <embed src="fichierflash.swf" width="235" height="134" wmode="transparent"></embed>
      </object></td>
    </tr>
    </table>
</div>
 


<div  id="menu">

<ul>

  <li><a href="#"><strong>Coolisses</strong></a></li>
  <li><a href="#"><strong>Inscriptions</strong></a></li>
  <li><a href="#"><strong>Techniciens</strong></a></li>
  <li><a href="#"><strong>Casting</strong></a>
  <ul>
     <li><a href="#"><strong>Comédiens</strong></a></li>
	  <li><a href="#"><strong>Figurants</strong></a></li>
  </ul>
  </li>
  <li><a href="#"><strong>Services</strong></a>
    <ul>
      <li><a href="#"><strong>Adhérents</strong></a></li>
      <li><a href="#"><strong>Production</strong></a></li>
	  </ul>
  </li>
  <li><a href="#"><strong>Réalisations</strong></a>
  <ul>
  <li><a href="#"><strong>Ateliers de la création</strong></a></li>
  <li><a href="#"><strong>Bruits de Coolisses</strong></a></li>
  </ul>
  </li>
  <li><a href="#"><strong>Agenda</strong></a>
  <ul>
  <li><a href="#"><strong>Planning tournages</strong></a></li>
  <li><a href="#"><strong>Dates stage/atelier</strong></a></li>
</ul>
  </li>
  <li><a href="#"><strong>Actualités</strong></a>
  <ul>
  <li><a href="#"><strong>News</strong></a></li>
  <li><a href="#"><strong>Galerie photos</strong></a></li>
  <li><a href="#"><strong>Revue de presse</strong></a></li>
  </ul>
 </li>
 <li><a href="#"><strong>Forum</strong></a></li>
</ul>
</div>
</div>


<div id="page">

<div class="coins" id="news">
<h2> News du mois Juin 2009</h2> <br/>
<p><img src="images/court.jpg" width="240" height="278" /> <br/>
<br/>
Réunion collective d'information AFDAS le 12 juin 2009 à Poitiers <br/> <br/>
<img src="images/kissnot2009.jpg" alt="kissnot" width="240" height="148" /> <br/> 
  <br/>
KissNot reprend ses activités avec le stage TOURNAGE qui se déroulera le 18 mai au 1er juin 2009 sur l'île de ré <br/>
<strong><em><a href="actu">>>Lire la suite</a></em></strong> <br/> <br/>
<img src="images/ptitsblancs.jpg" alt= "ptitsblancs" width="240" height="148"/> <br/> 
<br/>
Le dernier opus des Ateliers de la Création a été tourné le 24 mars au bar "Le petit coin" à La Rochelle <br/>
<strong><em><a href="actu">>>Lire la suite</a></em></strong></p>
<br/> 
</div>


<div class="coins" id="der">
<h2>Derniers profils mis à jour</h2>
<p>
<img src="images/portrait.jpg" /><br/> <br/>
Léa 5 ans <br/> </p>
<p> 
<img src="images/portrait.jpg" /> <br/> <br/>
Léa 5 ans <br/> </p>
<p><img src="images/portrait.jpg" /> <br/> <br/>
Léa 5 ans <br/> </p>
<p><img src="images/portrait.jpg" /> <br/> <br/>
Léa 5 ans <br/> </p>
<p>
<br> 
<img src="images/design/loupe.gif" align="middle"><strong><u>Rechercher un adh&eacute;rent</u> :</strong> 
<br> 
<form action="index.php" method="get" name="form1" id="form1"> 
<input name="recherche" type="text"> 
- 
<input name="OK" type="submit" value="OK"> 
</form> 
<a href="/index.php?pageNum_rsRecherche=0&totalRows_rsRecherche=0">10 pr&eacute;c&eacute;dents</a> 
<a href="/index.php?pageNum_rsRecherche=-1&totalRows_rsRecherche=0">10 suivants</a> 
<br><br> 
</p>
</div>




<div class="coins" id="video">
<h2>Ateliers de Création : "Petits Blancs"</h2> 
 
</div> 



<div class="coins" id="prod">
<p>
<strong>Nos adhérents participent régulièrement  <br/>
aux tournages de séries telles que : <br/>
<em>SOS 18, Père et Maire, Coeur Océan, <br/>
Mademoiselle Joubert...</em> <br/>
Ils sont au service de grands talents comme <br/> 
<em>Jean-Luc Godard, Emir Kusturica, Mathieu Almaric, <br/>
Cédric Klapish,Bernard Stora,Ron Howard... </em></strong>
</p>

</div>


<div class="coins" id="bru">
<h2>Bruits de Coolisses</h2>
<br/> 
<table width="240" class="tab">
  <tr>
    <td height="157"><img src="images/bruit de.jpg" width="107" height="130" align="left" /></td>
    <td><strong>Sommaire :</strong><br/>
      Interview de Mr XXXX <br/>
      Festival de la fiction TV <br/>
      Actualité des tournages <br/>
      Annonces <br/></td>
  </tr>
</table>
<br/>
</div>
</div>

<br/><br/><br/><br/><br/><br/>



<div id="bas">
  <table width="100%" >
    <tr>
      <td width="34%"><strong><a href="accueil">Accueil</a></strong></td>
      <td width="6%"><strong><a href="liens">Liens</a></strong></td>
      <td width="15%"><strong><a href="mentions légales">Mentions Légales</a></strong></td>
      <td width="9%"><strong><a href="contacts">Contacts</a></strong></td>
      <td width="36%"><strong><a href="plan de site">Plan de site</a></strong></td>
    </tr>
  </table>

</div>

</body>
</html>


Mon CSS :

#head {
position:fixed;
top:0px;
left:0px;
right:0px;
z-index: 200;
}

#en_tete {
top:0px;
	margin:0px;
	height: 143px;
	background-image:url("images/fond.png");
	background-attachment:fixed;
	}
	
/* animation flash avec logo */
.bandeau {
position:fixed;
top:0px;
left:0px;
}

/* cadre pour mettre diapo photo */	
.table {
border: none #3333CC;
background-color:#3333CC;
margin: 0;
position:fixed;
top: 0px;
right:0px;
margin-left:400px;
}
	
/* Menu */

#menu ul { /* liste*/
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 
 }
#menu li { /* item */
 float:left;
 margin:0;
 padding:0;
 background-color:#3333CC;
 background-repeat:repeat-x;
 
 }
#menu li a { /* comportement lien de la liste */
 display:block;
 width:100px;
 color:#FFFF99;
 text-decoration:none;
 padding:5px;
 font-family: georgia;
 word-spacing:5px;
 font-size: 14px;
 }
#menu li a:hover { /* couleur survol de la souris */
 color:#000066;
 }
 #menu ul li ul { /* fait disparaitres les sous items */
 display:none;
 }
 #menu ul li:hover ul { /* permet de mettre en vertical le sous menu */
 display:block;
 }
#menu li:hover ul li { /* au survol de l'item 2 les sous items déroulent */
 float:none;
 }
 #menu li ul {
 position:fixed;
 z-index: 10;
 }
 

/* PAge */

html, body {
margin: 0px 0;
text-align: center;
font: 12px "georgia";
height:100%;
background-image:url("images/violet.png");
background-repeat:repeat-y;
background-attachment:fixed;
	}

	
#page {
width: auto;
margin: 0px 0px ;
padding: 5px 5px 5px 5px;
z-index:100;
left:0px;
	}

p, h2 {
padding:5px 10px;
margin:0;
}

#news {

font-family: georgia;
border: inset thick;
border-color:#000099;
margin-top:200px;
margin-bottom: 20px;
margin-left:40px;
max-width: 300px;
min-width: 50px;
max-height: 1000px;
min-height: 700px;
background-color:#FFFFFF;
position:absolute;
z-index: 8;
}
em {
color:#000099;
}


h2 {
border-bottom:3px solid #FFFF99;
color:#FFFF99;
background-color:#000033;
}


#der {
font-family: georgia;
border: inset thick;
border-color:#000099;
margin-top:200px;
margin-bottom: 20px;
margin-left:850px;
max-width: 200px;
min-width: 25px;
max-height: 1000px;
min-height: 700px;
background-color:#FFFFFF;
position:absolute;
z-index:8;

}


#video {
font-family: georgia;
font-size:12px;
color:#000099;
border: inset thick;
text-align: center;
width: 40%;
height:60%;
margin-top: 200px;
border-color:#000099;
margin-left: 375px;
max-width: 500px;
min-width: 25px;
max-height: 300px;
min-height: 50px;
background-color:#FFFFFF;
position:absolute;
z-index:8;
}

#prod {
font-family: georgia;
font-size: 14px;
color:#FFFF99;
border: inset thick;
border-color: #000099;
margin-left: 375px;
padding: 17px;
background-color:#000033;
margin-top:550px;
max-width: 500px;
min-width: 25px;
max-height: 250px;
min-height: 50px;
position:absolute;
}

#bru {
font-family: georgia;
border: inset thick;
border-color:#000099;
text-align: center;
width:40%;
height: 50%;
margin-left: 375px;
margin-top: 790px;
max-width: 700px;
min-width: 25px;
max-height: 250px;
min-height: 50px;
background-color:#FFFFFF;
position:absolute;
}
.tab { /* couverture bruits de coolisses + sommaire */
text-align:center;
display : block; 
margin-left : auto; 
margin-right : auto;
}



.coins {
border:1px solid #B0C4DE;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

#bas{
	background-color:#3333CC;
	border-bottom:0px;
	left: 0px;
	right:0px;
	margin-top: 1000px;
	position:absolute;
 list-style-type:none;
 text-align:center;
 font-family: georgia;
color:#FFFF99;
 text-decoration:none;
	}
	
	#bas a {
display:block;
 color:#FFFF99;
 text-decoration:none;
 font-family: georgia;
 word-spacing:5px;
 font-size: 12px;
 }

#bas a:hover { /* couleur survol de la souris */
 color:#000066;
 }

Modifié par milette (17 Jun 2009 - 09:25)
Bonjour,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/12813-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Cdt,
Sylvain
Sujet clos
Aller à