• User Attivo

    Position : fixed

    Sto provando a mantenere lo sfondo fisso e il container che scorre normalmente!

    Ho provato cosi :

    [html]body{
    position:fixed
    background:#333 url(Nuova%20cartella/image/clouds.png) no-repeat top center ;
    margin:0 auto;
    padding:10px 0 0 0;
    height:2500px;
    width:100%;
    }
    [/html]ma il risultato è che si blocca tutto e scompare persino la scrollbar,come mai?

    Ho provato anche cosi:

    [html]body{
    margin:0 auto;
    padding:10px 0 0 0;
    height:2500px;
    width:100%;
    }

    #sfondo_fisso{
    background:#333 url(Nuova%20cartella/image/clouds.png) no-repeat top center ;

    }
    [/html]Ma lo sfondo rimane completamente bianco!

    posto il CSS

    [html]body{
    background:#333 url(Nuova%20cartella/image/clouds.png) no-repeat top center ;
    margin:0 auto;
    padding:10px 0 0 0;
    height:2500px;
    width:100%;
    }

    #container{
    background-color:#000;
    background-repeat:repeat-y;
    background-position:center;
    width:950px;
    height:5000px;
    margin:0 auto;
    padding:30px 0 0 0;

    }

    #header{
    background-image:url(Nuova%20cartella/image/hea2.png);
    background-repeat:no-repeat;
    background-position:top;
    margin:0;
    padding:0;
    height:600px;
    width:950px;
    }

    #barra_luminosa_centro{
    background-image:url(Nuova%20cartella/image/Barr_luminosa_centro.png);
    background-repeat:no-repeat;
    background-position:bottom;
    margin:0;
    padding:300px 0 0 0;
    height:300px;
    width:100%;
    }

    #header2{
    background-image:url(Nuova%20cartella/image/welcome.png);
    background-repeat:no-repeat;
    padding:0;
    width:950px;
    height:330px;
    margin:0;
    }

    #menu{
    width:20px;
    list-style:none;
    overflow:hidden;
    width:100%;
    float:left;
    padding:1px;
    margin:250px 0 0 0;

    }

    display:inline;
    }

    display:block;
    float:left;
    padding-rigth:90px;
    height:25px;
    margin-left:60px;
    padding-left:65px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    text-transform:uppercase;
    text-decoration:none;
    color:#FFF;
    line-height:25px;
    }

    color:#FC0;

    }

    .welcome{
    list-style:none;
    display:block;
    width:100%;
    height:25px;
    margin:0 0 -20px 0;
    padding:0;

    }

    .welcome li{
    display:inline;
    width:300px;
    }

    .welcome a{
    display:block;
    float:left;
    padding-rigth:60px;
    height:25px;
    margin-left:30px;
    margin-top:20px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color: #FC0;
    line-height:25px;
    }

    .welcome a:hover{
    color:#FFF;

    }

    h1{
    font-family:Arial, Helvetica, sans-serif;
    font-size:36px;
    color:#FFF;
    margin:0;
    padding:0 0 35px 0;
    top:-80px;
    }

    #illustraction{
    margin:50px 0 0 30px;
    padding:0;
    }

    #advertising{
    margin:150px 0 0 30px;
    padding:0;
    }

    #template{
    margin:0 0 0 -10px;
    padding:0;
    width:850px;
    height:280;

    }

    .wait{
    list-style:none;
    display:block;
    width:100%;
    height:25px;
    margin:0;
    padding:0;

    }

    .wait li{
    display:inline;
    width:300px;
    }

    .wait a{
    display:block;
    float:left;
    height:25px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color: #FFF;
    line-height:25px;
    }

    .wait a:hover{
    color:#FC0;

    }

    #web_space{
    padding:0;
    margin:0 0 150px 0;
    }

    #slider ul, li{
        margin:0;
        padding:0;
        list-style:none;
        }, li{
    
        width:900px;
        height:500px;
        overflow:hidden; 
        }
    span#prevBtn{}
    span#nextBtn{}
    
        
    
    #slider2 ul, li{
        margin:0;
        padding:0;
        list-style:none;
        }, li{
    
        width:900px;
        height:500px;
        overflow:hidden; 
        }
    span#prevBtn{}
    span#nextBtn{}
    
    
    
        
    #slider3 ul, li{
        margin:0;
        padding:0;
        list-style:none;
        }, li{
    
        width:900px;
        height:500px;
        overflow:hidden; 
        }
    span#prevBtn{}
    span#nextBtn{}    
    
    
    #contact_me{
        background:url(Nuova%20cartella/image/contactme.png);
        height:150px;
        width:700px;
        margin:250px 0 0 0;
        padding:0;
    
    }
    
    #modulo{
        margin:0 0 -400 75px;
    }
    
    form#contact{
        width:900px;
        height:380px; 
        margin: 0;
        padding: 47px 15px 10px 15px;
        background-image:url(Nuova%20cartella/image/form.png);
        background-repeat:no-repeat;
    } 
    
    label{
        width: 200px;
        height: 30px;
        font: 12px/30px Arial,sans-serif;
        margin-right: 5px;
        text-align: right;
        color: #666
        } 
        
    input,textarea,button{
        border: 0px solid;
        font: 12px Arial,sans-serif;
        } 
            
            
    div.input-cont{
        width: 200px;
        height: 30px;
        margin-bottom: 3px
        } 
        
    input{
        display: block;
        width: 200px;
        height:25px;
        background:;
        margin: 12px 0 0 280px
        } 
        
    div.textarea-cont{
        width: 200px;
        height: 100px;
        padding: 1px;
        }
    
    textarea{
        width: 280px;
        height: 85px;
        margin: 33px 0 0 180px;
        } 
        
    button#go{
        width: 220px;
        height:25px;
        height /**/:30px;
        line-height: 25px;
        display: inline;
        margin:-10px 0 0 550px;
        padding: 1px 0 4px;
        background: #ffcc00;
        font:Arial, Helvetica, sans-serif;
        font-weight:bolder;
        font-size:16px;
        text-transform:uppercase;
        color:#333;
        cursor:pointer;
        }[/html]

  • Super User

    Ciao Lucaeffe,
    avresti una fonte diretta da poterci mostrare o al massimo l'html oltre che al css?

    Grazie


  • User Attivo

    No ancors il sito non è on line.
    Posto l'HTML

    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="PORTFOLIO.css" rel="stylesheet" type="text/css" />
                 
    <title>Lucaeffe.it</title> 
    
    
    <!-- jQuery lightBox plugin -->
        <script type="text/javascript"  src="JS/jquery-lightbox-0.5/js/jquery.js"></script>
    <script type="text/javascript" src="JS/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
        
        
        <link rel="stylesheet" type="text/css" href="JS/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />
        <script type="text/javascript">
        $(function() {
            $('#gallery a').lightBox();
        });
        </script>
       <!--fine jQuery lightBox plugin --> 
       
       
       
       
       <!-- inizio jQuery w.slide plugin -->
        <script  src="JS/jquery-lightbox-0.5/jquery/jquery.wslide.js"type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
                $(document).ready(function(){
                    
                    $("#parent2").wslide({
                        width: 750,
                        height: 250,
                        fade: true,
                        duration: 2000
                       }); 
                    }); 
    
        </script>
        
        
    
        <script type="text/javascript" src="JS/easySlider/easySlider/js/easySlider.js"></script>
         <script type="text/javascript">
        $(document).ready(function(){
        
        $("#slider").easySlider({
            prevText: 'Previous Slide',
            prevId: 'prevBut',
            nextText: 'Next Slide',
            nextId: 'nextBut',
            orientation: 'horizontal'
                            
                                
        });
        
       $("#slider2").easySlider({
           prevText: 'Previous Slide',
           prevId: 'prevBut2',
           nextText: 'Next Slide',
           nextId: 'nextBut2',
    
        });
       
       
       
       $("#slider3").easySlider({
           prevText: 'Previous Slide',
           prevId: 'prevBut2',
           nextText: 'Next Slide',
           nextId: 'nextBut2',
    
        });   
    });
    
        </script>
        
        
        
        
        
        
    
    
    
    
        <style type="text/css">
        /* jQuery lightBox plugin - Gallery style */
        #gallery{
            margin:250px 0 0 0;
            width:100%;
            height:3000px;
            text-decoration:none
        }
        
        a{
            font-family:Arial, Helvetica, sans-serif;
            color:#FFF;
            text-decoration:none;
            }
        ul { 
        list-style: none;
        padding:100px 0 0 50px;
        margin:0 0 50px 0
        }
        ul li { display: inline;
        }
        ul img {
            margin:0 auto;
            border: 5px solid #3e3e3e;
            border-width:0;
        }
        ul a:hover img {
            border: 1px solid none;
            border-width:0;
            color: #fff;
        }
        ul a:hover { color:;
        }
        
        </style>
        
    <!-- inizio jQuery w.slide gallery -->
    <style type="text/css" media="screen">
                    
                    
                #parent2-menu{
                    text-decoration:none;
                
                    }
                li{
                    padding:30px 0 0 75px;
                    margin:0 auto;
    
                }
                
                li{
                    margin:0;
                    padding: 20px 0 0 70px;
                    font-family:Arial, Helvetica, sans-serif;
                    color:#333;
                    font-size:12px;
                    }
    
                a{
                    text-decoration:none;
                    font:Arial, Helvetica, sans-serif;
                    color:#000;
                }
                a:hover, a.wactive{
                    text-decoration:none;
                    background: black;
                    color:#000;}
                    </style>
                 
    
    
    </head>
    
    
    
    
     
    
    
    
    <body>
    
    <div id="sfondo_fisso"></div>
    
    <div id="container"> 
    
      <div id="header">
        
     <ul id="menu">
    <li><a href="#"><strong>illustraction</strong></a></li>
    <li><a href="#"><strong>web</strong></a></li>
    <li><a href="#"><strong>logo</strong></a></li>
    <li><a href="#"><strong>advertising</strong></a></li>
    </ul>
    
    <div id="barra_luminosa_centro"></div>
    </div>
    
    
    <div id="header2">
      <ul class="welcome"> 
      <li><a href="#parent2-1"><strong>Welcome</strong></a></li>
      <li><a href="#parent2-2"><strong>About me</strong></a></li>
      <li><a href="#parent2-3"><strong>Services</strong></a></li>
      <li><a href="#parent2-4"><strong>Contact</strong></a></li>
      </ul>  
      
      
      
      
     <!-- testi per il w.slide--> 
      
    <ul id="parent2">
        <li>
          <h1><img src="Nuova cartella/image/welcometext.png" width="700" height="50" /></h1>
          <strong>Ciao,sono Luca Faedda grafico,illustratore e web-designer.Attualmente vivo a Firenze.
          Appassionato al mondo dell'illustrazione, graphic-design, grafica pubblicitaria e della programmzione di siti web e web-design.
          L'obiettivo è quello di creare siti accessibili e dal design efficace con l'utilizzo di xHTML,CSS,JavaScript e Flash 
          con particolare attenzione agli standard dettati dalla W3C e al ?cross-browser?; </strong></li>
        
        <li><h1><strong><img src="Nuova cartella/image/aboutmetext.png" width="680" height="60" /></strong></h1>
          <strong> Diplomato all'istituto Statale d'arte I.S.A.F.F. di sassari,
          frequento ora l'Accademia delle arti digitali<span class="wait"><a href="http://www.scuolanemo.com/index.php?menu=6&amp;umenu=FAQ's&amp;page=FAQ's&amp;pagina=">NEMO NT.</a></span></strong></li>
       
        <li><h1><img src="Nuova cartella/image/services.png" width="530" height="60" /></h1>
        <strong>
        Web design, realizzazione siti internet, xHtml, Css.  Dal design allo sviluppo per il tuo sito sino
        all'ottimizazzione sui motori di ricerca.
        
        Illustrazioni su commissione,caricature,grafiche per t-shirt, skate, tavole da surf personalizzate.
        Loghi, Brochure, volantini, business card per migliorare la tua immagine.
        
     </strong></li>
        
        <li><strong>Indoctum moderatius cum te? In dictas hendrerit eam. Vel meliore fuisset perpetua et? Nibh debitis erroribus mea te, sed cu virtute volutpat periculis. Omnium integre philosophia ut quo, et detracto honestatis sed.</strong></li>
      </ul>
     </div>  
    <!-- fine testi per il w.slide-->
    
    
    
    <!--inizio galleria -->
    <div id="gallery">
    <div id="illustraction"><img src="Nuova cartella/image/illustractio.png" width="900" height="150" /></div><!-- ILLUSTRAZIONI -->
    
    
    
      <div id="slider">
        <ul>
    
    <li>
    
                <a  href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" />
                </a>
     
                <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" />
                </a>
          </li>
                
                
                 <li>           <a  href="JS/jquery-lightbox-0.5/photos/image1.jpg" title="Try to Get Me - stampa per tavola da surf">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image1.png" width="200" height="140" alt="" />
                </a>
     
                <a href="JS/jquery-lightbox-0.5/photos/image2.jpg" title="Contest 'crea il tuo natale' - Grafici creativi.it ">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image2.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image3.jpg" title="Brad Pitt - Burn after Reading">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image3.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image4.jpg" title="Prison Break">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image4.jpg" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image5.jpg" title="100 anni di storia dell'inter">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image5.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image6.jpg" title="Johnny Depp">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image6.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image7.jpg" title="Jason Schwartzman - Spun">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image7.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image8.jpg" title="The last word from this world-Vincenzo Basile">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image8.png" width="200" height="140" alt="" />
                </a>
          
                </li>
                
    
    </ul>
    </div>
    
                
    <div id="advertising"><img src="Nuova cartella/image/WEB.png" width="900" height="170" /></div>  <!-- WEB TEMPLATES -->  
    
        <div id="slider2">
                <ul>         
                <li>
                <a href="JS/jquery-lightbox-0.5/photos/image17.jpg" title="Vincenzo Corda HairStylist">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image17.png" width="430" height="280" alt="" /> </a>
                <img src="JS/jquery-lightbox-0.5/photos/web_comm.png" width="335" height="280" />             
                </li>
                
                
                <li>
                 <a href="JS/jquery-lightbox-0.5/photos/image22.jpg" title="Polliceverde.it">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image22.png" width="430" height="280" alt="" /> </a> 
                <img src="JS/jquery-lightbox-0.5/photos/web_comm2.png" width="335" height="280" />            
                 </li>
                 </ul>
                 
    
    
    </div>
    
    
    
     <div id="advertising"><img src="Nuova cartella/image/logos.png" width="900" height="152" /></div><!-- LOGO -->
        
        
        
    
        <ul>
        <li>
          <a href="JS/jquery-lightbox-0.5/photos/image18.jpg" title="contest 'lovely crociere' grafici creativi.it">
            <img src="JS/jquery-lightbox-0.5/photos/thumb_image18.png" width="200" height="140" alt="" />
            </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image19.jpg" title="Nemoland-dietro le quinte della fantascienza e del fantasy">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image19.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image20.jpg" title="lucaeffe logo">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image20.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image23.jpg" title="NEMO NT - Colori puri">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image23.png" width="200" height="140" alt="" />
                </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
    
          <img src="JS/jquery-lightbox-0.5/photos/thumb_image21.png" width="200" height="140" alt="" />
          </a>
          </li> 
          </ul>
    
    
        
    <div id="advertising"><img src="Nuova cartella/image/advertising.png" width="915" height="150" /></div><!-- ADVERTISING -->
          
                 <ul>
                 <li>
                <a href="JS/jquery-lightbox-0.5/photos/image9.jpg" title="esercizi di sintesi - China">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image9.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image10.jpg" title="esercizi di sintesi - Musica">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image10.png" width="200" height="140" alt="" />
                </a>
    
                <a href="JS/jquery-lightbox-0.5/photos/image11.jpg" title="esercizi di sintesi - Mare">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image11.png" width="200" height="140" alt="" />
                </a>   
    
                <a href="JS/jquery-lightbox-0.5/photos/image12.jpg" title="esercizi di sintesi - Estate">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image12.png" width="200" height="140" alt="" />
                </a>  
    
                <a href="JS/jquery-lightbox-0.5/photos/image13.jpg" title="esercizi - Carattere come immagine">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image13.png" width="200" height="140" alt="" />
                </a> 
    
                <a href="JS/jquery-lightbox-0.5/photos/image14.jpg" title="esercizi di reinterpretazione - Pin up '50">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image14.png" width="200" height="140" alt="" />
                </a> 
    
                <a href="JS/jquery-lightbox-0.5/photos/image15.jpg" title="esercizi di reinterpretazione - Pop Art">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image15.png" width="200" height="140" alt="" />
                </a>   
                
    
                <a href="JS/jquery-lightbox-0.5/photos/image16.jpg" title="contest 'No al Fumo' Grafici creativi.it">
                    <img src="JS/jquery-lightbox-0.5/photos/thumb_image16.png" width="200" height="140" alt="" />
                </a>                                                      
      </li>
      </ul>
    
          
    
    </div>
    
    <div id="contact_me"></div>
    
    <div id="modulo"><form id="contact" method="post" action="">
      <div>
            <label for="email"></label>
        <div class="input-cont"><input type="text" id="email" name="email"></div>
        
        <label for="nome"></label>
        <div class="input-cont"><input type="text" id="nome" name="nome" size="20"></div>
        
        <label for="message"></label>
        <div class="input-cont"><input type="text" id="object" name="object"></div>
        
        <label for="message"></label>
        <div class="textarea-cont">
          <textarea id="message" name="message" rows=9 cols=20></textarea>
        </div>
        <button type="submit" id="go" value="invia">CLICK HERE TO E-MAIL ME</button>
      </div>
    </form> </div>
    
    </div>
    </body>