Nauka HTML5 - tutorial nr 2 - pytanie odnośnie stopki - footer

pytanie zadane 24 lutego 2017 w HTML i CSS przez spyniel Nowicjusz (240 p.)

Witam , jestem swiezy jesli chodzi o pisanie kodu , zaczynam sie uczyc HTML5 i CSS , pozniej chce zaczac PHP , JAVASCRIPT , BOOTSTRAP i moze C++ badz PHYTHONA. Tak czy inaczej przede man dluga droga.

Co do problemu, ktory spotkalem kierujac sie troche filmikami z yt na filmiki nr 2 html jest umieszczanie div-ów i tabel . A konkretnie chodzi mi o stopke czyli footer komenda css: clear: both; nie dziala tzn stopka ukazuje sie w kompletnie innym miejscu niz na filmiku i nie wiem czym to jest spowodowane...

tak samo w przypadku table - kolumn ..

Nie widze zakladki HTML jesli chodzi o wklejenie kodu wiec wklejam na XTHML

moze ktos podpowiedziec bym byl wdzieczny

pozdrawiam

div stopka tabele


	<style>
	
	#container
	{
		width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}	
	#logo
	{
		background-color: black;
		color: white;
		text-align: center;
		padding: 10px;
		width: 1300px;
	}
	#nav
	{
		float: left;
		background-color: lightgray;
		width: 160px;
		min-height: 620px;
		padding: 10px;
	
	}
	#content
	{
		float: left;
		padding: 20px;
		width: 920px;
	
	}
	#ad
	{
		float: left;
		width: 160px;
		min-height: 620px;
		padding: 10px;
		background-color: lightgray;
	
	}
	#footer
	{
		clear: both;
		position: relative;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
		
	}
	</style>

2 odpowiedzi

odpowiedź 24 lutego 2017 przez Paweł Antyporowicz Stary wyjadacz (11,470 p.)

Pokaż kod HTML

komentarz 24 lutego 2017 przez spyniel Nowicjusz (240 p.)

pokazalem w XHTML ..

komentarz 24 lutego 2017 przez Paweł Antyporowicz Stary wyjadacz (11,470 p.)

U mnie są tylko widoczne style css :C nic więcej

odpowiedź 24 lutego 2017 przez Mr Popcorn Bywalec (2,340 p.)

Ponieważ

clear: both;

musisz umieścić w tym elemencie, który jest przed stopką, a nie w stopce.

Zaleca się wprowadzenie nic nie wznoszącego diva pomiędzy stroną a stopką, który będzie czyścił float'a.

<div style"clear: both;" ></div>

3	komentarz 24 lutego 2017 przez Comandeer Guru (600,810 p.) Zaleca się wprowadzenie nic nie wznoszącego diva pomiędzy stroną a stopką, który będzie czyścił float'a. Od 10 lat się nie zaleca… Wystarczy odpowiednie clearowanie, clearfix albo display: flow-root.

komentarz 24 lutego 2017 przez spyniel Nowicjusz (240 p.)

Witam , dzieki za odpowiedz . Pokabinowalem troche sam i zadzialalo , kwestia tego czy tak jest ok i czy bedzie to dzialac na wszystkich przegladarkach ... tak czy inaczej dziekuje za pomoc i jesli masz jakies sugestie jakby mozna bylo to inaczej , lepiej zrobic to bede wdzieczny .

#footer
	{
		clear: both;
		width: 1280px;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
		margin-left: auto;
		margin-right: auto;
		
	}

<div id="ad">
			<img src="tutaj/promocja.png" width="160px" high="300px"
			<div style"clear: both;" ></div>
		</div>
		
		
		
		<div id="footer">
		Witam wszystkich &copy; Wszystkie prawa zastrzerzone
		
		</div>

komentarz 24 lutego 2017 przez Comandeer Guru (600,810 p.)

Czemu wybrałeś najgorsze rozwiązanie ze wszystkich wyżej przedstawionych…?

komentarz 24 lutego 2017 przez spyniel Nowicjusz (240 p.)

tzn??

komentarz 24 lutego 2017 przez spyniel Nowicjusz (240 p.)

Czy jest ktos kto mi poda info na temat jak to zrobic z clearfix albo display czy overflow...

komentarz 24 lutego 2017 przez Comandeer Guru (600,810 p.)

Byłoby prościej gdybyś podał cały kod…

Wystarczy kod clearfixa zaaplikować dla #footer::before.

komentarz 24 lutego 2017 przez spyniel Nowicjusz (240 p.)

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset=utf-8 />
	<title>Moja pierwsza strona internetowa</title>
	<meta name="description" content="Moja pierwsza strona - wykorzystanie divów"/>
	<meta name="keywords"  content="nauka, div, html, strona"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome1"/>
	
	
</head>

<body>

	<div id="container">
		
		<div id="logo">
			<h1> Nauka Html - divy</h1>
		</div>

		<div id="nav">
			zasada pozycjonowania div-ów <br />
			wygląd div-ów zdefinjujemy w CSS <br />
			Table potrzebują dużo atrybutów <br />
			Responsywność div-ów - Bootstrap framework moblie <br />
		</div>
		
		<div id="content">
		
		<h2>Bootstrap</h2> - framework CSS, rozwijany przez programistów Twittera, wydawany na licencji MIT[1]. 
		<br /><br />
		Zawiera zestaw przydatnych narzędzi ułatwiających tworzenie interfejsu graficznego stron oraz aplikacji internetowych. Bazuje głównie na gotowych rozwiązaniach HTML oraz CSS (kompilowanych z plików Less[2]) i może być stosowana m.in. do stylizacji takich elementów jak teksty, formularze, przyciski, wykresy, nawigacje i innych komponentów wyświetlanych na stronie. Framework korzysta także z języka JavaScript.
		</div>
		
		<div id="ad">
			<img src="tutaj/promocja.png" width="160px" high="300px"
			<div style"clear: both;" ></div>
		</div>
		
		
		
		<div id="footer">
		Witam wszystkich &copy; Wszystkie prawa zastrzerzone
		
		</div>


	</div>

</body>

<style>
	
	#container
	{
		width: 1320px;
		margin-left: auto;
		margin-right: auto;
	}	
	#logo
	{
		background-color: black;
		color: white;
		text-align: center;
		padding: 10px;
		width: 1300px;
	}
	#nav
	{
		float: left;
		background-color: lightgray;
		width: 160px;
		min-height: 620px;
		padding: 10px;
	
	}
	#content
	{
		float: left;
		padding: 20px;
		width: 920px;
	
	}
	#ad
	{
		float: left;
		width: 160px;
		min-height: 620px;
		padding: 10px;
		background-color: lightgray;
	
	}
	#footer
	{
		clear: both;
		width: 1280px;
		background-color: black;
		color: white;
		text-align: center;
		padding: 20px;
		margin-left: auto;
		margin-right: auto;
		
	}
	
	
	
	</style>