Master/Detail e visualizzazione footer

**iceberg** · 23-09-2006, 15:41

Ciao, ho una masterpage (ASP.NET) definita in questo modo

<form id="form1" runat="server">
<div class="header">
<div class="header-logo"></div>

<div class="navbar">
<asp:SiteMapPath id="SiteMapPath1" runat="Server" PathSeparator=" > " RenderCurrentNodeAsLink="true" />
|
<asp:LoginStatus ID="LoginStatus1" Runat="server" />
</div>
</div>
<asp:contentplaceholder id="Main" runat="server" />
<asp:sitemapdatasource id="SiteMapDataSource1" runat="server" startingnodeoffset="0" />
<div id="footer-bar">
<div class="bottomleft">
<div class="contenuto">

Testo Testo Testo</p>
<ul>
.....[/list]
</div>
</div>
</div>
</div>
</form>

e un content cosi

<div id="content">

<div id="menu-sx">
</div>

<div id="center-area">
</div>

<div id="menu-dx">
</div>

</div>

il CSS è qualche cosa del tipo:

#content {
position: relative;
width: 760px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 0px
}

#menu-sx {
position: absolute;
border: 0;
top: 0;
left: 0;
width: 190px;
padding: 0px 0px;
margin-left: 0px;
padding-top: 0px; /* Weird Mozilla Bug */
padding-bottom: 40px; /* Weird Mozilla Bug */
}

#menu-dx {
position: absolute;
border: solid 1px #dbdfe4;
top: 0;
right: 0;
width: 180px;
padding: 0px 0px;
margin-left: 0px;
padding-top: 0px; /* Weird Mozilla Bug */
padding-bottom: 40px; /* Weird Mozilla Bug */
}

#center-area {
position: relative;
top: 0;
left: 0;
width: 370px;
border: 0;
padding: 0px 0px;
margin: 0 183px 0 205px;
}

#footer-bar {
width:760px;
height:30px;
clear:left;
padding-bottom:8px;
font-size:11px;
margin-left: auto;
margin-right: auto;
padding: 3px 0px;
}

#footer-bar .contenuto {
float:left;
height:28px;
line-height:28px;
background-image: url(Images/BKGMenu.gif);
background-repeat: repeat-x;
border-bottom:50px #FFF;
}

footer-bar .bottomleft {
background:#89CE73 url(Images/footer.gif) bottom left no-repeat;
height:33px;
}

il CSS che ho creato è corretto??? Vorrei avere vostra conferma...

in caso affermativo ho questo problema: il footer (presente nel master) viene visualizzato correttamente (in fondo a tutti i contenuti) solo se l'area centrale è abbastanza lunga, in caso contrario si sovrappone alle barre laterali, questo vuol dire che la parte centrale (che condiziona il footer) deve essere sempre piu lunga delle aree SX e DX... Dove ho sbagliato??

Grazie

**Mich_** · 25-09-2006, 09:47

Ci sono alcuni problemi con la domanda.
1. hai postato codice lato server: per una risposta in questo forum devi postare il codice che arriva al browser (ad esempio vedi "visualizza sorgente" dal menu del tasto destro del mouse)
2. "in caso affermativo" questo presupporttebbe che la pagina che visualizzi e` un'altra (e non quella postata).

PS: quando posti del codice lungo nel forum, usa gli appositi tag VB, in modo da preservare l'indentazione, altrimenti e` dififcile per noi umani seguire il flusso (vedi bottone con # sopra il form di inserimento.

**iceberg** · 25-09-2006, 12:05

Scusa se ho fatto un po di casino

l'html prodotto è qualche cosa del tipo (ho semplificato...), come indicato nel post precedente il problema è nel footer, immagino di dover cambiare la disposizione delle colonne di SX e DX

Codice PHP:




<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>

    <link href="CSS/MyPortal.css" type=text/css rel=stylesheet />

    <link href="CSS/MyPortalContextMenu.css" type=text/css rel=stylesheet />

    <title></title>

</head>

<body>

    <form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">



        <div class="header">

            <div class="header-logo">APP.COM</div>

            




            



        

                

<script src="JS/MyPortalContextMenu.js"></script>    







    <div id="content">

    

        

        <div id="menu-sx">    





      <td valign="top">

              

            


            


            


            


            


            


            


        </div>

        

        <div id="center-area">    

            <table style="border:0px solid red;width:100%;height:100% padding-top: 0px; margin: 0px; padding-bottom: 19px;" cellpadding="0" cellspacing="0">

                            <tr>

                                <td>                     

                </td>

                            </tr>

                        </table>    

        

        </div>

        

        <div id="menu-dx">

            


            


            


                    

    </div>         

    

  </div>  

        

        

        <div id="footer-bar">

            <div class="bottomleft">

                <div class="contenuto">

                    <ul>[*][url="#"]tttt[/url]

            [*][url="#"]tttt[/url][/list]

                </div>

            </div>

        </div>      

    

</form>        

</body>

</html>

**Mich_** · 25-09-2006, 12:25

Stai mescolando posizionamenti diversi, e questo non piace ai browser.

Il mio consiglio e` eliminare completamente tutti i position, ed usare tutto float (ma in questo le scuole si dividono).

Tieni presente che molti browser sbagliano a trattare blocchi innestati quando:
- dei blocchi float sono inseriti dentro dei blocchi non-float
- ci sono diversita` di posizionamenti (in particolare i posizionamenti assoluti possono essere eliminati dal flusso normale dei blocchi).

**iceberg** · 25-09-2006, 13:04

Ti ringrazio per il consiglio, potresti dirmi come dovrei modificare gli stili che ho postato nel mio primo messaggio??

Grazie mille

**Mich_** · 25-09-2006, 14:49

Inizia con il togliere tutti i position, e tutti i top e left; poi da` a tutti i blocchi:
float: left;
(al menu a destra: float: right; , solo se lo inserisci prima del blocco centrale).
Al footer dovrai anche dare il clear: both;

Poi immagino che i margini andranno eliminati (messi a zero o a qualche valore piccolo).

Dovrebbe essere piu` o meno corretto, salvo piccoli aggiustamenti nei margini.

Qualcuno ci mette anche un contenitore che racchiude i tre blocchi che stanno affiancati: non e` obbligatorio, ma puo` servire per inquadrare meglio il tutto (ad esempio per limitare la larghezza complessiva).

**iceberg** · 25-09-2006, 14:58

Grazie mille! Ora faccio un po' di prove. Un dubbio: tolgo tutti i position OK... quindi tengo solo l'indicazione del width della mia area (SX, Centrale, DX)??
Thanks

**iceberg** · 25-09-2006, 17:22

Ti chiedo un ultimo aiuto... ho fatto alcune prove

con il foglio di stile che ti allego, vedo correttamente con FireFox, mentre con IE l'area centrale ha una distanza maggiore dal Menu di SX ed il Menu di DX va alla riga inferiore...

cosa ho sbagliato??

Codice PHP:




#menu-sx {

    border: 0;

    float: left;

    width: 190px;

    padding: 0px 0px;

    padding-top: 0px; /* Weird Mozilla Bug */

    padding-bottom: 40px; /* Weird Mozilla Bug */    

}



#menu-dx {

    border: 0;

    float: right;

    width: 180px;

    padding: 0px 0px;

    padding-top: 0px; /* Weird Mozilla Bug */

    padding-bottom: 40px; /* Weird Mozilla Bug */

}



#center-area {

    border: 0;

    float: left;

    border: solid 1px #dbdfe4;

    width: 370px;

    margin: 0 0 0 15px;

    padding: 0px 0px;

}

Grazie

**Mich_** · 25-09-2006, 17:52

Se puoi elimina i padding: sono interpretati in modo diverso da IE rispetto agli altri.
Vedi i vari "box model"; ci sono anche link interessanti tra i "link utili".

**iceberg** · 25-09-2006, 17:59

In effetti avevo già provato ma noto sempre una differenza nella distanza tra menu SX e area centrale tra IE e FireFox e non capisco dove ho sbagliato... praticamente in IE, l'area centrale è sempre piu distante dal Menu di SX, rispetto a FireFox

Discussione: Master/Detail e visualizzazione footer

Strumenti discussione

Ricerca discussione

Visualizza

Master/Detail e visualizzazione footer

Permessi di invio