Przeniesienie diva na samą górę.

pytanie zadane 10 kwietnia 2017 w HTML i CSS przez Mateusz Bogumił Obywatel (1,380 p.)

Witam. Przybywam z kolejnym problemem. Tym razem chcę przenieść diva banner na samą górę.
Prosiłbym też o napisanie dlaczego tak się działo i jak temu zapobiegliście.

<html>
 <meta charset="utf-8" />
 <link href='https://fonts.googleapis.com/css?family=Lato:400,100|Josefin+Sans:400,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="style.css" type="text/css"/>
</head>

<body>
	<div class="nav">
		<div class="bcgnav">
			<div class="button"></div>
		</div>
	</div>
	<div class="kanaly">
		<div class="bcgkanaly"></div>
	</div>
	<div class="container">
		<div class="banner"></div>
		<div class="info"></div>
		<div class="footer"></div>
	<div>
</body>
</html>

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

.container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.nav
{
	width: 200px;
	height: 100%;
	background-color: red;
	float: left;
}

.kanaly
{
	width: 200px;
	height: 100%;
	background-color: green;
	margin-left: auto;
}

.bcgnav
{
	width: 150px;
	height: 100%;
	background-color: blue;
	margin-left: auto;
	margin-right: auto;
}

.bcgkanaly
{
	width: 150px;
	height: 100%;
	background-color: blue;
	margin-left: auto;
	margin-right: auto;
}

.banner
{
	height: 400px;
	background-image: url("banner.jpg");
	margin-bottom: 500px;
}

2 odpowiedzi

odpowiedź 10 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

to już trzeba poczytać o pozycjonowaniu elementów w CSS ;)
do diva musisz dodać position: absolute i top: 0;
wtedy div będzie pozycjonowany względem body i zostanie przeniesiony na samą górę body

komentarz 10 kwietnia 2017 przez pablop76 VIP (123,120 p.)

Witam. O co chodzi?. Jest na górze pojemnika .container tak jak powinno być.

Wyżej jest .nav i .kanaly. Gdzie więc ma być wyżej?

Taka jest struktura html.

I co to są wysokości 100%;(100% czego ?)Czy to ma być one-page.

komentarz 10 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

ja zrozumiałam to tak jakby autor tego pytania chciał wymusić ustawienie .banner na samą górę dokumentu mimo, że w html znajduje się on niżej, dlatego napisałam o pozycjonowaniu :p
chociaż w HTML mógłby dać banner po prostu na samej górze, a jeśli chciał mieć banner na górze diva .container to nie wiem po co to pytanie w ogóle zostało zadane

komentarz 10 kwietnia 2017 przez Mateusz Bogumił Obywatel (1,380 p.)

Przecież jest na samym dole 0_0

komentarz 10 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

no to position: absolute nie pomogło?
czy o co Ci chodziło? :p

odpowiedź 10 kwietnia 2017 przez marcin99b Szeryf (82,080 p.)

Nie wiem dokładnie co chcesz zrobić, ale to raczej odpowiedniego umieszczenia float'ów i clear: both w css
jeśli chcesz żeby elementy były do siecie "przyklejone" z np lewej, każdemu dajesz float:left
Jeśli element ma być ułożony niżej niż poprzedni (domyślnie), dajesz clear:both