• 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

0 głosów
116 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 Szeryf (94,890 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,990 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 (38,070 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
1 odpowiedź 98 wizyt
pytanie zadane 22 sierpnia 2017 w HTML i CSS przez HeroGames Początkujący (380 p.)
0 głosów
2 odpowiedzi 76 wizyt
pytanie zadane 8 września 2016 w HTML i CSS przez Filip31411 Dyskutant (8,870 p.)
0 głosów
1 odpowiedź 132 wizyt
Porady nie od parady
Możesz ukryć, zamknąć lub zmodyfikować swoje pytanie, za pomocą przycisków znajdujących się pod nim. Nie krępuj się poprawić pochopnie opublikowanego pytania czy zamknąć go po uzyskaniu satysfakcjonującej odpowiedzi. Umożliwi to zachowanie porządku na forum.Przyciski pytania

64,791 zapytań

111,250 odpowiedzi

233,951 komentarzy

46,683 pasjonatów

Przeglądających: 190
Pasjonatów: 5 Gości: 185

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...