sfondo che si adatta al browser e div allineati

**pati** · 22-06-2014, 16:41

p.s. L'immagine png richiamata ha dimensioni 1319 x 62

**KillerWorm** · 22-06-2014, 16:49

Non capisco. Non dovevano esserci iframe?

Devo aggiungere altri tag <a> alle altre due voci che sono nella testata.

Quali altre voci? Non capisco a cosa ti riferisci.
Devi aggiungere dei tag <a>, ok, ma quale è il problema?

**pati** · 22-06-2014, 17:05

Allora, prima di tutto scusa, ho sbagliato il codice e cancelliamo "iframe". Ti posto quello giusto, il tuo in pratica. Il problema è quello di aggiungere tag <a>

codice:

<!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;
      }
       body{
        overflow: hidden;
        background:url('images/sfondohome.jpg') no-repeat;
        background-size:100% 100%;
      }
      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="verticale">
      <img src="images/loghicentrali.png" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="7,49,328,133" href="euphoria.htm">
        <area shape="rect" coords="537,49,862,133" href="azuree.htm">


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


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

Sempre grazie!!

**KillerWorm** · 22-06-2014, 17:13

Il problema è quello di aggiungere tag <a>

Intendi, al posto dei tag <area>?

**pati** · 22-06-2014, 17:17

Devo mettere altri <a href.......> come quello che hai fatto tu con il layer a fondo rosso nel div "verticale2", alla stessa altezza di quello rosso ma spostati in orizzontale

**KillerWorm** · 22-06-2014, 17:35

Puoi usare degli id o delle classi per definirli e impostarli sul css.

EDIT:
Un esempio:

codice:

<!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;
      }
       body{
        overflow: hidden;
        background:url('images/sfondohome.jpg') no-repeat;
        background-size:100% 100%;
      }
      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;
        background: red; /* da eliminare */
      }
      a#company {
        left: 33.7%;
        top: 24.2%;
        width: 13.6%;
        height: 46.8%;      
      }
      a#altro {
        left: 50%;
        top: 24.2%;
        width: 13.6%;
        height: 46.8%;      
      }
      
    </style>
</head>
  <body>
    <div id="verticale">
      <img src="images/loghicentrali.png" border="0" usemap="#Map">
      <map name="Map">
        <area shape="rect" coords="7,49,328,133" href="euphoria.htm">
        <area shape="rect" coords="537,49,862,133" href="azuree.htm">

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

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

**pati** · 22-06-2014, 17:45

Lo sto facendo, imposto dimensioni e "top" e "left" in percentuale ma se li sposto manualmente in modalità "design" di DW per sistemarli al posto giusto, poi nel browser non seguono la jgp nel ridimensionamento

**pati** · 22-06-2014, 18:18

Ok, finalmente funziona. Ma ho dovuto riavviare il programma, a volte succede.... ora prende le percentuali giuste e i box seguono l'immagine. Ti ringrazio ancora, ma mi sa che ci risentiremo.....

**KillerWorm** · 22-06-2014, 18:25

Oh bene.
Buona serata, alla prossima

**pati** · 22-06-2014, 19:29

Grazie, anche a te

Discussione: sfondo che si adatta al browser e div allineati

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio