sfondo che si adatta al browser e div allineati

**pati** · 19-06-2014, 12:01

Ciao a tutti. Ho un problema che non riesco a risolvere, ho anche spulciato il forum e, pur trovando qualche risposta, non risolvo.
Con Css faccio in modo che un'immagine di sfondo sia adattabile alle dimensioni della finestra del browser e che div al suo interno facciano la stessa cosa. Con il primo div va tutto bene, lo centra verticalmente e orizzontalmente al centro pagina e si adatta alle dimensioni. Il secondo div non ne vuole sapere. Le immagini dello sfondo e del secondo div hanno la stessa larghezza ma quella di sfondo risulta più piccola nel browser, il css stabilisce width e height al 100%.
Questo è il css:

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#sfondo{
position: absolute;
height:100%;
width: 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#verticale2 {
width: 1319px;
height: 62px;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
margin-left: 0px;
overflow: visible;
}

E questo il codice Html:

<!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">
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">

</script>
</head>

<body>

<img src="sfondohome.jpg" alt="" width="1319" height="962" border="0" id="sfondo" />
</div>

<div id="verticale"><img src="loghicentrali.png"></div>

<div id="verticale2"><img src="testata_testo.png" width="1125" height="64"></div>
</body>
</html>

Sbaglio, ma dove? Grazie!

**KillerWorm** · 19-06-2014, 18:16

Ciao,
ti prego, usa i tag [code] [/ code] quando posti del codice sul forum (su "Modalità avanzata" puoi cliccare il pulsantino [#]).

La tua richiesta è incomprensibile, perlomeno per me. Ho fatto fatica a decifrare cosa intendi ottenere.

Quando fai richieste tecniche, cerca di utilizzare la terminologia in modo appropriato.

Con Css faccio in modo che un'immagine di sfondo sia adattabile alle dimensioni della finestra del browser

Nel codice non vedo "immagini di sfondo"

Se parli di immagine di sfondo è presumibile che tu ti riferisca ad un'immagine applicata alla proprietà background di un qualche elemento. Nel tuo caso possiamo parlare più propriamente di un elemento <img> che funge da sfondo o che sta dietro gli altri elementi. Tuttalpiù puoi definirla come "immagine con id=sfondo" o "immagine #sfondo" in modo che sia chiaro che tu ti riferisca ad un elemento con quell'id e non ad un immagine impostata come background.

e che div al suo interno facciano la stessa cosa.

Div al suo interno?

Dentro l'elemento <img> (dato che è un elemento vuoto) non è possibile che ci siano dei div o qualsiasi altra cosa.
Più propriamente, i div sono sopra l'immagine #sfondo.

Con il primo div va tutto bene, lo centra verticalmente e orizzontalmente al centro pagina e si adatta alle dimensioni.

Si adatta alle dimensioni?

Che si posizioni al centro potrebbe anche essere, ma non mi pare si adatti alle dimensioni. Dicendo questo si presume che quel div subisca una variazione di larghezza e/o altezza. Ma a quanto vedo, queste dimensioni restano fisse.

Il secondo div non ne vuole sapere. Le immagini dello sfondo e del secondo div hanno la stessa larghezza ma quella di sfondo risulta più piccola nel browser, il css stabilisce width e height al 100%.

Come hai giustamente detto: "il css stabilisce width e height al 100%". Questo lo fa solo per l'immagine che sta dietro (immagine di sfondo) ma, da quel che vedo, il secondo div ha delle dimensioni fisse, così come l'elemento <img> che sta al suo nterno.

Se il tuo intento è far adattare la larghezza dell'immagine che sta nel secondo div, allora dovrai applicare in qualche modo una larghezza al 100%.

Potrebbe essere una cosa del genere:

codice:

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%;
}

Inoltre, non ha senso impostare width ed height direttamente sui tag html se poi vai a reimpostarli attraverso css. Sarebbe comunque meglio (se non è necessario diversamente) impostare queste proprietà solo attraverso il css.

Ancora, per l'immagine di sfondo puoi risolvere in modo più semplice impostandola direttamente come background del body, e impostando background-size al 100%. In questo modo vai chiaramente ad eliminare il relativo tag <img id="sfondo">.

Una cosa del genere:

codice:

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 body{
    overflow: hidden;
    background:url('sfondohome.jpg') no-repeat;
    background-size:100% 100%;
}

Spero di non essere stato troppo polemico. Ma, ti prego, usa i tag code la prossima volta

**pati** · 19-06-2014, 19:11

No, non sei stato troppo polemico. Se una sbaglia, è giusto che le sia detto. Ho sbagliato a postare il codice e forse mi sono spiegata male. Comunque tu hai capito praticamente tutto e ho provato con i tuoi suggerimenti. E' proprio quello che cercavo! Grazie!!!

**pati** · 19-06-2014, 19:52

Se posso aggiungere una piccola cosa, ridimensionando la finestra del browser, l'immagine del primo div "verticale" resta al centro della pagina. Quella che sta nel secondo div "verticale2" si ridimensiona ma si deforma un po'. Tra l'altro, ci sono due aree sensibili sul div centrale, con link. Rimanendo il div in posizione centrale, pur ridimensionando la finestra, queste aree sensibili restano e i link funzionano sempre. Se faccio lo stesso con il div "verticale2", chiaramente no...... Chissà se questa volta mi sono fatta capire? Speriamo!

**KillerWorm** · 19-06-2014, 20:09

Se posso aggiungere una piccola cosa

Certo, nessun problema. Siamo qui per questo.

Quella che sta nel secondo div "verticale2" si ridimensiona ma si deforma un po'.

Intendi col codice che ho postato io? Sì, è corretto. Non volevi questo?
In tal caso indica cosa vuoi ottenere con quel div.

Tra l'altro, ci sono due aree sensibili sul div centrale, con link. Rimanendo il div in posizione centrale, pur ridimensionando la finestra, queste aree sensibili restano e i link funzionano sempre. Se faccio lo stesso con il div "verticale2", chiaramente no.....

Non ho idea di come si comportino queste aree. Fammi capire come dovrebbero comportarsi. Nel codice che hai postato non le vedo. Puoi postare un codice d'esempio? (... ricordati i tag di formattazione)

**pati** · 19-06-2014, 21:35

Hai ragione, non li vedi perchè li ho aggiunti dopo. Quello che vorrei ottenere con il div "verticale2" è che, come lo sfondo, segua il ridimensionamento della finestra, e questo con il tuo codice lo fa. Avrei voluto mettere sopra il div degli hotspot in dreamweaver, come ho fatto per il primo div. Solo che mi rendo conto di non poterlo fare, dato che ridimensionando la finestra del browser, anche il div si ridimensiona. Il primo div "verticale" invece resta al centro pagina comunque e mantiene le sue dimensioni, e così i suoi hotspot. Ora posto il codice html e spero di farlo bene!

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">
<link href="style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">


</script>


</head>


<body>




<div id="verticale"><img src="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="testata_testo.png" border="0" usemap="#Map2">
  <map name="Map2">
    <area shape="rect" coords="444,15,624,44" href="company.htm">
  </map>
</div>






</body>
</html>

Ciao e grazie

**KillerWorm** · 20-06-2014, 00:34

Si potrebbe pensare di impostare in percentuale le coordinate dell'area. Purtroppo questo, da quel che so, non è ben visto dalla maggior parte dei browser.

Probabilmente esistono anche degli script in javascript che ricalcolano runtime le varie coordinate quando l'immagine subisce un ridimensionamento.

Nel tuo caso però, per ovviare al problema in modo semplice, si consiglia solitamente l'utilizzo di normali tag <a> che, impostati opportunamente, vanno a sostituire le aree. Chiaramente il discorso è valido giusto per aree di forma rettangolare.

Ti posto un esempio in cui ho rielaborato il tuo codice:

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('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="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="testata_testo.png">
      <a href="company.htm"></a>
    </div>
  </body>
</html>

PS: [CODE]

[/ CODE]

**pati** · 20-06-2014, 11:08

Grazie mille, mi sei davvero di grande aiuto. Ora ci lavoro. Ma ieri ho sbagliato ancora a postare il codice?!? preoccupante.....

PS: [CODE]

[/ CODE][/QUOTE]

**KillerWorm** · 20-06-2014, 11:42

Grazie mille, mi sei davvero di grande aiuto. Ora ci lavoro. Ma ieri ho sbagliato ancora a postare il codice?!? preoccupante.....

Figurati

No, hai usato il code in modo giusto. La mia era un'espressione di approvazione/gioia.
Ora però hai sbagliato col quote... ma non ha importanza
Buon proseguimento.

**pati** · 20-06-2014, 11:46

L'avevo scambiata per un'espressione di "presa in giro" bonaria, ovviamente!! E lasciamo stare il Quote, va'.... un passo alla volta!!! C'è solo una cosa che ancora non capisco: perchè, se per i due div usavo gli stessi esatti criteri, uno funziona in un modo e l'altro no? .....Buon proseguimento anche a te

Discussione: sfondo che si adatta al browser e div allineati

Strumenti discussione

Ricerca discussione

Visualizza

sfondo che si adatta al browser e div allineati

sfondo che si adatta al browser e div allineati

Permessi di invio