Il "contenuto" che supera il footer

Discussioni inerenti lo sviluppo di markup XHTML e CSS validi.

Moderatori: antoscarface, Kagemitsu

Regole del forum
Per scrivere del codice all'interno di ogni post, utilizzare il tag: [syntax=il_linguaggio]codice[/syntax] sostituendo "il_linguaggio" con il linguaggio del codice che dovete inserire, ad esempio: html, css, javascript, php, asp, ecc...

Il "contenuto" che supera il footer

Messaggioda santoroag » venerdì 16 dicembre 2011, 20:36

Salve a tutti, mi serve nuovamente il voastro aiuto, sto creando un sito con wp, ho creato da 0 il mio template, scelto di utilizzare un layout di larghezza fissa ( 960px ) e altezza variabile, ho riscontrato però un problema, quando i contenuti vanno "oltre" un certo limite in altezza ( come quando ho molti articoli nella home ) il footer invece che spostarsi verso il basso si fa "trapassare", ho provato a dichiararlo float su un lato ( float:right ) e risolvo parzialmente il problema, visto che il footer scende ma il background rimane fermo, ecco la parte del css che si occupa della disposizione:

Sintassi: css [ Scarica ] [ Nascondi ]
  1. body {
  2.         background-color: #FFF;
  3.         font-family:Verdana, Geneva, sans-serif;
  4.         font-size:14px;
  5.         font-style:normal;
  6.         font-weight:normal;
  7.         text-align:left;
  8.         margin:0 auto;
  9. }
  10. #wrap {
  11.         background-color:#333333;
  12.         height:50px;
  13.         width:100%;
  14. }
  15. #wrap_content {
  16.         width:960px;
  17.         margin:0 auto;
  18. }
  19.  
  20. #header {
  21.         background-color:#000;
  22.         height:120px;
  23. }
  24.  
  25. #menu {
  26.         background-color:#000;
  27.         height:100px;
  28.         position:relative;
  29. }
  30.  
  31. #bg_content { /*multisfondo*/
  32.        
  33.         background-image: url(immagini/bg_top.png), url(immagini/bg_bottom.png);/*, url(immagini/bg.png);*/
  34.         background-repeat:no-repeat, no-repeat /*repeat*/;
  35.         background-position:left top, left bottom;
  36. }
  37.  
  38. #content {
  39.         min-height:960px;
  40.         width:960px;
  41.         margin:0 auto;
  42.         background-image: url(immagini/bgBianco90.png);
  43.         border-right:1px #000000 dotted;
  44.         border-left:1px  #000000 dotted;
  45.         background-repeat:repeat;
  46. }
  47.  
  48. #footer {
  49.         background-color:#000;
  50.         min-height:200px;
  51.         width:100%;
  52.         text-align:center;
  53.         margin:auto;
  54. }
  55.  
  56.  
santoroag

Avatar utente
 
Messaggi: 26
Iscritto il: mercoledì 12 ottobre 2011, 14:01
LocalitĂ : Taormina

Re: Il "contenuto" che supera il footer

Messaggioda graffithouse » venerdì 16 dicembre 2011, 20:49

prova ad inserire questo nei tuoi css, a volte funziona, sempre se ho capito in modo corretto il tuo problema.
Sintassi: css [ Scarica ] [ Nascondi ]
  1. div, ul, li{overflow:hidden;}
Solo un software veramente libero può donarti la libertà...
graffithouse

Avatar utente
 
Messaggi: 29
Iscritto il: martedì 2 febbraio 2010, 16:02
LocalitĂ : Viterbo-Roma

Re: Il "contenuto" che supera il footer

Messaggioda markdesign » venerdì 16 dicembre 2011, 21:03

Riesci a postare anche la struttura html del sito o ancora meglio un link con una pagina di esempio?!

Comunque penso che il problema sia dovuto o a una mancanza della proprietà "clear" oppure il problema può essere dato dal position.
markdesign

Moderatore

Avatar utente
 
Messaggi: 94
Iscritto il: lunedì 14 novembre 2011, 18:37
LocalitĂ : Pordenone

Re: Il "contenuto" che supera il footer

Messaggioda santoroag » sabato 17 dicembre 2011, 1:02

In pratica il problema è questo:

se lascio tutto com'è ora succede che il testo va sotto il footer, invece che "allungare" il sito ( freccia rossa ) http://i41.tinypic.com/e6eivm.png

se metto al footer la proprietà float:left, allora il sito si allunga correttamente però le immagini di bg rimangono "sospese" come se il sito si interrompesse dove prima c'era il footer http://i39.tinypic.com/24o97k1.png

Ecco il file page.php con i relativi div del css elencato prima, purtroppo non posso linkare il sito perchè ci lavoro in locale:
Sintassi: html [ Scarica ] [ Nascondi ]
  1. <?php get_header(); ?>
  2.  
  3. <div id="bg_content">
  4.         <div id="content">
  5.        
  6.         <div id="left">
  7.        
  8.                 <div id="pagina">
  9.        
  10.                         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  11.        
  12.                                  <!--<h1><?php the_title(); ?></h1>-->
  13.        
  14.                                 <div class="contenuto_pagina">
  15.                                         <?php the_content()?>
  16.                                 </div>
  17.                    
  18.                     <div style="clear:both;"></div>
  19.                
  20.                                 <?php endwhile; else: ?>
  21.        
  22.                                 <p><?php _e('Spiacenti, nessun articolo per questa categoria.'); ?></p><?php endif; ?>
  23.  
  24.                
  25.                 </div>
  26.            
  27.                 </div> <!--end left-->
  28.  
  29.                 <?php include(TEMPLATEPATH."/right.php");?>
  30.    
  31.         </div> <!--end content-->
  32. </div><!--end bg content-->
  33.    
  34. <?php get_footer(); ?>
santoroag

Avatar utente
 
Messaggi: 26
Iscritto il: mercoledì 12 ottobre 2011, 14:01
LocalitĂ : Taormina

Re: Il "contenuto" che supera il footer

Messaggioda santoroag » sabato 17 dicembre 2011, 1:10

Risolto, mettendo un "clear:both" prima della fine del div content, anche se non ho capito il perchè, grazie a tutti per l'interessamento...

Sintassi: html [ Scarica ] [ Nascondi ]
  1. <?php get_header(); ?>
  2.  
  3. <div id="bg_content">
  4.         <div id="content">
  5.        
  6.         <div id="left">
  7.        
  8.                 <div id="pagina">
  9.        
  10.                         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  11.        
  12.                                  <!--<h1><?php the_title(); ?></h1>-->
  13.        
  14.                                 <div class="contenuto_pagina">
  15.                                         <?php the_content()?>
  16.                                 </div>
  17.                    
  18.                     <div class="nofloat"></div>
  19.                
  20.                                 <?php endwhile; else: ?>
  21.        
  22.                                 <p><?php _e('Spiacenti, nessun articolo per questa categoria.'); ?></p><?php endif; ?>
  23.  
  24.                
  25.                 </div>
  26.            
  27.                 </div><!--end left-->
  28.  
  29.                 <?php include(TEMPLATEPATH."/right.php");?>
  30.    
  31.                 <div style="clear:both;"></div>
  32.    
  33.         </div> <!--end content-->
  34. </div><!--end bg content-->
  35.    
  36. <?php get_footer(); ?>
santoroag

Avatar utente
 
Messaggi: 26
Iscritto il: mercoledì 12 ottobre 2011, 14:01
LocalitĂ : Taormina

Re: Il "contenuto" che supera il footer

Messaggioda sebastianscaramuzza » martedì 20 dicembre 2011, 13:14

La tecnica con cui hai risolto è il pane quotidiano quando si sviluppano i css tant'è che esiste nella maggior parte dei siti (fatti bene ovvio) una classe
chiamata .clear o .clearfix.

Questo avviene perchè i DIV impostati in float right o left "perdono" altezza. Un .clear alla fine del div sistema tutto... è difficile da spiegare. Prendilo come una scatola nera, si fa così e bon. Ti verrà chiaro usandolo ;)

Ciao
sebastianscaramuzza

Avatar utente
 
Messaggi: 44
Iscritto il: domenica 18 dicembre 2011, 11:13
LocalitĂ : Bologna

urticaria treatment or urticaria hives treatment

Messaggioda MaradoMab » martedì 15 maggio 2012, 9:42

characters through competent direct mailing bureaus can cost anyplace For a kid affected by ADHD, workout is often useful. Workout takes up any additional vitality so it helps that will promote the mind. Group things to do train community competencies and also constraint. Nevertheless, if your little one shies off from team physical activities, you might like to check out pursuits like dance, bicycling, going swimming and also stuff. Martial arts training don't just show tactics connected with self-defense but in addition coach self-control in addition to patience. hives relief
urticaria
without risk when trying to learn the essentials http://urticariareliefhowto.info .
idiopathic angioedema symptoms urticaria natural remedies urticaria hives treatment
MaradoMab

Avatar utente
 
Messaggi: 1
Iscritto il: martedì 15 maggio 2012, 9:41
LocalitĂ : and


Torna a XHTML & CSS