Bonsoir
J'ai cherché sur le forum un petit problème sans doute très fréquent mais sans résultat. Il s'agit en fait de plusieurs blocs div qui doivent formés un carré.
JE pense que pour faire simple, je vais mettre les codes ca le fera mieux :
alors le css :
puis donc la source du html... php en fait :
Voila je n'arrive pas à voir ce qui ne va pas dans mon code... et le validateur n'a rien donné de concluant donc voila.
En fait pour un peu expliquer le problème... c'est que tout s'affiche pas trop mal, sauf qu'en bas de ma page... et donc de la zone délimité normalement par le height du bloc.. il y a beaucoup d'espace après la zone. Pourtant les mesures sont précises.
Je pense que cela est du aux bottom de plusieurs div (pour caler ma mise en page) et donc je me retrouve avec de l'espace en trop à la fin de ma mise en page... et je ne sais comment les supprimer pour une bonne mise en page carré parfaite sans superflu.
Merci de votre aide si vous pouvez... ou alors m'indiquer un lien pour résoudre ce soucis qui se retrouve tant dans Safari que sous IE... un peu moins sous Firefox mais quand même un peu.
Modifié par milsou2 (30 Jul 2008 - 12:24)
J'ai cherché sur le forum un petit problème sans doute très fréquent mais sans résultat. Il s'agit en fait de plusieurs blocs div qui doivent formés un carré.
JE pense que pour faire simple, je vais mettre les codes ca le fera mieux :
alors le css :
@charset "UTF-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#000000;
}
#interface {
position:absolute;
left: 50%;
top: 50%;
width: 1024px;
height: 1024px;
margin-top: -512px;
margin-left: -512px;
background-image: url(images/Fond.jpg);
background-repeat: no-repeat;
}
#border {
position:absolute;
left:50%;
top:50%;
width:604px;
height:614px;
margin-top:-307px;
margin-left:-302px;
background-color:#FFFFFF;
}
#siteweb {
position:absolute;
left:50%;
top:50%;
width:600px;
height:610px;
margin-top:-305px;
margin-left:-300px;
background-color:#FBB03B;
background-repeat: no-repeat;
}
#tetiere {
position:relative;
width:550px;
height:283px;
z-index:1;
}
#videoducote {
position:relative;
width:50px;
height:600px;
left:550px;
bottom:283px;
background-color:#FBB03B;
z-index:2;
}
#menu {
position:relative;
width:218px;
height:269px;
left:332px;
bottom:600px;
background-color:#FBB03B;
z-index:3;
}
#fondtexte {
position:relative;
width:332px;
height:269px;
bottom:869px;
background-color:#FBB03B;
background-image:url(images/interface_03.png);
z-index:4;
}
#bandeaubas {
position:relative;
width:550px;
height:48px;
bottom:869px;
background-color:#FBB03B;
background-image:url(images/interface_05.png);
z-index:5;
}
puis donc la source du html... php en fait :
<!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=UTF-8" />
<title>titre</title>
<link href="fichier.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="interface">
<div id="border">
<div id="siteweb">
<div id="tetiere">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','550','height','283','title','EV-Grafx - Studio d\'exécution et de création depuis 8 ans','src','/ev-grafx2/interface1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','/ev-grafx2/interface1' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="550" height="283" title="EV-Grafx - Studio d'exécution et de création depuis 8 ans">
<param name="movie" value="/ev-grafx2/interface1.swf" />
<param name="quality" value="high" />
<embed src="/ev-grafx2/interface1.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="283"></embed>
</object>
</noscript></div>
<div id="videoducote">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','50','height','600','src','bandeauanim','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','bandeauanim' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="50" height="600">
<param name="movie" value="bandeauanim.swf" />
<param name="quality" value="high" />
<embed src="bandeauanim.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="50" height="600"></embed>
</object>
</noscript></div>
<div id="menu">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','218','height','269','title','menu du portfolio EV-Grafx','src','menu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','menu' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="218" height="269" title="menu du portfolio EV-Grafx">
<param name="movie" value="menu.swf" />
<param name="quality" value="high" />
<embed src="menu.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="218" height="269"></embed>
</object>
</noscript></div>
<div id="fondtexte"></div>
<div id="bandeaubas">Placez ici le contenu de id "bandeaubas"</div>
</div>
</div>
</div>
</body>
</html>
Voila je n'arrive pas à voir ce qui ne va pas dans mon code... et le validateur n'a rien donné de concluant donc voila.
En fait pour un peu expliquer le problème... c'est que tout s'affiche pas trop mal, sauf qu'en bas de ma page... et donc de la zone délimité normalement par le height du bloc.. il y a beaucoup d'espace après la zone. Pourtant les mesures sont précises.
Je pense que cela est du aux bottom de plusieurs div (pour caler ma mise en page) et donc je me retrouve avec de l'espace en trop à la fin de ma mise en page... et je ne sais comment les supprimer pour une bonne mise en page carré parfaite sans superflu.
Merci de votre aide si vous pouvez... ou alors m'indiquer un lien pour résoudre ce soucis qui se retrouve tant dans Safari que sous IE... un peu moins sous Firefox mais quand même un peu.
Modifié par milsou2 (30 Jul 2008 - 12:24)
