• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

stopka - wyśrodkowanie

VPS Starter Arubacloud
0 głosów
385 wizyt
pytanie zadane 21 maja 2016 w HTML i CSS przez Newaz Użytkownik (880 p.)

Witam

Trochę sobie majstruje w CSS i HTML i mam problem ze "stopką". Ma ona wyglądać mniej więcej tak http://imgur.com/dvlwutk i problem polega na tym, że przykleja się oną do lewej, i nie mam pojęcia jak to zmienić.Chcę aby była na środku ekranu pod contentem, którego szerekość wynosi 1000px.

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

     <meta charset="uft-8" />
	 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	 
	 <title>samochody</title>
	 
	 <meta name="description" content= "strona o najlepszych samochodach" />
	 <meta name="keywords" content="samochody,dobre,fury,auta,sportowe,ferrari,porsche,bmw,audi,seat,najlepsze" />
	 <link rel="stylesheet" href="style.css" type="text/css" />
	 <link href='https://fonts.googleapis.com/css?family=Poiret+One&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>

<body>

	<div id="container">
		<div id="logo">Najlepsze samochody</div>
		
		<div id="nav">
			<div id="główna">strona główna</div>
			<div id="marki">najlepsze marki</div>
			<div id="silniki">silniki spalinowe</div>
			<div id="informacje">informacje</div>
			<div style="clear:both"></div>
		</div>
		
		<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis nisi urna. Duis non erat porttitor, gravida sapien mollis, dignissim turpis. Donec mattis est vel neque porttitor tempor. Quisque ut condimentum quam. Vivamus sit amet euismod nulla, vel imperdiet nisl. Morbi placerat turpis ut eros convallis, nec rutrum leo scelerisque. Nunc ac dui orci. Mauris imperdiet sapien eu justo eleifend varius. Mauris vulputate, mi eu pretium convallis, massa purus fermentum ex, ut congue arcu odio quis nibh. Praesent erat tortor, finibus at neque quis, porttitor laoreet nisl. Nunc sollicitudin odio fermentum, lobortis ipsum eu, elementum lorem. Sed a nisi nisl. Nunc feugiat consectetur nisl eget tincidunt. Nulla vel scelerisque quam.</p>

		<p>Donec facilisis faucibus felis, eget malesuada sapien viverra id. Nunc nec massa at neque blandit placerat id sodales est. Vivamus ullamcorper posuere luctus. Morbi id posuere lacus, ut sollicitudin libero. Donec massa turpis, imperdiet et bibendum vitae, pulvinar in arcu. Fusce blandit justo id porttitor commodo. Nam faucibus faucibus gravida. Integer at turpis elit. Aliquam at lacinia libero. Integer eu neque feugiat, ultrices ligula sed, hendrerit enim. Cras turpis orci, imperdiet a lacus eget, ultrices vehicula lacus. Donec porta ut sem sed pharetra. In hac habitasse platea dictumst. Aliquam maximus elit magna, eget tincidunt elit dignissim vel.</p>

		<p>Nulla ac neque eu tellus ullamcorper sodales eu non nulla. Mauris accumsan quam sed est ultrices mollis. Curabitur consequat at dolor eget condimentum. Aliquam vulputate justo sed purus ultrices mattis. Donec faucibus dapibus velit eu iaculis. Integer ultrices vehicula fringilla. In tortor eros, mattis suscipit tincidunt quis, elementum vel urna.</p>

		</div>
		
	</div>

	
		<div id="footer">
			<div class="omnie">O MNIE

											Pseudonim: impek
											Wiek: 15 lat
											Specjalizacja: Tworzenie: 
											- stron WWW, 
			</div>
			<div class="omnie">NA SKRÓTY

											Moje prace
											Moja grafika
											Aktualne realizacje
											Kontakt
			</div>
			
			<div style="clear:both;"></div>
		</div>
	



</body>



</html>

 

body
{
	background-color: #ffffff;
	color: #000000;
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0;
	
}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}		

#logo
{
	width: 950px;
	padding: 25px;
	background-color: #BDBBBB;
	text-align: center;
	font-size: 75px;	
}

#nav
{
	width: 980px;
	background-color: #B02412;
	padding: 10px;
	margin-top: 10px;
}

#główna
{
	float: left;
	font-size: 18px;
	padding: 10px;
	margin-left: 220px;
	border-right: 1px dashed white;
	border-left: 1px dashed white;
	color: #ffffff;
}

#główna:hover
{
	background-color: #a01301;
}

#marki
{
	float: left;
	font-size: 18px;
	padding: 10px;
	border-right: 1px dashed white;	
	color: #ffffff;
}

#marki:hover
{
	background-color: #a01301;
}

#silniki
{
	float: left;
	font-size: 18px;
	padding: 10px;
	border-right: 1px dashed white;
	color: #ffffff;
}
 
 #silniki:hover
 {
	background-color: #a01301;
}

#informacje
{
	float: left;
	font-size: 18px;
	padding: 10px;
	border-right: 1px dashed white;
	color: #ffffff;
}

#informacje:hover
{
	background-color: #a01301;
}

#content
{
	background-color: #ffffff;
}



#footer
{
	width: 100%;
	background-color: #3d3d3d;
}

.omnie
{
	background-color: 3d3d3d;
	float: left;
	padding: 25px;
	width: 450px;
	text-align: center;
	border-right: 2px dashed white;
}

 

2 odpowiedzi

0 głosów
odpowiedź 21 maja 2016 przez mitelak Pasjonat (23,330 p.)
Po pierwsze zamień wszystkie id na class, bo tak naprawdę id używa się tylko do "chwytania" w javascripcie. Jak będziesz miał klase możesz wtedy dorzucić diva z class container w footer i będziesz miał wtedy dla tego co w stopce też 1000px;
Ogolnie możesz zamienić div ze stopką na po prostu <footer>, tak samo nawigacje na <nav> poczytaj sobie o tagach w html5 :)
komentarz 26 maja 2016 przez Newaz Użytkownik (880 p.)
komentarz 26 maja 2016 przez mitelak Pasjonat (23,330 p.)
Na przykład coś takiego http://codepen.io/mitelak/pen/VjZxoJ

W ogóle to pozmieniaj u siebie id na class (id używaj do chwytnia javascriptem oraz do przenoszenia przez a do danej sekcji, a nie do stylowania)

Usuń polskie znaki! w id i klasach. Możesz też pozamieniać Twoje divy jak nav czy footer na tagi z html5 <nav> i <footer> po prostu.
Zamiast diva z clear: both możesz użyć :after. Poza tym nie musisz używać float: left w tym momencie, możesz użyć display: inline-block lub flex boxa.

A w stopce tekst sam się kusił o podanie go w formie listy ;)
komentarz 26 maja 2016 przez Newaz Użytkownik (880 p.)
Ładnie tylko jak sie pojawia dużo tych divów, króre wkłada sie w kolejne to sie zaczynam troche gubić np. z tym ol i li (3 odcinek css). Ale myślę, że z czasem się z tym oswoję.

Wspominałeś mi także abym poczytał sobie o tagach w HTML5, czy ta stronka jest do tego odpowiednia http://www.kurshtml.edu.pl/html/nowe_elementy_html5,html5.html aby również dowiedzieć się nowych rzeczy o HTML5?
komentarz 26 maja 2016 przez mitelak Pasjonat (23,330 p.)
Jak najbardziej dobra strona. Co do poradników pana zelenta osobiście nie lubię jego sposobu uczenia :D jak chcesz mogę Ci pomóc prywatnie jeżeli z czymś masz problemy napisz prywatna wiadomość ;)
komentarz 28 maja 2016 przez Newaz Użytkownik (880 p.)
Ja nie mam porównania, bo programowania uczę się tylko z filmików pana Zelenta. Narazie uczyłem się tylko tworzenia stron ale wiadomo, że pierwsze odcinki z CSS'a i HTML'a nie są najnowsze i są już pewnie inne/lepsze rozwiązania w niektórych przypadkach. Niby moge poczytać w internecie ale wydaje mi się, że nie jest to tak wygodne jak oglądanie filmików.

Jak będę miał jakiś problem to może jeszcze sie odezwę ;)

Podobne pytania

0 głosów
2 odpowiedzi 498 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez FabQ Początkujący (450 p.)
0 głosów
2 odpowiedzi 360 wizyt
pytanie zadane 13 września 2020 w HTML i CSS przez Robot 12 Początkujący (340 p.)
0 głosów
2 odpowiedzi 141 wizyt
pytanie zadane 3 marca 2020 w HTML i CSS przez Pabllo26 Obywatel (1,280 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...