bonjour à tous,

je suis en train de mettre en place dans mon squelette quelque élément de mon site, mais j'ai un élément qui refuse que je le force à ce redimensionner. Il s'agit de mon panneau d'aéroport que je souhaiterai pourvoir redimensionner librement, en poussant à l'extréme impossible je voudrai pouvoir lui faire accépter width=10px heigt: auto

et voici le lien de la page ma page

Extrait du CSS

.optionsup
{ 
  margin: auto;
  margin-left: auto ; 
  margin-right: auto ;
  width: auto;
  height: auto;
  //background-color: #F6E497;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.optionsupint
{ 
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.optionsupintpan
{ 
  max-width: 50px;
  height: auto;
}

.Panel 
{
  font:monospace; 
  font-weight:bolder;
  font-size: 0.8em ;
  color: #FED401; 
  table-layout: fixed; 
  text-align: center; 
  background: #494949;
}
.PanelCell 
{
  min-width:1.1em;
  height:1.1em;
  border: 1 solid none;
  vertical-align: middle; 
  background: #000000;
}

le css complet:

body {
color:black;
background-color:white;
background-image:url(./images/fond.png);
}
.page
{ 
  width: 100%;
  height: auto;
  background-image:url(./images/fond.jpg);
  //background-color: #000000;
}
.header
{ 
  width: auto;
  height: auto;
  //background-color: #046380;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.menu
{ 
  width: auto;
  height: auto;
  //background-color: #4A1A2C;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.optionsup
{ 
  margin: auto;
  margin-left: auto ; 
  margin-right: auto ;
  width: auto;
  height: auto;
  //background-color: #F6E497;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.optionsupint
{ 
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.optionsupintpan
{ 
  max-width: 50px;
  height: auto;
}

.Panel 
{
  font:monospace; 
  font-weight:bolder;
  font-size: 0.8em ;
  color: #FED401; 
  table-layout: fixed; 
  text-align: center; 
  background: #494949;
}
.PanelCell 
{
  min-width:1.1em;
  height:1.1em;
  border: 1 solid none;
  vertical-align: middle; 
  background: #000000;
}
.conteneurcent
{ 
  width: 68%;
  height: auto;
  //background-color: #AEEE00;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}
.conteneurcent2
{ 

  width: 1352;
  height: 100%;
  //background-color: #AEEE00;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: auto;
  margin-right: auto;

}
.optioninf
{ 
  width: auto;
  height: auto;
  //background-color: #84815B;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.lateralg
{ 
  width: 15%;
  height: auto;
  //background-color: #FF358B;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}
.laterald
{ 
  width: 15%;
  height: auto;
  //background-color: #C03000;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  float: left;
}
.clear
{ 
clear: both;
}
.footer
{ 
  width: auto;
  height: auto;
  //background-color: #32331D;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
}
.moduleM
{ 
 border-width:5px;
 border-style:solid;
 border-color:RED;
  width: 250px;
  height: 400px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  /*arrondir les coins en haut à gauche et en bas à droite*/
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
border-radius:10px 10px 10px 10px;

}

la page internet:

<?php
    require ("ftpdl.php");
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
        <title>Site FFS2 2</title>
    </head>
<body>
</br>
<div class="page">
    <div class="header">
        <?php
        include './TPL/header.php';
        ?>
    </div>
    <div class="menu">

    </div>
    <div class="optionsupint">
        <div class="optionsupintpan">
            <?php
            include './TPL/panair2.php';
            ?>
        </div>
    </div>
    <div class="optionsup">
    </div>
    <div class="optionsup">
    </div>
    <div class="lateralg">
            <div class="moduleM">
                    <script type="text/javascript">
                    <!--
                    var port = 6801;
                    var width = 250;
                    var height = 400;
                    var srv = 8;
                    var cl = "000";
                    var bgcolor = "transparent";
                    var tc = "11";
                    var tu = "11";
                    //-->
                    </script>
                    <script type="text/javascript" src="http://srv02.serveurmumble.com/viewver/javascripts/viewver.js"></script>

            </div>
            <div class="module">

            </div>
            <div class="module">

            </div>

    </div>
    <div class="conteneurcent">

    </div>
    <div class="laterald">
        <div class="module">

            </div>
            <div class="module">

            </div>
            <div class="module">

                <BR>

            </div>

    </div>
<div class="clear"></div>
    <div class="optioninf">
    </div>
    <div class="optioninf">
    </div>
    <div class="footer">
    <?php
    include './TPL/footer.php';
    ?>
    </div>

</div>

</body>
</html>

merci d'avance pour votre aide

6 réponses


flo3376
Auteur
Réponse acceptée

bonsoir, je m'excuse de ne répondre que maintenant,

j'ai résolu le prb de mon côté en bidouillant et j'ai trouvé. cela était due à mon tableau d'aéroport dynamique qui changé de taille (à 1 px prés le salopio) et bloqué le width auto.

je ne sais pas si vous souhaitez le code??

si oui faites moi signe

sinon encore merci de votre aide.

bonjour il te faudrait mettre un width avec une dimension au lieu de le mettre en auto dans ton css pour la class optionsupint genre

.optionsupint{
width:10px;
overflow:hidden; /*pour ne pas voir ce qui dépasse de la div*/
}
flo3376
Auteur

bon ba ya de l'idée, le conteneur reprend bien un dimension voulue et ce recentre biens, mais le contenu lui ne veux pas s'ajuster au conteneur, es ce que mon contenu qui est la source du prb ou j'en ai encore loupé un bout?

Salut

.panel {width:100%;}

:')

J'ai pas trop compris ce que tu demandais

Ici quel est ton contenu et quel est ton conteneur?

flo3376
Auteur

le contenu: [code]

<?php include './TPL/panair2.php';
?>

[/code] le conteneur: [code] .optionsupint{ width:350px; overflow:hidden; [/code] et le fichier panair2.php [code]<?php require ("ftpdl.php");
$link = mysql_connect ($dbhost,$dbuser,$dbpass) or die ('Erreur : '.mysql_error() );
mysql_select_db($db) or die ('Erreur :'.mysql_error());

mysql_query("SET NAMES 'utf8'");

?><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" href="style.css" type="text/css" media="screen"><title></title><script>
// 31-10-2003 - francktfr@systeme-d.net
// écrit pour http://www.systeme-d.net
for(i=1; i<6; i++)
{
var Blocs = new Array()
var Sentence = new Array()
Sentence = new Array()

<?php

$select = "SELECT *
FROM tracker_acarsdata
WHERE lastupdate > DATE_FORMAT( NOW( ) - INTERVAL 1
DAY , '%Y-%m-%d %H:%i:%s' )
ORDER BY lastupdate DESC ";

$result = mysql_query($select,$link) or die ('Erreur : '.mysql_error() );
$total = mysql_num_rows($result);

$select2 = "SELECT *
FROM tracker_acarsdata
WHERE lastupdate > DATE_FORMAT( NOW( ) - INTERVAL 1
DAY , '%Y-%m-%d %H:%i:%s' )
ORDER BY lastupdate DESC ";

$result2 = mysql_query($select2,$link) or die ('Erreur : '.mysql_error() );
$total2 = mysql_num_rows($result2);

$select3 = "SELECT *
FROM tracker_acarsdata
WHERE lastupdate > DATE_FORMAT( NOW( ) - INTERVAL 1
DAY , '%Y-%m-%d %H:%i:%s' )
ORDER BY lastupdate DESC ";

$result3 = mysql_query($select3,$link) or die ('Erreur : '.mysql_error() );
$total3 = mysql_num_rows($result3);

if($total2)
{
?>
Sentence.push("Départs des avions")
Sentence.push(" ")
Sentence.push(" Vol:DEP-ARR Départ pilote avion Statut")
Sentence.push(" ")
<?php
do{
$variable7=$row["phasedetail"];
if(($variable7=="Embarquement") or ($variable7=="Repoussage")or ($variable7=="Roulage vers le point d'attente"))
{
$variable1=substr($row["pilotname"], 5,5);
$variable2=substr(str_pad($row["flightnum"], 10, " ", STR_PAD_BOTH), 0,10);
$variable3=substr($row["aircraft"], 5,5);
$variable4=$row["lat"];
$variable5=$row["lng"];
$variable6=$row["alt"];
$variable7=$row["depicao"];
$variable7=sprintf("%-04s",$variable7);
$variable8=$row["arricao"];
$variable8=sprintf("%4s", $variable8);
$variable9=substr($row["deptime"], 0, -3);
$variable10=$row["timeremaining"];
$variable11=substr($row["arrtime"], 0, -3);
$variable12=$row["distremain"];
$variable13=$row["phasedetail"];
?>
Sentence.push("<?php echo " $variable7-$variable8 $variable9 $variable1 $variable3 $variable13 ";?>")
<?php
}
}while(($row = mysql_fetch_array($result2)));
}
?>

Blocs.push(Sentence)
Sentence = new Array()

<?php
if($total3)
{
?>
Sentence.push("Avions à destination de:")
Sentence.push(" ")
Sentence.push(" Numéro Vol:DEP-ARR Altitude Phase de vol")
Sentence.push(" ")
<?php
do{
$variable7=$row["phasedetail"];
if(($variable7=="Décollage") or ($variable7=="Montée")or ($variable7=="Descente")or ($variable7=="En palier")or ($variable7=="Croisière")or ($variable7=="Approche"))
{

                    $variable1=substr($row["pilotname"], 5,5);
                    $variable2=substr(str_pad($row["flightnum"], 10, " ", STR_PAD_BOTH), 0,10);
                    $variable3=str_pad(substr($row["aircraft"], 5,5), 5, " ",STR_PAD_RIGHT);
                    $variable4=$row["lat"];
                    $variable5=$row["lng"];
                    $variable6= str_pad($row["alt"], 6, " ", STR_PAD_RIGHT);
                    $variable7=$row["depicao"];
                    $variable7=sprintf("%-04s",$variable7);
                    $variable8=$row["arricao"];
                    $variable8=sprintf("%4s", $variable8);
                    $variable9=substr($row["deptime"], 0, -3);
                    $variable10=$row["timeremaining"];
                    $variable11=substr($row["arrtime"], 0, -3);
                    $variable12=$row["distremain"];
                    $variable13=$row["phasedetail"];
                    $variable14= str_pad($row["heading"], 3, " ", STR_PAD_LEFT);

                    ?>
                    Sentence.push("<?php echo " $variable2 $variable7-$variable8 $variable6 $variable13 ";?>")
                    <?php 
                }
        }while(($row = mysql_fetch_array($result3)));
}
?>  

Sentence.push(" ")
Blocs.push(Sentence)
Sentence = new Array()
<?php
if($total)
{
?>
Sentence.push("Arrivées des avions")
Sentence.push(" ")
Sentence.push("Vol:DEP-ARR DEP-H: ARR-H: Avion Statut")
Sentence.push(" ")
<?php
do{
$variable7=$row["phasedetail"];
if(($variable7=="Débarquement") or ($variable7=="Roulage vers la porte"))
{
$variable1=substr($row["pilotname"], 5,5);
$variable2=substr(str_pad($row["flightnum"], 10, " ", STR_PAD_BOTH), 0,10);
$variable3=str_pad(substr($row["aircraft"], 5,5), 5, " ",STR_PAD_RIGHT);
$variable4=$row["lat"];
$variable5=$row["lng"];
$variable6= str_pad($row["alt"], 6, " ", STR_PAD_RIGHT);
$variable7=$row["depicao"];
$variable7=sprintf("%-04s",$variable7);
$variable8=$row["arricao"];
$variable8=sprintf("%4s", $variable8);
$variable9=substr($row["deptime"], 0, -3);
$variable10=$row["timeremaining"];
$variable11=substr($row["arrtime"], 0, -3);
$variable12=$row["distremain"];
$variable13=$row["phasedetail"];
$variable14= str_pad($row["heading"], 3, " ", STR_PAD_LEFT);

                    ?>
                    Sentence.push("<?php echo " $variable7-$variable8 $variable9 $variable11 $variable3 $variable13 ";?>")
                    <?php 
                }
        }while(($row = mysql_fetch_array($result)));
}
?>

Sentence.push(" ")
Blocs.push(Sentence)

Sentence = new Array()
Sentence.push(" ")
Blocs.push(Sentence)

var iDones = new Array() // Tableau des caracteres placés
var TotalDone = 0 // Total des caracteres placés
var RowSpeed = 200 // Interval entre rangée (ms)
var ColSpeed = 100 // Interval entre colonne (ms)
var BlockSpeed = 10000 // Temps d'affichage de bloc de texte (ms)
var LenX = 0 // Nombre de colonnes
var LenY = 0 // Nombre de rangées
var CodeLetter = new Array() // Tableau des symboles HTML
for (i=32; i<255; i++){ if (i<127 || i>160) CodeLetter.push(String.fromCharCode(i))} // Remplissage du tableau
// Cree un chaine avec que des " "
function Str(Len){
var Result = ""
for (s=1; s<=Len; s++){Result += " "}
return(Result)
}
// verification des phrases + mise a la bonne dimension et dimensions du tableau
function CheckLetters(){
var msg = ""
for (i=0; i<Blocs.length; i++){
if (LenY < Blocs.length){LenY = Blocs.length}
for (j=0; j<Blocs.length; j++){
for (a=0; a<Blocs
[j].length; a++){
var isin = 0
for (c=0; c<CodeLetter.length; c++){
if(CodeLetter[c] == Blocs[j].charAt(a)){isin = 1; break}
}
if(!isin){msg += Blocs
[j][a] + " inconnu \n"}
}
if (LenX < Blocs[j].length){LenX = Blocs[j].length}
}
}
if(msg != ""){alert(msg); return(0)}
for (i=0; i<(LenXLenY); i++){iDones.push(0)}
// Remplissage des lignes et caracteres manquants
var diff = 0
for (i=0; i<Blocs.length; i++){
for (j=0; j<Blocs
.length; j++){
diff = LenX-Blocs[j].length
if (diff){Blocs
[j] += Str(diff)} // Complete le reste de la chaine
}
diff = LenY-Blocs.length
if (diff){ for (j=0; j<diff; j++) {Blocs
.push(Str(LenX))} } // creation d'une nouvelle chaine
}
return(1)
}
function InitPanel(Container){
if (!CheckLetters()){return(0)}
// Création du tableau HTML
var table = "<TABLE CELLPADDING=0 CELLSPACING=1 CLASS=Panel>\n"
for (j=0; j<LenX; j++){table += "<COL WIDTH=13>"}
for (i=0; i<LenY; i++){
table += "<TR>"
for (j=0; j<LenX; j++){table += "<TD HEIGHT=18 ID=AF"+i+""+j+" CLASS=PanelCell> </TD>"}
table += "</TR>"
}
table += "</TABLE>"
Container.innerHTML = table
WriteBlock(0)
}
// Retourne L'index du caractere
function CodeIndex(car){
var res = CodeLetter.length
for (i=0; i<CodeLetter.length; i++){if (car == CodeLetter){return(i)}}
return(0)
}
// Passage au prochain bloc de phrases ou au premier
function NextBlock(BlockIndex){
BlockIndex < (Blocs.length-1) ? BlockIndex++ : BlockIndex=0
WriteBlock(BlockIndex)
}
// Lance l'ecriture des phrases
function WriteBlock(i){
for (a=0; a<(LenX
LenY); a++){iDones[a]=0}
TotalDone = 0
for (r=0; r<Blocs.length; r++){setTimeout("WriteRow("+i+", "+r+")",rRowSpeed)}
}
// Lance l'ecriture des lettres
function WriteRow(BlockIndex, RowIndex){
for (l=0; l<Blocs[BlockIndex][RowIndex].length; l++){
eval("var start = CodeIndex(AF"+RowIndex+""+l+".innerText)")
setTimeout("WriteLetter("+BlockIndex+", "+RowIndex+","+l+","+start+")",lColSpeed)
}
}
function WriteLetter(BlockIndex, RowIndex, LetterIndex, CodeIndex){
if (!iDones[(LenX
RowIndex)+(LetterIndex)])
{
eval("var Cel = AF"+RowIndex+""+LetterIndex)
if (Blocs[BlockIndex][RowIndex].charAt(LetterIndex) == CodeLetter[CodeIndex]){
iDones[(LenXRowIndex)+(LetterIndex)]++
TotalDone++
if (TotalDone >= (LenX
LenY)){setTimeout("NextBlock("+BlockIndex+")",BlockSpeed)}
}
Cel.innerText = CodeLetter[CodeIndex]
CodeIndex < CodeLetter.length-1 ? CodeIndex++ : CodeIndex = 0
setTimeout("WriteLetter("+BlockIndex+", "+RowIndex+", "+LetterIndex+","+CodeIndex+")",10)
}
}
}
</script>

[/code]