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

Problem z float: left - treść przykleja się do prawej strony

VPS Starter Arubacloud
0 głosów
350 wizyt
pytanie zadane 19 stycznia 2018 w HTML i CSS przez esceflora Nowicjusz (150 p.)

Otóż problem polega na tym, że piszę sobie stronę, żeby przećwiczyć właśnie to float i coś nie działa. To znaczy: mam zaplanowane 5 "wierszy" - header, drugi podzielony na 3, trzeci i czwarty podzielony na 2 i footer. Przy pierwszym i drugim podziale udało się wszystko odpowiednio ułożyć, ale przy trzecim cała pozostała zawartość jakby chowa się w ostatnim divie... A ja już absolutnie nie wiem dlaczego. Pomocy!

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

<head>
	<meta charset="utf-8"/>
	<title>Serwis pomocy technicznej</title>
	<meta name="description" content="Tu dowiesz się gdzie i jak szukać pomocy technicznej."/>
	<meta name="keywords" content="serwis, telefony, laptopy, komputery, sprzęt AGD, pomoc"/>
	<meta http-equiv="X-UA-Compatibile" content="IE=edge, chrome=1"/>
	<meta name="author" content="Aneta Nowak"/>
	
	<style>
	#container
		{
		width: 1362px;
		margin-left: auto;
		margin-right: auto;
		}
	#header
		{
		background-color: #CC66FF;
		padding: 15px;
		}
	#opcja1
		{
		width: 454px;
		float: left;
		background-color: #999999;
		}
	#opcja2
		{
		width: 454px;
		float: left;
		background-color: #666666;
		}
	#opcja3
		{
		width: 454px;
		float: left;
		background-color: #808080;
		}
	#pusty1
		{
		clear: both;
		}
	#instrukcja1
		{
		width: 888px;
		float: left;
		padding: 10px;
		}
	#instrukcja2
		{
		width: 434px;
		float: left;
		background-color: #CCCCCC;
		padding: 10px;
		}
	#pusty2
		{
		clear: both;
		}
	#logo
		{
		float: left;
		width: 500px;
		padding: 10px;
		}
	#opis
		{
		width: 1112px;
		padding: 10px;
		float: left;
		}
	#footer
		{
		clear: both;
		}
	</style>
</head>

<body>
	<div id="container">
		<div id="header">
			<h1 align="center">Szukasz pomocy technicznej?</h1>
		</div>
		<div id="opcja1">
			<h3 align="center">Mam problem z komputerem</h3>
		</div>
		<div id="opcja2">
			<h3 align="center">Mam problem z smartfonem</h3>
		</div>
		<div id="opcja3">
			<h3 align="center">Mam problem ze sprzętem AGD</h3>
		</div>
		<div id="pusty1">
		</div>
		<div id="instrukcja1">
			<h4 align="center">Skontaktuj się z naszymi doradcami specjalizującymi się w obsłudze serwisowej komputerów, laptopów i smartfonów pod numerem telefonu 666 666 666 lub adresem e-mail adres@poczta.pl. Jesteśmy dostępni 24h na dobę, 7 dni w tygodniu.</h4>
		</div>
		<div id="instrukcja2">
			<h4 align="center">Przejdź do strony zaprzyjaźnionego serwisu AGD klikając <a href="http://milenium-agd.pl/" target="_blank" title="Przejdź do dedykowanego serwisu AGD">TUTAJ</a>.</h4>
		<div id="pusty2">
		</div>
		<div id="logo">
			<a href="https://www.facebook.com/serwis.techniczny.3" target="_blank" title="Zobacz naszą stronę na Facebooku"><img src="img/logo.jpg"/></a>
		</div>
		<div id="opis">
			Jesteśmy zespołem osób, który współpracuje z wieloma serwisami i scala ich usługi, aby zapełnić kompleksową obsługę naszym klientom. 
		</div>
		<div id="footer">
			Zespół techniczny &copy; Wszelkie prawa zatrzeżone
		</div>
	</div>

</body>
</html>

 

	#container
		{
		width: 1362px;
		margin-left: auto;
		margin-right: auto;
		}
	#header
		{
		background-color: #CC66FF;
		padding: 15px;
		}
	#opcja1
		{
		width: 454px;
		float: left;
		background-color: #999999;
		}
	#opcja2
		{
		width: 454px;
		float: left;
		background-color: #666666;
		}
	#opcja3
		{
		width: 454px;
		float: left;
		background-color: #808080;
		}
	#pusty1
		{
		clear: both;
		}
	#instrukcja1
		{
		width: 888px;
		float: left;
		padding: 10px;
		}
	#instrukcja2
		{
		width: 434px;
		float: left;
		background-color: #CCCCCC;
		padding: 10px;
		}
	#pusty2
		{
		clear: both;
		}
	#logo
		{
		float: left;
		width: 500px;
		padding: 10px;
		}
	#opis
		{
		width: 1112px;
		padding: 10px;
		float: left;
		}
	#footer
		{
		clear: both;
		}

3 odpowiedzi

0 głosów
odpowiedź 19 stycznia 2018 przez pablop76 VIP (123,060 p.)
wybrane 19 stycznia 2018 przez esceflora
 
Najlepsza
Wszystko jest ok, ale nie zamknąłeś jednego diva.

Pomijam błedy początkującego.
komentarz 19 stycznia 2018 przez esceflora Nowicjusz (150 p.)

Tak! Dziękuję, kompletnie tego nie widziałam. Miłego dnia wink

0 głosów
odpowiedź 19 stycznia 2018 przez Daniel90 Pasjonat (17,970 p.)
Proponuję porzucić te "floaty" na rzecz flexboxa.
komentarz 19 stycznia 2018 przez esceflora Nowicjusz (150 p.)
Może kiedyś, gdy już będę wiedzieć, co to i w ogóle wiedzieć co robię. Nie da się tego naprawić tym sposobem?
0 głosów
odpowiedź 19 stycznia 2018 przez jaca121212 Nałogowiec (40,760 p.)

Jeśli chodzi o  twoje początki musisz  rozdzielić  stronę na poszczególne sekcje. Dla przykładu  nie możesz dawać wszystkiego do jednego kontenera. Wiec zaczynając od początku. Jeśli  na naszej stronie  chcesz mieć  podstawowe rzeczy  takie jak menu, kontener (Wyświetlanie informacji na stronie) oraz  stopkę musisz to rozdzielić na  3 sekcje  i osobno dodać divy. Trochę teorii a teraz trochę praktyki więc zaczynamy:

Szkielet strony powinien wyglądać  w ten sposób.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="sekcja_pierwsza">
  menu strony
</div>
<div id="sekcja_druga">
kontener dla wyświetlania  użytkownikowi informacji
</div>
<div id="sekcja_trzecia">
stopka strony
</div>
</body>
</html>

Jesteś początkująca więc taka rada dla ciebie. Oducz się stylizacji po ID zamiast tego użyj CLASS. ID jak sama nazwa mówi że jest to identyfikator elementu. Clasa (można to powiedzieć tak) to funkcja która przekazuje (wykonuje się) w danym elemencie. Zakładając że classa o nazwie "a" ma przekazywać swoje  zdeklarowane funkcję elementowi "p" więc kod  wygląda tak.

.a
{
color:red;
text-transform:uppercase;
font-size:15px;
}

Więc kod wygląda tak.

https://jsbin.com/vomorihowo/edit?html,css,output

Może ci się to przyda może nie ale warto pomagać osobą które chcą się czegoś nauczyć samemu a nie tylko ściągać  gotowce od innych.

https://codepen.io/jaca121212/pen/QazOoY

Podobne pytania

0 głosów
2 odpowiedzi 130 wizyt
pytanie zadane 8 września 2016 w HTML i CSS przez Filip31411 Dyskutant (8,820 p.)
0 głosów
1 odpowiedź 209 wizyt
pytanie zadane 22 sierpnia 2017 w HTML i CSS przez HeroGames Początkujący (380 p.)
0 głosów
1 odpowiedź 208 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...