WItam wszystkich :) Jestem początkującym programistą i mam pewien problem, proszę o pomoc :)
A mianowicie. Tu jest moja pierwsza stronka w Bootstrap http://wroclove.net.pl tworzę ją hobbystycznie dla mojego ojca. Gdy wrzuciłem ją na serwer jak widać między karuzelą a menu górnym zrobił się dziwny odstęp :( oraz po pomniejszeniu strony do minimum jest suwak w lewo i w prawo nie wiem od czego zacząć :/ Proszę szanownych forumowiczów o jakieś rady. Pozdrawiam :)
PS. strona się długo może uruchamiać bo nie zmniejszyłem jeszcze zdjęć
proszę oto kod HTML oraz CSS
HTML
<!DOCTYPE html>
<html lang="PL">
<head>
<!-- czcionka -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- pliki CSS: -->
<!-- oryginalny Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
<!-- czcionka Open Sans-->
<link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext">
</head>
<body>
<!--###############################-->
<!-- MENU GÓRNE ###################-->
<!--###############################-->
<section>
<header>
<div class="navbar-fixed-top" id="menu">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="navbar navbar-inverse" id="navi" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#moje-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="moje-menu">
<ul class="nav navbar-nav navbar-right" id="ul_nawigacja">
<li><a href="#" class="active"> Strona domowa </a></li>
<li><a href="#galeria">Galeria zdjęć</a></li>
<li><a href="#dzwiek"> Próbka dźwiękowa</a></li>
<li><a href="#onas"> O nas</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
</section>
<!-- ######################## -->
<!-- POKAZ SLAJDÓW ########## -->
<!-- ######################## -->
<section>
<div id="pokaz-slajdow" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#pokaz-slajdow" data-slide-to="0" class="active"></li>
<li data-target="#pokaz-slajdow" data-slide-to="1"></li>
<li data-target="#pokaz-slajdow" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/pokaz/1.jpg" alt="" class="img-responsive">
</div>
<div class="item">
<img src="images/pokaz/2.jpg" alt="" class="img-responsive">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="images/pokaz/3.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</section>
CSS
/*@@@@@@@@@@@@@@@@@@
@@@@ Munu główne @@@
@@@@@@@@@@@@@@@@@@ */
#menu
{
background-color: #1f1f1f;
color: #ffffff;
}
#navi
{
background-color: #1f1f1f;
padding-top: 4rem;
border-color: #1f1f1f;
}
.navbar-outer
{
width: 1200px;
}
.navbar-inverse .navbar-nav > li > a
{
color: #ffffff;
margin-left: 5px;
border: 1px solid transparent;
line-height: 1rem;
}
.navbar-inverse .navbar-nav > li > a:hover
{
display: block;
color: #fc4349;
border: 1px solid transparent;
border-color: #fc4349;
line-height: 1rem;
border-radius: 4px;
transition: all 0.7s ease;
}
.navbar-inverse .navbar-nav > .active > a
{
display: block;
color: #ffffff;
border-color: red;
background-color:#1f1f1f;
border-radius: 4px;
}
.navbar-inverse .navbar-nav > .active > a:hover
{
color: #fc4349;
background-color: #1f1f1f;
}
.navbar-inverse .navbar-nav > .active > a:focus
{
background-color: #1f1f1f;
}
/* Pokaza slajdów @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
#pokaz-slajdow
{
margin-top: 9rem;
}
.carousel .item
{
width: 100%;
max-height: 900px;
}
.carousel .item img
{
width: 100%;
}
.carousel .carousel-control
{
background: none;
border: none;
top: 50%
}
.carousel-caption
{
top: 10%;
bottom: auto;
}
