Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP] Footer zawsze na dole - problem
Forum PHP.pl > Forum > Przedszkole
jacekkolodziejczyk
20.01.2011, 10:41:29
Witam,

Zwracam się do Was z wielką prośbą o pomoc. Generalnie dopiero zaczynam i jeszcze bardzo mało ogarniam i pewnie dlatego, w żaden sposób nie mogę poradzić sobie z umieszczeniem footera na dole strony. Stronę stawiam na
drupalu i potrzebuję zrobić stopkę tak, żeby była zawsze na dole. W tej chwili działa to tylko jeśli jest dużo treści na stronie. W momencie jak jest mało treści, stopka podjeżdża do góry i zaczyna się tam gdzie kończy się treść. Przy większych rozdzielczościach więc wisi w połowie strony sad.gif Próbowałem już wszystkich rozwiązań dostępnych w sieci i wygląda na to, że chyba jednak sam nie ogarnę tematu. Chodzi mi o dokładnie takie rozwiązanie jak http://www.cssstickyfooter.com. Czyli nie na stałe (position:fixed) tylko relative.

[PHP] pobierz, plaintext 
  1. <?php
  2. // $Id: page.tpl.php,v 1.25 2008/01/24 09:42:53 Leo Exp $
  3. ?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language->language ?>" xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
  5. <head>
  6.   <title><?php print $head_title ?></title>
  7.     <?php print $head ?>
  8.   <?php print $styles ?>
  9.   <?php print $scripts ?>
  10.  
  11.   <!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script.js"></script><![endif]-->
  12.   <link href="<?php print base_path().path_to_theme() ?>/menu.css" media="all" rel="stylesheet" type="text/css" />
  13.  
  14.   	<script type="text/javascript" src="<?php print base_path().path_to_theme() ?>/js/jquery.galleriffic.js"></script>
  15.     <script type="text/javascript" src="<?php print base_path().path_to_theme() ?>/js/jquery.opacityrollover.js"></script>
  16. 	<script type="text/javascript">
  17. 	jQuery(document).ready(function($) {
  18. 		// We only want these styles applied when javascript is enabled
  19. 		$('div.content2').css('display', 'block');
  20.  
  21. 		// Initially set opacity on thumbs and add
  22. 		// additional styling for hover effect on thumbs
  23. 		var onMouseOutOpacity = 0.67;
  24. 		$('#thumbs ul.thumbs li').opacityrollover({
  25. 			mouseOutOpacity:   onMouseOutOpacity,
  26. 			mouseOverOpacity:  1.0,
  27. 			fadeSpeed:         'fast',
  28. 			exemptionSelector: '.selected'
  29. 		});
  30.  
  31. 		// Initialize Advanced Galleriffic Gallery
  32. 		var gallery = $('#thumbs').galleriffic({
  33. 			delay:                     2500,
  34. 			numThumbs:                 0,
  35. 			preloadAhead:              10,
  36. 			enableTopPager:            false,
  37. 			enableBottomPager:         false,
  38. 			maxPagesToShow:            7,
  39. 			imageContainerSel:         '#slideshow',
  40. 			controlsContainerSel:      '#controls',
  41. 			captionContainerSel:       '#caption',
  42. 			loadingContainerSel:       '#loading',
  43. 			renderSSControls:          false,
  44. 			renderNavControls:         false,
  45. 			playLinkText:              'Play Slideshow',
  46. 			pauseLinkText:             'Pause Slideshow',
  47. 			prevLinkText:              'Prev',
  48. 			nextLinkText:              'Next',
  49. 			nextPageLinkText:          '',
  50. 			prevPageLinkText:          '',
  51. 			enableKeyboardNavigation:  false,
  52. 			enableHistory:             false,
  53. 			autoStart:                 true,
  54. 			syncTransitions:           false,
  55. 			defaultTransitionDuration: 900,
  56. 			onSlideChange:             function(prevIndex, nextIndex) {
  57. 				// 'this' refers to the gallery, which is an extension of $('#thumbs')
  58. 				this.find('ul.thumbs').children()
  59. 					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
  60. 					.eq(nextIndex).fadeTo('fast', 1.0);
  61. 			},
  62. 			onPageTransitionOut:       function(callback) {
  63. 				this.fadeTo('fast', 0.0, callback);
  64. 			},
  65. 			onPageTransitionIn:        function() {
  66. 				this.fadeTo('fast', 1.0);
  67. 			}
  68. 		});
  69. 	});
  70. </script>
  71.  
  72. </head>
  73.   <body>
  74. <body id="body">
  75.     <div class="min-width">
  76.         <div id="header">
  77.             <div class="head-row1 main">
  78.                 <div class="col1">
  79.                     <?php if ($logo) : ?>
  80.                         <a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print($logo) ?>" alt="<?php print t('Home') ?>" class="logo" /></a>
  81.                     <?php endif; ?>
  82.                     <?php if ($site_name) : ?>
  83.                         <h1 class="site-name"><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1>
  84.                     <?php endif; ?>
  85.                     <?php if ($site_slogan) : ?>
  86.                         <div class="slogan"><?php print($site_slogan) ?></div>
  87.                     <?php endif;?>
  88.                     <?php if ($mission != ""): ?>
  89.                         <div id="mission"><?php print $mission ?></div>
  90.                     <?php endif; ?>
  91.                 </div>
  92.                 <div class="col2">
  93.                     <?php if (isset($secondary_links)) : ?>
  94.                         <div class="secondary-menu">
  95.                             <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
  96.                         </div>
  97.                     <?php endif; ?>
  98.                 </div>
  99.             </div>
  100.             <div class="head-row2 main">
  101.                 <?php if (module_hook('yuimenu','menu') && ("tns" == variable_get('yuimenu_type','tns') || "tnm"==variable_get('yuimenu_type','tns')) ){?>
  102.                     <?php print html_menu(variable_get('yuimenu_root','1') ); ?>
  103.                 <?php }?>
  104.             </div>
  105.             <?php if ($gallery != ""): ?>
  106.                 <div class="head-row3">
  107.                 	<div class="main">
  108.                     	<?php print $gallery?>
  109.                     </div>
  110.                 </div>
  111.             <?php endif; ?>
  112.         </div>
  113.  
  114.         <div id="wrap">
  115.         <div id="cont">
  116.         	<div class="main">
  117.  
  118.                 <div class="cont-inner">
  119.  
  120.                     <?php if ($left != ""): ?>
  121.                         <div id="left-col">
  122.                             <div class="ind">
  123.                                 <div class="width">
  124.                                     <?php print $left?>
  125.                                 </div>
  126.                             </div>
  127.                         </div>
  128.                     <?php endif; ?>
  129.  
  130.                     <?php if ($right != ""): ?>
  131.                         <div id="right-col">
  132.                             <div class="ind">
  133.                                 <div class="width">
  134.                                     <?php print $right?>
  135.                                 </div>
  136.                             </div>
  137.                         </div>
  138.                     <?php endif; ?>
  139.  
  140.                     <div id="cont-col">
  141.                         <div class="ind">
  142.  
  143.                             <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
  144.                             <?php if ($title): print '
  145.                                 <h2'. ($tabs ? ' class="with-tabs title"' : '') .'>'. $title .'</h2>
  146.                             '; endif; ?>
  147.                             <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
  148.                             <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
  149.  
  150.                             <?php if ($show_messages && $messages != ""): ?>
  151.                                 <?php print $messages ?>
  152.                             <?php endif; ?>
  153.  
  154.                             <?php if ($help != ""): ?>
  155.                                 <div id="help"><?php print $help ?></div>
  156.                             <?php endif; ?>
  157.  
  158.                               <!-- start main content -->
  159.                             <?php print $content; ?>
  160.  
  161.                         </div>
  162.                     </div>
  163.  
  164.                 </div>
  165.             </div>
  166.         </div>
  167. </div>
  168.  
  169.  
  170.         <div id="footer">
  171.             <div class="border-bot">
  172.                 <div class="foot">
  173.                 	<div class="col1">
  174.                     	<?php if (isset($primary_links)) : ?>
  175.                             <div class="pr-menu">
  176.                                 <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
  177.                             </div>
  178.                         <?php endif; ?>
  179.                     </div>
  180.                     <div class="col2">
  181.                     	<?php if ($footer_message || $footer) : ?>
  182.                             <span><?php print $footer_message;?>&nbsp;FOOTER</span>
  183.                         <?php endif; ?>
  184.                     </div>
  185.  
  186.                 </div>
  187.             </div>
  188.         </div>
  189.       <!-- coded by Leo -->
  190.     </div>
  191.  
  192. <?php print $closure;?>
  193. </body>
  194. </html>
[PHP] pobierz, plaintext


i css (okazało się, że jest za długi na forum)

pliki do ściągnięcia (php i css) :

www.iacoski.com/files/pliki.zip

Byłbym bardzo wdzięczny o pomoc. Próbowałem już wszystkiego. Bezskutecznie.
Daiquiri
20.01.2011, 10:47:07
Domyślam się, że chcesz "na stałe" przykleić stopkę do dołu. Musisz więc odpowiednio "ostylować" DIVa footer. Szukaj pod hasłem np. "sticky footer", tutaj jest przykład. Z polskich możesz zerknąć w to miejsce.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.