Problema allineamento...

**Ph:l** · 18-12-2010, 23:06

Qualcuno mi aiuta a risolvere questo problema?

http://meteocaldonazzo.altervista.org/

Con Firefox è tutto allineato mentre con Chrome cambia...

come si carica un foglio di style per chrome?

es. <!--[if lte IE 7]>

**Prill** · 19-12-2010, 10:36

I commenti condizionali sono letti dal solo Explorer, per far caricare un css solo da Chrome (ma il problema è anche in Safari) dovresti ricorrere a javascript, ma non è necessario.
Prova così

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="meteo caldonazzo trento pergine trentino ischia calceranica san cristoforo levico lago">
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lte IE 7]>
<link rel="stylesheet" href="styleIE7.css" type="text/css" />
<![endif]-->
</head>

<body>

<div id="main">
  <div>[img]caldonazzometeo.jpg[/img]</div>
  <map name="Map">
  <area shape="rect" coords="47,708,178,734" href="javascript:void()" onMouseOut="document.getElementById('grafico1').style.visibility='hidden'" onMouseOver="document.getElementById('grafico1').style.visibility='visible'" alt="">
  <area shape="rect" coords="198,707,328,734" href="javascript:void()" onMouseOut="document.getElementById('grafico2').style.visibility='hidden'" onMouseOver="document.getElementById('grafico2').style.visibility='visible'" alt="">
  <area shape="rect" coords="352,707,483,734" href="javascript:void()" onMouseOut="document.getElementById('grafico3').style.visibility='hidden'" onMouseOver="document.getElementById('grafico3').style.visibility='visible'" alt="">
  <area shape="rect" coords="199,738,328,765" href="javascript:void()" onMouseOut="document.getElementById('grafico4').style.visibility='hidden'" onMouseOver="document.getElementById('grafico4').style.visibility='visible'" alt="">
  <area shape="rect"   coords="21,589,42,695" href="javascript:void()"  onMouseOut="document.getElementById('grafico5').style.visibility='hidden'" onMouseOver="document.getElementById('grafico5').style.visibility='visible'" alt="">
  <area shape="rect" coords="21,482,42,587" href="javascript:void()"  onMouseOut="document.getElementById('grafico6').style.visibility='hidden'" onMouseOver="document.getElementById('grafico6').style.visibility='visible'" alt="">
  <area shape="rect" coords="22,374,43,479" href="javascript:void()"  onMouseOut="document.getElementById('grafico7').style.visibility='hidden'" onMouseOver="document.getElementById('grafico7').style.visibility='visible'" alt="">
  <area shape="rect" coords="447,757,552,778" href="Statistics/MyGWStats.php" alt="">
  </map>
  
  <div id="dati">[img]graph1.png[/img]</div>

  <div id="immagini">
    [img]1.jpg[/img]

    [img]2.jpg[/img]

    [img]3.jpg[/img]

  </div>
  
  <div id="grafico1">[img]graph2.png[/img]</div>
  <div id="grafico2">[img]graph3.png[/img]</div>
  <div id="grafico3">[img]graph4.png[/img]</div>
  <div id="grafico4">[img]graph5.png[/img]</div>
  <div id="grafico5">[img]last_hour.png[/img]</div>
  <div id="grafico6">[img]last6hours.png[/img]</div>
  <div id="grafico7">[img]last12hours.png[/img]</div>

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

css

codice:

body{
text-align:center;
}
#main{
width:800px;
height:800px;
margin:0 auto;
text-align:left;
}
#dati{
position:relative;
display: block;
width:400px;
height:400px;
margin-top:-526px;
margin-left:50px;
z-index:auto;
}
#immagini{
position:relative;
display: block;
width: 230px;
margin-top:-465px;
margin-left:550px;
z-index:auto;
text-align:center;
}
#immagini img{
	margin-bottom:30px;
}
#grafico1,#grafico2,#grafico3,#grafico4,#grafico5,#grafico6,#grafico7{
position:relative;
display: block;
z-index:auto;
visibility:hidden;
}
#grafico1 {
margin-top:-625px;
margin-left:50px;
}
#grafico2 {
margin-top:-610px;
margin-left:50px;
}
#grafico3 {
margin-top:-610px;
margin-left:50px;
}
#grafico4 {
margin-top:-610px;
margin-left:50px;
}
#grafico5 {
margin-top:-410px;
margin-left:50px;
}
#grafico6 {
margin-top:-410px;
margin-left:50px;
}
#grafico7 {
margin-top:-410px;
margin-left:50px;
}

aggiunto doctype completo, nel css tutte le unità di misura per margini, larghezze e altezze (non width:400 ma width:400px), aggiunto un contenitore generale.
Nel css ho semplificato, ma ancora le impostazioni comuni possono essere raggruppate insieme evitando tante regole. Dovresti riguardare però i vari margin-top dei grafici perché le immagini si sovrappongono ai link e la loro visualizzazione non è ottimale

**Ph:l** · 19-12-2010, 13:50

sei stato gentilissimo,

in effetti i grafici vari erano tutti fuori posto...

codice:

#grafico1,#grafico2,#grafico3,#grafico4,#grafico5,#grafico6,#grafico7{
position:relative;
display: block;
z-index:auto;
visibility:hidden;
}
#grafico1 {
margin-top:-690px;
margin-left:50px;
}
#grafico2 {
margin-top:-610px;
margin-left:50px;
}
#grafico3 {
margin-top:-610px;
margin-left:50px;
}
#grafico4 {
margin-top:-610px;
margin-left:50px;
}
#grafico5 {
margin-top:-470px;
margin-left:50px;
}
#grafico6 {
margin-top:-420px;
margin-left:50px;
}
#grafico7 {
margin-top:-410px;
margin-left:50px;
}

cosi sembra esser a posto

**Prill** · 20-12-2010, 09:58

sì, mi sembra sia a posto, però considererei qualche problema di visualizzazione che può porsi a risoluzioni non altissime (ma neanche tanto basse, basta avere una finestra non massimizzata e un po' di barre degli strumenti del brwser aperte) e per le dimensioni dei grafici (soprattutto quelli di altezza maggiore) e per la loro attivazione al passaggio del mouse: c'è sì la possibilità di scrollare ma di fatto appena ci si sposta dal link il grafico viene nascosto. Forse potresti prendere in considerazione di rendere visibili i grafici a un click e nasconderli ricliccandoci sopra, ma questo esula da questa discussione e da questo forum.

**Ph:l** · 22-12-2010, 04:23

stesso problema qui... semplice css... diverso con firefox e chrome

http://meteocaldonazzo.altervista.or...e/archivio.php

per veder l'immagine provare il 21 dicembre alle 9 di mattina

codice:

#main{
width:800px;
height:885px;
margin:0 auto;
text-align:left;
}
#dati{
position:relative;
display: block;
margin-top:-585px;
margin-left:290px;
z-index:auto;
}

#webcam{
position:relative;
display: block;
margin-top:-200px;
margin-left:508px;
z-index:auto;
}

**Ph:l** · 23-12-2010, 13:44

nessuno riesce a capire?

**Prill** · 24-12-2010, 10:11

@Ph:l, i problemi sono gli stessi della pagina precedente, seguendo quello schema e inserendo correttamente i margini puoi risolvere, ma c'è da chiedersi se conviene posizionare i div a quella maniera per sovrapporli, con posizionamenti relativi e margini negativi, e dover su ogni pagina ricalcolare le posizioni.
Personalmente sceglerei una soluzione diversa, innanzitutto facendo uso di più immagini di sfondo che siano attribuite ai diversi div (ad esempio il riquadro che fa da sfondo al form potrebbe essere una immagine a sè, così anche il riquadro che fa da sfondo al div con l'immagine centrale), ritaglierei anche l'immagine dell'intestazione e solo quella inserirei come immagine nel codice, sfrutterei eventualmente anche un colore di sfondo e affiancherei i due div col float (racchiudendoli in altro div)

**Ph:l** · 28-12-2010, 20:22

se cambio un margine si sposta però in chrome

Discussione: Problema allineamento...

Strumenti discussione

Ricerca discussione

Visualizza

Problema allineamento...

Permessi di invio