Skocz do zawartości
rych54

Problem ze stopką na stronie pełno ekranowej

Przez rych54, w xHTML / CSS / Javascript

Polecane posty

rych54    0

rych54
Napisano

Cześć:) Zrobiłem strone z tłem na cały ekran. Jednak mam problem ze stopką. W stopce umieściłem buttony społecznościowe i tekst. Problem w tym ze na niskich ekranach stopka zachodzi na pionowe menu. Stopke robiłem z tego tutoriala: http://webfaces.pl/blog/ciekawe-strony/stopka-u-dolu-strony-rozwiazanie-w-css/ . Czy ktoś potrafiłby mi pomóc albo doradzić w tej kwestii?

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

rych54    0

rych54
Napisano 
<!DOCTYPE html>
<html lang="pl">

<head>
	<meta charset="utf-8" />
	<title>Avocado Restauracja</title>
	<meta name="keywods" content="słowa, kluczowe" />
	<meta name="description" content="Opis.." />
	<meta name="robots" content="index, follow" />
	<link rel="stylesheet" href="css/style.css" type="text/css">
	<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
	<link href="css/lightbox.css" rel="stylesheet" />
	<script src="js/jquery-1.7.2.min.js"></script>
	<script src="js/lightbox.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script src="js/cufon-yui.js" type="text/javascript"></script>
	<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
	<script type="text/javascript">
			$(function() {
				Cufon.replace('a, span').CSS.ready(function() {
					var $menu 		= $("#slidingMenu");
					var $selected	= $menu.find('li:first');
					var $moving		= $('<li />',{
						className	: 'move',
						top			: $selected[0].offsetTop + 'px',
						width		: $selected[0].offsetWidth + 'px'
					});
					$('#slidingMenuDesc > div').each(function(i){
						var $this = $(this);
						$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
					});
					$menu.bind('mouseleave',function(){
							moveTo($selected,400);
						  })
						 .append($moving)
						 .find('li')
						 .not('.move')
						 .bind('mouseenter',function(){
							var $this = $(this);
							var offsetLeft = $this.offset().left - 20;
							
							$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
							
							moveTo($this,400);
						  })
						  .bind('mouseleave',function(){
							var $this = $(this);
							var offsetLeft = $this.offset().left - 20;
							
							$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
						  });;

					function moveTo($elem,speed){
						$moving.stop(true).animate({
							top		: $elem[0].offsetTop + 'px',
							width	: $elem[0].offsetWidth + 'px'
						}, speed, 'easeOutExpo');
					}
				}) ;
			});
		</script>
		<style>
          span.reference{
              position:fixed;
              left:10px;
              bottom:10px;
              font-size:14px;
          }
          span.reference a{
              color:#aaa;
              text-decoration:none;
          }
		</style>
</head>
<body>
<header>
			
			<div id="bg">
				<img src="images/tlo.jpg" alt="">
			</div>
			<div class="pasek"></div>
	
		<div class="main">	
		

				<div class="head">
					<div class="container">
						<div class="logo"><a href="index.html"><img src="images/logo.png" class="logo" alt="" width="350" height="101" border="0" /></a></div>
							<div class="head_prawo">
								<div class="ikona-top ikona-telefon">Zadzwoń: <span></span></div>
									<div class="ikona-top ikona-mapa">Mapa:<a href="location.html"><span>Zobacz</span></a></div>
							</div>
					</div>
					
				</div>

			<div id="slidingMenuDesc" class="slidingMenuDesc">
				<div><span></span></div>
				<div><span></span></div>
				<div><span>Restauracja Avocado to...</span></div>
				<div><span>fd</span></div>
				<div><span>Powstaliśmy z myślą świeżego spojrzenia na branżę eventową. </span></div>
				<div><span>fdb</span></div>

			
	

			</div>
			
				<ul id="slidingMenu" class="slidingMenu slidingMenuDesc">
					<li><a href="restauracja.html">Restauracja</a></li>
					<li><a href="catering.html">Catering</a></li>
					<li><a href="onas.html">O nas</a></li>
					<li><a href="pokoje.html">Pokoje</a></li>
					<li><a href="rezerwacja.html">Rezerwacja</a></li>
					<li><a href="galeria.html">Galeria</a></li>
					<li><a href="kontakt.php">Kontakt</a></li>
				</ul>
		
		

</div>	

</header>
   <footer>
		<div class="main">
		<ul class="soc_list">
            <li><a href="#" onclick="target='new'"><img src="images/soc_1.png" alt=""></a></li>
            <li><a href="#"><img src="images/soc_2.png" alt=""></a></li>
            <li><a href="#"onclick="target='new'"><img src="images/soc_3.png" alt=""></a></li>
        </ul>
			<p>Copyright © 2013</p>
		</div>
	</footer> 
</body>
</html>


 html, body {
    margin:0;
    padding:0;
}
 html {
    height: 100%;
}

body { 	 
	font-family: 'Titillium400', sans-serif;
	font-size:12px;
	min-height: 100%;
    position:relative;
}

@font-face {
    font-family: 'Titillium800';
    src: url('../fonts/TitilliumText25L001-webfont.eot');
    src: url('../fonts/TitilliumText25L001-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L001-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L001-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L001-webfont.svg#TitilliumText25L800wt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Titillium600';
    src: url('../fonts/TitilliumText25L002-webfont.eot');
    src: url('../fonts/TitilliumText25L002-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L002-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L002-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L002-webfont.svg#TitilliumText25L600wt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Titillium400';
    src: url('../fonts/TitilliumText25L003-webfont.eot');
    src: url('../fonts/TitilliumText25L003-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L003-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L003-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L003-webfont.svg#TitilliumText25L400wt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText25L250wt';
    src: url('../fonts/TitilliumText25L004-webfont.eot');
    src: url('../fonts/TitilliumText25L004-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L004-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L004-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L004-webfont.svg#TitilliumText25L250wt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText25L1wt';
    src: url('../fonts/TitilliumText25L005-webfont.eot');
    src: url('../fonts/TitilliumText25L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L005-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L005-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L005-webfont.svg#TitilliumText25L1wt') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TitilliumText25L999wt';
    src: url('../fonts/TitilliumText25L-webfont.eot');
    src: url('../fonts/TitilliumText25L-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/TitilliumText25L-webfont.woff') format('woff'),
         url('../fonts/TitilliumText25L-webfont.ttf') format('truetype'),
         url('../fonts/TitilliumText25L-webfont.svg#TitilliumText25L999wt') format('svg');
    font-weight: normal;
    font-style: normal;

}


	
#bg {
			position:fixed; 
			top:-50%; 
			left:-50%; 
			width:200%; 
			height:200%;
			
		}
		#bg img {
			position:absolute; 
			top:0; 
			left:0; 
			right:0; 
			bottom:0; 
			margin:auto; 
			min-width:50%;
			min-height:50%;
		}	

#page-wrap { 
	z-index: 2;
	width: 630px;	
overflow: hidden;
position: relative;

margin: 50px auto;
	padding: 20px;
	background: #FFF;
	-moz-box-shadow: 0 0 20px black;
	-webkit-box-shadow: 0 0 20px black;
	box-shadow: 0 0 20px black;
}
p {
	font-family: 'Titillium400';
	font-size: 16px;
	margin: 0 0 30px 0; 
	text-align: justify;
}		
		
.main {	
	padding:0;
	margin:0 auto;
	position:relative;
}

/***** header*****/
.container {
	position:relative;
	z-index:0;
	margin:0 auto;
	}
	

.pasek{
	background-color:#000000;
	opacity:0.7;
	width:285px;
	height:100%;
	position: fixed;
	right:0px;
	;
	top:0px;"
}

.head .container {
	height:152px;}
	
.logo {
	position: absolute;
	top:10px;
	width:350px;
	padding-top:1px
}
.head_prawo{
	float:right;
	margin:50px 25px 0 0}

.ikona-top {
	line-height:25px;
	padding-right:15px;
	color:#FFF;
	font-family: 'Titillium600', sans-serif;
	font-size:18px;
	text-align:right}

.ikona-telefon {
	background:url('../images/telefon_ico.png') right 5px no-repeat;}

.ikona-mapa {
	background:url('../images/map_ico.png') right 5px no-repeat;}

.ikona-top span, icon-top a {
	color:#cdd72c;
	text-decoration:none
}
	
/***** menu *****/	
}
.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	right:1px;
	font-family: Arial, Helvetica, sans-serif;
	
}
.slidingMenu li {
	display:block;
	float:right;
	clear:both;
	position:relative;
	overflow:hidden;
	max-width: 279px;
	
}
.slidingMenu li.move {
	width: 9px;
	height: 68px;
	right:0px;
	padding-right:10px;
	margin-top:2px;
	z-index: 8;
	position: absolute;    
	background: #C10000;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#C10000), 
			to(#C10000)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#C10000, 
			#C10000
		);     
	-moz-border-radius: 8px 0px 0px 8px;  
	-webkit-border-top-left-radius: 8px;     	
	-webkit-border-bottom-left-radius: 8px; 
	border-top-left-radius: 8px;  
	border-bottom-left-radius: 8px;        
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;	
	}
.slidingMenu li a {
	font-size:60px;
	 font-weight: 600;
	text-transform:uppercase;
	text-decoration: none;
	color: #ddd;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 66px;
	line-height: 66px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}
.slidingMenuDesc{
	margin-top:40px;
	margin-bottom:40px;
	position:relative;
}
.slidingMenuDesc div{
	background: #C10000;     
	background: 
		-webkit-gradient(
			linear, 
			left top, 
			left bottom, 
			from(#C10000), 
			to(#C10000)
		);     
	background: 
		-moz-linear-gradient(
			top, 
			#C10000, 
			#C10000
		);   	
	height: 68px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;  
	-webkit-border-top-right-radius: 8px;     	
	-webkit-border-bottom-right-radius: 8px; 
	border-top-right-radius: 8px;  
	border-bottom-right-radius: 8px; 
}
.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

@media screen and (min-width: 480px) { 
   
 .slidingMenu li a { 
      font-size: 33px !important;    
     } 
   
 } 

 @media screen and (min-width: 750px) { 
   
 .slidingMenu li a { 
      font-size: 37px !important;    
     } 
   
 } 

 @media screen and (min-width: 1200px) { 
   
 .slidingMenu li a { 
      font-size: 41px !important;    
     } 
   
 }
 
/***** strona*****/
.restauracja {margin-left: 3px;}
.kontakt {text-align: right;}
hr{
	height:0;
	border:none;
	border-top:1px solid #000;
}	

h3 { 
color: #000;
font-family: 'Titillium600';
font-size: 35px;
font-weight: 400;
line-height: 36px;
text-transform: none;
}
.margin-bot { 
margin-bottom: 10px;
}
 
.contener { 
margin-left: auto;
margin-right: auto;
width: 630px;
}

.wrapper { 
overflow: hidden;
width: 100%;
}


.kolumnaprawa { 
display: inline;
float: right;
width: 300px;
margin-left: 10px;
margin-right: 10px;
position: relative;
}

.kolumnalewa { 
width: 300px;
margin-right: 10px;
position: relative;
}
img
 {
 vertical-align:text-top;
 }

/***** stopka*****/
footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;  /* Wysokość nagłówka */
  background:#b5fbbd;
 }
 .push {
clear: both;
}
.footer p{
	z-index:1;
	text-align:left;
	padding-left:10px;
	font-size:17px;
	font-family:'Titillium600';
}
.footer a{
	color: #FFF;
	text-decoration: none;
	
}

.soc_list {
	float:right;
	padding-right:10px;
}
.soc_list li {
	float:left;
	margin-left:6px;
}
.soc_list li:first-child {
	margin-left:0;
}
.soc_list li a {
	display:block;
	position:relative;
	width:32px;
	height:32px;
	overflow:hidden;
}
.soc_list li a img {
	position:absolute;
	left:0;
}
.soc_list li a:hover img {
	top:0;
}
.soc_list img:hover {

filter: alpha(opacity=70);

-moz-opacity: 0.73;

opacity: 0.7;

}
/***** formularz*****/
dl {margin:18px 0px 0 0px;}
dl dt {}
dl dd span { color:#fff;}
dl dd {}
dl dd a {}
dl dd a:hover {}

#form label {	
	display: block;
	font-size: 13px;
	color: #666;
	font-weight: bold;
}



#form fieldset {
	border:none;
	padding:0;
	margin-top:-20px
}			
		
#form input {	
	background: #DCDCDC;
	border: medium none #DCDCDC;
	color: #000000;
	font-family: "Titillium600";
	font-size: 14px;
	height: 15px;
	margin: 0px;
	outline: medium none #DCDCDC;
	padding: 6px 10px 7px;
	width: 180px;
	float:left;
}

#form textarea {
	background: #DCDCDC;
	border: medium none #DCDCDC;
	color: #000000;
	font-family: "Titillium600";
	font-size: 14px;
	height: 235px;
	line-height: 15px;
	margin: 0px;
	outline: medium none #DCDCDC;
	overflow: auto;
	padding: 6px 10px 7px;
	resize: none;
	width: 278px;
}

.przyciski {
	padding-top: 33px;
	position: relative;
	text-align: left;
}



button {
	display:inline-block;
	font-size:14px;
	line-height:17px;
	color:#fff;
	font-family: "Titillium600";
	text-transform:none;
	border: none;
	float:left;
	background:#262626;
	margin-right: 18px;
	padding:10px 15px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
button:hover {
	background:#fea800;
	color:#1d1d1d;
}

.formularz {
	font-family: 'Titillium600';
	font-size: 14px;
	margin: 0 0 -20px 0; 
	text-align: justify;
}
.error {
	color:red;
}

 

 

 

Udostępnij ten post

Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Przejdź do listy tematów xHTML / CSS / Javascript
×