Visualizzazione dei risultati da 1 a 6 su 6

Discussione: problemi con un layout

  1. #1
    Utente bannato L'avatar di Stainboy
    Registrato dal
    Dec 2006
    Messaggi
    614

    problemi con un layout

    Qui potete vedere una "demo" del layout che sto creando per un progetto personale:

    http://talkexperiment.com/think/

    Ma sostanzialmente ho tre problemi:

    1- quando si riduce troppo la finestra tanto da far comparire la barra laterale, se si prova a scrollare verso il basso, tutto il contenuto della pagina sale verso l'alto entrando nella striscia nera al top della pagina.. invece vorrei che salisse tutto insieme ovviamente. Credo accada perchè la striscia nera l'ho impostata come sfondo fixed repeat-x; e quindi non sale.. ma è l'unica soluzione superficiale che ho trovato perchè altrimenti non si vedrebbe con internet explorer.

    2- se si vede il sito con safari o ie la sidebar a sinistra si vede bene, tutte le celle una sotto l'altra comprese le due immagini ADS. Mentre se si guarda con firefox si vedono tipo scaletta e non so perchè.

    3- Il menu in alto a destra è un esempio del NiftyCube, prima funzionava tutto benissimo, ora non so perchè ma all'improvviso anche se i link ci sono tutti nel codice è come se non ci fossero perchè non sono cliccabili, non compare proprio la "manina" quando ci passi sopra.

    Sostanzialmente questi sono i tre problemi fondamentali... un casino eh?

  2. #2
    Utente bannato L'avatar di Stainboy
    Registrato dal
    Dec 2006
    Messaggi
    614
    ah dimenticavo, il codice è questo se può servire

    <title>Talk.Experiment.</title>
    <style type="text/CSS">

    codice:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>body {
    background : #fff;
    }
    a:link {
    color : #f16f55;
    text-decoration : none;
    }
    a:visited {
    color : #f16f55;
    text-decoration : none;
    }
    #container {
    height: 100%;
    width : 100%;
    position : relative;
    color : #000;
    }
    #header {
    height : 54px;
    position : absolute;
    top : 0%;
    left : 0%;
    right : 0%;
    color : #000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : bold;
    padding : 0;
    font-size : 11pt;
    }
    #container2 {
    color : #000;
    position : absolute;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-weight : bold;
    padding-top : 54px;
    font-size : 11pt;
    }
    body {
    background : url("head.jpg") 0% 0% fixed repeat-x;
    margin-left : 0;
    margin-top : 0;
    margin-right : 0;
    margin-bottom : 0;
    }
    ul.postnav,ul.postnav li{margin:0;padding:0;list-style-type:none}
    ul.postnav li{float:left;width: 9em;font-size:100%;margin-right: 5px}
    ul.postnav a{display:block;width:9em;padding:5px 0;font: bold 100% Verdana,Arial,sans-serif;
        text-transform:uppercase;background: #000;color: #f16f55;
        text-decoration:none;text-align:center}
    ul.postnav a:hover{background: #000;color:#f16f55}
    
    #menu {
    position: relative;
    width: 600px;
    padding-top: 54px;
    padding-left: 300px;
    }
    
    #sidebar {
    position: absolute;
    left: 10px;
    padding-top: 140px;
    height: 150px;
    }
    ul#split,ul#split li{margin:0;padding:0;list-style:none}
    ul#split li{float:left;width:150px;margin:0 10px 10px 0}
    ul#split h3{font: normal 120%/1.3 Verdana,sans-serif;
        text-transform:uppercase;margin:0px;padding: 5px 0 0;text-align:center;color: #f16f55}
    ul#split p{margin:0;padding:5px 8px 15px}
    li#one h3{background: #000}
    ul#split div{background: #fff}
    li#one div{border:2px solid #000}
    li#two h3{background: #000}
    li#two div{border:2px solid #000}
    li#three h3{background: #000}
    li#three div{border:2px solid #000}
    
    #corpo {
    font: Verdana, sans-serif;
    position:absolute;
    width:700px;
    height:500px;
    margin-left:-322px;
    margin-top: 0px;
    color:#000;
    padding:2px;
    font-size: 11pt;
    padding-top: 140px;
    padding-left: 500px;
    text-decoration: none;
    }
    
    #centro {
    height: 100%;
    width : 100%;
    position : relative;
    color : #fff;
    }
    
    #titolo{
    font: bold 100% Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    border-bottom: 1px dashed #000;
    }
    
    #testo {
    font-family: Arial;
    font-size: 10pt;
    }
    </style>
    <script type="text/javascript" src="niftycube.js"></script>
    <script type="text/javascript">
    window.onload=function(){
    Nifty("ul#split h3","top");
    Nifty("ul#split div","none same-height");
    Nifty("ul.postnav a","transparent");
    }
    function showDiv()
    {
    if (navigator.appName.indexOf("Microsoft")!=-1) {
    objDiv.style.top = document.body.clientHeight / 2 - 50;
    objDiv.style.left = document.body.clientWidth / 2 - 50;
    }else{
    objDiv.style.top = window.innerHeight / 2 - 50;
    objDiv.style.left = window.innerWidth / 2 - 50;
    }	
    }
    </script>
    </head>
    <body>
    <div id="container">
    <div id="header">
    </div>
    <div id="container2">
    [img]logop.jpg[/img]
    </div>
    </div>
    <div id="menu">
    
    
    
    <ul class="postnav">[*]prova[*]<font color="white">prova</font>[*]prova[*]<font color="white">prova</font>[/list]
    </p>
    </div>
    <div id="sidebar">
    <ul id="split">
    <li id="one"><h3>Title one</h3>
    <div>
    
    
    Eiu iae eiouuu io eiiu e eo eee ue uaioeo eiea euooi iueui a eieuoo iau iaio ieeoaiui.</p>
    
    
    Iie u uiuou uaueiei ioou ouu o e uue aeiii o euoueeei iueuou ei aoeaei ui eeoueuo e ioi.</p>
    </div>
    
    
    
    <li id="two"><h3>Title two</h3>
    <div>
    
    
    Eiu iae eiouuu io eiiu e eo eee ue uaioeo eiea euooi iueui a eieuoo iau iaio ieeoaiui.</p>
    
    
    Iie u uiuou uaueiei ioou ouu o e uue aeiii o euoueeei iueuou ei aoeaei ui eeoueuo e ioi.
    </div>
    [/list][/list]
    
    
    
    [img]ads.jpg[/img]
    
    
    [img]ads.jpg[/img]
    </div>
    <div id="centro">
    <div id="corpo">
    <div id="titolo">
    TITOLO DEL POST - Lascia un commento!
    </div>
    <div id="testo">
    
    
    
    sss</p>
    </div>
    </div>
    </div>
    </body>
    </html>

  3. #3
    Utente bannato L'avatar di Stainboy
    Registrato dal
    Dec 2006
    Messaggi
    614
    Ciao!
    Allora ho risolto praticamente tutto.. però è spuntato un piccolo problemino che non ho proprio idea di come risolvere dato che non ho idea di come si sia causato .. avrò toccato qualcosa, boh

    Comunque sia nel menu in alto che nei box a sinistra, i link non sono più cliccabili per qualche strano motivo! Vedete: http://www.talkexperiment.com/think

    che può essere?

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    il div corpo è in posizione assoluta, è quindi sopra agli altri layer e quindi rende incliccabili i menu
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  5. #5
    Utente bannato L'avatar di Stainboy
    Registrato dal
    Dec 2006
    Messaggi
    614
    ciao, il problema è che se levo position absolute al corpo mi si sballa tutto il layout.. col menu di sopra ho risolto ma lo stesso metodo non funziona con il menu di sinistra che rimane sempre non cliccabile! Poi un altra cosa: come mai su safari o IE i link si vedono neri (dato che nel menu di sinistra ho impostato a:link #000 e a:hover #f16f55) mentre invece su firefox si vedono direttamente del secondo colore restando comunque non cliccabili?

  6. #6
    Utente bannato L'avatar di Stainboy
    Registrato dal
    Dec 2006
    Messaggi
    614
    UP

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.