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

Stopka wychodzi poza pojemnik

Object Storage Arubacloud
0 głosów
128 wizyt
pytanie zadane 12 lutego 2020 w HTML i CSS przez Loveuso Nowicjusz (190 p.)

Witam, czy ktoś wytłumaczy dlaczego stopka wychodzi poza container? Chciałbym żeby stopka znajdowała się na białym tle. Jeśli komuś się będzie chciało prosiłbym o wyczerpanie tematu gdyż jestem nowy. 

 

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Strona domowa</title>
	<meta name="description" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego, co chcesz wiedzieć o Linuxie!" />
	<meta name="keywords" content="linux, kurs, nauka, poznaj, co to jest linux, ubuntu, debian, mint, fedora, wybierz dystrybucję, instalacja linux, polecenia, terminal, bash" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	

</head>


<body>

<div id="container">

	
	<div class="bar">
	
	<img src="logo.jpg">

		<div id="menu">	
	
		<div class="option"> Home </div>
		<div class="option"> About </div>
		<div class="option"> Products </div>
		<div class="option"> Services </div>
		<div class="option"> Contact </div>
		
		</div>
	
	</div>

		
	
	
		
	

	
	
<div class="header">
	
		<div id="tlo">
	
			<img src="logotlo.jpg">
	
	
		</div>
	

</div>


<div class="content"> 

<img src="obraz.jpg">

<h1> Great slogan!</h1>



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus nisl aliquam, consectetur metus et, varius ante. Mauris cursus est et feugiat tristique. Ut a vulputate ex. Nam sagittis, elit eget tempor posuere, eros elit convallis velit, vel elementum eros nisl sit amet elit. Donec sit amet dapibus sem, at elementum est. Etiam pretium enim quis ante consequat mattis. Suspendisse maximus malesuada nunc vel laoreet. Quisque sollicitudin, odio sollicitudin molestie rutrum, purus lacus sagittis lorem, at sodales felis tortor a neque. Vestibulum eleifend et tellus id malesuada. Maecenas dolor nisi, tempus eu venenatis a, maximus ac nunc. Etiam ligula neque, pellentesque eu fermentum non, porta eget ante. In nec mi vel lacus rutrum ullamcorper sit amet nec arcu. Pellentesque pulvinar sapien pharetra faucibus laoreet. Quisque lorem enim, vestibulum sit amet aliquet id, ullamcorper vitae sem. Proin at risus in neque gravida faucibus quis id felis. Maecenas pellentesque enim in finibus consequat.





<ul>



<li>
	Sed eget dictum neque, vitae ultricies metus. Sed condimentum lectus sit amet quam lacinia
</li>

<li>
Suspendisse laoreet sit amet nisl eget tempus. Ut ut felis bibendum, hendrerit nunc feugiat
</li>

<li>
nunc. Quisque ex odio, tincidunt ut vehicula quis, consectetur id ex. 
</li>

<li>
 vitae. In hac habitasse platea dictumst. Suspendisse sed odio id ligula ullamcorper vulputate. 
 
</li>

<li>
Nunc vulputate pellentesque sodales. Quisque condimentum nibh non fringilla rhoncus.
</li>

<li>
malesuada. Curabitur luctus lacinia mattis. Curabitur tempor elit id hendrerit tempus. 
</li>

<li>
eleifend risus ultricies at. Nulla vehicula nec odio sit amet molestie.
</li>

</ul>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus enim quis commodo pellentesque. Vivamus fringilla ullamcorper dolor, id sagittis est sollicitudin in. Maecenas erat tellus, posuere quis viverra vel, aliquam non ante. Cras scelerisque ornare urna, non porta dolor faucibus sit amet. Phasellus aliquam, massa id porta condimentum, eros turpis mattis nisl, ut gravida massa est in velit. Sed ut augue imperdiet, tempus massa eget, ullamcorper ligula. Nullam malesuada aliquet ornare. Donec ac pharetra metus. Fusce non egestas metus. Curabitur auctor justo id magna rutrum, eget mollis nulla tincidunt. Duis nec lacus aliquet, dapibus dui maximus, vehicula lacus.Integer iaculis mi interdum ex pharetra dapibus. Fusce lacinia sed justo scelerisque bibendum. Duis vel risus fermentum, laoreet justo id, dapibus turpis. Donec risus lectus, tincidunt eu libero eu, gravida bibendum neque. Aenean vitae leo id sapien faucibus facilisis. Cras vel vestibulum leo. Cras mattis felis nunc, ac iaculis urna facilisis vel. Aliquam at volutpat justo. 

</div>


<div class="stopka">
	
		<div class="option1"> Home </div>
		<div class="option1"> About </div>
		<div class="option1"> Products </div>
		<div class="option1"> Services </div>
		<div class="option1"> Contact </div>
		
		

</div>


</div>

</body>

</html>

body
{
	background-color:#ff9900;
}


#container


{
width: 95%;
margin-left: auto;
margin-right: auto;
background-color:white;
margin-top: 45px;

}

.bar
{
	width:100%;
	margin-top: 1px;
	
}

.bar img
{
	
	float:right;
	width: 20%;
	height: 120px;
	padding: 1px;
}


.header
{
	width: 100%;

}

#menu
{
	background-color: #208208208;
	margin-top: 7px;
	float:left;

}

.option
{
	
	float: left;
	min-width: 60px;
	height: 25px;
	font-size: 15px;
	font-weight: bold;
	padding: 20px;
	padding-top: 50px;
	opacity: 0.8;
	color: #cc6633;
}

#tlo img
{
	width: 100%;
	height: 350px;
	border-top-style: solid;
	border-top-color: #ffff33;
	border-top-width: 5px;
	margin-top: 2px;
}

.content img
{	float:right;
	margin: 15px;
	border-style: dotted;
	border-color: #996600;
	height: 200px;
	

	
}

.content
{
	text-align: left;
	padding-left: 25px;
}


.content h1
{
	color:#ff6600;
	text-decoration: underline;
}


.option1
{
	float: left;
	min-width: 60px;
	height: 20px;
	font-size: 15px;
	font-weight: bold;
	color: #0e0e0e;
	margin-bottom: 50px;
	border-right-style: dotted;
	border-right-width: 2px;
}
	
.stopka
{
	margin-top: 10px;
}

 

2 odpowiedzi

0 głosów
odpowiedź 12 lutego 2020 przez Tomek Sochacki Ekspert (227,510 p.)
Dla .option1 wywal flex:left i dla .stopka dodaj display:flex

Piszę z mobilki tylko po analizie kodu, więc jestem tego pewien tak na 99% :) ale spróbuj, myślę, że to pomoże. Już bardzo dawno nie używałem floatów ale kojarzę, że tam było trochę problemów w niektórych przypadkach... najlepiej przenieś się na flex, wsparcie jest bardzo dobre, a dużo przyjemniej się z tym pracuje i daje dużo większe możliwości.
0 głosów
odpowiedź 13 lutego 2020 przez pablop76 VIP (123,180 p.)
edycja 13 lutego 2020 przez pablop76

Problem w tym że floaty są elementami pływającymi. Czyli takimi, które po wyjęciu z  pojemnika powodują, że ten pojemnik traci zawartość i "zapada się". Znana technika radzenia sobie z tym problemem to clearfix. Ale tak jak napisał Tomek lepiej w dzisiejszych czasach nie używać float do projektowania układu strony.

w Twoim przypadku clearfix wyglądałby tak:

#container:after {
  content: "";
  display: table;
  clear: both;
}

 

Podobne pytania

0 głosów
2 odpowiedzi 533 wizyt
+1 głos
3 odpowiedzi 561 wizyt
pytanie zadane 14 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)
0 głosów
0 odpowiedzi 707 wizyt

92,579 zapytań

141,432 odpowiedzi

319,664 komentarzy

61,964 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...