Stopka pomóżcie.

pytanie zadane 31 stycznia 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

Witam, czy znacie funkcje, która przyklei ten div na dół strony, chce żeby to była stopka.

<style>
#stopka
		{
		height:40px;
		width:100%;
		background-color:red;
		}
</style>

<body>
<div id="stopka">
</div>
</body>

4 odpowiedzi

odpowiedź 31 stycznia 2017 przez Marshall_ Początkujący (350 p.)

odpowiedź 31 stycznia 2017 przez imklau Nałogowiec (42,090 p.)

chodzi może o position: fixed?

komentarz 31 stycznia 2017 przez Vorex444 Dyskutant (9,610 p.)

dodałem tą funkcje do #stopka i nic to nie zmieniło.

komentarz 31 stycznia 2017 przez imklau Nałogowiec (42,090 p.)

Jeśli Twoja strona przesuwa się w dół to stopka powinna zostać na stałe przypięta do jednego miejsca.
Podaj może kod do całej strony.

komentarz 31 stycznia 2017 przez Vorex444 Dyskutant (9,610 p.)

<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

	
	
		<style type="text/css">
		body{
		margin:0;
		}
		
		#baner{
		height:60px;
		width:100%;
		background-color:#00ccff;
		}
		
		#menu {
		font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
		font-size: 10px;
		line-height: 15px;
		text-transform: uppercase;
		text-align: left;
		}
		
		#menu > ul {
		width: auto;
		list-style-type: none;
		padding: 0;
		margin: 0;
		background: #ffffff;
		border: 1px solid #ece6e8;
		border-bottom: 3px solid #d9ced2;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		  -o-border-radius: 2px;
		  border-radius: 2px;
		}
		
		#menu > ul li#responsive-tab {
		  display: none;
		}
		
		#menu > ul li {
		  display: inline-block;
		  *display: inline;
		  zoom: 1;
		}
		
		#menu > ul li.right {
		  float: right;
		}
		#menu > ul li.has-sub {
		  position: relative;
		}
		#menu > ul li.has-sub:hover ul {
		  display: block;
		}
		#menu > ul li.has-sub ul {
		  display: none;
		  width: 250px;
		  position: absolute;
		  margin: 0;
		  padding: 0;
		  list-style-type: none;
		  background: #ffffff;
		  border: 1px solid #ece6e8;
		  border-bottom: 3px solid #d9ced2;
		  border-top: 0 none;
		}
		#menu > ul li.has-sub ul li {
		  display: block;
		}
		#menu > ul li.has-sub > a {
		  background-image: url('images/caret.png');
		  background-repeat: no-repeat;
		  background-position: 90% -95%;
		}
		#menu > ul li.has-sub > a.active,
		#menu > ul li.has-sub > a:hover {
		  background: #d80041 url('images/caret.png') no-repeat;
		  background-position: 90% 195%;
		}
		#menu > ul li a {
		  display: block;
		  padding: 12px 24px 11px 24px;
		  text-decoration: none;
		  color: #747474;
		  text-shadow: 0px 1px 0px #fff;
		}
		#menu > ul li a.active,
		#menu > ul li a:hover {
		  background: #d80041;
		  color: #fff;
		  text-shadow: 0px 1px 0px #000;
		}
		@media (max-width: 600px) {
		  #menu > ul {
			width: 100%;
		  }
		  #menu > ul li#responsive-tab {
			display: block;
		  }
		  #menu > ul li#responsive-tab a {
			background: url('images/menu.png') no-repeat;
			background-position: 95% -35%;
		  }
		  #menu > ul li#responsive-tab a:hover {
			background-color: #d80041;
			background-position: 95% 135%;
		  }
		  #menu > ul li {
			display: none;
		  }
		  #menu > ul li.right {
			float: none;
		  }
		  #menu > ul li.has-sub {
			position: relative;
		  }
		  #menu > ul li.has-sub ul {
			display: block;
			position: static;
			width: 100%;
			background: #ffffff;
			border: 0 none;
		  }
		  #menu > ul li.has-sub ul li {
			display: block !important;
		  }
		  #menu > ul li.has-sub ul li a span {
			display: block;
			padding-left: 24px;
		  }
		  #menu > ul li.has-sub > a {
			background-image: none;
		  }
		}

		@media (min-width: 600px) {
		  #menu > ul > li.collapsed {
			display: inline-block !important;
			*display: inline;
			zoom: 1;
		  }
		  #menu > ul ul li.collapsed {
			display: block !important;
		  }
		}
		
		
		#stopka
		{
		height:30px;
		width:100%;
		background-color:#00ccff;
		
		}
	
	
		</style>
</head>
<body>
<div id="baner">
&nbsp;<img src="img/logo.png">
</div>

<div id='menu'>
<ul>
   <li class='active'><a href='#'><span>Strona glowna</span></a></li>
   <li class='has-sub'><a href='#'><span>Przepisy</span></a>
      <ul>
         <li><a href='#'><span>Koktail jagodowy</span></a></li>
         <li><a href='#'><span>Kawa z mlekiem</span></a></li>
         <li class='last'><a href='#'><span>Herbata z mlekiem</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Przelicznik miar</span></a>
</ul>
</div>






<div id="stopka">
</div>

</body>
</html>