Visualizzazione dei risultati da 1 a 9 su 9
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    1,805

    container che si allunga

    salve ragazzi ho un problema ho il container del sito che si allunga e supera il footer perche ?


    codice HTML:
    div#container
    {
    position: relative;
    width:930px; margin: 0 auto;
    border-width: 0 1px; border-style:solid; border-color: #ccc;
    background-color: #ffffff;
    height:100%;
    height:auto !important;
    min-height:800px !important;
    max-height:100% !important;
    }
    sembra propio che non rispetti gli stili perche ?
    Non è tanto importante saper fare,quanto ad avere voglia d imparare .

  2. #2
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    1,805
    ragazzi confido nel vostro aiuto grazie
    Non è tanto importante saper fare,quanto ad avere voglia d imparare .

  3. #3
    Cosa non rispetta, di preciso? Il max-height:100% è riferito al contenitore, se questo è più lungo dell'area visualizzabile, sicuramente anche il tuo div#container lo sarà.

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    1,805
    ciao si il maxheigh non lo considera e il contenitore esce supera anche il footter
    codice HTML:
    html{
    margin: 0;
    padding:20px;
        background-color: #333333;
        background-repeat: repeat;
        
    }
    body
    {
    margin: 0;
    position:relative;
        
    }
    div#container
    {
    position: relative;
    width:930px; margin: 0 auto;
    border-width: 0 1px; border-style:solid; border-color: #ccc;
    background-color: #ffffff;
    height:100%;
    height:auto !important;
    min-height:800px !important;
    max-height:100% !important;
    }
    /*stili generici, su header e footer 
    */
    div#header{height: 140px;
    background-color:#36C;color: #ff0 ;
    margin-top:20px;
    
    }
    .logoheader{background-image:url(images/img_template/header.png) ;
      color:#fff;
      min-height:140px;
      margin:0 !important;
    }
    #logo 
    {
      color:#ededed;
      padding-left:50px;
      padding-top:30px;
      text-transform:none;
      font-family: Verdana, Arial, Helvetica;
    }
    .header1{
    padding-left:70px; font-family: Verdana, Arial, Helvetica; color:#ededed;
    }
    
    div#footer a{color:#fff;font-weight: bold;text-decoration: underline}
    div#footer{
     padding: 5px 0;
     position:absolute; bottom:0; 
     width:100%; 
    background: #d1e2f1 url(./../../templates/default/images/img_template/footbg.png) repeat-x top left;
    background-color: #69c; color: #fff; text-align:right;}
    Non è tanto importante saper fare,quanto ad avere voglia d imparare .

  5. #5
    Il solo css senza l'html è di poco uso, l'ideale sarebbe avere una demo online, per capire e cercare di risolvere il problema.

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    1,805
    Ecco il codice html
    codice HTML:
    <{include file="header.tpl"}>
    <div id="container"><div id="header">
    <!--  <<<<<<<CONTENUTO HEADER>>>>>>>>>> -->
    <div class="logoheader"><h1><{$titlecms}></h1></div> 
    <!--  <<<<<<< FINE CONTENUTO HEADER>>>>>>>>>> --></div>
    <{if $modules_left  == 1 or $modules_duble == 1 }> 
    <div id="navigation" class="rounded">
    <!--  <<<<<<<CONTENUTO SINISTRO>>>>>>>>>> -->  
    <{include file="modulesleft.tpl"}>           
     <!--<<<<<<<CONTENUTO SINISTRO>>>>>>>>>>-->           
    </div>          
    <{/if}>             
    <{if $modules_right  == 1 or $modules_duble == 1 }>            
    <div id="extra" class="rounded">            
    <!--  <<<<<<<CONTENUTO DESTRO>>>>>>>>>>-->          
     <{include file="modulesright.tpl"}>            
    <!--<<<<<<<CONTENUTO DESTRO>>>>>>>>>> -->          
     </div>              
    <{/if}>            
    <div id="content" class="rounded">            
    <!--<<<<<<<CONTENUTO CENTRALE>>>>>>>>>>      -->            
    <{if $error_login }>
    <div style="text-align:center; background-color:#FFEAEA; width:100%; padding-top:5px; padding-bottom:5px; border: 1px solid #E82A2A; " > Username O Password Unknown<!--<{$pass}>--></div><{/if}>                         
    <{$pag_cms.contents}>            
    <!--<<<<<<< FINE CONTENUTO CENTRALE>>>>>>>>>> -->           
    </div>            <div id="footer" >            
     <!--  <<<<<<<CONTENUTO FOOTTER>>>>>>>>>> -->          
     <p>MyHardware.org</p>           
    </div>       
    </div> 
    <{include file ="footer.tpl"}>
    Ultima modifica di rocco.mod; 05-08-2014 a 22:16
    Non è tanto importante saper fare,quanto ad avere voglia d imparare .

  7. #7
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    1,805
    Ciao per favore mi potete suggerire dove sbaglio
    Non è tanto importante saper fare,quanto ad avere voglia d imparare .

  8. #8
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    non ha molto senso che l'altezza minima debba essere 800px e quella massima il 100%, per esempio a una risoluzione di 1366*768, considerando le barre del browser, lo spazio disponibile in altezza sarà intorno a 600px, che sono superiori al 100%.

    Piuttosto potrai indicare sul container un'altezza minima del 100% (ma l'altezza va specificata anche su html e body) e il footer sarà al fondo, ma dopo il container avrai un div con tutti gli altri contenuti (senza specificazione di altezza e con un padding-bottom corrispondente all'altezza del footer - per non avere sovrapposizioni)

  9. #9
    Utente di HTML.it L'avatar di Experiment8
    Registrato dal
    Jun 2012
    residenza
    Milano
    Messaggi
    254
    Ciao,

    concordo con Prill, agiungo anche che la heigth settata al 100% non si riferisce all'altezza in base alla finestra, ma in base al contenuto, dunque anche se quel container fosse alto 1600px la regola del max-height non sarebbe infranta perché la height è appunto il 100% dell'ingombro totale del contenuto.

    Se non vuoi mai che scenda sotto il footer e non vuoi scroll verticale della pagina devi per forza di cose inserirlo in position absolute o fixed e settare il posizionamento adeguato di bottom top right e left per evitare che sbordi, ma poi ci sarebbe da gestire anche lo scroll del contenuto interno nel caso l'altezza del contenuto sia maggiore di quella disponibile, liè tutto un'altro discorso.
    In un mondo di smartphone colui che possiede un PC è un re

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 © 2025 vBulletin Solutions, Inc. All rights reserved.