+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: problem ze stopką (/thread-problem-ze-stopka--10823)
problem ze stopką - taaniel - 25-07-2013
Witam serdecznie próbowałem już prawie wszystkiego z tym aby stopka była na samym dole w tej stronie. Grzebałem w css i dalej nie mogę sprawić by stopka była na samym dole. Chodzi mi o stronkę: http://soulmatestudio.eu/
Co robię nie tak??
czy to możliwe ze to wstawka z CBA zmienia i rozwala stopkę??
Bardzo proszę o pomoc
RE: problem ze stopką - mateo - 25-07-2013
Daj do html i bdoy min-height: 100% i do body position: relative
RE: problem ze stopką - taaniel - 25-07-2013
nie działa stpopka podskoczyła do góry jeszcze:/
RE: problem ze stopką - mateo - 25-07-2013
Jak używasz float, to musisz postarać się, żeby div-rodzic, rozciągał się razem z elementami w nim zawartymi.
RE: problem ze stopką - Kartofelek - 25-07-2013
Musisz okryć stronę #page-wrapper i dopiero jemu dajesz min-height:
Kod:
<body>
<div id="page-wrapper">
........CBA ssie pałkę.....
.................................
<div id="footer"></div>
</div>
</body>
body, html {height:100%}
#page-wrapper {min-height:100%; padding-bottom:ZZZpx;}
#footer {position:absolute; bottom:0; left:0; width:100%; height:ZZZpx;}gdzie ZZZ - wysokość stopki
RE: problem ze stopką - taaniel - 25-07-2013
i tak dalej nie działa:/
Kod:
<!DOCTYPE HTML>
<html <?php language_attributes (); ?>>
<head>
<meta charset="<?php bloginfo ('charset'); ?>">
<title><?php bloginfo ('name'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Life+Savers&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Galindo&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Comfortaa&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href='<?php bloginfo('stylesheet_url'); ?>' media="screen" >
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" >
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="menu_up">
<ul>
<li>
<a href="#">
<p class="small_menu"><h3>O Nas</h3></p>
</a>
</li>
<li>
<a href="#">
<p class="small_menu"><h3>Współpraca</h3></p>
</a>
</li>
<li>
<a href="#">
<p class="small_menu"><h3>Referencje</h3></p>
</a>
</li>
<li>
<a href="#">
<p class="small_menu"><h3>Kontakt</h3></p>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div id="logo">
<div id="logo_napis">
<p>Każda chwila w Twoim życiu jest wyjątkowa i zdarza się tylko raz </p>
</div>
<div id="menu_cointaier">
<ul class="menu">
<li>
<a href="#">
<span class="ikonka">O</span>
<div class="content">
<h2 class="content_up">Reportaż Ślubny</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">I</span>
<div class="content">
<h2 class="content_up">Sesje plenerowe</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">~</span>
<div class="content">
<h2 class="content_up">Moto-pasja</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">?</span>
<div class="content">
<h2 class="content_up">Eventy</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">`</span>
<div class="content">
<h2 class="content_up">Uchwycone</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">U</span>
<div class="content">
<h2 class="content_up">O Nas</h2>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">V</span>
<div class="content">
<h2 class="content_up">Współpraca</h2>
<!-- <h3 class="content_down">My to zrobimy najlepiej</h3> -->
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">.</span>
<div class="content">
<h2 class="content_up">Referencje</h2>
<!--<h3 class="content_down">O Nas mówią , piszą</h3> -->
</div>
</a>
</li>
<li>
<a href="#">
<span class="ikonka">@</span>
<div class="content">
<h2 class="content_up">Kontakt</h2>
<!--<h3 class="content_down">Skontaktuj się</h3> -->
</div>
</a>
</li>
</ul>
</div>
<div id="content">
<?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>
<header>
<h1>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h1>
<p> Opublikowano <?php the_time('j F Y'); ?></p>
<p> Autor <?php the_author_posts_link(); ?></p>
<p> Kategoria <?php the_category(); ?></p>
<p> Komentarze <?php comments_popup_link(); ?></p>
<p> Edytuj <?php edit_post_link(); ?></p>
</header>
<article>
<p> Autor <?php the_content(); ?></p>
</article>
<?php if (is_single() || is_page () ): ?>
<?php comments_template(); ?>
<?php endif; ?>
<?php endwhile; else: ?>
<p>nie ma postów</p>
<?php endif; ?>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="menu_foot">
<ul id="foot_menu">
<li>
<a href="#">
<h3>Reportaż Ślubny</h3>
</a>
</li>
<li>
<a href="#">
<h3>Sesje plenerowe</h3>
</a>
</li>
<li>
<a href="#">
<h3>Moto-pasja</h3>
</a>
</li>
<li>
<a href="#">
<h3>Eventy</h3>
</a>
</li>
<li>
<a href="#">
<h3>Uchwycone</h3>
</a>
</li>
<li>
<a href="#">
<h3>O nas</h3>
</a>
</li>
<li>
<a href="#">
<h3>Współpraca</h3>
</a>
</li>
<li>
<a href="#">
<h3>Referencje</h3>
</a>
</li>
<li>
<a href="#">
<h3>Kontakt</h3>
</a>
</li>
</ul>
</div>
<div id="light">
<div id="follow_napis"> <p>Znajdz nas</p></div>
<div id="follow">
<ul id="social">
<li>
<a href="#">
<div class="sm">
<div id="fb"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="sm">
<div id="twitter"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="sm">
<div id="flickr"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="sm">
<div id="instagram"></div>
</div>
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<div id="foot_text">
<p><strong>SoulMate</strong> - w języku anglo-saskim oznacza bratnie dusze. Nazwa ta zrodziła się z dwóch pozytywnych energii Kasi i Piotra, które wspólnie malują piękne obrazy na Twoich wydarzeniach. </p>
</div>
</div>
<div id="underfoot">
<p> © Copyright All Rights Reserved</p>
<p> Design by </p>
</div> -->
</div>
</body>
</html>i css
Kod:
@font-face {
font-family: 'web_symbolsregular';
src: url('font/websymbols-regular-webfont.eot');
src: url('font/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/websymbols-regular-webfont.woff') format('woff'),
url('font/websymbols-regular-webfont.ttf') format('truetype'),
url('font/websymbols-regular-webfont.svg#web_symbolsregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'kyne_morganregular';
src: url('font/kyne_morgan-webfont.eot');
src: url('font/kyne_morgan-webfont.eot?#iefix') format('embedded-opentype'),
url('font/kyne_morgan-webfont.woff') format('woff'),
url('font/kyne_morgan-webfont.ttf') format('truetype'),
url('font/kyne_morgan-webfont.svg#kyne_morganregular') format('svg');
font-weight: normal;
font-style: normal;
}
html {
height: 100%;
}
body {
position: relative;
margin:0;
padding:0;
min-height: 100%;
}
#wrapper {
background: white;
width: 1024px;
margin: 0 auto;
}
#container {
width:950px;
min-height:100%;
position:relative;
}
.clear {
clear:both;
}
#menu_up {
position: absolute;
right: -35px;
top: -20px;
display: block;
}
#menu_up ul {
list-style: none;
display: block;
position: relative;
}
#menu_up li {
list-style: none;
display: block;
position: relative;
float: left;
margin: 10px;
}
#menu_up a {
font-family: Helvetica;
display: block;
color: #333;
list-style: none;
text-decoration: none;
}
#menu_up a:hover {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
}
#menu_up h3 {
font-size: 16px;
}
.small_menu {
list-style: none;
display: block;
position: relative;
}
#logo {
background: url(images/logo.PNG) ;
height: 182px;
width: 169px;
position: relative;
left: 30px;
top:30px;
}
#logo_napis {
background: url(images/napis.PNG);
height: 48px;
width: 482px;
position: relative;
left: 275px;
top: 60px;
}
#logo_napis p {
font-family: 'Comfortaa', sans-serif;
font-size: 15px;
position: absolute;
height: 50px;
width: 510px
left: 190px;
top:77px;
}
#menu_cointaier {
position: relative;
top:150px;
}
.menu {
padding:0;
margin: 0 auto;
padding-top: 65px;
}
.menu li {
width: 200px;
height: 50px;
overflow: hidden;
position: relative;
display: block;
background: #fff;
-webkit-box-shadow: 4px 4px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 5px rgba(0,0,0,0.2);
box-shadow: 4px 4px 5px rgba(0,0,0,0.2);
margin-bottom: 7px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.menu li:last-child {
margin-bottom: 0px;
}
.menu li a {
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #333;
position: relative;
}
.ikonka {
font-family: 'web_symbolsregular', cursive;
font-size: 12px;
text-shadow: 0px 0px 1px #333;
line-height: 90px;
position: absolute;
width: 25px;
top: -20px;
left: 10px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.content {
position: absolute;
left: 55px;
width: 150px;
height: 50px;
top: 1px;
}
.content_up {
font-size: 16px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
/*.content_down {
font-size: 9px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}*/
.menu li:hover {
background: #e1f0fa;
}
.menu li:hover .ikonka {
font-size: 20px;
color: #259add;
opacity: 0.8;
text-shadow: 0px 0px 13px #fff;
}
.menu li:hover .content_up {
opacity: 1;
color:#2676ac;
-webkit-animation: moveFromTop 300ms ease-in-out;
-moz-animation: moveFromTop 300ms ease-in-out;
-ms-animation: moveFromTop 300ms ease-in-out;
}
/*.menu li:hover .content_down {
opacity: 1;
-webkit-animation: moveFromBottom 300ms ease-in-out;
-moz-animation: moveFromBottom 300ms ease-in-out;
-ms-animation: moveFromBottom 300ms ease-in-out;
}*/
@-webkit-keyframes moveFromBottom {
from {
opacity: 0;
-webkit-transform: translateY(200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromBottom {
from {
opacity: 0;
-moz-transform: translateY(200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromBottom {
from {
opacity: 0;
-ms-transform: translateY(200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
@-webkit-keyframes moveFromTop {
from {
opacity: 0;
-webkit-transform: translateY(-200%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@-moz-keyframes moveFromTop {
from {
opacity: 0;
-moz-transform: translateY(-200%);
}
to {
opacity: 1;
-moz-transform: translateY(0%);
}
}
@-ms-keyframes moveFromTop {
from {
opacity: 0;
-ms-transform: translateY(-200%);
}
to {
opacity: 1;
-ms-transform: translateY(0%);
}
}
#content {
width: 750px;
position: relative;
left: 250px;
top:-350px;
}
#footer {
background: url(images/foot_patern.PNG) center;
position:absolute;
bottom:0;
width:100%;
height:300px;
}
#light {
background: url(images/light.PNG) center no-repeat;
opacity: 0,5;
height: 250px;
width: 473px;
margin: 0 auto;
}
#social {
position: relative;
height: 75px;
width: 360px;
top: 25px;
}
#social ul {
display: block;
list-style: none;
margin: 0 auto;
}
#social li {
list-style: none;
float: left;
margin: 10px;
}
#social p{
}
#fb {
background: url(images/fb.PNG);
position: relative;
height: 71px;
width:70px;
display: block;
}
#twitter {
background: url(images/twiterr.PNG);
position: relative;
height: 71px;
width:70px;
display: block;
}
#flickr {
background: url(images/flickr.PNG);
position: relative;
height: 71px;
width:70px;
display: block;
}
#instagram {
background: url(images/instagram.PNG);
position: relative;
height: 71px;
width:70px;
display: block;
}
.sm {
position: relative;
height: 67px;
width:70px;
display: block;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;}
.sm {
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}
.sm:hover{
transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
}
#menu_foot {
position: absolute;
height: 200px;
width: 150px;
left:470px;
}
#foot_menu {
position: relative;
margin:0 auto;
width: 95px;
top: 25px;
}
#foot_menu ul{
width: 95px;
margin:0 auto;
top: 10px;
text-align: center;
display: block;
}
#foot_menu li {
list-style: none;
padding-left: 20px;
background: url(images/icon2.PNG)0px -3px no-repeat;
height: 10px;
width: 95px;
display: block;
margin: 7px;
}
#foot_menu li:hover {
opacity: 0.5;
}
#foot_menu a {
position: relative;
margin:0 auto;
text-decoration: none;
color: #9e9c9c;
}
#foot_menu h3 {
width: 95px;
margin:0 auto;
font-size: 11px;
}
#follow {
height: 50px;
}
#follow_napis {
position: relative;
height: 50px;
margin: 0 auto;
top: 25px;
left: 105px;
}
#follow_napis p{
font-family: 'Galindo', sans-serif;
font-size: 40px;
color: #959191;
text-shadow: 3px 3px #333030
}
#foot_text {
height: 0px;
width: 200px;
position: relative;
left: 500px;
top: -120px;
}
#foot_text p {
color: #9e9c9c;
font-size: 16px;
text-shadow: 0px 0px #333030
}
#underfoot {
height: 60px;
background: url(images/grey.PNG);
position: relative;
top:10px;
}
#underfoot p {
text-align: center;
position: relative;
top:10px;
}
#underfoot a {
display: block;
text-decoration: none;
}RE: problem ze stopką - taaniel - 25-07-2013
Ok problem rozwiązany. Pozdrawiam i dziekuje