problemi sullo sfondo

**joeStrom212** · 14-11-2010, 20:57

Salve a tutti ho da poco realizzato un sito web con i frameset mettendo come sfondo una foto sulla home page, allora il principio era questo: attraverso il menu laterale si apre la pagina nella cella centrale, pagina che premetto nn ha alcun sfondo, addesso il problema è questo mentre con browser web tipo ff o chrome funziona tutto alla perfezione, con ie lo sfondo della cella centrale mi esce bianco e quindi si nota la differenza, un altro problema che riscontro con questi browser, è riferito proprio al menu, che essendo uno script in javascript al passare del mouse le barrette si muovono ma in google chorme questo non avviene, vi posto qui di seguito il file mi dite cortesemente in cosa sbaglio?????
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>xxxx</title>

<link href="style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {

$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});

$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});

});
</script>
</head><body><div id="box1">
<table style="text-align: left; width: 800px; height: 222px;" align="center" background="images/sulposto.jpg" border="1" cellpadding="2" cellspacing="2">

<tbody>
<tr>
<td colspan="3" rowspan="1" style="vertical-align: top; height: 125px;">[img]../images/header_1.gif[/img]

</td>
</tr>
<tr height="500">
<td width="250" style="vertical-align: top;">
<ul id="sliding-navigation">
;
<li class="sliding-element">Home
<li class="sliding-element">Chi Siamo
<li class="sliding-element">In Vetrina
<li class="sliding-element">Contattaci

[/list]
</td>

<td rowspan="2" style="vertical-align: top;"><iframe width="550" src="home.html" name="principal" frameborder="0" scrolling="auto"></iframe>

</td>
<td style="vertical-align: top;">

</td>
</tr>
<tr><td></td>

</tr>
</tbody>
</table>

</div></body></html>

Vi chiedo cortesemente di darmi una mano attendo con intrepidazione una vostr risposta, grazie a tutti

**NeoWolf** · 14-11-2010, 21:08

Ciao, nn ho capito un tubo xD
Un paio di consigli, il codice della pagina scrivi tra i tag CODE (che trovi sopra nella barra dove ci sono vari comandi quando scrivi un messaggio.

Togli parti di codice inutile tipo le librerie ecc...

perchè hai messo alcune partidi codice come commento?

**joeStrom212** · 14-11-2010, 21:22

mi scuso per la mia ignoranza, ho messo tutto credendo di fornire una maggiore completezza, della problematica, ma evidentemente non è stato così, comunque adesso riposto il codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
  
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>tarascasa</title>

  
  
  <link href="style.css" rel="stylesheet" type="text/css">

  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  
  <script src="jquery.easing.1.3.js" type="text/javascript"></script>
  
  <script type="text/javascript">

$(document).ready(function () {

$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});

$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});

});
  </script>
</head><body><div id="box1">
<table style="text-align: left; width: 800px; height: 222px;" align="center" background="images/sulposto.jpg" border="1" cellpadding="2" cellspacing="2">

  <tbody>
    <tr>
      <td colspan="3" rowspan="1" style="vertical-align: top; height: 125px;">[img]../images/header_1.gif[/img]

      

      </td>
    </tr>
    <tr height="500">
      <td width="250" style="vertical-align: top;">
      <ul id="sliding-navigation">
;
        <li class="sliding-element">Home
        <li class="sliding-element">Chi Siamo
        <li class="sliding-element">In Vetrina
        <li class="sliding-element">Contattaci
        
[/list]
      </td>
      
      <td rowspan="2" style="vertical-align: top;"><iframe width="550" src="home.html" name="principal" frameborder="0" scrolling="auto"></iframe>
      

</td>
      <td style="vertical-align: top;">

      </td>
    </tr>
   <tr><td></td>
       
    </tr>
  </tbody>
</table>







</div></body></html>

adesoo, come si evince dal codice, c'è un iframe, che carica le pagine del menu, queste pagine non hanno sfondo, quindi dovrebbe comparire lo sfondo della pagina principale di default, questa situazione si verifica per fire fox, google chrome, ma su internet explorer no, inoltre il menù essendo uno script, di javascript ha la caratteristica che quando passa il mouse le barrete del menù si dovrebbero muovere, questo avviene su tutti i browser ma su alcune versioni di google chrome no, adesso spero di essermi spiegato meglio, attendo vostre dritte, grazie per la collaborazione

**NeoWolf** · 14-11-2010, 21:39

Allora, mi dispiace diti che ie e iframe sono 2 parole che sarebbe meglio non accostare mai... Infatti secondo le norme del w3c è deprecato (da non utilizzare) ma l'hanno sostituito con il tag object (altrettanto non compatibile con ie)...
Oltre che gli iframe e similiari hanno dei problemi con l'indicizzazione...

Detto questo, prova a fare dei veri link a pagine e non solo dei href="#" mi sembra che vadano anche con ie....
[Consiglio, per togliere il bordo agli iframe su tutti i browser dagli l'attributo frameborder="0" perchè da css ie non lo prende...]

Fai delle prove con questi due tag è l'unica cosa che ti posso dire...

Passando al jQuery che è un argomento in cui sono piu ferrato

..

Penso che il .stop() non ti serva se ho capito bene cosa vuoi fare o.o
oltretutto crea casini con i webkit (chrome e safari)..

puoi sostituire

codice:

$(".sliding-element a").mouseover(function () {
$(this).stop().animate({ marginLeft: "20px" }, 500 );
});

$(".sliding-element a").mouseout(function () {
$(this).stop().animate({ marginLeft: "0px" }, 500 );
});

con

codice:

$(".sliding-element a").hover(
       function(){$(this).animate({ marginLeft: "20px" }, 500 )},
       function(){$(this).animate({ marginLeft: "0px" }, 500 )}
                                        );

Ultimo consiglo poi smetto di rompere xD

-Invece di ripostare il codice potevi editare il messaggio già fatto

**joeStrom212** · 15-11-2010, 08:51

Ti ringrazio per i consigli li metterò tutti in pratica, spero di riuscirci in quanto non sono molto ferrato, mi sto affacciando al mondo della programmazione web da poco

**joeStrom212** · 15-11-2010, 13:39

esiste un altro modo per poter realizzare quello che io ho fatto nella home page??? cioè avere un menu che apre pagine in un'altra cella della tabella stessa???

**NeoWolf** · 16-11-2010, 00:58

Si apparte i frameset ci sono le chiamate ajax...

**joeStrom212** · 16-11-2010, 08:40

sai dove posso trovare della documentazione in merito alle chiamate ajax???

Discussione: problemi sullo sfondo

Strumenti discussione

Ricerca discussione

Visualizza

problemi sullo sfondo

Permessi di invio