Visualizzazione dei risultati da 1 a 5 su 5

Discussione: Impaginazione

  1. #1
    Utente di HTML.it L'avatar di kakashi
    Registrato dal
    Feb 2005
    Messaggi
    357

    [HELP] Impaginazione

    Ciao ragazzi ho un problema con questo css..

    Il problema sta nella parte attinente a due colonne nella parte "content".. il problema sta che mi interrompe la prosecuzione dello sfondo del "contenitore".. come posso risolvere?

    Grazie

    codice:
    html{
                height: 100%;
            }
            body{
              margin: 0px;
              padding: 0px;
              font: normal normal normal 12px/18px Arial, Helvetica, sans-serif;
            }
            a{
              text-decoration: none;
              color: #CCCCCC
            }
    
            #login{
              display: none;
              height: 100px;
              background: #000000;
              color: white;
            }
            #login .testo{
                margin: 0 auto;
                width: 950px
            }
    
            #contenitore{
              margin: 0px;
              padding: 0px;
              background: #dcdcdc url(images/bg.png) repeat-x;
              height: 100%;
            }
                #header{
                  width: 950px;
                  margin: 0 auto;
                  color: #FFFFFF;
                  display: block;
                  position: relative;
                }
                .sinistra{
                  width: 440px;
                  float: left;
                }
                .sinistra li{
                  padding-right: 25px;
                  list-style: none;
                  display: inline;
                  width: 250px;
                }
                
                .destra{
                  text-align: right;
                  float: right;
                }
                .destra li{
                  padding-right: 25px;
                  list-style: none;
                  display: inline;
                  width: 250px;
                  text-shadow: 1px #CCCCCC;
                }
    
                
                .arrow{
                    border-bottom: 1px solid #CCCCCC;
                }
                .super-menu-child{
                    position: absolute;
                    background: #0074ce;
                    width: 250px;
                    padding: 15px 30px 5px 30px;
                    top: 37px;
                    left: 200px;
                    -moz-border-radius-bottomleft: 10px;
    				-moz-border-radius-bottomright: 10px;
    				-webkit-border-bottom-left-radius: 10px;
    				-webkit-border-bottom-right-radius: 10px;
                    z-index: 100;
                }
                
             #wrapper{
               clear: both;
               width: 950px;
               margin: 0 auto;
               padding: 0;
               position:relative;
               top: -20px;
             }
             #logo{
                padding: 0px;
                background: url(images/new-is.png) no-repeat top center;
                height: 136px;
             }
             #search{
                position: relative;
                margin-left: 480px;
                top:  100px;
             }
             .bordo{
                position:relative;
                margin: 0px;
                padding:0px;
                top: -7px;
                border: 2px solid #000000;
                height: 20px;
             }
            
             #content{
                clear: both;
                width: 950px;
                margin: 0 auto;
             }
             #left-menu{
                clear:both;
                float: left;
                width: 600px;
             }
             #right-menu{
                float: right;
                width: 250px;
             }
             #footer{
                clear: both
             }

  2. #2
    Utente di HTML.it L'avatar di kakashi
    Registrato dal
    Feb 2005
    Messaggi
    357
    aiutatemi please

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Hai postato il CSS, ma non si sa a che marcatura si riferisce, quindi non e` di molto aiuto.

    Per capire, occorre anche il codice HTML, il realtivo DOCTYPE e in quali browser hai testato (o in quali funziona ed in quali no).
    Di maggior aiuto sarebbe un link, in modo da aver tutti i parametri sotto controllo (e vedere anche la pagina, senza dover immaginarla dal codice o esser costretti a creare una pagina)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  4. #4
    Utente di HTML.it L'avatar di kakashi
    Registrato dal
    Feb 2005
    Messaggi
    357
    allora la paginazione è cosi
    codice:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta name="author" content="HOMEPC" />
    
    	<title>Itascan . New Versione</title>
    
        <style lang="it" type="text/css">
            html{
                height: 100%;
            }
            body{
              margin: 0px;
              padding: 0px;
              font: normal normal normal 12px/18px Arial, Helvetica, sans-serif;
            }
            a{
              text-decoration: none;
              color: #CCCCCC
            }
    
            #login{
              display: none;
              height: 100px;
              background: #000000;
              color: white;
            }
            #login .testo{
                margin: 0 auto;
                width: 950px
            }
            
            /* ELEMENTO CONTENITORE GENERALE */
            #contenitore{
              margin: 0px;
              padding: 0px;
              background: #dcdcdc url(images/bg.png) repeat-x;
              height: 100%;
            }
                /* HEADER + superiore */
                #header{
                  width: 950px;
                  margin: 0 auto;
                  color: #FFFFFF;
                  display: block;
                  position: relative;
                }
                .sinistra{
                  width: 440px;
                  float: left;
                }
                .sinistra li{
                  padding-right: 25px;
                  list-style: none;
                  display: inline;
                  width: 250px;
                }
                
                .destra{
                  text-align: right;
                  float: right;
                }
                .destra li{
                  padding-right: 25px;
                  list-style: none;
                  display: inline;
                  width: 250px;
                  text-shadow: 1px #CCCCCC;
                }
    
                
                .arrow{
                    border-bottom: 1px solid #CCCCCC;
                }
                .super-menu-child{
                    position: absolute;
                    background: #0074ce;
                    width: 250px;
                    padding: 15px 30px 5px 30px;
                    top: 37px;
                    left: 200px;
                    -moz-border-radius-bottomleft: 10px;
    				-moz-border-radius-bottomright: 10px;
    				-webkit-border-bottom-left-radius: 10px;
    				-webkit-border-bottom-right-radius: 10px;
                    z-index: 100;
                }
                
             /* WRAPPER */
             #wrapper{
               clear: both;
               width: 950px;
               margin: 0 auto;
               padding: 0;
               position:relative;
               top: -20px;
             }
             #logo{
                padding: 0px;
                background: url(images/new-is.png) no-repeat top center;
                height: 136px;
             }
             #search{
                position: relative;
                margin-left: 480px;
                top:  100px;
             }
             .bordo{
                position:relative;
                margin: 0px;
                padding:0px;
                top: -7px;
                border: 2px solid #000000;
                height: 20px;
             }
             
             /* CONTENUTI */
             #content{
                clear: both;
                width: 950px;
                margin: 0 auto;
                position: relative;
             }
             #left-menu{
                clear:both;
                float: left;
                width: 600px;
                background: url(images/content.png) no-repeat top right;
             }
             #right-menu{
                float: left;
                width: 250px;
             }
             /* footer */
             #footer{
                clear: both
             }
        </style>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
        <script language="javascript">
            $(document).ready(function(){
                $('#clickme').click(function(){
                    if($('#login').is(":hidden")){
                        $('#login').slideDown('slow')
                    }
                    else{
                        $('#login').slideUp('slow')
                    }
                });
                $('#welcome').mouseover(function(){$('#menuprova').slideDown('slow')});
                $('#menuprova').mouseout(function(){$('#menuprova').slideUp('slow')});
            });
        </script>
    </head>
    
    <body>
    
    <div id="login">
        <div class="testo">Login</div>
    </div>
    
    <div id="contenitore">
    
        <div id="header">
              <ul class="sinistra">[*]REGISTRATI[*]LOGIN
                  <li class="arrow" id="welcome">BENVENUTI
                    <ul>
                        <li style="display:none" class="super-menu-child" id="menuprova">
                            Benvenuto! Sai dove ti trovi? Sul primo portale italiano dedicato alla lettura online dei nostri manga preferiti. 
                            Proponiamo un vastissimo archivio, comprendente numerose serie tutte rigorosamente in italiano, fatte e tradotte da ragazzi [Team] 
                            che come te amano quel mondo! Ma la cosa più importante è che puoi leggere i manga della tua serie preferita comodamente dal tuo pc e GRATIS!
                        [/list]
                  [/list]
              
              <ul class="destra">[*]HOME[*]MANGA[*]UPLOAD[*]FAQ[*]CONTATTI[/list]
        </div>
        
        <div id="wrapper">
            <div id="logo">
                <div id="search">
                    <form><input type="input" class="bordo"/><input type="image" src="images/GO.png" />  </form>
                </div>
            </div>
        </div>
        
        <div id="content">
                <div class="news">
                    <?php
                        for($r=0;$r<5;$r++){
                            echo " 
    
    News Bla Bla Bla Bla Bla</p>";
                        }
                    ?>
                </div>
    
    
                <div style="position:relative; margin-left:115px;"></div>
                
    
    Prova</p>
        </div>
        
    </div>
    
    <div id="footer"></div>
    
    </body>
    </html>
    Ho provato tutti i browser e per tutti c'è lo stesso problema

    link sito: http://www.bleachfan.org/prova/

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Forse ti sei semplicemente dimenticato un clear, prima della fine del contenitore.

    Il fatto e` che i blocchi float escono dal flusso della pagina, e li puoi "tenere dentro" con un clear, da mettere alla fine del loro contenitore, come spiegato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float, oppure mediante un overflow, come detto in altre discussioni di questo forum.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

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.