Posizionamento con CSS

**Smuggler** · 6-01-2005, 19:36:02

Sto facenodo delle prove con HTML e CSS, ma ho un problema con il layout.
La pagina � strutturata cos�: c'� un "container" (io lo chiamo cos�) che contiene men�, contenuto vero e proprio ecc. Questo container ovviamente ha un'altezza variabile in base al contenuto.
Fin qui nessun problema, il fatto � che voglio mettere una banner in fondo alla pagina, fuori dal container. Ho provato in vari modi sia dal CSS che dall'HTML ma il banner viene sempre in alto, sovrapposto al resto.
Qualcuno riesce a darmi una mano?

(non mi dite di usare una tabella)

**Bisark** · 6-01-2005, 19:48:13

Aiutarti cos� con senza nulla di concreto sotto le mani � un po' difficile.
Se ci dai un link o ci fai vedere il codice magari ti possiamo aiutare.

**Smuggler** · 6-01-2005, 20:14:25

Hai ragione Bisark.

La pagina HTML � praticamente questa:

Codice:

    <body>
    
    <div id="container">
    
      <div id="logo">
      </div>
    
      <div id="menu">
    	<?php include("includes/menu.html"); ?>
      </div>
    
      <div id="contenuto">
       <span>abcde</span>
      </div>
     
    </div>
    
    <div id="banner">
      <?php include("includes/banner.html"); ?>
    </div>
    
    </body>

Invece il CSS a cui � collegato � questo (ho tagliato certe parti tipo "a" perch� non credo che c'entrino col mio problema):

Codice:

  body
  {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    color: #FFFFFF;
    background-image: url('pagebg.jpg');
    background-attachment: fixed;
    background-repeat: repeat-x;
  }
  
  #container
  {
    width: 700px;
    left: 50%;
    margin-left: -350px;
    position: absolute;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #666666;
  }
  
  #logo
  {
    width: 700px;
    height: 80px;
    margin-bottom: 10px;
    background-image: url('logo.jpg');
  }
  
  #contenuto
  {
    margin-left: 140px;
  }
  
  #menu
  {
    float: left;
  }
  
  #banner
  {
    text-align: center;
  }

#banner sarebbe appunto quello da far stare in fondo.

**Bisark** · 6-01-2005, 22:38:18

Nel CSS su "conteiner" invece di absolute prova a mettere relative, io ho fatto una prova e mi ha funzionato

**Smuggler** · 6-01-2005, 23:14:08

Bisark

Nel CSS su "conteiner" invece di absolute prova a mettere relative, io ho fatto una prova e mi ha funzionato

Mettendo relative il banner resta dov'era prima, in pi� il blocco del contenuto non arriva pi� fino in fondo.

**Bisark** · 6-01-2005, 23:30:57

Guarda come mi si cambia la visualizzazione da absolute a relative:

**Smuggler** · 7-01-2005, 10:55:13

Ma se tu provi ad allungare il menu pi� in basso del contenuto, vedrai che il banner rimane appena sotto il contenuto, sovrapposto al menu.
Come faccio a fargli usare il container come riferimento per la sua posizione? Per es. se io volessi farlo stare 20px pi� in basso del container come faccio?

**kocam** · 7-01-2005, 12:34:01

Codice:

  #container
  {
    width: 700px;
    left: 50%;
    margin-left: -350px;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #666666;
  }

  #banner
  {
    text-align: center;
    position: relative;
    margin-top: 20px;
  }

Cos� mi va

**Smuggler** · 7-01-2005, 12:42:27

kocam

Cos� mi va

Come sopra.
Se metti pi� testo nel menu che nel contenuto il banner si sovrappone al menu.
Sentite non � che magari avete visto qualche sito con l'effetto che intendo io, cos� magari cerco nel CSS...

**Bisark** · 7-01-2005, 12:54:51

Prova a mettere nel container un
padding-bottom: 20px;
So che da un po' di inconvenienti per� a questo punto

**Smuggler** · 7-01-2005, 13:17:00

Niente da fare

Vorr� dire che se mai ci sar� una pagina pi� corta del menu la riempir� di <br/>.
Non sar� elegante, ma almeno funziona...

Amministratori
206567@RedazioneGV	233018@techGV
Guardian
215617@Don Dema	153820@Illuminated
5880@iMaX
Moderatori
95216@Alienware	234323@Bismark
236104@gabry1710	172466@King_Of_Kings_21
26508@Metalmark	28512@MikiM
235165@Redazione Gamesvillage	233457@TheGu
236103@thekingdani	87740@titan2010

Discussione: Posizionamento con CSS

Strumenti Discussione

Posizionamento con CSS

Regole di Scrittura