I have a problem with navbar in mobile version of site. I'm using bootstrap.
In mobile version, I'm using a collapsed navbar, not in the foreground but in the background (on the screen). When I have slider before, the collapsed menu was behind this slider.
<body>
<div class="container">
<!-- facebook & phone number -->
<div class="row face-phone">
<div class="pull-left">
<a href="index.html">
<img src="images/logo_new.png" alt="logotype" class="logotype" />
</a>
</div>
<div class="pull-right face-text">
<span class="small">
TEL: +48 605 26 33 99 <span class="mar-left-20"></span>ul. Podgórna 43a / 2 Zielona Góra
</span>
<a href="https://www.facebook.com/Newbello-Salon-Depilacji-i-Kosmetologii-Laserowej-288363824707329/" target="_blank">
<span class="glyphicon glyphicon-thumbs-up mar-left-20" area-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- ./row logotype, facebook, phone number -->
<!-- navigation -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<hr>
<div class="row">
<div class="newbello">
<p class="pull-left">
Witamy na stronie naszego salonu kosmetycznego
</p>
</div>
</div><!-- ./row hello-text -->
<hr>
<div class="row mar-top-20">
<div class="col-md-12 col-sm-6 col-xs-12 text-center">
<p>
<strong>
Naszym priorytetem jest profesjonalna obsługa i najwyższej jakości zabiegi
</strong>
Wszystkie kosmetyki i urządzenia, które wprowadzamy do naszej
oferty przechodzą liczne testy i są poddawane gruntownej analizie
efektywności i bezpieczeństwa stosowania.
<strong>
Stawiamy przede wszystkim na skuteczność!
</strong>.
Do każdego klienta podchodzimy indywidualnie, służymy radą i
pomocą w dobraniu odpowiednich zabiegów gabinetowych oraz
profesjonalnej i kompleksowej pielęgnacji domowej.
</p>
<h3 class="mar-top-40">
W czym jesteśmy najlepsi?
</h3>
<h4 class="mar-top-40">
Deppilacja laserowa, depilacja SHR i nie tylko
</h4>
<p class="mar-top-40">
Depilacją zajmujemy się nieprzerwanie od ponad 5 lat.
Dzięki setkom osób, którym w tym czasie mieliśmy przyjemność
pomóc, zgromadziliśmy szeroką wiedzę dotyczącą diagnostyki
skóry i wyboru odpowiedniej metody depilacji. Nasze ogromne
doświadczenie pozwala nam znacznie zredukować ryzyko
podrażnień, bólu i innych nieprzyjemnych odczuć związanych z
usuwaniem zbędnego owłosienia.
</p>
<h4 class="mar-top-40">
Odmładzanie i zabiegi pielęgnacyjne
</h4>
<p class="mar-top-40">
Dzisiejszy trend piękna to dbałość o wygląd zewnętrzny.
Dlatego skutecznie odmładzany koszystając z najnowszych odkryć
medycyny, kosmetologii, chemii i techniki oraz wykorzystując
zabiegi oparte na najlepszej jakości kosmetykach. Takie
działanie gwarantuje zarówno wysoką skuteczność zabiegu, ale
także komfort i co najważniejsze bezpieczeństwo naszych klientów.
</p>
</div><!-- ./col -->
</div>
<!-- ./row mar-top-20 -->
<!-- Core Javascript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
And this is screenshot what is it look like:
screenshot
Now fix it, please update following External Resources / Bootstrap CDN
jsfiddle
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
<!-- facebook & phone number -->
<div class="row face-phone">
<div class="pull-left">
<a href="index.html">
<img src="images/logo_new.png" alt="logotype" class="logotype" />
</a>
</div>
<div class="pull-right face-text">
<span class="small">
TEL: +48 605 26 33 99 <span class="mar-left-20"></span>ul. Podgórna 43a / 2 Zielona Góra
</span>
<a href="https://www.facebook.com/Newbello-Salon-Depilacji-i-Kosmetologii-Laserowej-288363824707329/" target="_blank">
<span class="glyphicon glyphicon-thumbs-up mar-left-20" area-hidden="true"></span>
</a>
</div>
</div>
</div>
<!-- ./row logotype, facebook, phone number -->
<!-- navigation -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<hr>
<div class="row">
<div class="newbello">
<p class="pull-left">
Witamy na stronie naszego salonu kosmetycznego
</p>
</div>
</div><!-- ./row hello-text -->
<hr>
<div class="row mar-top-20">
<div class="col-md-12 col-sm-6 col-xs-12 text-center">
<p>
<strong>
Naszym priorytetem jest profesjonalna obsługa i najwyższej jakości zabiegi
</strong>
Wszystkie kosmetyki i urządzenia, które wprowadzamy do naszej
oferty przechodzą liczne testy i są poddawane gruntownej analizie
efektywności i bezpieczeństwa stosowania.
<strong>
Stawiamy przede wszystkim na skuteczność!
</strong>.
Do każdego klienta podchodzimy indywidualnie, służymy radą i
pomocą w dobraniu odpowiednich zabiegów gabinetowych oraz
profesjonalnej i kompleksowej pielęgnacji domowej.
</p>
<h3 class="mar-top-40">
W czym jesteśmy najlepsi?
</h3>
<h4 class="mar-top-40">
Deppilacja laserowa, depilacja SHR i nie tylko
</h4>
<p class="mar-top-40">
Depilacją zajmujemy się nieprzerwanie od ponad 5 lat.
Dzięki setkom osób, którym w tym czasie mieliśmy przyjemność
pomóc, zgromadziliśmy szeroką wiedzę dotyczącą diagnostyki
skóry i wyboru odpowiedniej metody depilacji. Nasze ogromne
doświadczenie pozwala nam znacznie zredukować ryzyko
podrażnień, bólu i innych nieprzyjemnych odczuć związanych z
usuwaniem zbędnego owłosienia.
</p>
<h4 class="mar-top-40">
Odmładzanie i zabiegi pielęgnacyjne
</h4>
<p class="mar-top-40">
Dzisiejszy trend piękna to dbałość o wygląd zewnętrzny.
Dlatego skutecznie odmładzany koszystając z najnowszych odkryć
medycyny, kosmetologii, chemii i techniki oraz wykorzystując
zabiegi oparte na najlepszej jakości kosmetykach. Takie
działanie gwarantuje zarówno wysoką skuteczność zabiegu, ale
także komfort i co najważniejsze bezpieczeństwo naszych klientów.
</p>
</div><!-- ./col -->
</div>
<!-- ./row mar-top-20 -->
<!-- Core Javascript -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
Related
After checking my code through a validator, the validator error states that on the
div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000"
Element div not allowed as child of element a in this context. (Suppressing further errors from this subtree.)
The rest of the code is the page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=dvice=width, initial-scale=1">
<meta name="keywords" content="Contect Free Art, Design, Grammer">
<meta name="description" content="Art Created with CDFG">
<meta name="author" content="Dakotah Hutchinson">
<title> O'sullivan Clemens</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIIj8LyTjo7mOUStjskKC4pOpQbyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/CDFG.css" rel="stylesheet">
<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.js"></script>
</head><body>
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1> O'sullivan Clemens </h1>
</div>
<div class="container">-
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Galleries... <b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="guest_art.php">Guest Art
</a></li>
<li><a href="carousel.php">Carousel
</a></li>
<li><a href="contribute.php">Contribute Art
</a></li>
<!--links.php -->
</ul>
<li>Resources<b class="caret"></b>
<ul class="dropdown-menu">
<li><a href="links.php">Suggest a Link
</a></li>
<li><a href="Location.php">Location
</a></li>
<li><a href="news.php">News
</a></li>
</ul>
<li>Contact... </li>
</ul>
</div>
</div>
</div>
Code block location
<div class="container">
<div class="main">
<h1> Lawyers <b> Slideshow </b> | <a href="lightbox.php"> Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0"class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1"class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2"class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3"class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-text pull-left">
<i class="fab fa-twitter" aria-hidden="true"></i>
</div>
<div class="navbar-text pull-right">
GTT 20XX (CC BY-NC-NC 4.0)
</div>
</div>
</div>
<!-- Video Sending Email - Form Reset -->
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h1> Contact </h1>
<p><span class="error">* required field. </span></p>
<p>Either <a href="mailto:name#gmail.com">
email me</a> directly or fil in the form below...</p>
<p>
<b>Name<sup class="error">*</sup>:</b><br/>
<input type="text" name="name" size="25" value="" required />
</p>
<p>
<b>Email<sup class="error">*</sup>:</b><br/>
<input type="email" name="email" size="25" value="" required />
</p>
<p>
<b>Comment<sup class="error">*</sup>:</b><br/>
<textarea name="comment" required
></textarea>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" name="submit">Send</button>
<a class="btn btn-warning" data-dismiss="modal">Cancel</a>
</div>
</form>
</div>
</div>
</div>
You do not appear to have closed the 'a' tag on the previous line
<a href="lightbox.php"> Lightbox
Which makes the subsequent div a child of the 'a' tag which is not allowed in most circumstances.
It should probably be
Lightbox
Have a look at the following answer to see what you can and cannot do.
I also don't see where you have closed the <h1> tag on the same line. I know that many browsers are tolerant of unclosed tags but it's bad practice and can lead to unexpected results. If you use a code prettifier (such as the one embedded in editors like Sublime Text) you will see that the indent levels do not line up in your code. Adding the </h1> and </a> tags cures this and gives you
<div class="container">
<div class="main">
<h1> Lawyers</h1> <b> Slideshow </b> | Lightbox
<!-- Light Box code used from http://bootsnipp.com/snippets/featured/bootstrap-lightbox -->
<div id='carousel-custom' class='carousel slide' data-ride='carousel' data-interval="3000">
<div class='carousel-outer'>
<div class='carousel-inner'>
<div class="item active">
<img src="images/website1/carousel1.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel2.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel3.jpg" alt="">
</div>
<div class="item">
<img src="images/website1/carousel4.jpg" alt="">
</div>
</div>
<a class='left carousel-control' href='#carousel-custom' data-slide='prev'>
<span class='glyphicon glyphicon-chevron-left'></span>
</a>
<a class='right carousel-control' href='#carousel-custom' data-slide='next'>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<!-- Controls -->
</div>
<div class="indicators">
<ol class="carousel-indicators">
<li data-target="#carousel-custom" data-slide-to="0" class='active'><img class='little' src='images/website1/carousel1.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="1" class='active'><img class='little' src='images/website1/carousel2.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="2" class='active'><img class='little' src='images/website1/carousel3.jpg' alt="" /></li>
<li data-target="#carousel-custom" data-slide-to="3" class='active'><img class='little' src='images/website1/carousel4-old-house.jpg' alt="" /></li>
</ol>
</div>
</div>
</div>
</div>
for the first half of Code block location
I have a website that utilizes Bootstrap. It has been online for several days. Just today, however, the drop down menu stopped working, and there was a line break betweent the menu and the body. Is this an issue just for me or for others who use Bootstrap as well. After the navbar, I have a blue strip that fades in.
What's causing the problem, and is it just my problem? How do you solve it? Thanks!
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse net-27" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li>About</li>
<li>News</li>
<li>Contribute</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class=""></span> Login</li>
<li><span class=""></span> Sign Up</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container-fluid">
<div class="row">
<center>
<div id="test" style="background-color:#001A57; color:#FFFFFF; font-family:Lucida Bright, Arial, sans-serif";>
<p style="text-align:center;">Welcome!</p>
<br /><p id="nothuge" class="plzplz"></p>
<br />
<p style="font-size:20px;">--Site Info--</p>
<br /><p style="font-size:30px;">
Login/Register</p>
</div>
<br />
<br />
<h1>Welcome</h1>
</center>
</div>
<!-- /.row -->
<div class="row">
<center>
<p class="lead">Text</p>
<p class="intro-line2" id="bittearbeit">MoreText</p>
</center>
</div>
<footer class="margin-tb-3">
<div class="row">
<div class="col-lg-12">
<p>© My Site 2017 | contact#my.site</p>
</div>
</div>
</footer>
</div>
<!-- /.container-fluid -->
</body>
(https://jsfiddle.net/user2015748/g776473m/1/)
I have a lot of CSS with that, which you can see in the JSFiddle.
As you can see, there is no code for a line break after the navbar. Thank you again for any help!
You have a CSS statement that adds this line. Its a "margin-bottom: 20px;"
Try this:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
}
I have the code below.
I test it on jsbin and then the preview works fine but when I download the file and open it in google chrome the drop down menu get hide by the header??
Also the left side of the page got cuts out on chrome.
Thanks so much for the help
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a>
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<div class="row row-header">
<div class="row">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More »
</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person</p>
<p>More »
</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences.</p>
<p>More »
</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home
</li>
<li>About
</li>
<li>Menu
</li>
<li>Contact
</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<!-- Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net-->
</address>
<i class="fa fa-phone"></i>: +852 1234 5678
<br>
<i class="fa fa-fax"></i>: +852 8765 4321
<br>
<i class="fa fa-envelope"></i>:
confusion#food.net
</div>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
<!--
<div class="col-xs-12 col-sm-4">
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>-->
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
If an element is covered by another it probably means that you should define position (relative / absolute - determine it by yourself as you know your code best) for both and z-index. Then put higher z-index value for element that you want to be on top.
I'm trying out Angular templates by inserting
<ng-include src=="'menu.html'"></ng-inlude>
directive between header and footer of an "index.html" file. The webpage shows properly in firefox but chrome doesn't show the template. It loads a file named "index.html#" that doesn't exist in my app folder. I have absolutely no idea what happens here and found no similar case in web searches. Thanks for your help!
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'dishdetail.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
menu.html:
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right"
type="button">{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="{{dish.name}}">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
It may be that angular is appending a # to the end of url strings. This was an older workaround used to prevent non-html5 browsers from sending http requests and reloading the entire page content on single page apps.
But it would be helpful to see your index.html as well as your menu.html files.
If you want to call it as tag you have to add src value
<ng-include src="'menu.html'"></ng-include>
Also, you can add ng-include as attribute:
<div ng-include="'menu.html'"></div>
Good Luck !
I think it is html5mode problem. use $locationProvider.html5Mode(true); in angular config.
The problem was that Chrome etc. don't show local files. You have to either check them with a simple webserver or add --allow-file-access-from-files to the google.exe command. Firefox gives access to local files by default. That's why the templates showed in Firefox.
I'm trying to use a Bootsnipp snippet in my page.
Namely, collapsible-tree-menu-with-accordion.
However the entire thing is being rendered in a 'flat' way. The collapse/expand mechanism is working fine, but the list items are not indented, nor are they surrounded with a box.
I imagine this is a CSS issue, but I can't figure it out.
Here is the HTML (generated from django templates), with the snippet pasted as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hasadna: Community</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>admin</li>
</ul>
</div>
</div>
<div class="container">
<ol class="breadcrumb">
<li>Users</li>
<li class="active">Lucid</li>
</ol>
<div class="well">
<center>
<img src="http://www.gravatar.com/avatar/8b1d41ccb353509f6c864b1faddf3202?d=blank?s=140" name="aboutme" width="140" height="140" border="0" class="img-circle"></a>
<h3 class="media-heading">Lucid</h3>
<h3 class="media-heading"><small>עמרי דור | Omri Dor</small></h3>
<span><strong>Skills: </strong></span>
<span class="label label-warning">Baking Cookies</span>
</center>
<hr>
<p class="text-left"><strong>Email: </strong><br>
a#b.c</p>
<hr>
<center>
<p class="text-left"><strong>Bio: </strong><br>
Hi guys.
</p>
</center>
<hr>
<p class="text-left"><strong>Code Contributions: </strong></p>
<ul class="list-group">
<li class="list-group-item"><strong>Total Commits:</strong> 7</li>
</ul>
<div class="container">
<div class="row">
<div class="span12">
<div class="menu">
<div class="accordion">
<!-- Áreas -->
<div class="accordion-group">
<!-- Área -->
<div class="accordion-heading area">
<a class="accordion-toggle" data-toggle="collapse" href=
"#area1">Área #1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil" data-toggle=
"dropdown" href="#" style="font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar equipamento -->
<li>
<a href="../equipamento/add.php"><i class=
"icon-plus"></i> Adicionar equipamento</a>
</li>
<li class="divider"></li><!-- Editar área -->
<li>
<a href="../area/edit.php"><i class=
"icon-pencil"></i> Editar área</a>
</li>
<li class="divider"></li><!-- Remover área -->
<li>
<a class="danger" href="#remove"><i class=
"icon-remove"></i> Remover área</a>
</li>
</ul>
</div>
</div><!-- /Área -->
<div class="accordion-body collapse" id="area1">
<div class="accordion-inner">
<div class="accordion" id="equipamento1">
<!-- Equipamentos -->
<div class="accordion-group">
<div class="accordion-heading equipamento">
<a class="accordion-toggle" data-parent=
"#equipamento1-1" data-toggle="collapse" href=
"#ponto1-1">Equipamento #1-1</a>
<div class="dropdown edit">
<a class="dropdown-toggle icon-pencil"
data-toggle="dropdown" href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar ponto -->
<li>
<a href=
"../ponto/add.php"><i class="icon-plus">
</i> Adicionar ponto</a>
</li>
<li class="divider"></li>
<!-- Editar equipamento -->
<li>
<a href=
"../equipamento/edit.php"><i class=
"icon-pencil"></i> Editar
equipamento</a>
</li>
<li class="divider"></li>
<!-- Remover equipamento -->
<li>
<a class="danger" href=
"#remove"><i class=
"icon-remove"></i> Remover
equipamento</a>
</li>
</ul>
</div>
</div><!-- Pontos -->
<div class="accordion-body collapse" id="ponto1-1">
<div class="accordion-inner">
<div class="accordion" id="servico1">
<div class="accordion-group">
<div class=
"accordion-heading ponto">
<a class="accordion-toggle"
data-parent="#servico1-1-1"
data-toggle="collapse" href=
"#servico1-1-1">Ponto
#1-1-1</a>
<div class="dropdown edit">
<a class=
"dropdown-toggle icon-pencil"
data-toggle="dropdown"
href="#" style=
"font-style: italic"></a>
<ul class="dropdown-menu">
<!-- Adicionar servico -->
<li>
<a href=
"../servico/add.php">
<i class=
"icon-plus"></i>
Adicionar
servico</a>
</li>
<li class="divider">
</li><!-- Editar ponto -->
<li>
<a href=
"../ponto/edit.php">
<i class=
"icon-pencil"></i>
Editar ponto</a>
</li>
<li class="divider">
</li><!-- Remover ponto -->
<li>
<a class="danger"
href=
"#remove"><i class=
"icon-remove"></i>
Remover ponto</a>
</li>
</ul>
</div>
</div><!-- Serviços -->
<div class=
"accordion-body collapse" id=
"servico1-1-1">
<div class="accordion-inner">
<ul class="nav nav-list">
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-1</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-2</a>
</li>
<li>
<a href=
"#"><i class=
"icon-chevron-right">
</i> Serviço
#1-1-1-3</a>
</li>
</ul>
</div>
</div><!-- /Serviços -->
</div>
</div>
</div>
</div><!-- /Pontos -->
</div><!-- /Equipamentos -->
</div>
</div>
</div>
</div>
</div><!-- /accordion -->
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p></p>
</footer>
</div>
<script src="/static/js/jquery-1.11.0.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
And this is the additional CSS file, '/static/css/style.css', containing the CSS snippet that's supposed to go along with the HTML snippet:
body {
padding-top: 80px;
padding-bottom: 20px;
}
.menu .accordion-heading { position: relative; }
.menu .accordion-heading .edit {
position: absolute;
top: 8px;
right: 30px;
}
.menu .area { border-left: 4px solid #f38787; }
.menu .equipamento { border-left: 4px solid #65c465; }
.menu .ponto { border-left: 4px solid #98b3fa; }
.menu .collapse.in { overflow: visible; }
Any ideas?
So it turns out I had two problems:
I was using Bootstrap v3.1.0, which was incompatible with this snippet.
Even after switching to v2.3.2, the files sat in the same exact (django served /static/) path, and my browser kept using the cached version (3.1.0).
About (1):
Unfortunately if I go back to 2.3.2 then my navbar is no longer rendered correctly. I would really like to migrate the snippet to Bootstrap 3.1.0, but my CSS is far too poor for me to be able to do it.
About (2):
A quick workaround was to indicate the version number somewhere in the path (i.e. boostrap/2.3.2/css/...).
A cleaner solution is django-cachebuster, which adds a meaningless get parameter for your static resources (i.e. /static/my.css?v=9393939). This parameter can be set to be the file's last modification date, so that ought to do it.
Thanks for your help guys!