DIV in basso a sinistra

**Cesar** · 11-11-2010, 01:01

Ciao a tutti,
(scusate il titolo.., ma non sono riuscito a trovarne uno migliore)

Avrei bisogno di capire come posizionare un div in basso a sinistra (senza che segua il scroll della pagina).

Vi posto l'idea:

Vi ringrazio in anticipo!

**codencode** · 11-11-2010, 11:00

Assegni al div le dimensioni e come position assegni fixed bottom left.

**Cesar** · 12-11-2010, 13:01

Originariamente inviato da codencode
Assegni al div le dimensioni e come position assegni fixed bottom left.

Grazie mille. Il problema che segue il scroll della pagina...

**codencode** · 12-11-2010, 13:05

Strano... Si può vedere il sito (anche solo in una sezione temporanea)?

**Cesar** · 12-11-2010, 13:57

Originariamente inviato da codencode
Strano... Si può vedere il sito (anche solo in una sezione temporanea)?

Per momento sto lavorando solo in locale.

Il codice è comunque questo:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Porva</title>
<style media="all" type="text/css">
div#natale { width: 300px; height: 135px; background-image: url(angolo_natale.jpg); background-repeat: no-repeat; color: white; text-align: left; position: absolute; bottom: 0; left: 0;}*
</style>
</head>

<body>

Prova 














































































































































































































































































<div id="natale"></div>
</body>
</html>

All'apertura della pagina, il div "natale" è effettivamente situato nell'angolo sinistro in basso, ma facendo il scroll, lui rimane sempre nella stessa posizione.

Io vorrei inserirlo sempre in basso a sinistra indifferentemente dalla lunghezza della pagina (come dall'immagine postata prima).

**Mich_** · 12-11-2010, 15:50

position:fixed;
non absolute
PS: non funziona in IE6

**Cesar** · 12-11-2010, 16:12

Originariamente inviato da Mich_
position:fixed;
non absolute
PS: non funziona in IE6

Non cambia niente... Rimane sempre nel angolino sinistro in basso, ma segue lo scroll...

Io voglio che rimanga in fondo alla pagina e che non segua lo scroll.

**Mich_** · 12-11-2010, 16:22

Originariamente inviato da codencode
Strano... Si può vedere il sito (anche solo in una sezione temporanea)?

C'e` qualche erorre da qualche parte, ma non si riesce a vederlo cosi`: serve che tu posti un link.

**Cesar** · 12-11-2010, 16:37

Originariamente inviato da Mich_
C'e` qualche erorre da qualche parte, ma non si riesce a vederlo cosi`: serve che tu posti un link.

Eccolo qui: http://www.regalatu.it/test/prova.html

**Mich_** · 12-11-2010, 17:32

Originariamente inviato da Cesar
Eccolo qui: http://www.regalatu.it/test/prova.html

Funziona perfettamente (FF 3.0)

Ci sono in effetti un po' di problemi di HTML, e dato che usi la DTD transitional, i vari IE cercano di imitare IE5, e non capiscono il "fixed".

Comunque la struttura della pagina andrebbe impostata cosi`:

codice:

HTML:

<!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">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Prova</title>
  <link media="all" type="text/css" rel="stylesheet" href="..." />
</head>

<body>
  <div id="wrapper">
    

qui tutto il tuo sito </p>
    

tutti i br che vuoi (ma mettici anche qualche scritta, in modo che si veda quando la pagina scrolla)</p>
  </div> 

  <div id="natale">&amp;nbsp;</div> 
</body>
</html>

CSS:
div#wrapper {
  ...
}

div#natale {
  width: 300px;
  height: 135px;
  background-image: url(angolo_natale.jpg);
  background-repeat: no-repeat;
  color: white; text-align: left;
  position: fixed;
  bottom: 0; left: 0;
  margin-left: 0px;
  margin-bottom: 0px;
}

Discussione: DIV in basso a sinistra

Strumenti discussione

Ricerca discussione

Visualizza

DIV in basso a sinistra

Permessi di invio