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

Kurs CSS odc. 3: Problem z justowaniem tekstu

VPS Starter Arubacloud
0 głosów
188 wizyt
pytanie zadane 13 września 2017 w HTML i CSS przez seban253 Nowicjusz (120 p.)
zmienione kategorie 13 września 2017 przez Arkadiusz Waluk

Witam, utknąłem na 21:18 minucie filmu Pana Mirosława. Problem polega na justowaniu tekstu na stronie po wpisaniu wszystkiego tak jak na filmie i tekst dalej rozciąga sie na całą przeglądarke :/ 

body
{
		background-color: #303030;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size:20px;
	margin:0 !important;
}

.wrapper

{
width: 100%;	
	}

.header
{
	width:100%;
	padding:  40px 0;
}

.logo
{
	width:450px;
	font-size:48px;
	margin-left:auto;
	margin-right:auto;
	
}
.nav
{
	width:100%;
	padding:10px 0;
	background-color:#c34f4f;
	text-align: center;
	border-top: 1px solid # 751b1b;
	border-bottom: 1px solid # 751b1b;
	height:40px;
}

.content
{
	width: 1000px;
	margin-left:auto;
	margin-right: auto;
	text-align: justify;
	}
	
<!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<title>Retrogranie</title>
	
	<meta name="description" content="Serwis o starych grachpochodzących z Nintendo Entertainment Systems"/>
	<meta name="keywords" content="gry, komputerowe, retro, nes, konsole, retrogranie, stare gry"/>
	
	<link  href="style.css" rel="stylesheet" type="text/css"/> 
	<link href="https://fonts.googleapis.com/css?family=Lato:400,700&amp;subset=latin-ext" rel="stylesheet" type="text/css">
	
</head>
<body>

	<div class="wrapper"></div>
		<div  class="header">
		
				<div class="logo" >
				<img src="pad.png" style="float: left"/>
				<span style="color: #c34f4f">Retro</span>granie.com
				<div style="clear:both;"></div>
		</div>
		<div class="nav"></div>
		<div class="content"></div>
		
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ante dolor, suscipit ac gravida sollicitudin, interdum nec felis. Praesent vitae quam est. Aenean convallis magna in enim vulputate egestas. Morbi ac condimentum nisl. Nulla arcu quam, eleifend et euismod vitae, fermentum eget quam. Nulla facilisi. Nulla convallis sed orci et faucibus. Duis sed metus vel elit feugiat eleifend pellentesque vitae lacus. Nunc ex ipsum, eleifend nec porttitor vitae, ornare eu lectus. Suspendisse feugiat augue at nisl venenatis, ut bibendum libero iaculis. Curabitur quam odio, lobortis et blandit vitae, ornare sed neque.</p>

			<p>Nunc eu nibh blandit, varius nulla sed, gravida nisi. Sed molestie tempus enim. Aliquam mollis vulputate purus vel molestie. Etiam ultricies id erat in molestie. Ut eu lectus orci. Mauris consectetur elementum eros in interdum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in vestibulum enim. Duis interdum, ipsum sollicitudin ornare venenatis, arcu nunc eleifend dolor, sit amet efficitur erat sem faucibus tellus. Aliquam ipsum elit, suscipit et metus ac, mollis condimentum lectus. Pellentesque placerat at sem ac efficitur. In vestibulum ligula non malesuada posuere. Morbi tempor, lectus sed congue porta, ex dolor congue mi, id scelerisque nulla mi id eros. Phasellus sit amet nisl vel elit pretium tempor at sit amet diam. Sed non arcu eu lacus consequat bibendum.</p>

			<p>Maecenas aliquet quis leo tristique porta. Sed scelerisque fringilla orci, ut luctus elit laoreet eu. Integer bibendum diam vestibulum, maximus ex vel, posuere mi. Suspendisse potenti. Mauris eget magna ut diam commodo pellentesque. Vestibulum gravida, nulla vel congue condimentum, lectus erat finibus lectus, in auctor velit leo ac arcu. Quisque aliquet volutpat nibh, a egestas velit dignissim ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce nunc leo, bibendum eu venenatis a, tristique in urna. Suspendisse sed nisi in lacus sollicitudin consequat.</p>

			<p>Quisque ac ipsum elit. Praesent imperdiet nulla quis imperdiet feugiat. Sed scelerisque accumsan volutpat. Suspendisse faucibus nisl nec ipsum auctor tincidunt. Etiam pretium consequat erat ac ultricies. Praesent nec consequat turpis. Phasellus at est bibendum, tincidunt arcu vitae, rutrum risus. Nullam gravida est quis nibh fringilla lacinia. Cras consectetur pulvinar metus, a convallis orci rutrum et. Morbi purus nisl, interdum nec luctus a, luctus quis enim. Curabitur in velit ornare, pretium sem nec, tincidunt felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ac auctor metus.</p>

			<p>ed odio ipsum, tincidunt eget neque in, varius tempus turpis. Nunc imperdiet, nisi eget elementum lacinia, neque mi porttitor lacus, quis bibendum enim est non risus. Cras nec ipsum scelerisque, tempus enim pellentesque, convallis est. Nulla auctor quam at porttitor posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut lacinia nisi. Sed at sagittis nisl. Mauris ac leo aliquet, varius ex a, fringilla orci. Curabitur at orci dui. Sed fermentum nibh tortor, vitae pharetra risus iaculis in. Curabitur elementum accumsan orci, quis venenatis nisi elementum non. Phasellus bibendum in sem sed molestie.</p>
	</div>

</body>
</html>

Gdzie tkwi problem? będę bardzo wdzięczny za odpowiedz :)

1 odpowiedź

0 głosów
odpowiedź 13 września 2017 przez imklau Nałogowiec (42,090 p.)
.content {
    width: 1000px;
    margin-left:auto;
    margin-right: auto;
    text-align: justify;
}

przypisujesz te style do diva o klasie content, a sprawdź sobie w HTML, co znajduje się w tym divie ;)

komentarz 13 września 2017 przez seban253 Nowicjusz (120 p.)
Kuuuurde, racja zle zamknięty div w HTML :) Noemi dzięki wielgachne :) :D

Podobne pytania

0 głosów
1 odpowiedź 260 wizyt
0 głosów
2 odpowiedzi 516 wizyt
0 głosów
1 odpowiedź 182 wizyt
pytanie zadane 28 grudnia 2016 w HTML i CSS przez kubekzone Użytkownik (620 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!

...