Znikający div

pytanie zadane 31 stycznia 2016 w HTML i CSS przez wgnsy123 Początkujący (410 p.)

Witam, otóż tworzę sobie strony na htmlu i css aby utrwalić sobie pewne rzeczy no i napotkałem się z pewnym problemem. Div content znika gdy zmniejszam okno przeglądarki (jakby najechanie na margines sprawiło, że po prostu znika razem z tekstem).

Kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	
</head>

<body>
	
	<div id="container">
		<div id="nav">nav</div>
			<div id="header">
				<div id="logo">logo</div>
			</div>
				
		<div id="news">news</div>
		<div id="content">content</div>
	
	
	
	
	
	
	
	</div>
	
</body>
</html>

css:

body
{
	background-color: #404040; 
	color: #ffffff;
	margin: 0 !important;
	font-family: 'Lato', sans-serif;
	font-size: 20px;
	width: 100%;
}
#container
{
	width: 100%;
}
#nav
{
	width: 100%;
}
#header
{
	padding: 40px 0;
	widht: 100%;
	margin-bottom: 20px;
}
#logo
{	
	font-size: 48px;
	width: 450px;
	height: 80px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
}
#news
{
	background-color: green;
	width: 300px;
	margin: 30px;
	float: left;
	height: 700px;
}
#content
{
	background-color: orange;
	width: 1000px;
	margin: 30px;
	float: left;
	height: 700px;
}
#footer
{

}

2 odpowiedzi

odpowiedź 31 stycznia 2016 przez thedaw Obywatel (1,810 p.)
wybrane 31 stycznia 2016 przez wgnsy123

Najlepsza

A w jakiej przeglądarce to sprawdzasz? Przetestowałem Twój kod na Chrome i Firefoxie i nic nie zniknęło. http://imgur.com/dIFyMUN

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

W firefox. Okej, czyli wina mojej przeglądarki.

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Aaa... div schodzi na dół ;-; no nieźle, da się jakoś inaczej zrobić żeby jednak nie skakał na dół?

komentarz 31 stycznia 2016 przez jaca121212 Nałogowiec (40,760 p.)

chcesz ten pomarańczowy div mieć obok tego zielonego?

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

No tak, jeżeli zmniejsze rozdzielczość to żeby ten pomarańczowy i tak był obok zielonego.

odpowiedź 31 stycznia 2016 przez jaca121212 Nałogowiec (40,760 p.)

A to ma być strona responsywna ?

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Nie umiem zrobić responsywnej strony jeszcze ;/

komentarz 31 stycznia 2016 przez jaca121212 Nałogowiec (40,760 p.)

ok tak pytam ale gdybyś robił kiedyś stronę responsywną to zamiast PX daj %.

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Oglądałem i czytałem coś tam o tych responsywnych, wykorzystuje się coś takiego jak media queries. Notepad++ jednak nie wie co to jest i nie idzie kodować w tym, wiesz może co zrobić? //edit Już to ogarnąłem.

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Zrobiłem coś takiego:

html:

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

	<meta name="viewport" content="width=device-width, initial-scale-1.0">
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	
	<link href="style.css" rel="stylesheet" type="text/css" />
	
</head>

<body>

	<div class="container">
		<div class="column">Kolumna 1</div>
		<div class="column">Kolumna 2</div>
		<div class="column">Kolumna 3</div>
		
</div>

	<div class="content">rgrgngeirgnerioqngouerfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</div>
	
	
	
	
</body>
</html>

css:

*{box-sizing:border-box;}
.container
{
	width: 1000px;
	padding: 10px;
	border:1px solid #000;
	margin: auto;
}

.column
{
	width: 33%;
	display:inline-block;
	text-align: center;
}
.content
{
	width: 1000px;
	background: green;
	height: 600px;
	margin: auto;
}

@media screen and (max-width: 1024px)
{
	.container
	{
		width: 100%;
	}
	.column
	{
		width: 100%;
		margin: 10px 0px;
		color: white;
		background: red;
	}
	.content
	{
		width: 100%;
		background: yellow;
		text-align: justify;
		
	}
}

Wszystko jest spoko tylko tekst wykracza poza content ;/

komentarz 31 stycznia 2016 przez jaca121212 Nałogowiec (40,760 p.)

Zobacz czy ci to będzie odpowiadało na szybkiego to zrobiłem

http://pastebin.com/N7zKNL2t

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Wszystkiego za dużo, prosiłbym tylko o to jak zrobić żeby tekst nie wychodził poza diva.

komentarz 31 stycznia 2016 przez jaca121212 Nałogowiec (40,760 p.)

*{box-sizing:border-box;}
.container
{
    width: 1000px;
    padding: 10px;
    border:1px solid #000;
    margin: auto;
}
 
.column
{
    width: 33%;
    display:inline-block;
    text-align: center;
}
.content
{
    width: 1000px;
    background: green;
    height: 600px;
    margin: auto;
    white-space: pre-wrap;
    overflow: hidden
}
 
@media screen and (max-width: 1024px)
{
    .container
    {
        width: 100%;
    }
    .column
    {
        width: 100%;
        margin: 10px 0px;
        color: white;
        background: red;
    }
    .content
    {
        width: 100%;
        background: yellow;
        text-align: justify;
         white-space: pre-wrap;
         overflow: hidden
    }
}

komentarz 31 stycznia 2016 przez wgnsy123 Początkujący (410 p.)

Eh... teraz to fakt, nie wykracza poza diva ale nie schodzi na dół. Co to ma być za sens, że na mobilnych wersjach ludzie mogą przeczytać tylko 1/10 tekstu...