sfondo che si adatta al browser e div allineati

[KillerWorm]

perchè, se per i due div usavo gli stessi esatti criteri, uno funziona in un modo e l'altro no?

Non capisco cosa intendi.
Da quel che vedo nel tuo primo codice (se di questo stiamo parlando) non mi pare che tu abbia usato gli stessi criteri:

div#verticale {
width: 872px;
height: 181px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -436px;
overflow: visible;
}
div#verticale2 {
width: 1319px;
height: 62px;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
margin-left: 0px;
overflow: visible;
}

In particolare top e left fanno la differenza (per quel che riguarda il posizionamento).
Il primo div si porta al centro (top e left 50%) mentre il secondo resta "bloccato" in alto a sinistra (top e left 0).

Per quanto riguarda le dimensioni, entrambi i div avevano dimensioni fisse.

Chiaramente ora, col codice rielaborato, il secondo div si ridimensiona in larghezza perché ha width 100%.
Era ciò che avevi richiesto, giusto?

Cosa non ti torna?

[pati]

Sì, mi riferivo al primo codice postato. Cambiano i numeri, tipo le dimensioni e il posizionamento nella pagina dei due div, perchè uno mi serve centrato verticalmente e orizzontalmente, l'altro solo orizzontalmente. Però il primo resta al centro e si muove portandosi dietro gli hotspot, l'altro no. Volevo solo cercare di capire questo. E' questo che non capisco. Per quanto riguarda il tuo codice, non ci sono problemi, fa quello che richiedevo.

[KillerWorm]

Però il primo resta al centro e si muove portandosi dietro gli hotspot, l'altro no

Perdonami ma continuo a non capire bene cosa intendi.
Sul tuo primo codice, il secondo div aveva posizione e dimensioni fisse. Questo significa che non si sposta e non si ridimensiona. Risulta inoltre scontato che anche gli hotspot (al suo interno) rimangono nella stessa posizione dal momento che "dipendono" dalla posizione di quel div.
E' questo ciò che intendevi?
Nel caso non lo fosse, potresti postare esattamente il codice a cui ti riferisci e rispiegarmi cosa non ti torna?

[pati]

Entrambi i div avevano dimensioni e posizioni fisse, diverse fra loro ovviamente, ma fisse, si vede dal codice che hai postato questa mattina. Penso che il problema sia che il primo div ha dimensioni più piccole. Il secondo ha praticamente la larghezza della jpg dello sfondo. Quindi, ridimensionando la finestra, il primo div resta centrato e visibile fino a che non si raggiunge una larghezza inferiore alla sua e allora viene "tagliato". Per il secondo div, appena si ridimensiona la finestra e si fa un po' più piccola, già si "taglia". Quello che hai fatto tu va bene, certo la jpg di deforma ed è "bruttino" visivamente. Ora basta trovare una soluzione grafica che mi permetta di avere centrato il secondo div il più possibile!

[KillerWorm]

Se devi semplicemente centrare il secondo div basta impostare margin: 0 auto;

Una cosa del genere:

div#verticale2 {
  width: 1319px;
  height: 62px;
  margin: 0 auto;
}

[pati]

Si, e' il primissimo codice che ho utilizzato ma il problema resta sempre quelle delle dimensioni, come ti ho detto ieri. Essendo la jpg del secondo div larga tanto quanto quella che fa da sfondo, ridimensionando la finestra resta centrata ma o si taglia appena si va sotto la sua larghezza o, con il tuo codice, si deforma. Pensavo a due file separati e riuniti con "iframe".....

[KillerWorm]

Pensavo a due file separati e riuniti con "iframe".....

Non ti seguo, ma se così risolvi, buon per te.

Io ti consiglierei piuttosto un'immagine ridimensionabile ma che mantenga le proporzioni. Magari impostandogli anche una dimensione massima.
Il discorso però può complicarsi perché devi fare i conti con i vari altri elementi nel layout.

[pati]

Unendo due file in un altro richiamandoli con iframe funziona tutto bene. Il problema ora è che sto usando il tuo codice ma se aggiungo un altro tag a, il link funziona solo sul secondo....

[KillerWorm]

Scusa ma non capisco l'utilizzo di iframe e non vedo cosa c'entra col problema in oggetto. Ho perso il filo del discorso.
Prova a postare il tuo codice attuale e spiega meglio quale è il problema.

[pati]

Ciao, ti posto il codice, che poi è quello che hai postato tu ieri. Devo aggiungere altri tag <a> alle altre due voci che sono nella testata.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Untitled Document</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      html, body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }


      div#verticale {
        width: 872px;
        height: 181px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -90px;
        margin-left: -436px;
        overflow: visible;
      }
      div#verticale>img {
        width: 100%;
        height: 100%;
      }
      div#verticale2 {
        width: 100%;
        height: 62px;
        position: absolute;
        top: 0;
        left: 0;
        margin-top: 0px;
        margin-left: 0px;
        overflow: visible;
      }
      div#verticale2>img {
        height:100%;
        width: 100%;
      }
      div#verticale2>a {
        display: block;
        position: absolute;
        left: 33.7%;
        top: 24.2%;
        width: 13.6%;
        height: 46.8%;
        
        background: red; /* da eliminare. L'ho messo solo per vedere l'area */
      }


    </style>
</head>
  <body>


    <div id="verticale2">
   <img src="images/testata.png" border="0" usemap="#Map">
      <a href="company.htm"></a>


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

Grazie, domenica al lavoro!