Pozycjonowanie elementów przy użyciu bootstrapa

[fearar]

Hej mpcforum ! Próbuje się nauczyć kodować pod bootstrap, aktualnie mam dwa problemy, które mnie przerażają ! Nie mogę ich naprawić, a męczę się męcze :/

 

Szkielet w paint:

http://vpx.pl/i/2016/02/15/problem.png

 

Czerwone jest to tzw menu, białe to logo, które chce żeby miało większą wyskość niż top(nie może być to pozycja fixed).Jeśli to robię "karuzela" uceika w dół.

A newsletter chce ustawić sztywno, żeby nie przeskakiwało wraz z zmianą slidu.

 

Proszę o pomoc.

[adam23450]

@fearar mogę prosić o kod HTML ? + czy mógłbyś to jakoś normalniej wytłumaczyć ?

[Jakub]

Na logo position: absolute; na newsteller position: fixed; (chociaż tutaj nie jestem pewien, jeszcze nigdy nie spotkałem się ze skakaniem na stronach, ale cóż, człowiek młody to mało widział :/).

[fearar]

<section id="sidebar">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li>Menu</li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
          </ul>
          <ul class="nav nav-sidebar">
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
            <li><a href="#">Przykład</a></li>
          </ul>
        </div>
</section>

<header id="top">
	<nav class="navbar navbar-inverse">
	  <div class="container-fluid">
		<div class="navbar-header">
		  <a class="navbar-brand" href="#">example</a>
		</div>
		<ul class="nav navbar-nav">
		  <li class="active"><a href="#">Home</a></li>
		  <li><a href="#">Page 1</a></li>
		  <li><a href="#">Page 2</a></li> 
		  <li><a href="#">Page 3</a></li> 
		</ul>
		<ul class="nav navbar-nav navbar-right">
		  <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
		  <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
		</ul>
	  </div>
	</nav>
</header>

<section id="slider">
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
		<li data-target="#myCarousel" data-slide-to="3"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
		<div class="item active">
		  <img src="img_chania.jpg" alt="Chania">
		</div>
		
		<span class="newsletter">
		
		<div class="col-lg-8 col-md-8 col-sm12 col-xs12">
		<p>Jeśli chcesz dołączyć do newslettera:</p>
		<input type="text" value="zarejstruj się">
		</div>
		
		<div class="col-lg-4 col-md-4 col-sm12 col-xs12">
		<input type="submit" value="wyslij">
		</div>

		<div class="item">
		  <img src="img_chania2.jpg" alt="Chania">
		</div>

		<div class="item">
		  <img src="img_flower.jpg" alt="Flower">
		</div>

		<div class="item">
		  <img src="img_flower2.jpg" alt="Flower">
		</div>
	  </div>
	  </div>
  </section>
  

Kod przedstawia się tak,a ma działać nastepująco.

 

Sidebar ma być "przyklejony" do lewej strony i jeździć ze stroną, czyli positon:fixed, dodatkowo po najechaniu ma się wysuwać.

Top ma być "nad" karuzelą", czyli nie ma być między nimi odstępu, newsletter, który jest w karuzeli ma być na sztywno w niej ustawiony, nie ma się ruszać w raz z slajdami.

Proszę o pomoc ! 

 

@Wolen @adam23450 wrzuciłem dokładnie o co chodzi

[adam23450]

@fearar z jakiego stylu korzystasz ?

[fearar]

@adam23450 z żadnego ucze sie oO

[Burned123]

Wybrałeś najgorszą opcję do nauki HTML. To, że bootstrap posiada gotowe rozwiązania to nie znaczy, że są one przeznaczone dla laików. Na Twoim miejscu wywaliłbym to i spróbował własnymi siłami jak najprościej napisać to co chcesz.

[Off&On]

Ogólnie możesz to łatwo zrobić.
Tylko musisz wszystko sobie podzielić, czasem dobrze jest podpatrzeć coś ze struktury bootstrapa, jeśli chodzi o html.
Ogólnie menu dzielisz na navbar__brand, navbar__nav.
Możesz opakować w jakiś container ze stałą szerokością dla danych breakpointów.

Wtedy dajesz navbara w niego do środka container i masz branda na logo i nav na listę.
Masz tutaj kilka sposobów:
-floar right/left
-flexbox
-positiony absolute
Najlepiej z flexboxem, bo po to powstał.
A jeśli chodzi o newsy i zapisz się, to też kilka sposobów, albo dajesz po prostu w jeden div dla niego jest domyślnie displayblock, elementy dajesz display inline-block i text-align: right, lub flexboxem i z głowy.