Jump to content
Sign in to follow this  
Magmus

Stopka nachodzi sekcje HTML i CSS

Recommended Posts

Witam mógł by mi ktoś pomóc przy stronie bo kombinuje i nwm jak to zrobić tak jak chce 

screen:

Spoiler

 

jak widać post jest pod stopką footerem a jak zrobić tak że np jest milion postów ale stopka nie na chodzi na post i jest zawsze na samym dole pod ostatnim postem? I żeby nie na chodziło się na siebie.

kod css:

Spoiler

#wrapper2{
	width:1100px;
	margin:60px auto;
	min-height:770px;
}
#left{
	float:left;
}
#right{
	float:right;
}
#prawo{
	width:750px;
	float:right;
}
.post:nth-child(1){
	margin:20px auto;
}
.post{
	width:750px;
	margin:30px auto;
	background:#fff;
}
.post-name{
	padding-top:25px;
	width:700px;
	margin:25px auto;
	font-size:22px;
	font-family: Signika, sans-serif;
	color:#27ae60;
}
.post-tekst{
	  padding-bottom: 30px;
  position: relative;
	width:700px;
	margin:25px auto;
	font-size:16px;
	font-family: Signika, sans-serif;
	margin-bottom:50px;
	border-bottom:35px solid #fff;
}
.post-tekst2{
	padding-left:15px;
}
.post-img{
	float:left;
	margin:0px 15px 5px 0px;
	max-width:400px;
	max-height:400px;
}
.post-linki{
	width:700px;
	margin-bottom:-35px;
  bottom: 0;
  position: absolute;
  right: 0;
  height:50px;
}
.post-facebook{
	padding:5px 10px;
	color:#fff;
	background:#3b5998;
	border-radius:4px;
	border:2px solid #3b5998;
	font-family: Signika, sans-serif;
	transition:0.5s;
	font-size:14px;
	float:right;
}
.post-facebook:hover, .post-facebook:focus{
	padding:5px 10px;
	color:#3b5998;
	background:#fff;
	border-radius:4px;
	border:2px solid #3b5998;
	transition:0.5s;
}
footer{
	width:100%;
	background:#343f63;
	color:white;
	height:300px;
	display:block;
	position:absolute;
}
.footer-2{
	height:50px;
	width:100%;
	background:rgba(000,000,000,0.1);
	position:absolute;
}
.wrapper3{
	width:1100px;
	margin:0 auto;
	font-family: Signika, sans-serif;
}
.wrapper4{
	width:1100px;
	margin:20px auto;
	font-family: Signika, sans-serif;
}
a.back-to-top {
	display: none;
	width: 60px;
	height: 60px;
	text-indent: -9999px;
	position: fixed;
	z-index: 999;
	right: 20px;
	bottom: 20px;
	background: rgba(000,000,000,0.2) url("../img/cd-top-arrow.svg") no-repeat center 43%;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 10px;
	transition:1s;
}
a:hover.back-to-top {
	background-color:  rgba(000,000,000,0.3);
	transition:1s;
}
.simple-back-to-top{
	float:right;
	height:50px;
	width:50px;
	background:rgba(000,000,000,0.1);
	text-align:center;
	padding-top:15px;
}
.simple-back-to-top:hover{
	background:rgba(000,000,000,0.2);
}
.footer-icon{
	width:50px;
	height:50px;
	border-radius:50%;
	background:rgba(000,000,000,0.15);
	color:#fff;
	float:left;
}
.footer-icon:hover{
	background:rgba(000,000,000,0.25);
	transition:0.5s;
}
.footer-div{
	float:left;
	position:absolute;
	margin-top:70px;
	color:#fff;
	width:220px;
}
.footer-div:nth-child(2){
	float:left;
	position:absolute;
	margin-top:140px;
	color:#fff;
}
.footer-div:nth-child(3){
	float:left;
	position:absolute;
	margin-top:210px;
	color:#fff;
}
.footer-global{
	margin:0 auto;
	padding-left:12.5px;
	padding-top:12.5px;
}
.footer-global-2{
	margin:0 auto;
	padding-left:13.5px;
	padding-top:12.5px;
}
.footer-global-3 {
	margin:0 auto;
	padding-left:13.5px;
	padding-top:13.5px;
}
.footer-icon-tekst{
	margin-left:20px;
}
.footer-icon-tekst-2{
	padding-top:10px;
	line-height:50px;
	margin-left:20px;
}
.footer-info{
	width:300px;
	height:150px;
	margin-top:70px;
}

 

kod html:

Spoiler

<section id="section">
	<div id="wrapper2">
		<div id="left">
	<ul class="menu-pionowe animated">
		<li class="has-children">
			<input type="checkbox" name ="group-1" id="group-1">
			<label for="group-1">Uczniowie</label>

      		<ul>
      			<li><a href="#0">Klasy I</a></li>
				<li><a href="#0">Klasy II</a></li>
				<li><a href="#0">Klasy III</a></li>
				<li><a href="#0">Plan lekcji</a></li>
				<li><a class="border" href="#0">Wykaz podręczników</a></li>
      		</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name ="group-2" id="group-2">
			<label for="group-2">Nauczyciele</label>

			<ul>
				<li><a href="#0">Grono</a></li>
				<li><a href="#0">Pedagog szkolny</a></li>
				<li><a class="border" href="#0">Psycholog szkolny</a></li>
			</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name ="group-3" id="group-3">
			<label for="group-3">Inne</label>

			<ul>
				<li><a href="#0">Koła zainteresowań</a></li>
				<li><a href="#0">Zajęcia sportowe</a></li>
				<li><a href="#0">Dyżury nauczycieli</a></li>
				<li><a href="#0">Dyżury dyrekcji</a></li>
				<li><a href="#0">Biblioteka</a></li>
				<li><a href="#0">Świetlica</a></li>
				<li><a href="#0">Promocja zdrowia</a></li>
				<li><a class="border" href="#0">SU</a></li>
			</ul>
		</li>

		<li class="has-children">
			<input type="checkbox" name ="group-4" id="group-4">
			<label for="group-4">Konkursy KO Poznań</label>

			<ul>
				<li><a href="#0">Regulaminy</a></li>
				<li><a class="border" href="#0">Wyniki</a></li>
			</ul>
		</li>
		<li class="has-children">
			<input type="checkbox" name ="group-5" id="group-5">
			<label for="group-5" class="border">Rada Rodziców</label>

			<ul>
				<li><a href="#0">Skład RR</a></li>
				<li><a href="#0">Protokoły zebrań</a></li>
				<li><a href="#0">Informacje różne</a></li>
			</ul>
		</li>
	</ul>
		</div>
		<div id="right">
			<div id="prawo">

					<div class="post">
						<div class="post-name">NARODOWE CZYTANIE</div>
							<div class="post-tekst">
							<img class="post-img" src="img/5.jpg">
									<span class="post-tekst2">9 września reprezentanci kl.II Gimnazjum nr 1 wzięli udział w Narodowym Czytaniu powieści Henryka Sienkiewicza "Quo vadis", zorganizowanym przez Bibliotekę Publiczną im. K.Iłłakowiczówny. Wśród czytających fragmenty powieści znaleźli się przedstawiciele władz miasta, powiat, nauczyciele, uczniowie, aktorzy teatru "Lotka".  Z naszej szkoły wybrany fragment czytali: Patrycja Dłużak, Kacper Sanocki i p. Lidia Szczyżańska. W słonecznej, upalnej atmosferze przenieśliśmy się w czasy starożytnego Rzymu do domów patrycjuszy, do lochów aren, gdzie więziono pierwszych chrześcijan oraz w inne miejsce, w których rozgrywają się wydarzenia związane z parą głównych bohaterów:Ligią i Winicjuszem. Byliśmy, słuchaliśmy, czytaliśmy i.... za rok też chętnie weźmiemy udział w Narodowym Czytaniu.    Lidia Szczyżańska</span>
						<div class="post-linki">
							<a class="post-facebook" href="https://www.facebook.com/">Więcej na facebook</a>
						</div>
						</div>
					</div>
					
					<div class="post">
						<div class="post-name">ROZPOCZĘCIE ROKU SZKOLNEGO 2016/2017</div>
							<div class="post-tekst">
							<img class="post-img" src="img/4.jpg">
									<span class="post-tekst2">Tradycyjnie pierwszego września spotkaliśmy się przed naszą szkołą, by uroczyście rozpocząć nowy rok szkolny. Na początku uroczystości wysłuchaliśmy pięknego wykonania Sylwii Marciniak. Zaproszonych gości, rodziców oraz uczniów, a także całe grono pedagogiczne powitał Pan Dyrektor Waldemar Łastowski. Po ogłoszeniu ważnych informacji, życzeniach powodzenia i wytrwałości w realizowaniu swoich celów przekazał głos prowadzącym: Paulinie Matuszak i Patrykowi Kowalskiemu.  Zofia Ignasińska przypomniała nam utwór Konstantego Ildefonsa Gałczyńskiego „Pieśń o żołnierzach z Westerplatte”. W ten sposób chcieliśmy uczcić rocznicę wybuchu II Wojny Światowej. Tradycyjnie po zakończeniu uroczystości udaliśmy się do sal lekcyjnych na pierwsze powakacyjne spotkanie z nauczycielami. Życzymy wszystkim uczniom samych sukcesów w nowym Roku Szkolnym 2016/2017!
 Samorząd Uczniowski</span>
						<div class="post-linki">
							<a class="post-facebook" href="https://www.facebook.com/">Więcej na facebook</a>
						</div>
						</div>
					</div>
					
					<div class="post">
						<div class="post-name">ROZPOCZĘCIE ROKU SZKOLNEGO 2016/2017</div>
							<div class="post-tekst">
							<img class="post-img" src="img/4.jpg">
									<span class="post-tekst2">Tradycyjnie pierwszego września spotkaliśmy się przed naszą szkołą, by uroczyście rozpocząć nowy rok szkolny. Na początku uroczystości wysłuchaliśmy pięknego wykonania Sylwii Marciniak. Zaproszonych gości, rodziców oraz uczniów, a także całe grono pedagogiczne powitał Pan Dyrektor Waldemar Łastowski. Po ogłoszeniu ważnych informacji, życzeniach powodzenia i wytrwałości w realizowaniu swoich celów przekazał głos prowadzącym: Paulinie Matuszak i Patrykowi Kowalskiemu.  Zofia Ignasińska przypomniała nam utwór Konstantego Ildefonsa Gałczyńskiego „Pieśń o żołnierzach z Westerplatte”. W ten sposób chcieliśmy uczcić rocznicę wybuchu II Wojny Światowej. Tradycyjnie po zakończeniu uroczystości udaliśmy się do sal lekcyjnych na pierwsze powakacyjne spotkanie z nauczycielami. Życzymy wszystkim uczniom samych sukcesów w nowym Roku Szkolnym 2016/2017!
 Samorząd Uczniowski</span>
						<div class="post-linki">
							<a class="post-facebook" href="https://www.facebook.com/">Więcej na facebook</a>
						</div>
						</div>
					</div>
					
			</div>
		</div>
	</div>
</section>
	<footer>
	<div class="footer-2">
		<div class="wrapper3">
		<a href="#" class="simple-back-to-top"><img src="img/cd-top-arrow.svg"></a>
		</div>
	</div>
		<div class="wrapper4">
			<div class="footer-div"><a class="footer-icon"><img class="footer-global" src="img/footer-1.svg"></a><p><span class="footer-icon-tekst">Stanisława Staszica 6</span></p><span class="footer-icon-tekst"> 64-980 Trzcianka</span></div>
			<div class="footer-div"><a class="footer-icon"><img class="footer-global-2" src="img/footer-2.svg"></a><span class="footer-icon-tekst-2">67 216 34 95</span></div>
			<div class="footer-div"><a class="footer-icon"><img class="footer-global-3" src="img/footer-3.svg"></a><span class="footer-icon-tekst-2">trzcianka1@wp.pl</span></div>
		
			<div id="right" class="footer-info"><p>© 2016. Gimnazjum nr 1 im. Juliusza Słowackiego w ooooooo.</p><p>Projekt wykonany przez wwwwwww.</div>
		</div>
	</footer>

 

 

  • Like 1

Share this post


Link to post

Witam jak coś to ja ten post napisałem ☺️

Share this post


Link to post

Usuń z footer:

position:absolute;

 

  • Like 1

Share this post


Link to post

tylko jak usunąłem position to tak mam

Spoiler

Edited by Magmus

Share this post


Link to post

A jak dodasz:

* {
  box-sizing: border-box;
}

To coś się zmieni?

  • Like 1

Share this post


Link to post

Usuń z footer:

position: absolute;

A do #wrapper2 dodaj: 

overflow: hidden;

Można też wewnątrz niego utworzyć pustego diva i ustawić mu w stylach CSS:

clear: both;

Ale ja zawszę stosuje to co napisałem wcześniej i jak na razie nie narzekam na to.

  • Like 1

Share this post


Link to post

O działa i dziękuje serdecznie ☺️ 

 

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...