Bloccare immagini agli angoli opposti

**dAb** · 07-07-2009, 01:39

Mi sto rimbambendo nel tentare di capire come ottenere quanto segue:

- singola pagina con due immagini e basta
- una da fissare in alto a sx
- una da fissare in basso a dx

codice:

body {
  background: #000 url(altosx.png) no-repeat top left;
}

.footer {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

E nel body:

codice:

[img]bassodx.png[/img]

E fin qui ci siamo. Ma come faccio a far si` che al rimpicciolimento eccessivo della finestra le due immagini non si sovrappongano? Ho tentato di inserire il tutto in un container a dimensione minima fissa ma non ne vengo a capo.

**Mich_** · 07-07-2009, 09:34

Attenzione ad usare i posizionamenti: hanno effetti collaterali brutti (sovrapposizione di oggetti).

Comunque non hai definito le dimensioni, per cui il tuo oggetto con bottom:0; right:0; non sa dove appoggiarsi.

Per poterlo usare devi definire anche:

codice:

html, body {
  width: 100%;
  height: 100%;
}

ma ricorda che anche questo ha effetti collaterali, per cui puoi usarlo solo se il contenuto non esce MAI dalle dimensioni della finestra

**fcaldera** · 07-07-2009, 09:36

una cosa di questo tipo potrebbe andare bene?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>xhtml 1.0</title>

    <style type="text/css">
    div {
        height          : auto !important;
        height          : 600px;  /* somma delle altezze delle immagini */
        min-height    : 600px;  /* somma delle altezze delle immagini */
        position        : relative;
        border           : 1px solid #fcfcfc;
    }

    img { position  : absolute; }

    #img1 { top: 0; left: 0; }
    #img2 { bottom: 0; right: 0; }

    </style>
 </head>

<body>

    <div>
            [img]img300x300.jpg[/img]
            [img]img300x300.jpg[/img]
    </div>

</body>
</html>

**dAb** · 07-07-2009, 22:38

Risolto grazie, mi avete dato buone idee.

codice:

<body>
<div id="container">
  <div id="topleft">
    [img]topleft.jpg[/img]
  </div>
</div>
<div id="bottomright">
</div>
</body>

codice:

* {margin:0;padding:0;} 

html, body, #container {height: 100%; background-color: #000;}
body > #container { height: auto; min-height: 100%;}
#topleft { padding-bottom: 500px; } /*altezza immagine*/

#bottomright {
  position: relative;
  background: #000 url("bottomright.jpg") no-repeat bottom right;
  margin-top: -500px; /*altezza immagine negativa*/
  height: 500px; /*altezza immagine*/
  bottom:0;
  right:0;
}

**dAb** · 11-07-2009, 14:13

Ahia. Cosi` facendo mi ritrovo con un altro problema: come ce la metto un'ulteriore immagine di sfondo sul body?

codice:

body {
  background: #000 url("img/background.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Mi visualizza lo sfondo solo sull'header

**fcaldera** · 11-07-2009, 16:23

all'interno del body puoi mettere un altro elemento div (come wrapper di tutto il contenuto) alto e largo al 100%
e, a quello, assegnare il secondo background

**dAb** · 12-07-2009, 14:25

Il wrapper l'avevo gia` fatto ma sono un cretino, editavo in locale e testavo il risultato online senza fare l'upload

Discussione: Bloccare immagini agli angoli opposti

Strumenti discussione

Ricerca discussione

Visualizza

Bloccare immagini agli angoli opposti

Permessi di invio