Problema visualizzazione div con Opera

**Eugene** · 19-10-2005, 03:13

Buonasera

In una pagina html ho inserito una comunissima struttura con i div container, header, center e footer.

Ogni div, tranne l'ultima, ha un'altezza prestabilita e degli elementi testuali all'interno.
Facendo le prove sui diversi browser mi sono accorto che Opera mi fa vedere l'ultima div (footer) spostata in basso di una quindicina di pixel (nonostante abbia impostati i vari margini e padding su 0).
La cosa strana è che non appena attribuisco un bordo alla div superire (center) l'allineamento va a posto come per gli altri browser, ma eliminando il bordo tutto torna come prima.

Mi potete dare una mano?

Grazie e buonanotte.

**thomas_anderson** · 19-10-2005, 10:31

ciao!
Io uso Opera 8.x. Potresti mettere una pagina online così mi rendo meglio conto? ciao

**Eugene** · 19-10-2005, 14:21

Certamente, ecco qua!

Come potrai notare, l'ultima riga di testo (quella con il copyright e la firma) dovrebbe apparire all'interno della fascia color cacarella, mentre con Opera appare nel fascione scuro.

Ecco il css:

body {
margin: 0;
padding: 0;
background-color: #782710;
background-image: url(../images/bkg_index.gif);
background-attachment: fixed;
background-repeat: repeat-x;
background-position: center center;
}

div#container {
position:absolute;
top:50%;
left:50%;
width: 780px;
height: 423px;
margin-left:-390px;
margin-top:-211px;
text-align: center;
}

div#header {
margin-top:17px;
height: 255px;
background-image: url(../images/rosa_index.gif);
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}

.h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #000000;
text-decoration: none;
}

.ita {
margin-left: 225px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #C59841;
text-decoration: none;
float: left;
}

.ita:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #782710;
text-decoration: underline;
}

.eng {
margin-right: 225px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #C59841;
text-decoration: none;
float: right;
}

.eng:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #782710;
text-decoration: underline;
}

div#center {
height: 80px;
}

div#alert {
padding: 0px;
margin: 0px;
height: 52px;
/*visibility:hidden;*/
text-align: left;
background-image: url(../images/blocco_ie.gif);
background-repeat: no-repeat;
background-position: left 20px;
}
/*
* html div#alert{
visibility:visible;
}
*/
.h2 {
padding-left: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
margin-top: 0px;
color: #666666;
}

.alertBold {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7pt;
color: #782710;
font-weight: bold;
}

div#footer {
padding-top: 3px;
}

.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #F6E562;
text-decoration: none;
float: left;
}

.yodaLink {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #F6E562;
text-decoration: none;
float: right;
}
.yodaLink:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
text-decoration: none;
}

.address {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #782710;
text-decoration: none;
}

**thomas_anderson** · 19-10-2005, 17:24

Il codice XHTML è questo:

<body>
<div id="container">
<div id="header">

<span class="h1">INGEGNERIA MARITTIMA ED AMBIENTALE</span>

italiano english</div>
<div id="center">

<span class="address">Acquatecno srl - Via Goito, 39 - 00185 - Rome - Italy - PI: 01921391007</span></div>
<div id="alert"><p class="h2">Una corretta navigazione richiede, qualora attivo, la disattivazione temporanea del blocco della <span class="alertBold">Barra informazioni</span> di <span class="alertBold">Internet Explorer</span>.

<span class="alertBold">ACQUATECNO Srl</span> garantisce sulla sicurezza dei contenuti del proprio sito.
A correct navigation may entail disactivating, if it is active, the blocking system of the <span class="alertBold">Information bar</span> in <span class="alertBold">Internet Explorer</span>.
<span class="alertBold">ACQUATECNO Srl</span> guarantees the content security on its own site.</p></div>
<div id="footer"><span class="copyright">copyright 2005 ACQUATECNO</span>YODA studio
</div>
</div>
</body>

Ti consiglio di togliere i tag
per ottenere una spaziatura fra elementi. Semplicemente, puoi ottenere la stessa cosa con altri <div> posizionati esattamente tramite marginatura o altro. Il footer dovresti dichiararlo integralmente, con un height, ed il padding sia superiore che inferiore. Una nota sui font usati: l'untità di misura pt va bene per la stampa ma non per lo schermo. Per migliorarne l'accessibilità ti consiglio di usare le percentuali % o gli em.

Inoltre ti consiglio di non dichiarare classi che abbiano lo stesso nome di elementi (come <h1> o<address>).

**thomas_anderson** · 19-10-2005, 17:56

Credo che quella striscia sia il background che emerge, giusto? Hai provato a rivedere le dimensioni dei box? Potresti anche usare:

codice:

<body>
<div id="banner"></div>
<div id="center"></div>

</div id="footer"></div>

</body>

Un CSS raw sarebbe:

codice:

#banner {
  width: 100%;
  height: specifica;
  padding: xxx;
  margin:0;
  background: #xxx
  color:#000;
}
#center {
  margin: 50px 250px 0 250px;
  padding: a piacere;
}
#footer {
  width: 100%;
  height: specifica;
  padding: xxx;
  /* ecc. ecc. */
}

Ti ho preparato anche un eesempio di blocchi posizionati solo con la marginazione: http://www.parrocchie.it/vasto/sminc...lock/block.htm

Discussione: Problema visualizzazione div con Opera

Strumenti discussione

Ricerca discussione

Visualizza

Problema visualizzazione div con Opera

Permessi di invio