Forum Pasja Informatyki - Najnowsze z tagiem footer

listy i divy w "responsywnym" footer

Tue, 08 Jun 2021 04:14:21 +0000

Cześć,

mam taki problem, mianowicie zrobiłem diva (wrapperfooter), który zajmuje 80% szerokości (przez width:80%) oraz jest wycentrowany w poziomie jako pojemnik na elementy "footerowe". Zrobiłem 2 listy nawigacyjne od lewej, po środku chce dać coś w rodzaju cytatu, a z prawej strony ikonki do social mediów. Nie wiem jednak jak zrobić, by ikonki do social mediów zawsze były "przyklejone" do prawego 'boku" wrapperfooter, a cytat był zawsze wycentrowany między listami nawigacyjnymi po lewej, a ikonkami po prawej. Niestety zarówno justify-content:right/end/center jak i text-align:right mi nie działają.
Proszę o pomoc, bo kompletnie nie wiem, co robię źle :(.

Pozdrawiam!

<html>
  <body>
    <footer>
      <div class="wrapperfooter">
      <ul class="aboutus">
        <li><a href="#">test01</a></li>
        <li><a href="#">test02</a></li>
        <li><a href="#">test03</a></li>
        <li><a href="#">test04</a></li>
      </ul>
      <ul class="help">
        <li><a href="#">test11</a></li>
        <li><a href="#">test12</a></li>
        <li><a href="#">test13</a></li>
        <li><a href="#">test14</a></li>
      </ul>
      <div class="motto">
        <h1>"lorem ipsum dolor sit amet"</h1>
        <p>~podpis</p>
      </div>
      <ul class="social">
        <li><a href="#"><img src="img/tw.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/yt.jpg" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/gh.png" width="32px" height="32px"></a></li>
        <li><a href="#"><img src="img/fb.jpg" width="32px" height="32px"></a></li>
      </ul>
    </div>
    </footer>
  </body>

footer
{
    height:120px;
    border-top:2px solid #cecece;
    bottom:0;
    position:absolute;
    width:100%;
    padding: 10px 0;
    line-height: 100%;
}
footer ul
{
    list-style-type: none;
    float:left;
    margin-right: 35px;
}
footer ul li a
{
    text-decoration: none;
    color:rgb(51, 51, 51);
    font-size:11px;
    text-transform: uppercase;
}
footer ul li a:hover
{
    color:#047cd1;
    text-decoration: underline;
    font-size:11px;
    text-transform: uppercase;
}
footer ul[class="social"]
{
    justify-content:right;
}
footer ul[class="social"] li
{
    float:left;
    padding:0px 4px 0px 4px;
    
}
footer ul[class="social"] li a
{
    opacity: 0.93;
}
footer ul[class="social"] img
{
  border:1px dashed black;
}
footer ul[class="social"] li a:hover
{
    opacity:1;
}
.wrapperfooter
{
    margin-left: auto;
    margin-right: auto;
    width:80%;
}
.motto
{
    float:left;
}
.motto h1
{
    font-size:18px;
    text-transform: uppercase;
    font-weight: normal;
    text-align: left;
}

Ustawienie footera na samym dole strony

Fri, 30 Apr 2021 15:51:15 +0000

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>World's countries</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="header">
        <div class="logo">
            <img class="logo-img"src="img/world-icon.png" alt="Earth">
            <p class="logo-text">countrypedia</p>
        </div>  
        <nav class="navbar">
            <a href="#">About us</a>
        </nav>
    </header>
    <section id="alphabet"></section>
    <section id="search">
        <input class="search-input" type="text" placeholder="Search for...">
    </section>
    <section id="countries">
        <div class="countries-container">
            <div class="country">
                <div class="country-img">
                    <img src="img/poland.png" alt="Poland">
                </div>
                <div class="country-name">
                    <p>Poland</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/albania.png" alt="Albania">
                </div>
                <div class="country-name">
                    <p>Albania</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/russia.png" alt="Russia">
                </div>
                <div class="country-name">
                    <p>Russia</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/spain.jpg" alt="Spain">
                </div>
                <div class="country-name">
                    <p>Spain</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/france.jpg" alt="France">
                </div>
                <div class="country-name">
                    <p>France</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/uk.jpg" alt="United Kingdom">
                </div>
                <div class="country-name">
                    <p>United Kingdom</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/usa.jpg" alt="United States Of The America">
                </div>
                <div class="country-name">
                    <p>United States of the America, Yeah the awful one</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/canada.jpg" alt="Canada">
                </div>
                <div class="country-name">
                    <p>Canada</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/mexico.png" alt="Mexico">
                </div>
                <div class="country-name">
                    <p>Mexico</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/china.jpg" alt="China">
                </div>
                <div class="country-name">
                    <p>China</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/brazil.jpg" alt="Brazil">
                </div>
                <div class="country-name">
                    <p>Brazil</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/portugal.jpg" alt="Portugal">
                </div>
                <div class="country-name">
                    <p>Portugal</p>
                </div>
            </div>
            <div class="country">
                <div class="country-img">
                    <img src="img/qatar.jpg" alt="qatar">
                </div>
                <div class="country-name">
                    <p>Qatar</p>
                </div>
            </div>
        </div>
    </section>
    <footer id="footer">
        <p>Copyright 2021 &copy;</p>
    </footer>
    <script src="main.js"></script>
</body>
</html>

Hej, napisałem stronę, która ma więcej elementów niż mieści się na ekranie i muszę przesuwać suwakiem w dół, aby zobaczyć całość. Chcę zrobić footer, który będzie cały czas na dole ekranu, nie zwracając uwagi jak duży content jest w środku (ponieważ to się zmienia). Próbowałem zrobić to przy pomocy position: relative;, lecz gdy zmienia się zawartość na ekranie i nie zajmuje już całego ekranu, wtedy footer jest dalej pod głównym contentem, lecz nie na samym dole. (chodzi o sytuację, gdy zechcę wyszukać kraje za pomocą alfabetu lub wyszukiwania) Dodaje cały kod strony, ponieważ nie wiem co dokładnie ma na to wpływ. Byłbym niezmiernie wdzięczny za pomoc lub rady jeżeli coś jest źle napisane.

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background: #323232;
    color: white;
    font-family: 'Merriweather Sans', sans-serif;
}

#header {
    display: flex;
    width: 100%;
    height: 150px;
    border-bottom: 3px solid #525252;
}

.logo {
    display: flex;
    align-items: center;
    flex-basis: 45%;
}

.logo-img {
    margin: 5px;
    padding: 10px;
    width: 150px;
    height: 150px;
}

.logo-text {
    text-transform: uppercase;
    font-size: 78px;
    font-weight: 900;
}

.navbar {
    flex-basis: 55%;
    align-self: center;
    display: flex;
    justify-content: center;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-size: 44px;
}

.navbar a:hover {
    color: #888;
    text-decoration: underline;
}

#alphabet {
    display: grid;
    width: 100%;
    height: 80px;
    background: #484848;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: 1fr;
    border-bottom: 3px solid #525252;
}

.alphabet-letter {
    text-align: center;
    padding-top: 14px;
    font-size: 40px;
}

.alphabet-letter.selected {
    background: #292929;
    color: green;
}

.alphabet-letter.selected:hover {
    background: #323232;
    color: green;
}

.alphabet-letter:hover {
    background: #535353;
    cursor: pointer;
    color: yellow;
}

#search {
    width: 100%;
    height: 50px;
    margin-top: 25px;;
    text-align: center;
}

.search-input {
    width: 500px;
    height: 50px;
    border-radius: 25px;
    font-size: 30px;
    padding: 12px;
    outline: none;
    text-align: center;
}

#countries {
    width: 100%;
    margin-top: 100px;
}

.countries-container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(275px, 350px);
}

.country {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.country-img img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.country-name {
    height: 75px;
    text-align: center;
    font-size: 28px;
    margin-top: 10px;
}

#footer {
    width: 100%;
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    background: black;
    text-align: center;
    padding-top: 25px;
}

const alphabet = {1:"a", 2:"b", 3:"c", 4:"d", 5:"e", 6:"f", 7:"g", 8:"h", 9:"i", 10:"j", 11:"k", 12:"l", 13:"m",  14:"n", 15:"o", 16:"p", 17:"q", 18:"r", 19:"s", 20:"t", 21:"u", 22:"v", 23:"y", 24:"z"};
const alphabetDiv = document.querySelector('#alphabet');
const input = document.querySelector('.search-input');
let countries = document.querySelectorAll('.country-name');
let isLetterSelected = false;

function createAlphabet() {
    let alphabetContent = '';
    for (i=1; i<=Object.keys(alphabet).length; i++) {
        alphabetContent+=`<div class="alphabet-letter">${(alphabet[i]).toUpperCase()}</div>`;
    }
    alphabetDiv.innerHTML = alphabetContent;
}


document.addEventListener("DOMContentLoaded", createAlphabet);

alphabetDiv.addEventListener('click', ( {target} ) => {
    if (!target.matches('.alphabet-letter')) {
        return;
    } else {
        if (target.classList.contains('selected')) {
            target.classList.remove('selected');
            isLetterSelected = false;
            let firstLetter = '';
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none';            
                }
            })
        } else {
            const alphabet = document.querySelector('#alphabet').children;
            const alphabet2 = Array.from(alphabet);
                alphabet2.forEach( (letter) => {
                if (letter.classList.contains('selected')) {
                    letter.classList.remove('selected');
                }
            })

            target.classList.add('selected');
            let firstLetter = target.textContent.toUpperCase();
            let names = Array.from(countries);
            names.forEach( (el) => {
                if (el.firstElementChild.textContent[0].toUpperCase().indexOf(firstLetter) != -1) {
                    el.closest('.country').style.display = 'flex';
                } else {
                    el.closest('.country').style.display = 'none'; 
                }
            })
        }
}})

function searchCountry(e) {
    const alphabet = document.querySelector('#alphabet').children;
    const alphabet2 = Array.from(alphabet);
    alphabet2.forEach( (letter) => {
        if (letter.classList.contains('selected')) {
            letter.classList.remove('selected');
        }
    })
    isLetterSelected = false;
    
    let names = Array.from(countries);
    names.forEach( (el) => {
        if ((el.firstElementChild.textContent).toLowerCase().indexOf(e.target.value.toLowerCase())!=-1) {
            el.closest('.country').style.display = 'flex';
        } else {
            el.closest('.country').style.display = 'none';
        }
    })
}

input.addEventListener('keyup', searchCountry);

Wysuwany (banner,stopka) jako DIV po kliknięciu na link

Fri, 18 Sep 2020 13:42:54 +0000

Hej mam pytanie, jako że w kwestii JS itp. raczkuje, tez nie wiem jak precyzyjnie zadać to pytanie.
Chodzi mi o to w jaki sposób stworzyć mogę coś na zasadzie dynamicznego baneru ( pojawiąjącego się na dole strony, jako zamykalny "DIV" ).
https://www.gov.pl/web/rodzina
Tutaj takie coś się pojawia np na tej stronie "chodzi mi o taki dolny baner np o polityce cookie z możliwością zamykania"
generalnie ja takiego diva mam tworzyć w momencie kliknięcia na link znajdujący się w stopce ma się on wysuwać, ale to wiem że należy podpiąc na akcje. Na razie jeśli ktoś byłby w stanie coś doradzić jak taki efekt zrobić- odesłać do fidla podobnego, dzieki

Ps: to nie ma być modalne okno, tylko div na dole strony nie blokujący bo jeśli chodzi o modalne, to już takie mam
to jest wycięty przykład co mam na myśli

BOOTSTRAP - Nachodząca stopka na content

Thu, 27 Aug 2020 09:00:14 +0000

Cześć. Miał ktoś podobny problem ze stopką, używając bootstrapa? Kiedy jest więcej treści i mniejsza rozdzielczość, to stopka zaczyna nachodzić na content.
Ssy:
http://prntscr.com/u6q1v2
http://prntscr.com/u6q2b3
http://prntscr.com/u6q31y

.mastfoot {
color: rgba(255, 255, 255, .5);
}

<footer class="mastfoot mt-auto">
<div class="inner">
<p>© 2020 Copyright: <a href="index.html">Hansik.pl</a></p>
</div>
</footer>

Z góry dziękuję i pozdrawiam.

Margin-top przy footerze

Fri, 31 Jan 2020 22:12:36 +0000

Witam mam pytanie dotyczące margin w stopce. Otóż chciałbym zrobic pod dwoma divami tile stopke a pomiedzy nimi np 200px odstepu (stopka ma z gory 200px wolnego miejsca) i chciałbym się dowiedzieć czemu w tym przypadku nie działa margin-top:200px;

Czy można to zrobić używając tylko margin-bottom:200px; w divie tile?

Margines ten moge zrobic tez uzywajac pomiedzy footerem a divami tile dopisku <div style="clear:both;"></div>.

Czy w takim razie jest sens dopisywania clear:both w stopce skoro można zrobic pomiędzy nimi diva czyszczącego. Liczę na odpowiedź

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>
	body
	{
		margin:0;
	}
.tile
{
	width:300px;
	height:300px;
	background-color:#323253;
	margin:10px;
	margin-bottom:0;
	float:left;
}
#footer
{
	clear:both;
	background-color:black;
	width:100%;
	height:200px;
	margin-top:500px;
}



</style>


</head>
<body>


<div class="tile"></div>
<div class="tile"></div>
<div id="footer"></div>



</body>
</html>

Jak dostać się do footer id="stopka1

Tue, 06 Aug 2019 17:01:31 +0000

Banalne pytanie ale ugrzązłem ;-

jaki mam selector wybrać ? próbuje:

footer .stopka1 {} ale nie działa ;;/

<footer id="stopka1">
 stopka
      </footer>

Prośba o ocenę i korektę strony

Thu, 30 May 2019 15:12:29 +0000

Usiłuję stworzyć kilka takich stronek, żeby mieć co pokazać podczas aplikowanie do pracy (głównie zajmuję się back-endem). Stworzyłem póki co coś takiego:

https://codepen.io/anon/pen/mYzZRW

Moja prośba jest taka, abyście pomogli mi z footerem, bo znów mam problem z pustą przestrzenią nad section.

Druga sprawa - co mam poprawić, wyglądowo lub w kodzie.

Od razu zaznaczam, żebyście się nie sugerowali tym:

<img src="https://naforum.zapodaj.net/thumbs/4ebb9c2fb458.png" alt="idea" width="300" height="300">

Zdjęcia mam lokalnie i nie ustawiam w ten sposób szerokości i wysokości :D

Footer na całą szerokość

Tue, 12 Mar 2019 11:31:27 +0000

W jaki sposób rozciągnąć footer z obrazkiem na całą szerokość strony?

Obecnie testowy kod:

<div class="navbar navbar-default clearfix" role="navigation">
    <div class="container">
        <div class="row">
            <div class="imagefooter">
                <img src="sciezka.png" alt="#" width="100%" height="100%" />
            </div>
            {st_get_component module="stSocialLinksFrontend" component="show"}
            {st_get_component module="stWebpageFrontend" component="footerWebpage"}
        </div>
        {st_get_component module="stFrontendMain" component="copyright" params="open='$open'"}
    </div>
</div>

.imagefooter {
 	width: 1267px;
 	height: 100%;
 	margin-bottom: -57px;
 	margin-left: -55px;
 }

Przyklejenie do dołu diva

Wed, 27 Feb 2019 19:07:58 +0000

Witam,

Jak zrobić, aby selektor był przyklejony zawsze do dołu diva?

HTML odc.3 problem z rectangle

Sun, 29 Jul 2018 15:02:57 +0000

Witajcie,

Mam pytanie dotyczace odcinka 3 HTML, chodzi o dane w class .rectangle. Przy koncu (kiedy chce wpisac to co bedzie na dole strony (footer) caly tekst wyswietla mi sie obok zegara (tez ma klase .rectangle). Zmienialam nazwe klasy, wstawialam tekst w <h5>, nic nie popmaga. Na upartego tekst wyswietla sie obok zegara. Dopiero jak sie calosc nie zmiesci, przeskakuje do footer'a :/ Dopiero po wpisaniu trzy razy <br/> caly tekst "wskoczyl" na miejsce footer'a, ale znow tekst-align:center nie dziala :/

Macie pomysly co moze byc przyczyna?

latający footer

Fri, 06 Jul 2018 15:46:54 +0000

http://kolgrimartphotography.com/theyoungest/ szukam porady, jak dam dużą rozdzielczość np 1500 wysokości to pod footerem robi mi się białe tło.. i widzę, że nie trzyma się dołu. Jest na to dobry sposób ?

Stopka na dole - Wordpress

Tue, 05 Jun 2018 13:07:52 +0000

Cześć, nie umiem rozwiązać problemu ze stopką na mojej stronie opartej na Wordpress. W przypadku gdy jest mało treści na podstronie stopka jest od razu pod treścią, na środku ekranu i źle to wygląda. Chciałbym, żeby w takim wypadku była ona na dole. Próbowałem różnych rozwiązań z internetu i mniej więcej działały, ale gdy na innej podstronie było więcej treści to stopka nachodziła na treść. A chcę, żeby w przypadku większej ilości treści stopka nadal była na końcu treści, a nie na końcu ekranu.

Tutaj macie mój style.css od tego motywu: https://pastebin.com/ZTJQmmss

Z góry dzięki za pomoc.

footer- jakie macie sposoby na przyklejenie go do dna strony?

Wed, 04 Apr 2018 22:08:25 +0000

Witam, mam footer i próbowałem go zkleić do dna ale sie się mu nie chce.

Może macie jakieś sprawdzone sposoby?

jak by co to tu kod:

.footer
{
	text-align: center;
	background-color: #222222;
	padding: 30px 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}

próbowałem position absolute i bottom 0 ale nie pomaga.

problem z umieszczeniem diva "footer"

Wed, 31 Jan 2018 18:03:14 +0000

Mam problem odnośnie rozmieszczenia divów a mianowicie diva "footer" który powinien być pod resztą divów a jest w "content"...Może to mieć związek z jakimś błędem w zamknięciach divów ale nie wiem co jest nie tak...na screenie strony ustawiłem divowi footer czerwone tło żeby było go widać.

<body>
	
	<div id="container">
			
		<div id="logo">
			Logo Strony
		</div>
			
		<div id="nav">
			<div class="menu"><a href="https://www.youtube.com/watch?v=5y3Qc9Qs6TY" class="textdec" target="_blank" />strona glowna</a></div>
			<div class="menu"><a href="https://www.youtube.com/watch?v=5y3Qc9Qs6TY" class="textdec" target="_blank" />poradniki</a></div>
			<div class="menu"><a href="https://www.youtube.com/watch?v=5y3Qc9Qs6TY" class="textdec" target="_blank" />redstone</a></div>
			<div class="menu"><a href="https://www.youtube.com/watch?v=5y3Qc9Qs6TY" class="textdec" target="_blank" />informacje</a></div>
			<div class="menu"><a href="https://www.youtube.com/watch?v=5y3Qc9Qs6TY" class="textdec" target="_blank" />budowlane</a></div>
		</div>
		<div id="content">
				
			<h1>Lorem Ipsum</h1>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor convallis porttitor. Pellentesque nec lorem interdum, hendrerit ex non, facilisis nulla. Vivamus pharetra rutrum quam a ornare. Proin sed massa nec ante convallis faucibus a et sapien. Vestibulum leo arcu, imperdiet sed vehicula eget, tincidunt vel tellus. Maecenas maximus velit nisl. Nulla tempus scelerisque nisl vitae pharetra. Vivamus neque est, volutpat a neque vitae, dictum varius turpis. Proin non tellus nec velit condimentum commodo. Quisque faucibus metus non dolor auctor, vitae vehicula tellus volutpat. In ultrices iaculis ultrices. Proin sed ornare magna, nec vulputate ipsum.
			<br></br>
			Proin iaculis commodo sapien quis suscipit. Curabitur ultricies turpis purus, sit amet dignissim diam euismod a. Nam at dui vestibulum mauris viverra pellentesque. Donec porta, erat quis sodales efficitur, diam dui laoreet est, sit amet convallis leo neque eu tellus. Ut a dui dapibus, vestibulum tortor a, bibendum libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis nec nibh augue. Etiam sed velit at ipsum pulvinar egestas non sed mauris.
		<div/>
		<div style="clear:both;"></div>
				
		<div id="footer">Wszystko o Minecraft &copy; Wszelkie prawa zastrzeżone!</div>
	</div>
			
	
</body>

#footer
{
	width: 1000px;
	height: 80px;
	background-color: red;
}

Po najechaniu napisu na stopce, tenże napis przesuwa się nieco w dół

Fri, 29 Sep 2017 21:07:50 +0000

Witam.

Na samym dole strony mam stopkę i na jej środku widnieje napis. Gdy przejadę lewym przyciskiem na ten napis, to tenże napis przesuwa się nieco w dół. Bez sensu.

<!DOCTYPE HTML>
<html lang="pl">
<head>

	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Strona internetowa</title>
	
	<meta name="description" content="Ogólna tematyka" />
	<meta name="keywords" content="sport, muzyka, film, wiadomości" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	<link rel="icon" href="obrazki/logo/logo1.png" type="image/png" sizes="16x16">
	
	<link href='http://fonts.googleapis.com/css?family=Ek+Mukta&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Nosifer&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	
</head>

<body>

	<div class="wrapper">
	
		<nav class="main-nav">
			<ul>
				<div class="login">Logowanie</div>
					<div id="fieldnet_login">
						<form method="post" action="logowanie.php">
							<label for="username">Nazwa użytkownika:</label>
							<input type="text" id="username" name="username" class="inpUsername">
							<label for="password">Hasło:</label>
							<input type="password" id="password" name="password">
								<div id="lower">
									<div class="outer">
										<label class="check" for="checkbox"><input type="checkbox"><span class="word">Zapamiętaj</span></label>
									</div>
										<input type="submit" name="login_in" value="Logowanie" class="inpLogowanie">
										<a href="logowanie/rejestracja.php" class="inpRejestracja">Rejestracja</a>
								</div>
						</form>
					</div>
			</ul>
		</nav>
		
		<div id="header">
		
			<a href="index.php" title="Odśwież bieżącą stronę" class="logo"></a>
			
			<div class="text">
				<a href="index.php" title="Odśwież bieżącą stronę">Strona <span>internetowa</span></a>
			</div>
			
		</div>
		
		<div class="tabpanel">
		
			<ul class="tablist" role="tablist">
				<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
				<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
				<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
				<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Nowości</li>
			</ul>
			
			<div id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
			
				<nav class="left-nav">

				</nav>
				
				<div class="image1">
					<img src="obrazki/baner-1.png" />
				</div>
				
				<div class="image2">
					<img src="obrazki/baner-2.png" />
				</div>
				
			</div>
			
			<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
				<div class="box1">
					<div class="border-left">
						<div class="border-right">
							<div class="inner1">
								<p style="text-indent: 25px">Witam na stronie internetowej.</p>
							</div>
						</div>
					</div>
				</div>
				
				<div class="photobanner">
					<div id="photoSlider">
						<div class="photos">
							<img src="obrazki/01.jpg" class="masterTooltip" title="Obrazek nr 1" style="margin-top: 12px" />
							<img src="obrazki/02.jpg" class="masterTooltip" title="Obrazek nr 2" style="margin-top: 12px" />
							<img src="obrazki/03.jpg" class="masterTooltip" title="Obrazek nr 3" style="margin-top: 12px" />
							<img src="obrazki/04.jpg" class="masterTooltip" title="Obrazek nr 4" style="margin-top: 12px" />
							<img src="obrazki/05.jpg" class="masterTooltip" title="Obrazek nr 5" style="margin-top: 12px" />
							<img src="obrazki/06.jpg" class="masterTooltip" title="Obrazek nr 6" style="margin-top: 12px" />
							<img src="obrazki/07.jpg" class="masterTooltip" title="Obrazek nr 7" style="margin-top: 12px" />
							<img src="obrazki/08.jpg" class="masterTooltip" title="Obrazek nr 8" style="margin-top: 12px" />
						</div>
					</div>
				</div>
			</div>
			
			<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
				<div class="box2">
					<div class="border-left">
						<div class="border-right">
							<div class="inner2">
							
								<ol style="list-style-type: none">
									<li>
										<img src="obrazki/kontakt/skype.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">krzysztofp_160580</span>
									</li>
									
									<li>
										<img src="obrazki/kontakt/gg.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">1701539</span>
									</li>
									
									<li>
										<img src="obrazki/kontakt/mail.png" width="34px" height="34px" />
										<span style="color: #FFFF33; font-size: 12px">krzysiekp1605@o2.pl</span>
									</li>
								</ol>	
								
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
				<div class="box3">
					<div class="border-left">
						<div class="border-right">
							<div class="inner3">
								<p style="text-indent: 25px">Tu będzie jakiś tekst.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		
		<footer>Strona internetowa &copy; 2017</footer>
	</div>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$(".login").click(function() {
				$('#fieldnet_login').toggle();
			});
		});
	</script>
	
	<script type="text/javascript">
		var one = document.querySelector(".login");
		one.addEventListener("click", function () {
			document.querySelector(".login").classList.toggle("lightblack")
		}, false);
	</script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("li[role='tab']").click(function(){
				$("li[role='tab']:not(this)").attr("aria-selected","false");
				$(this).attr("aria-selected","true");
				
				var tabpanid= $(this).attr("aria-controls");
				var tabpan = $("#"+tabpanid);
				$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
				$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

				tabpan.removeClass("hidden");
				tabpan.attr("aria-hidden","false");
			});
			
			$("li[role='tab']").keydown(function(ev) {
				if (ev.which ==13) {
					$(this).click();
				}
			});
			
			$("li[role='tab']").keydown(function(ev) {
				if ((ev.which ==39)||(ev.which ==37))  {
					var selected= $(this).attr("aria-selected");
					if  (selected =="true"){
						$("li[aria-selected='false']").attr("aria-selected","true").focus() ;
						$(this).attr("aria-selected","false");

						var tabpanid= $("li[aria-selected='true']").attr("aria-controls");
						var tabpan = $("#"+tabpanid);
						$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
						$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

						tabpan.attr("aria-hidden","false");
						tabpan.removeClass("hidden");
					}
				}
			});
		});
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('.masterTooltip').on('mouseenter', function(e) {
				var title = $(this).attr('title');
				var mousex = e.pageX + 0;
				var mousey = e.pageY + 0;
				$(this).data('tipText', title).removeAttr('title');
				$('<p class="tooltip"></p>')
				.text(title)
				.appendTo('body')
				.css({top: mousey, left: mousex})
				.fadeIn('normal');
			} ).on('mouseleave', function() {
				$(this).attr('title', $(this).data('tipText'));
				$('.tooltip').remove();
			}).mousemove(function(e) {
				var mousex = e.pageX + 0;
				var mousey = e.pageY + 0;
				$('.tooltip')
				.css({top: mousey, left: mousex})
			});
		});
	</script>
	
</body>
</html>

body
{
	background: #000000 url("obrazki/background/body_background.png");
	font-family: Verdana;
	margin: 0;
	width: 100vw;
	height: 135vh;
	position: relative;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.main-nav
{
	overflow: hidden;
	background-color: #C34F4F;
	padding: 6px;
	margin-top: 10px;
}

.main-nav ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.login
{
	float: right;
	display: block;
	padding: 5px;
	background-color: #002D6E;
	color: white;
	font-size: 11px;
	text-decoration: none;
	outline: none;
	transition-duration: 1s;
}

.login:hover
{
	background-color: #191919;
	color: white;
	transition-duration: 1s;
	cursor: pointer;
}

.lightblack
{
	background-color: #191919;
}

.tablist
{
	padding: 0;
	list-style: none;
}

.tab
{
	float: left;
	margin-left: 0px;
	width: 180px;
	line-height: 35px;
	border-top-left-radius:.5em;
	border-top-right-radius:.5em;
	background: linear-gradient(#CAFF5A, #60A822);
	color: black;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	outline: none;
	display: inline;
	margin-right: 8px;
	box-shadow: inset 0px 0px 180px #8AA4B7;
	transition: all linear;
	transition-duration: 0.5s;
}

.tab:last-child
{
	float: right;
	margin-right: 0px;
}

.tab:hover
{
	box-shadow: inset 0px 0px 0px #8AA4B7;
	transition-delay: 0.5s;
	transition-duration: 2s;
	color: black;
	cursor: pointer;
}

.panel-1
{
	clear: both;
	width: 1000px;
	height: 322px;
	background-color: #BFBFBF;
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	position: relative;
}

.margin_top
{
	margin-top: 5px;
}

.panel-1 .image1
{
	position: absolute;
	left: 600px;
	top: -11px;
}

.panel-1 .image2
{
	position: absolute;
	left: 458px;
	top: 5px;
}

.panel-2
{
	clear: both;
}

.box1
{
	background-color: #000000;
	width: 100%;
}

.box1 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box1 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box1 .inner1
{
	padding: 10px 50px 138px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

.photobanner
{
	overflow: hidden;
	position: relative;
	bottom: 138px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

#photoSlider
{
	width: 1100px;
	height: 124px;
}

#photoSlider img
{
	width: 200px;
	height: 100px;
	transition: all 0.5s ease;
}

#photoSlider img:hover
{
	transform: scale(1.2,1.2);
	cursor: pointer;
}

.photos
{
	animation: bannermove 400s linear infinite;
}

.tooltip
{
	display: none;
	position: absolute;
	border: 1px solid #191919;
	border-radius: 5px;
	background-color: #B51031;
	color: white;
	font-size: 12px;
	padding: 5px;
}

.panel-3
{
	clear: both;
	width: 1000px;
}

.box2
{
	background-color: #000000;
	width: 100%;
}

.box2 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box2 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box2 .inner2
{
	padding: 1px 0px 1px;
}

.box2 .inner2 ol >li
{
	display: block;
	padding: 15px 0px 0px;
}

.box2 .inner2 ol >li span
{
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 26px;
}

.panel-4
{
	clear: both;
}

.box3
{
	background-color: #000000;
	width: 100%;
}

.box3 .border-left
{
	background: url(obrazki/border-left.gif) repeat-y left top;
}

.box3 .border-right
{
	background: url(obrazki/border-right.gif) repeat-y right top;
}

.box3 .inner3
{
	padding: 10px 50px 30px;
	font-size: 12px;
	text-align: justify;
	color: #DDDDDD;
	line-height: 1.4;
}

li[aria-selected='true']
{
	background: linear-gradient(#CAFF5A, #60A822);
	color: black;
	font-size: 12px;
	font-weight: bold;
	width: 180px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	outline: none;
	display: inline;
	margin-right: 8px;
	box-shadow: inset 0px 0px 1px #8AA4B7;
	transition: all linear;
	transition-duration: 0.5s;
}

div[aria-hidden='true']
{
	display: none;
}

div[aria-hidden='false']
{
	display: block;
}

footer
{
	text-align: center;
	background-color: #191919;
	color: #FC9E00;
	font-family: Calibri;
	font-size: 16px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 64px;
	border-top-left-radius:.4em;
	border-top-right-radius:.4em;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}

Na podstronie pierwszej i drugiej mam taką samą stopkę i zapis w CSS jest tam dokładnie taki sam. I wtedy tenże napis na stopce nie przesuwa się już w dół.

Wiecie co jest przyczyną, że na stronie głównej w stopce ten napis przesuwa się nieco w dół?

"Wysuwająca się chmurka spoza ekranu" - HTML? CSS?

Mon, 18 Sep 2017 16:32:26 +0000

Witam, chciałbym zrobić "chmurke", lub cokolwiek innego które będzie wysuwało się z poza ekranu i przypomni nam o np. zasubskrybowaniu naszego kanału na youtube. (Chcę aby chmurka wysuwała się automatycznie)

Jak to zrobić?

Jeżeli coś za mało dopowiedziałem proszę pisać komentarze!

stopka jest zaslaniana przy scrollowaniu

Sat, 05 Aug 2017 09:06:56 +0000

Witam! Pobralem dziś taki darmowy komponent ze strony codyhouse.co:

https://codyhouse.co/gem/page-scroll-effects/

Dopiero zaczynam webmasterke,wiec nie jeszcze w stanie zrobić takiego efektu samodzielnie,wiec bazuje na gotowych projektach i staram się je lekko modyfikować. No i tak:dodalem stopke i okazało się,ze przy dotraciu do ostatniego slajdu jest opcja jeszcze dalej zjechać(pojawia siē wtedy dodatkowy slajd zaslaniajacy stopke. )Czy ktoś moglby doradzić mi jak takie coś naprawić?Oprocz tego okazało się,ze nawigacja do slidow wiaruje(czasem działa,czasem nie).Wiecie czym to może być spowodowane? Ponizej umieszczę swój kod html i css,ale gdyby ktoś miał ochote zbadac problem to caly pakiet(z js i przyciskami nawigacyjnymi znajduje się pod linkiem,ktory podalem).

<!doctype html>
<html lang="en" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
	<script src="js/modernizr.js"></script> <!-- Modernizr -->
  	
	<title>Page Scroll Effects | CodyHouse</title>
</head>
<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->

<body data-hijacking="off" data-animation="scaleDown">
	<section class="cd-section visible">
		<div>
			<h2>Page Scroll Effects</h2>
		</div>
	</section>

	<section class="cd-section">
		<div>
			<h2>Section 2</h2>
		</div>
	</section>

	<section class="cd-section">
		<div>
			<h2>Section 3</h2>
		</div>
	</section>

	<section class="cd-section">
		<div>
			<h2>Section 4</h2>
		</div>
	</section>

	<section class="cd-section">
		<div>
			<h2>Section 5</h2>
		</div>
	</section>

	<nav>
		<ul class="cd-vertical-nav">
			<li><a href="#0" class="cd-prev inactive">Next</a></li>
			<li><a href="#0" class="cd-next">Prev</a></li>
		</ul>
	</nav> <!-- .cd-vertical-nav -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<footer class="footer-distributed">

			<div class="footer-left">
		
			
			<div class="description">
					
				</div>

				
				
				<div class="description">
					
				</div>
</div>

			<div class="footer-center">

				

				<div>
					
				</div>
				<div>
					
				</div>


					<div>
					
				</div>

			</div>

			<div class="footer-right">

				

				<div class="footer-icons">

					
					

				</div>

			</div>

		</footer>

</body>
</html>

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  color: #ffffff;
  background-color: #22283f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1050px) {
  body::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

a {
  color: #267481;
  text-decoration: none;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
@media only screen and (min-width: 1050px) {
  body[data-hijacking="on"] {
    overflow: hidden;
  }
}

.cd-section {
  height: 100vh;
}
.cd-section h2 {
  line-height: 100vh;
  text-align: center;
  font-size: 2.4rem;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:first-of-type > div::before {
  /* alert -> all scrolling effects are not visible on small devices */
  content: 'Effects not visible on mobile!';
  position: absolute;
  width: 100%;
  text-align: center;
  top: 20px;
  z-index: 2;
  font-weight: bold;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #6a7083;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div, [data-animation="fixed"] .cd-section > div, [data-animation="opacity"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div, [data-animation="fixed"] .cd-section:first-of-type > div, [data-animation="opacity"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div, [data-animation="fixed"] .cd-section:nth-of-type(2) > div, [data-animation="opacity"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div, [data-animation="fixed"] .cd-section:nth-of-type(3) > div, [data-animation="opacity"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div, [data-animation="fixed"] .cd-section:nth-of-type(4) > div, [data-animation="opacity"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div, [data-animation="fixed"] .cd-section:nth-of-type(5) > div, [data-animation="opacity"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}
@media only screen and (min-width: 1050px) {
  .cd-section h2 {
    font-size: 4rem;
    font-weight: 300;
  }
  [data-hijacking="on"] .cd-section {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  [data-hijacking="on"] .cd-section > div {
    visibility: visible;
  }
  [data-hijacking="off"] .cd-section > div {
    opacity: 0;
  }
  [data-animation="rotate"] .cd-section {
    /* enable a 3D-space for children elements */
    -webkit-perspective: 1800px;
    -moz-perspective: 1800px;
    perspective: 1800px;
  }
  [data-hijacking="on"][data-animation="rotate"] .cd-section:not(:first-of-type) {
    -webkit-perspective-origin: center 0;
    -moz-perspective-origin: center 0;
    perspective-origin: center 0;
  }
  [data-animation="scaleDown"] .cd-section > div, [data-animation="gallery"] .cd-section > div, [data-animation="catch"] .cd-section > div {
    box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
  }
  [data-animation="opacity"] .cd-section.visible > div {
    
  }
}

@media only screen and (min-width: 1050px) {
  .cd-section:first-of-type > div::before {
    display: none;
  }
}
@media only screen and (min-width: 1050px) {
  .cd-section > div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Force Hardware Acceleration */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  [data-hijacking="on"] .cd-section > div {
    position: absolute;
  }
  [data-animation="rotate"] .cd-section > div {
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    -o-transform-origin: center bottom;
    transform-origin: center bottom;
  }
}

.cd-vertical-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 1;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../img/cd-icon-arrow.svg) no-repeat center center;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1050px) {
  .cd-vertical-nav {
    display: block;
  }
}
footer{
	position: fixed;
	bottom: 0;
}

@media (max-height:800px){
	footer { position: static; }
	
}

.footer-distributed{
	background-color: #99ccff;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 39px 30px;
	margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: middle;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 40%;
}
.footer-distributed .footer-left p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
	text-align:center;
	
}
.footer-left{
	text-align:center;
}
.footer-distributed .footer-left .description img{
	
	color: #ffffff;
	
	width: 54px;
	height: 54px;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}
/* Footer Center */

.footer-distributed .footer-center{
	width: 35%;
}

.footer-distributed .footer-center img{
	
	color: #ffffff;
	font-size: 25px;
	width: 54px;
	height: 54px;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}



.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
	font-size:18px;
}

/* Footer Right */

.footer-distributed .footer-right{
	width: 20%;
}





.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 40px;
	height: 40px;
	cursor: pointer;
	background-color:  #fff;
	border-radius: 2px;
    position:relative;
	overflow:hidden;
    z-index:1;
	transition:.4s ease-in-out;
    font-size: 20px;
	color: #000;
	text-align: center;
	line-height: 40px;

	margin-right: 3px;
	margin-bottom: 5px;
}
.footer-distributed .footer-icons a:before{
	content: '';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:-100%;
	
	background:#ccc;
	z-index:-1;
    
    transform:scale(.4);
    transition: .2s ease-in-out;
}
.footer-distributed .footer-icons a:hover:before{
    
left:0;
transform: scale(.9);
}

.footer-distributed .footer-icons a:nth-child(1):before{
    background:#3b5999;
}
.footer-distributed .footer-icons a:nth-child(2):before {
    background:#55acee;
}
.footer-distributed .footer-icons a:nth-child(3):before {
    background:#0077B5;
}
.footer-distributed .footer-icons a:after{
	content: '';
	width:50%;
	height:100%;
	position:absolute;
	top:0;
	right:-100%;
	background:rgba(255,255,255,.3);
    transition: .4s ease-in-out;
	transition-delay: .1s;
}

.footer-distributed .footer-icons a:hover:after{
    
right:0%;
transform: scale(.9);
}
.footer-distributed .footer-icons   .fa {
  transition: .3s ease-in-out;
}
.footer-distributed .footer-icons a:hover .fa
{
  color:#fff;
}
/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}

	.footer-distributed .footer-center i{
		margin-left: 0;

Z gory wielkie dzięki za pomoc!

bootstrap problem ze stopką

Sat, 20 May 2017 21:03:51 +0000


HTML


<body>

    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">RNK</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#about">O nas</a>
                    </li>
                    <li>
                        <a href="#services">Oferta</a>
                    </li>
                    <li>
                        <a href="#contact">Kontakt</a>
                    </li>
                    <li>
                        <a href="#prices">Cennik</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Full Width Image Header -->
    <header class="header-image">
        <div class="headline">
            <div class="container">
                <h1>ELEKTROINSTAL</h1>
            </div>
        </div>
    </header>

    <!-- Page Content -->
    <div class="container">

        <hr class="featurette-divider">

        <!-- First Featurette -->
        <div class="featurette" id="about">
            <h2 class="featurette-heading">O nas</h2>
            <p class="lead">Nasza firma zajmuje się wykonywaniem nowych oraz modernizacją starych instalacji dla domów, mieszkań a także budynków przemysłowych.
Wykonujemy usługi dla osob prywatnych jak i firm, a długoletnia praktyka oraz doświadczenie pozwala nam na wykonanie naszej pracy na najwyższym poziomie jak również doradzić naszym klientom rozwiązania które ułatwią korzystanie z naszych usług
Współpraca z przedsiębiorstwami  handlowymi  w naszej branży pomogła nam wynegocjować najlepsze ceny za materiały dzięki czemu możemy zaoferować Panstwu usługi oraz materiały najwyższej jakości w najlepszych cenach</p>
        </div>

        <hr class="featurette-divider">

        <!-- Second Featurette -->
        <div class="featurette" id="services">
            <h2 class="featurette-heading">Oferta</h2>
            <div class="list">
              <ul>
                <li>
                  Wykonanie instalacji elektrycznych domów, mieszkań, oraz budynków gospodarczych i firm.
                </li>
                <li>
                  Modernizacja instalacji elektrycznych.
                </li>
                <li>
                  Wykonanie instalacji zewnętrznych.
                </li>
                <li>
                  Wykonywanie instalacji odgromowych.
                </li>
                <li>
                  Instalacja oraz serwis systemów alarmowych.
                </li>
                <li>
                  Instalacja oraz serwis systemów monitorigu.
                </li>
                <li>
                  Instalacja domofonów oraz videomofonów.
                </li>
                <li>
                  Wykonujemy również pomiary izolacji oraz oporności instalacji na domach i budynkach.
                </li>
              </ul>
            </div>
        </div>

        <hr class="featurette-divider">

        <!-- Third Featurette -->
        <div class="featurette" id="contact">
            <h2 class="featurette-heading">Kontakt</h2>
            <p class="contact">Tomasz Walocha </br></br>Telefon: 575689850</br></br>Email: walocha.tomasz@gmail.com</br></br>Adres: 28-340 Sędziszów </br></br>ul.Jędrzejewska 5</p>
            <div class="location">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2533.7840769209297!2d20.067072950888345!3d50.575378386136286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47170af388d81cf1%3A0x5bf5e8f2c2c880db!2zSsSZZHJ6ZWpvd3NrYSA1LCAyOC0zNDAgU8SZZHppc3rDs3c!5e0!3m2!1spl!2spl!4v1494708890182" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>

        <hr class="featurette-divider">

        <!-- Fourth Featurette -->
        <div class="featurette" id="prices">
            <h2 class="featurette-heading">Cennik</h2>
            <p class="lead">Oferta przedstawiona poniżej jest tylko ofertą poglądową ponieważ każdy klient jest traktowany przez nas indywidualnie. Po obejrzeniu obiektu do pracy przygotowywana jest przez nas darmowa wycena zlecenia którą następnie negocjujemy z klientem i staramy się by obie strony były zadowolone z ceny usługi.  </p>
        </div>

        <hr class="featurette-divider">
        <!-- Footer -->
        <footer>
			<div class="stopka">
				<p>Copyright &copy; Ropczan_Studio 2017</p>
			</div>
        </footer>

    </div>
    <!-- /.container -->

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

CSS

/*
 * Start Bootstrap - One Page Wonder (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    margin-top: 50px;
    background: url('images/dark_fish_skin.png');
    color: #fff;
}

.header-image {
    display: block;
    width: 100%;
    color: #000;
    margin-bottom: 100px;
    min-height: 1000px;
    text-align: center;
    background: url('images/burza.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

hr{
    border-color: #000;
}
.headline {
    padding: 120px 0;
}

.headline h1 {
    font-size: 80px;
    background: #fff;
    background: rgba(255,255,255,0.6);
}

.headline h2 {
    font-size: 77px;
    background: #fff;
    background: rgba(255,255,255,0.9);
}

.featurette-divider {
    margin: 80px 0;
}

.featurette {
    margin-top: 100px;
    overflow: hidden;
}

.featurette-heading {
    text-align: center;
    font-size: 50px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.contact{
    text-align: left;
    margin-left: 50px;
    margin-right: 100px;
    margin-top: 80px;
    margin-bottom: 100px;
    font-size: 21px;
    float: left;
}

.lead{
    text-align: center;
    clear: both;
    margin-bottom: 150px;
}

.location{
    margin-bottom: 100px;
}

.list{
    text-align: justify;
    margin-bottom: 150px;
    margin-left: 50px;
	font-size: 21px;
}

footer {
    background: #000;
    text-align: center;
	width: 100%;
    padding: 15px;
}

@media(max-width:1200px) {
    .headline h1 {
        font-size: 90px;
    }

    .headline h2 {
        font-size: 63px;
    }

    .featurette-divider {
        margin: 50px 0;
    }

    .featurette-heading {
        font-size: 35px;
    }
}

@media(max-width:991px) {
    .headline h1 {
        font-size: 55px;
    }

    .headline h2 {
        font-size: 50px;
    }

    .featurette-divider {
        margin: 40px 0;
    }

    .featurette-heading {
        font-size: 30px;
    }
	
}

@media(max-width:768px) {
    .container {
        margin: 0 15px;
    }

    .featurette-divider {
        margin: 40px 0;
    }

    .featurette-heading {
        font-size: 25px;
    }
}

@media(max-width:668px) {
    .headline h1 {
        font-size: 50px;
    }

    .headline h2 {
        font-size: 32px;
    }

    .featurette-divider {
        margin: 30px 0;
    }
}

@media(max-width:640px) {
    .headline {
        padding: 75px 0 25px 0;
    }

    .headline h1 {
        font-size: 50px;
    }

    .headline h2 {
        font-size: 30px;
    }

}

@media(max-width:375px) {
    .featurette-divider {
        margin: 10px 0;
    }

}

Witam, robię prostą stronę wizytówkę one page, pobrałem templatke z bootstrapa, którego lekko nie ogarniam. Mam problem z ustawieniem stopki na całą stronę, może ktoś pomóc? Nie wiem też jak dopasować czcionke w klasie lead przy mniejszych wymiarach.

Bootsrtap Tabela footer kilka miejsc po przecinku.

Thu, 18 May 2017 20:54:21 +0000

Witajcie

Mam pytanie do Was. W moim skrypcie na stronie (wykorzystałem Bootsrap do tworzenia tabeli). Mam kod poniżej, który umieszczam pod tabelą. Jednak mój footer ma np 20 miejsc po przecinku. Chciałbym, żeby to zawsze były dwa miejsca po przecinku. Co muszę zmienić w kodzie poniżej, który jest odpowiedzialny za sumowanie wierszy w kolumnie i pokazywanie jej w foot tabeli?

function sumFormatter(data) {
    field = this.field;
    return data.reduce(function(sum, row) { 
        return sum + (+row[field]);
    }, 0);
}

Footer w jednej zakładce się złożył. Bootstrap...

Tue, 16 May 2017 14:56:13 +0000

Cześć,

W jednej tylko zakładce identyczny footer się złożył. Tak to wygląda...

<footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; 2017 Firma „Chachaj” Wiesław Chachaj</p>
                </div>
            </div>
        </footer>

footer
{
    background-color:#282a2b; 
    color:white;
    text-align: center;
    
    margin: 0px !important;
    padding:10px 0 0 0 !important;
    width: 100%;
}

Chciałbym, żeby był pasek na całym dole, a nie urywał się po bokach.

Footer zbyt duży odstęp po copyrighcie. Bootstrap...

Mon, 15 May 2017 13:23:56 +0000

Cześć,

Nie działa mi footer dobrze. Zbyt duży odstęp za napisem, jak usuwam ten fragmen kodu, który podałem to odstęp jest ok, ale nie działa w css backgroundcolor.

.row:after,
.row:before {
    display: table;
    content: " "
}

Background-color ustawiłem w footerze w css.

problem z stopką,formularzem,podpięciem styli-bootstrap

Thu, 23 Mar 2017 16:10:56 +0000

Wiatjcie, mam pewien problem z którym nie potrafię sobie poradzić a więc:
zacznę od stopki,kilkam na przycisk i na sekundę się pojawia okienko z zawartością znika kod sprawdzałem kilka razy i kopiowałem gotowca i cały czas jest tak samo.
Z formularzem jest tak ze js napisłem i też ni działa jak by wgl. nie widział co jest tam napisane a jest podpięty.
i Style a chcę zmienić kolor menu i też nici. prbowałem .btn btn-primary i też w ten sposób .btn.btn-primary.
z góry dziękuję :)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>gotowiec</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
	 <script src="js/parallax-scroll.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>  
    <script src="js/bootstrap.js"></script>  
    <script src="js/form.js"></script>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
	
  </head>
  
  <body>
   <!-- navigacja navigacja navigacja navigacja navigacjanavigacja navigacja navigacja navigacja navigacja navigacja navigacjanavigacja navigacja navigacja -->
  
  <nav class="navbar navbar-inverse navbar-fixed-top "> 
 
  <div class="container" >
  
  <div class="navbar-header">
  
  
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
  <span class="sr-only">toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
<a class="navbar-brand" href="index.html"><img src="zd.jpg" alt="logo"></a>
 </div>
 
 <div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" >
 <li><a href="#ja" class="btn btn-primary">czym się zajmuję 
<span class="glyphicon glyphicon-user"></span> </a>

 </li>
<li><a href="#moje" class="btn btn-primary">osiągnięcia
<span class="glyphicon glyphicon-education"></span> </a>
</li>

<li><a href="#contact"  class="btn btn-primary">Kontakt
<span class="glyphicon glyphicon-envelope"></span> </a>
</li>
<li><a href="wkorbie.html">bloog</a></li>
  
  </ul>
  </div>
  </div>
  
</nav>
<!-- koniec nawi-->
<!-- karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzELA karuzEL-->
  <header>
  <div class="container">
  
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <a href="kontakt.html">
	<img src="fota.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px: ">
	</a>
		<div class="carousel-caption">qwerty</div>
	</div>
	
	<div class="item">
	<img src="fotkii.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px:">
		<div class="carousel-caption">qwerty</div>
	</div>
	<div class="item">
	<img src="foty.jpg" alt="inormatyk" style="margin:auto;height:400px;width:500px:">
		<div class="carousel-caption">qwerty</div>
	</div>
	</div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

  </header>
<!-- koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec karuzeli koniec-->
<section class="parallax parallax-1"></section>
  
<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 


 <div class="row">
  <section id="ja" class="jumbotron">
          <div class="col-md-14 text-center">
            <h1 class="text-inverse">pierwszy obraz</h1>
			<img src="11.jpg" class="img-circle" alt="kolo" style="width:100px;height:100px;">
            <h3 class="bg-danger text-nowrap">pełne koło karbonowe</h3>
			 <button type="button" class="btn btn-default btn-lg">
 <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</button>
            <br>
            <br>
			<div class="col-md-14 text-center">
            <h1 class="text-inverse">drugi obrazek</h1>
				<img src="12.jpg" class="img-circle" alt="widelki caron" style="width:100px;height:100px;">
            <h3 class="bg-danger text-nowrap">tylne karbonowe widełki</h3>
            <br>
            <br>
			<div class="col-md-14 text-center">
            <h1 class="text-inverse">trzeci obrazek</h1>
			<img src="13.jpg" class="img-circle" alt="przednie widfrlki" style="width:100px; height:100px;">
            <h3 class="bg-danger text-nowrap">przednie karbonowe widełki</h3>
            <br>
            <br>
           
		   
		   
		   
          </div>
        </div>
        </div>
  </section>
</div>  
</div>  
  <section class="parallax parallax-2"></section>
  <section id="moje" class="jumbotron">
<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 
 <div class="row">
  <div class="col-md-14 text-center">
<h1 class="text-inverse">osiągniecia</h1>
           
          </div>
        </div>
        </div>
  </section>
  
  <section class="parallax parallax-1"></section>

<!-- sekcje1 sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje sekcje -->
<div class="continer"> 
 <div class="row">
 
    <section id="contact" class="jumbotron">
          <div class="col-md-14 text-center">

            <p class="bg-danger">formularz trzeba zrobić 
		</p>
			
            <br>
            <br>
           
          </div>
		  </section>
        </div>
        </div>
 
  
  <form action="#kontakt" method="post" onsubmit="return
checkForm();" >
<fieldset>
<legend>Formularz kontaktowy</legend>
 <label for="contactName">Imię</label>
 <input type="text" id="contactName"/>

<label for="contactEmail">Email</label>
 <input type="text" id="contactEmail" />
<input type="submit" value="Wyślij" />
</fieldset>
</form>

  

   
   <footer>
	<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
		stopka
</button>	
	</div>
</footer>
<div class="modal fade" id="myModal" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Co w przyszłości na stronie?</h4>
			</div>
			<div class="modal-body">
				<p>
					
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger btn-sm hoverAnim" data-dismiss="modal">Zamknij</button>
			</div>
		</div>
	</div>
</div>


    </body>
</html>

to jest do formularza

function checkForm()
{
 var error=false; //to znaczy, że danych nie brakuje
 var errorText=""; //komunikat z błędem
 var contactName = document.getElementById("contactName");
 var contactEmail = document.getElementById("contactEmail");
if (contactName.value == ""){
 errorText += "imię\n"
 error=true;
 }
 if (contactEmail.value == ""){
 errorText += "email\n"
 error=true;
 }
 if (!error) return true;
else{
alert ("Nie wypełniłeś następujących pól:\n" + errorText);
return false;
}
}

a tu css

body
{
	font-size:18px;
	color:blue;

	font-family: 'Lato', sans-serif;

	
}
#zegar
{

font-family: 'Josefin Sans', sans-serif;
	font-size: 10px;
	text-align: right;
		width: 100%;
		color:red;
		background:bloue;
	
}
.jumbotron h1
{
	font-family: 'Source Sans Pro', sans-serif;
	
}

p
{
	font-family: 'Source Sans Pro', sans-serif;
	size:10px;
	color:red;
}
.jumbotron
{


	background-color: black;

}

 .button
 {
	 border-radius:12px 10px 13px 11px;
 }
span.glyphicon.glyphicon-heart
{
	color:black;
}
span.glyphicon.glyphicon-heart:hover
{
	color:red;
}

img
{
	height:20px;
	margin-top:-3px;
	margin-left:-20px;

}
active li:hover
{
	color:red;
}
.navbar-default .nav li a .glyphicon {
color: #ff0000;
}

section.parallax
 {
height: 600px;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 
}
.parallax-1 
{
background-image: url('bg4.jpg');

}
.parallax-2
{
background-image: url('bg2.jpg');

}.parallax-3
{
background-image: url('bg1.jpg');

}.parallax-4
{
background-image: url('bg3.jpg');

}
.carousel-control
{
padding:30px;
}
 btn.btn-primary
 {
	    background-color:pink;
	
}
#carousel-example-generic
{
	width:50%;
	margin:auto;
}

Generator Footer CSS

Sun, 12 Mar 2017 08:23:53 +0000

Witam,

chce zrobić "fajną" stopkę, wiem że istnieją do nich generatory kodu ale nie mogę ich znaleźć :(

Może ktoś zna i podeśle mi linka?

Z góry dziękuję

[HTML+CSS] Stopka na srodku ekranu, co robic?

Sat, 04 Mar 2017 20:29:09 +0000

Witam, mam problem z kodem, chcę aby stopka była na samym dole ekranu, zauważyłem ze zostaje w jednym miejscu ciągle:

Kod HTML:


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>_Layout</title>
    <link rel="stylesheet" href="~/Style/Style.css" type="text/css" />
    <link rel="stylesheet" href="~/Style/StyleContact.css" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Amatic+SC|Indie+Flower" rel="stylesheet">
   
</head>
<body>
    <div id="Containter">
        <div id="Head">
            <div id="exHead">
                ANGIELSKI NA PLUS
            </div>
            <div id="Menu">
                <ol>
                    <li><a href="#">Najpopularniejsze slowka</a></li>
                    <li><a href="#">Nauka</a></li>
                    <li><a href="#">O nas</a></li>
                    <li><a href="#">Opinie</a></li>
                    <li><a href="/home/Kontakt">Kontakt</a></li>
                </ol>
                <div style="clear:both;"></div>
            </div>
        </div>
        <hr size="1" />
        <div id="exBody">
            <div id="renBody">
              @RenderBody()
            </div>
        </div>
        <div id="Bottom">
            <div id="botBody">
                <a href="#"><b>Przedmiot prawa autorskiego</b></a>
                <br />
                <a>Zgodnie z ustawą, przedmiotem prawa autorskiego jest każdy przejaw działalności twórczej o indywidualnym charakterze,
                 ustalony w jakiejkolwiek postaci, niezależnie od wartości, przeznaczenia i sposobu wyrażenia (utwór). Prawo autorskie działa automatycznie
                 – ochrona praw autorskich rozpoczyna się z chwilą ustalenia utworu, bez konieczności spełnienia jakichkolwiek formalności przez jego twórcę.
                 Utwór nie musi przy tym być skończony. W szczególności przedmiotem prawa autorskiego są utwory</a>
            </div>
            <div id="Footer">
                a tu sama stopka
            </div>
        </div>
    </div>
</body>
</html>

KOD CSS:

body {
    margin: 0 !important;
    padding:0 !important;
    background-image: url("../img/backg.png");
    font-family: 'Indie Flower', cursive;
    font-size:18px;
    height:100%
}
#Container
{
    width: 100%;
    min-height:100%;
    position:relative;
    border-bottom:none;
}
/*----------------------------------------HEAD------------------------------------*/
#Head
{
    height:150px;
}

#exHead
{
    font-family: 'Amatic SC', cursive;
    background-image:url("../img/head.jpg");
    background-position: 60% 34%;
    height:100px;
    width:1200px;
    margin-right:auto;
    margin-left:auto;
    font-size:80px;
}

#Menu
{
    height:50px;
    text-align:center;
    width:1200px;
    margin-right:auto;
    margin-left:auto;
}

ol
{
    list-style-type:none;
    display:inline-block;
    height:50px;
}

ol > li
{
    height:50px;
    margin:0 25px;
    float:left;
    text-align:center;

}

ol a
{
    font-size:26px;
    margin:0 25px;
    color:black;
    text-decoration:none;
}

/*----------------------------------------BODY------------------------------------*/
#exBody
{
 /**/
}

#renBody
{
    width:1200px;
    margin-right:auto;
    margin-left:auto;
}
/*----------------------------------------BOTTOM----------------------------------*/
#Bottom
{
    font-family: "Times New Roman" cursive;
    height:300px;
    background-color:black;
    position:absolute;
	bottom:0;
    padding:0;
    margin:0;
    width:100%;
}

#botBody
{
    color:azure;
    opacity:0.5;
    margin-left:360px;
    width:300px;
    height:280px;
    font-size:13px;
}

#Footer
{
    height:21px;
    background-color:Highlight;
}
/*---------------------------------------------------------*/
textarea{
    resize:none;
}
.cs_text_for
{
    width: 250px;
    height: 100px;
    background-color:aquamarine;
}

w RenderBody() jest tylko lorem ipsum.

Stopka w CSS

Wed, 04 Jan 2017 09:45:18 +0000

Witam. Utworzyłem stronę której kontenty oraz stopki są reprezentowane przez div-y. Chciałbym ją tak zmodyfikować aby stopka była na dole okna przeglądarki przy scrollowaniu ale żeby nie zasłaniała div-a nad sobą.

<html>
<head>

<style>
     

      div 
	  {
        padding:1em;
        font-size:1.3em;
        background-color:#AFF;
		
		
		
      }

      #header
	  {
	   width:100%;
	   height:50px;
	   background:#ACACAC;
	   margin-bottom:20px; 
       position:relative;
   
      }
	  
	  #center_c
	  {
	   width:80%;
	   float:center;
	   background:#ACACAC;
	   margin:1% 10%;
	   height: 170;
	   position: relative;
	  }
	  
	  #center_d
	  {
	   width:80%;
	   float:center;
	   background:#ACACAC;
	   margin:1% 10%;
	   height:550;
	   margin-bottom: 10%;
	   position: relative;
	   
	   
	  }
	  
	  #footer
	  {
	  
	  width:100%;	
	  height:10px;
	  background:#ACACAC;
	  float:left;
	  margin-top:10;
	  position: fixed;

      bottom: 2px;
	  
	  
	  
	  }
	  
    </style>
</head>
<body>


    <div id="header"> </div>

	<div id="center_c">
	<div></div><div></div>
	</div>
	<div id="center_d"> </div>
	
	
	<div id="footer"> </div>



</body>
</html>

Czy jest stopka w bootstrapie?

Thu, 08 Dec 2016 19:38:15 +0000

Witam , ostatnio zacząłem pracę z bootstrapem i mam pewne pytanie;

Czy "Bootstrap daje możliwość jakiś stylów dla 'stopki" albo czy ktoś ma jakiś polecony na to wzór? "

Z góry dziękuje

dodanie stopki do strony-wordpress

Mon, 09 May 2016 10:11:25 +0000

cześć,dodałem stopkę do głównej strony przez widgety.Ale nie wiem jak dodać ją do pozostałych stron.Kombinowałem z z page.php,index.php ale to nic nie dawało.

Np:plik page.php :

<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
*/

if ( have_posts() ) :

while ( have_posts() ) : the_post();

do_action( 'cherry_entry_before' );

do_action( 'cherry_entry' );

do_action( 'cherry_entry_after' );

endwhile;

endif; ?>

Strona z którą sie mocuje od 4 godzin:http://warkakajaki.pl

Responsywny footer z formularzem kontaktowym.

Sun, 07 Feb 2016 12:29:43 +0000

	<footer id="footer">
		<div class="wrapper">
			<div class="colm-1">
				<strong>Kontakt</strong>
				<address>
					ta firma<br>
					gdzies tam<br>
					ul. Ks. ktoras<br>
					pocz miej<br>
				</address>
		</div>
	<div class="colm-2">
		<strong>Kontakt  </strong><small>formularz kontaktowy</small>
		<form method="post" action="#">
			<input type="text" name="imie" placeholder="Imie i nazwisko"><br>
			<input type="email" name="email" placeholder="email"><br>
			<textarea name="wiadomosc" placeholder="tresc wiadomosci"></textarea><br>
			<input type="submit" name="potwierdz" value="Wyślij">
		</form>
	</div>
	</div>
	</footer>

Hej chcę zrobić footer z informacjami dojazdu i z formularzem kontaktowym, wszystko mam już gotowe, ale mam jeden problem divy po zmniejszeniu okna nakładają się na siebie. Jakby co dorzucam kod css odpowiedzialny za footer.

.wrapper{
	padding: 20px;
	height: auto;
	margin: 0 auto;
	width: 50%;
}
footer{
	background-color: cornflowerblue;
	width: 90%;
	display: table-row;
	height: 1px;
	margin: 0 auto;
	box-sizing: border-box;
	color: #FFF;
}
.colm-1 strong, .colm-2 strong{
	font-size: 30px;
}
.colm-1{
	float: left;
	margin:  0 auto;
	width: 45%;
	display: block;
}
.colm-2{
	float: left;
	margin: 0 auto;
	width: 55%;
	display: block;
}
.colm-2 input[type="text"], .colm-2 input[type="email"]{
	margin:2px 0 2px 0;
	padding: 1px 2px;
	width: 100%;
	height: 50%;
	color: 
}
.colm-2 input[type="submit"]{
	width: 50%;
	background: cornflowerblue;
	border: 1px solid cornflowerblue;
	border-radius: 10px;
}
.colm-2 textarea{
	resize: none;
	padding: 1px 2px;
	width: 100%;
}

Problem z flex w CSS - zwęża stronę

Sun, 06 Dec 2015 20:27:04 +0000

Cześć,

Tworzę styl pod forum opartym na phpBB miałem problemy z przyklejeniem stopki na dole, a próbowałem na kilka sposobów. Używając w footerze:

    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;

Stopka przyklejała się miejscu gdzie kończy się okno przeglądarki i przy przewijaniu zostawała w jednym miejscu (nie jechała za przeglądarką), używając position: fixed ten sam efekt, tylko, że przewijała się wraz z przeglądarką. Sporo się naszukałem o przyklejaniu stopki i nic nie pomagało, aż trafiłem na FLEX. Mój działający kod wygląda tak:

body {
	font-family: Open sans, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
	display: flex;
    min-height: 100vh;
    flex-direction: column;
-webkit-flex-direction: column; /* Safari 6.1+ */
    -ms-flex-direction: column; /* IE 10 */ 
}

body {
	font-family: Open sans, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
	display: flex;
        min-height: 100vh;
        flex-direction: column;
        -webkit-flex-direction: column; /* Safari 6.1+ */
       -ms-flex-direction: column; /* IE 10 */ 
}

#wrap {
	border: 1px solid transparent;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
	flex: 1 0 auto;
	-webkit-flex: 1 0 auto; /* Safari 6.1+ */
       -ms-flex: 1 0 auto; /* IE 10 */ 
}

#page-body {
	margin: 4px 0;
	clear: both;
}

#page-footer {
	clear: both;
	width: 100%;
	background: #427599;
	bottom: 0;
}

Stopka jest pięknie przyklejona natomiast pojawił się inny dziwny błąd. Wchodząc w widok tematów w danym forum WRAP się zwęża, wchodząc w niektóre tematy zwęża się jeszcze bardziej. Co dziwne w poniektórych tematach jest ok, a nie wiem od czego to zależy. Proszę o pomoc jeśli ktoś wie co może być pryzczyną

Odczepianie się stopki

Tue, 15 Sep 2015 09:31:28 +0000

Witam, mam problem z layoutem strony www, ponieważ po zakodowaniu go pod mój portal część podstron działa prawidłowo a część ma rozjechaną stopke.

Tak wygląda prawidłowo załadowana stopka:

a tak wygląda błędnie załadowana:

Jak widać na załączonych obrazkach stopka odkleja się od dołu strony + jej bordery wyjeżdżają poza swoje granice. Szczerze próbowałem już wielu rzeczy, ale najdziwniejsze jest to, że gdy przykładowo kod podstrony jest taki:

$main_content .= 'przykladowa tresc strony';

stopka się psuje, jednak gdy jest np. taki:

$main_content .= '
	<table class="table table-bordered">	
		<tr>
		<td colspan="2"><center><b>Commands Help</b></center></td>
		</tr>
		
		<tr>
		<td style="width:50%"><center>Command</center></td>
		<td style="width:50%"><center>Action</center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!tag</b></center></td>
		<td height="60" style="width:50%"><center>Only guild leader can use this command, for example if you want to use it: "!tag abc", if you do this, all players from you guild will have tag in brackets after the nick.<br><br> <img border="1" src="images/tag.png"></center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!spells</b></center></td>
		<td height="60" style="width:50%"><center>With this command you can check all spells for your vocation. Also remember that you can find a list with all spells on our website! <a href="index.php?subtopic=guides">Click here</a>.<br><br> <img border="1" src="images/spells.png"></center></td>
		</tr>		
		</table>		
';

Wtedy wszystko jest ok, jednak tu jest kolejna dziwna zależność. Gdy powyższy działający kod lekko edytuje usuwając częśc tekstu z tabelki w taki sposób:

$main_content .= '
	<table class="table table-bordered">	
		<tr>
		<td colspan="2"><center><b>Commands Help</b></center></td>
		</tr>
		
		<tr>
		<td style="width:50%"><center>Command</center></td>
		<td style="width:50%"><center>Action</center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!tag</b></center></td>
		<td height="60" style="width:50%"><center>Tutaj edytowalem tresc<br><br> <img border="1" src="images/tag.png"></center></td>
		</tr>
		
		<tr>
		<td height="60" style="width:50%"><center><b>!spells</b></center></td>
		<td height="60" style="width:50%"><center>With this command you can check all spells for your vocation. Also remember that you can find a list with all spells on our website! <a href="index.php?subtopic=guides">Click here</a>.<br><br> <img border="1" src="images/spells.png"></center></td>
		</tr>		
		</table>		
';

Problem znów się powtarza tj. stopka się psuje. Proszę przynajmniej o nakierowanie gdzie powinienem szukać źródła problemu.

Problem ze stopką.

Thu, 11 Jun 2015 19:06:46 +0000

Mój pierwszy post więc na początku witam wszystkich ;)

Mam mały problem z footerem; bardzo ładnie trzyma sie dolnej strony do momentu aż tresc strony okaze sie niewystarczajaca aby mozna bylo zjechac nizej, tym samym stopka pojawia sie zaraz pod ostatnim obiektem, nawet jezeli ten jest na srodku, tym samym stopke nagle widzimy na srodku strony.

Jakies sugestie? ;)