posizionamento div in contenitore

eliven

posizionamento div in contenitore

Ciao a tutti,
ho provato a cercare e mi scuso se apro una discussione che tratta un argomento diffuso, ma non riesco a risolvere un problema di posizionamento div.
Ho due div contenitori (che si adattano alla grandezza della finestra) che appunto dividono in 2 parti la pagina html, un div top e un div bottom.
Quello che devo fare è allineare nella parte bassa del div top un'immagine centrandola orizzontalmente in base quindi alla grandezza della finestra, mentre nel div bottom devo allinare, sempre al centro, ma questa volta nella parte alta del div contenitore un menu che al momento ho creato con una tabella.
Ho provato in vari modi ma non riesco a centrare orizzontalmente l'immagine, ecco il codice CSS:


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

body {
    font-family:"Times New Roman", Times, serif;
    font-size: 1em;
    color: #000000;
    background-color: #ffffff;
    line-height: 1em;
}  

#top, #bottom {
height:50%;
}  
 {
      background-color:#fff;
      width:100%;
} {
       background-color:#d1d3d4;
       width:100%;
}

.header {
    position:relative;
    height:100%; }

.logo {
    position: absolute;
    bottom:0;
    left:50%;
}

```Mentre il codice della pagina HTML è questo:

<body>
<div id="top">
<div class="header">
<img src="graphics/logo.jpg" alt="" width="361" height="101" align="bottom" class="logo"/>
</div>
</div>
<div id="bottom">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2">
<tr align="center">
<td colspan="4"><img src="graphics/trasp.gif" width="15" height="20" /></td>
</tr>
<tr align="center">
<td width="125"><img src="graphics/label-ross.jpg" alt="home" width="24" height="25" /></td>
<td width="125"><img src="graphics/label-grigio.jpg" alt="Contatti" width="24" height="25" /></td>
<td width="125"><img src="graphics/label-grigio.jpg" alt="Cantieri" width="24" height="25" /></td>
<td width="125"><img src="graphics/label-grigio.jpg" alt="Proposte Immobiliari" width="24" height="25" /></td>
</tr>
<tr align="center" valign="top">
<td>Home</td>
<td>Contatti</td>
<td>Cantieri</td>
<td>Proposte <br /> Immobiliari</td>
</tr>
</table>
</div>
</body>

vi ringrazio tanto per l'aiuto,
elisa :ciauz:

codencode

Un possibile modo consiste nell'aggiungere nella classe .logo l'istruzione


margin-left: -metà della larghezza dell'immagine;

eliven

@codencode said:

Un possibile modo consiste nell'aggiungere nella classe .logo l'istruzione

>
margin-left: -metà della larghezza dell'immagine;

>```


ti ringrazio tanto...quindi mettendo

.logo
{
position: absolute;
bottom:0;
left:35%;
margin-left:-180px;
}


in altre parole devo farsì che tutto il contenuto della pagina si adatti, il più possibile, alla risoluzione del monitor...è possibile?

codencode

Scusami, non capisco il 35%...

codencode

Io ho modificato la classe in questo modo

.logo
{
    position: absolute;
    bottom:0;
    left:50%;
    margin-left:-180px;
}

e funziona.

manetta

Prova a linkare l'imagine direttamente nel css:


#top {
background: #ffffff url("immagine.jpg") no-repeat bottom center;
      width:100%;
}

eliven

@codencode said:

Io ho modificato la classe in questo modo

>.logo
{
    position: absolute;
    bottom:0;
    left:50%;
    margin-left:-180px;
} 
>```e funziona.

ecco si avevo lasciato un valore errato, ti ringrazio.
Avrei un altro problema, dal codice che ho postato ad inizio post vorrei che i tag #top e bottom, si adattassero alla risoluzione del monitor, è possibile?
ti ringrazio tanto per l'aiuto
elisa :ciauz:

codencode

Come vuoi che si adattino?

eliven

@codencode said:

Come vuoi che si adattino?

vorrei che si adattassero in base alla risoluzione del monitor.
ho fatto delle modifiche rimetto il codice aggiornato della pagina interna del sito:

foglio di stile:


html, body 
{
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%;
}
#top-scheda
{
      position:relative;
    background-color:#fff;
    
}

#bottom-scheda
{
      background-color:#d1d3d4;
    min-height:20%;
    
}

.indirizzo
{
    padding:1%;
    letter-spacing:2px;
    font-size:0.70em;
}



```pagina in html:

<div id="top-scheda">
tabella con contenuti
</div>
<div id="bottom-scheda">
<table width="500" border="0" align="center" cellpadding="2" cellspacing="2">
<tr align="center">
<td colspan="4"><img src="graphics/trasp.gif" width="15" height="20" /></td>
</tr>
<tr align="center">
<td width="125"><a href="index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('box-home','','graphics/label-ross.jpg',1)"><img src="graphics/label-grigio.jpg" alt="Home" name="box-home" width="24" height="25" border="0" id="box-home" /></a></td>
<td width="125"><a href="contatti.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('box-contatti','','graphics/label-ross.jpg',1)"><img src="graphics/label-grigio.jpg" alt="Contatti" name="box-contatti" width="24" height="25" border="0" id="box-contatti" /></a></td>
<td width="125"><a href="cantieri.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('box-cantieri','','graphics/label-ross.jpg',1)"><img src="graphics/label-grigio.jpg" alt="Cantieri" name="box-cantieri" width="24" height="25" border="0" id="box-cantieri" /></a></td>
<td width="125"><img src="graphics/label-ross.jpg" alt="Proposte Immobiliari" width="24" height="25" /></td>
</tr>
<tr align="center" valign="top" class="label-menu">
<td>Home</td>
<td>Contatti</td>
<td>Cantieri</td>
<td>Proposte <br />
Immobiliari</td>
</tr>
</table>
<div class="indirizzo" align="center">dati recapiti ecc ecc</div>
</div>


Ti ringrazio per l'aiuto,
elisa :ciauz:

codencode

Perdonami, ma c'è qualcosa che non capisco...
Il codice che hai postato adesso è diverso da quello di prima.
Va usato al posto di quello vecchio ma vuoi ottenere l'effetto che ottenevi quando c'era l'immagine? O cosa?
E "tabella dei contenuti" è una vera e propria tabella? Va allineata come era l'immagine, in fondo al contenitore top?