Problem z ułożeniem div'ow

Question

Cześć, napotkałem problem z którym nie moge sobie sam poradzić ani znaleść odpowiedzi w internecie, dlatego liczę na pomoc. Dokładnie chodzi o to że strona aktualnie wygląda tak... 

 

i div zaznaczony na czerwono za cholere nie chce ustawic się pod spodem tego głównego diva poniżej wklejam kod może ktoś wpadnie jak rozwiązać ten problem.

 

<div class="video-wrapper">
		<video autoplay muted loop>
			<source src="media/mon.mp4" type="video/mp4">
		</video>
		<nav class="navbar navbar-light bg-faded navbar-right">
  			<ul class="nav navbar-nav">
   			 <li class="nav-item active">
      			<a class="nav-link" href="#">Główna <span class="sr-only">(current)</span></a>
    			</li>
    			<li class="nav-item">
      			<a class="nav-link" href="#">Ogólne</a>
    			</li>
    			<li class="nav-item">
      			<a class="nav-link" href="#">Treść</a>
    			</li>
    			<li class="nav-item">
      			<a class="nav-link" href="#">Kontakt</a>
    			</li>
  			</ul>
			</nav>
		<div class="col-md-6 col-md-offset-3">
	   		<h1>Witaj </h1>
	   		<p> czesc</p>
	    </div>
	    <div class="mouse-iconq">
	    	<div class="scroll1"></div>
	    </div>
	</div>
	
	
	<div id="hello">
		
	</div>
	<div class="hello">
		<h1>Witaj na stronie</h1>
			<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>

 

html{
	height:100%;
	width: 100%;
}

body{
	 height: 100%;
     margin: 0px;
}

.video-wrapper{ 
	height: 60%;
	padding-bottom: 50px;
	padding-top: 50px;
}
.video-wrapper video{ 
	min-width: 100%;
	position: fixed;
	top:0;
	z-index: -100;
}
.video-wrapper h1 {
	color: gold;
	font-size: 76px;
	font-weight: 700;
	text-align: center;
	
}

.video-wrapper p{
	color: gold;
	font-size: 30px;
	font-weight: 300;
	text-align: center;
	
}

.col-md-6 {
	margin-top: auto;
}

	a { 
      text-decoration: none; 
     color: #000; 
	}

	a:hover { 
      text-decoration: none; 
     color: #000;
	} 
a:linec
	a:link { 
  	  color: #000; 
	} 

	a:visited { 
	    color: #000; 
	} 

	a:active { 
	   color: #000; 
	}

.nav-link{
	font-size:30px;
	margin-right: 20px;
	text-align: center;

}

.mouse-icon {
    position: absolute;
    border: 2px solid #2f2f2f;
    background: #ffffff;
    opacity: 0.8;
    border-radius: 13px;
    height: 40px;
    width: 30px;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 100;
}

.mouse-icon .scroll {
    position: relative;
    border-radius: 10px;
    background: #2f2f2f;
    width: 4px;
    height: 8px;
    top: 4px;
    margin-left: auto;
    margin-right: auto;
}

.mouse-icon .scroll {

    animation-name: scrolling;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-play-state: running;
}

 

Comments

wydaje mi sie że jest tam gdzie go ustawiłeś

W twoim kodzie css nie widze żebyś nadawał mu jakąś pozycje czy cokolwiek

Mało tego "class="mouse-iconq" " masz ustawioną wysokość i szerokość

DIV .video-wrapper ma padding dolny i górny

Sumując to wszystko wydaje mi się że jest tam gdzie powinien być

Answer 1

div "hello" ma domyślnie ustawiony display: block; i jest na cala szerokosc strony.

Dodaj do CSS:

 

.hello { text-align: center; }

 

Comments

dzięki za szybką odpowiedź niestety robiłem tak i jest to samo nadal on wciąż jest widoczny na divie video-wrapper, poradziłem sobie z tym inaczej ale chyba niezbyt profesjonalnie a mianowicie dodałem margin-top dla diva hello 20% nadałem mu background-color:white i wygląda to w przeglądarce tak jak chciałem niestety jest ten pasek na dole który umożliwia przesunięcie w prawo bądź lewo i tam już wciąż widać to video.. no cóż może ktoś ma inny pomysł jeśli nie to będe musiał wszystko umieszczać w divie hello chociaż niezbyt mnie to urządza bo zdaję sobie sprawę że to jest prawdopodobnie błąd :(

Answer 2

Witam. div video-wrapper ma wysokość 60% a pod nim jest div hello. Nie rozumiem o co chodzi w pytaniu.

dodaj do div video-wrapper

border: 1px solid red;

i zobacz.. I daj calego css lub link css  botstrapa, którego używasz.

Answer 3

jak chcesz szybko i w prosty sposób zbudować layout to skorzystaj z programu Pingendo tylko warto korzystac z niego z glowa i nie przesadzac :)

Answer 4

Dziękuje wszystkim za odpowiedź udało się uzyskać taki efekt jaki chciałem znalazłem podobne pytanie na jakimś forum musiałem się nieźle naszukać. Tamten kod był zły już go poprawiłem gdyby ktoś chciał utworzyć sobie stronkę z video na dzień dobry i mial taki problem to wkleje poprawny kod :) 

<!DOCTYPE html>
<html>
<head>
	<title>hello</title>
	<meta charset="utf-8">
	<link href="style/bootstrap.min.css" rel="stylesheet">
	<link href="style/custom.css" rel="stylesheet">
	<script src="https://use.fontawesome.com/0deb2012ef.js"></script> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>
<body>
	
	<div class="container">
		<video autoplay muted loop>
			<source src="media/mon.mp4" type="video/mp4">
		</video>
			<nav class="navbar navbar-light bg-faded navbar-right">
            <ul class="nav navbar-nav">
             <li class="nav-item active">
                <a class="nav-link" href="#">Główna <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Ogólne</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Treść</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="#">Kontakt</a>
                </li>
            </ul>
            </nav>
		<div class="text">
	   		<h1>Witaj </h1>
	   		<p> czesc</p>
	    </div>
	</div>
	<div class="content">
		<div class="col-lg-12">
			<h2>Hello</h2>
			<p>Witaj na stronie</p>
			<p> hello hello :)
		</div>
		<div class="col-md-6 image">
			<img src="bower.jpg">
		</div>
		<div class="col-md-6 about">
			<h3>Witaj :)</h3>
			<i class="fa fa-thermometer-full" aria-hidden="true"></i><br>
			<i class="fa fa-address-book icon" aria-hidden="true"></i><br>
			<i class="fa fa-address-book icon" aria-hidden="true"></i><br>
			<i class="fa fa-address-book icon" aria-hidden="true"></i><br>
			<i class="fa fa-address-book icon" aria-hidden="true"></i>
		</div>
	</div>
</body>
</html>

body,{
	margin: 0;
	padding: 0;
}


.container{
	width: 100%;
	min-height:60%;
	bottom: 60%;
}

video{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: 1;
}

.text{
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	background: rgba(288,600,255,0.4);

}

.text h1{
	font-size: 40px;
	margin-top: 20%;
	
}

.navbar{
	z-index: 3;
}

.content{
	min-width: 100%;
	height: auto;
	background-color: white;
	color: darkblue;
	position: absolute;
	z-index: 2;
	top:100%;
}

img{
	margin-left:0px;
	width:100%;
	height:auto;
}

.col-md-6{
	padding: 0;
	text-align: center;
	color: black
}

.col-lg-12{
	text-align: center;
}

.about{
	font-size: 30px;
	text-align: center;
	padding-top: 20%;

}

.image{
	z-index: 0;
	display: block;
}