Probleme de css resolution ecran

Question

FAFA83

17 Apr 2009 à 10:36

bonjour

je suis entrain de structurer ma page html www.rnsoul.com
mais ayant mis mon code css pour adapter mon site a tout les resolution d'ecran
ça ne fonctionne pas. autant en creant un fichier css : style.css et autant en incluant mon code dans ma page html.

dois je modifier mes calques qui sont en position:absolute;

merci pour votre aide

www.rnsoul.com/style.css

si dessous mon code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>RnSoul : l'empreinte du nouveau son</title>
<style type="text/css">
  <link href="http://www.rnsoul.com/style.css" type="text/css">
</head>
<!--


#Layer40 {
	position:absolute;
	left:687px;
	top:556px;
	width:219px;
	height:22px;
	z-index:106;
	visibility: hidden;
}
body {
	background-color: #000000;
	background-image: url(http://www.rnsoul.com/pattern_body.gif);
	width: 60%;
	margin:auto;
}
#backgroundcorps {
	position:absolute;
	left:136px;
	top:103px;
	width:954px;
	height:751px;
	z-index:121;
	background-color: #000000;
}
#modulecaroussel1 {
	position:absolute;
	left:674px;
	top:599px;
	width:105px;
	height:60px;
	z-index:190;
}
#Bannierpub {
	position:absolute;
	left:417px;
	top:5px;
	width:197px;
	height:68px;
	z-index:123;
}
#actumilieu {
	position:absolute;
	left:141px;
	top:179px;
	width:173px;
	height:130px;
	z-index:128;
	visibility: hidden;
}
#playerdates {
	position:absolute;
	left:137px;
	top:556px;
	width:347px;
	height:294px;
	z-index:186;
}
#video1 {
	position:absolute;
	left:136px;
	top:831px;
	width:273px;
	height:117px;
	z-index:198;
}
#playeraudio {
	position:absolute;
	left:1161px;
	top:712px;
	width:294px;
	height:167px;
	z-index:143;
}
#titredates {
	position:absolute;
	left:135px;
	top:532px;
	width:332px;
	height:24px;
	z-index:171;
}
#titreactu {
	position:absolute;
	left:135px;
	top:103px;
	width:238px;
	height:24px;
	z-index:124;
}
#titreecouterdisty {
	position:absolute;
	left:686px;
	top:317px;
	width:203px;
	height:10px;
	z-index:148;
}
#Bvideo {
	position:absolute;
	left:845px;
	top:1122px;
	width:96px;
	height:19px;
	z-index:146;
}
#titrepartenaires {
	position:absolute;
	left:135px;
	top:1048px;
	width:99px;
	height:18px;
	z-index:204;
}
#modulepartenaireradioFG {
	position:absolute;
	left:136px;
	top:1071px;
	width:136px;
	height:31px;
	z-index:205;
}
#titreecouterrash {
	position:absolute;
	left:686px;
	top:103px;
	width:62px;
	height:28px;
	z-index:142;
}
#Btelecharge {
	position:absolute;
	left:887px;
	top:525px;
	width:87px;
	height:11px;
	z-index:155;
}
#BDL {
	position:absolute;
	left:23px;
	top:411px;
	width:58px;
	height:17px;
	z-index:141;
}
#Album1 {
	position:absolute;
	left:10px;
	top:325px;
	width:74px;
	height:68px;
	z-index:142;
}
#titre1 {
	position:absolute;
	left:7px;
	top:289px;
	width:87px;
	height:14px;
	z-index:143;
}
#ecouterplayer2 {
	position:absolute;
	left:481px;
	top:856px;
	width:136px;
	height:85px;
	z-index:144;
}
#logo {
	position:absolute;
	left:136px;
	top:3px;
	width:145px;
	height:76px;
	z-index:122;
}
#textescroll2 {
	position:absolute;
	left:1003px;
	top:425px;
	width:160px;
	height:125px;
	z-index:145;
}
#textescroll3 {
	position:absolute;
	left:616px;
	top:236px;
	width:302px;
	height:302px;
	z-index:145;
}
#moduleactu {
	position:absolute;
	left:151px;
	top:135px;
	width:528px;
	height:368px;
	z-index:125;
}
#N1 {
	position:absolute;
	left:252px;
	top:1338px;
	width:81px;
	height:124px;
	z-index:170;
}
a:link {
	color: #FFCC00;
	text-decoration: blink;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#video3 {
	position:absolute;
	left:771px;
	top:831px;
	width:57px;
	height:38px;
	z-index:202;
}
.Style18 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8px;
}
#N2 {
	position:absolute;
	left:332px;
	top:1338px;
	width:82px;
	height:144px;
	z-index:182;
}
#N3 {
	position:absolute;
	left:412px;
	top:1338px;
	width:83px;
	height:144px;
	z-index:183;
}
#N5 {
	position:absolute;
	left:572px;
	top:1338px;
	width:70px;
	height:130px;
	z-index:185;
}
#ecouter {
	position:absolute;
	left:275px;
	top:1463px;
	width:43px;
	height:7px;
	z-index:186;
}
.Style19 {
	color: #FF0000;
	font-weight: normal;
}
.Style22 {
	font-size: 8px;
	color: #FF0000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#N4 {
	position:absolute;
	left:514px;
	top:1463px;
	width:39px;
	height:0px;
	z-index:190;
}
#video2 {
	position:absolute;
	left:453px;
	top:831px;
	width:249px;
	height:133px;
	z-index:200;
}
.Style23 {
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#titrevideo {
	position:absolute;
	left:135px;
	top:807px;
	width:167px;
	height:15px;
	z-index:197;
}
#ecouterplayer1 {
	position:absolute;
	left:687px;
	top:128px;
	width:286px;
	height:174px;
	z-index:144;
}
#modulecaroussel2 {
	position:absolute;
	left:883px;
	top:599px;
	width:158px;
	height:170px;
	z-index:191;
}
#titreflyerlive {
	position:absolute;
	left:639px;
	top:532px;
	width:34px;
	height:24px;
	z-index:187;
}
.style24 {color: #FFFFFF}
-->
</style>
<script type="text/JavaScript">
<!--



function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div id="backgroundcorps"> </div>
<div id="modulecaroussel1"><span class="carrouselCentral">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="178" height="178" align="middle">
    <param name="allowScriptAccess" value="always" />
    <param name="movie" value="http://www.rnsoul.com/carroussel.swf?requestURL=http://www.rnsoul.com/carrouselMain2.xml" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <embed src="http://www.rnsoul.com/carroussel.swf?requestURL=http://www.rnsoul.com/carrouselMain.xml" wmode="opaque" quality="high" bgcolor="#000000" width="178" height="178" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />  
</object>
</span></div>
<div id="Bannierpub">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="669" height="81">
    <param name="movie" value="http://www.rnsoul.com/pub.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.rnsoul.com/pub.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="669" height="81"></embed>
  </object>
</div>
<div id="playerdates">
  <div style="text-align: center; margin-bottom: 10px;">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" align="middle" height="250" width="500">
      <param name="allowScriptAccess" value="sameDomain" />
      <param name="movie" value="http://www.rnsoul.com/dewslider.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#ffffff" />
      <embed src="http://www.rnsoul.com/dewslider.swf" quality="high" bgcolor="#ffffff" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="250" width="500"> </embed>
    </object>
</div>
</div>
<div id="video1">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="318" height="191">
    <param name="movie" value="rash.swf" />
    <param name="quality" value="high" />
    <embed src="rash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="318" height="191"></embed>
  </object>
</div>
<div id="titredates"><img src="http://www.rnsoul.com/lesdates.png" width="503" height="22" /></div>
<div id="titreactu"><img src="http://www.rnsoul.com/lactu.png" width="550" height="22" /></div>
<div id="titreecouterdisty"><img src="http://www.rnsoul.com/ecouterdisty.png" width="405" height="22" /></div>
<div id="titrepartenaires"><img src="http://www.rnsoul.com/partenaires.png" width="955" height="22" /></div>
<div id="modulepartenaireradioFG">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="160" height="60">
    <param name="movie" value="http://www.radiofg.com/live/bandeaunew.swf" />
    <param name="quality" value="high" />
    <embed src="http://www.radiofg.com/live/bandeaunew.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="160" height="60"></embed>
  </object>
</div>
<div id="titreecouterrash"><img src="http://www.rnsoul.com/ecouter.png" width="405" height="22" /></div>
<div id="logo"><img src="http://www.rnsoul.com/logoindex.jpg" width="182" height="86" /></div>
<div id="moduleactu">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="518" height="388">
    <param name="movie" value="actu01.swf" />
    <param name="quality" value="high" />
    <embed src="actu01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="518" height="388"></embed>
  </object>
</div>
<div id="video3">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="318" height="191">
    <param name="movie" value="rash.swf" />
    <param name="quality" value="high" />
    <embed src="rash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="318" height="191"></embed>
  </object>
</div>
<div id="video2">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="318" height="191">
    <param name="movie" value="rash.swf" />
    <param name="quality" value="high" />
    <embed src="rash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="318" height="191"></embed>
  </object>
</div>
<div id="titrevideo"><img src="http://www.rnsoul.com/video.png" width="955" height="22" /></div>
<div id="textescroll1" class="style24" style="position:absolute; left:196px; top:1028px; width:147px; height:47px; z-index:199;">
  </noscript>
  <marquee class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
  <font size="2" face="Arial, Helvetica, sans-serif"><strong>EN DIRECT LIVE LORS DU CHAMPIONAT DE FRANCE DMC 2007----------</strong></font>
  </marquee>
</div>
<div id="ecouterplayer1">
  <embed type="application/x-shockwave-flash" src="http://www.rnsoul.com/ecouter/rash/mp3player.swf" id="mpl" name="mpl" quality="high" allowfullscreen="true" flashvars="displayheight=187&amp;file=http://www.rnsoul.com/ecouter/rash/playlist.xml&amp;height=187&amp;width=403&amp;displaywidth=187" height="187" width="403"></embed>
</div>
<div id="modulecaroussel2"><span class="carrouselCentral">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="178" height="178" align="middle">
    <param name="allowScriptAccess" value="always" />
    <param name="movie" value="http://www.rnsoul.com/carroussel.swf?requestURL=http://www.rnsoul.com/carrouselMain.xml" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <embed src="http://www.rnsoul.com/carroussel.swf?requestURL=http://www.rnsoul.com/carrouselMain.xml" wmode="opaque" quality="high" bgcolor="#000000" width="178" height="178" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></embed>
  </object>
</span></div>
<div id="titreflyerlive"><img src="http://www.rnsoul.com/flyerlive.png" width="452" height="22" /></div>
<div id="ecouterplayer2" style="position:absolute; left:687px; top:343px; width:409px; height:146px; z-index:149">
  <embed type="application/x-shockwave-flash" src="http://www.rnsoul.com/ecouter/disty/mp3player.swf" id="mpl" name="mpl" quality="high" allowfullscreen="true" flashvars="displayheight=187&amp;file=ecouter/disty /playlist.xml&amp;height=187&amp;width=403&amp;displaywidth=187" height="187" width="403"></embed>
</div>
<div id="textescroll2" style="position:absolute; left:544px; top:1028px; width:142px; height:64px; z-index:201"><span class="style24">
<marquee class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<font size="2" face="Arial, Helvetica, sans-serif"><strong>EN DIRECT LIVE LORS DU CHAMPIONAT DE FRANCE DMC 2007----------</strong></font>
</marquee>
</span></div>
<div id="textescroll3" style="position:absolute; left:840px; top:1028px; width:141px; height:64px; z-index:203"><span class="style24">
<marquee class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="2" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">
<font size="2" face="Arial, Helvetica, sans-serif"><strong>EN DIRECT LIVE LORS DU CHAMPIONAT DE FRANCE DMC 2007----------</strong></font>
</marquee>
</span></div>
<script type="text/javascript">
var so = new SWFObject('ecouter/rash/mp3player.swf','mpl','403','187','7');
so.addParam('allowfullscreen','true');
so.addVariable('displayheight','187');
so.addVariable('file','ecouter/rash/playlist.xml');
so.addVariable('height','187');
so.addVariable('width','403');
so.addVariable('displaywidth','187');
so.write('multi1');
</script></div>

</body>
</html>

[/i][/i]

Arsene

17 Apr 2009 à 11:59

A la Florent Smiley cligne

FAFA83 a écrit :
dois je modifier mes calques qui sont en position:absolute;

Oui.

FAFA83

17 Apr 2009 à 12:22

merci

je dois les mettre en position relative ?

Heyoan

17 Apr 2009 à 12:27

Hello FAFA83 et bienvenue, Smiley smile

FAFA83 a écrit :
je dois les mettre en position relative ?

Le mieux serait d'apprendre comment ça marche en lisant le Guide de survie du positionnement CSS (en prenant le temps de suivre les liens). Smiley cligne

~~supprimé~~

17 Apr 2009 à 12:45

FAFA83 a écrit :
bonjour
je suis entrain de structurer ma page html www.rnsoul.com ............

Oui c' est bien beau le Javascript, mais quand il y a une erreur ça bloque la page Smiley confused

Alors il manque le module JS qui est appelé par



var so = new SWFObject('ecouter/rash/mp3player.swf','mpl','403','187','7');

SWFObject est donc inconnu et crée une erreur javascript.
pour le reste tu as eu des réponses Smiley eek

FAFA83

17 Apr 2009 à 13:02

ok merci pour tout mais je ne comprend pas bien si je pouvais avoir un exemple sur le choix à faire car mon but c'est d'essayer d'adapter mon site au resolution principales des internautes.

quelqu'un peux me donner un exemple sur mon site

merci d'avance

Heyoan

17 Apr 2009 à 13:12

FAFA83 a écrit :
ok merci pour tout mais je ne comprend pas bien

Eh bien alors il faut prendre le temps de faire des tests et d'Apprendre ! Smiley langue

Pour rappel le but d'Alsacréations est d'aider à l'apprentissage.

Voir également Faire un site pour toutes les résolutions.

FAFA83

17 Apr 2009 à 13:29

ok merci quand même je vais encore essayé

Sujet clos

CSS et mise en forme, CSS3

Probleme de css resolution ecran