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
Related
Sorry for the size of the links....Stackoverflow doesn't allow link shorteners...
Earlier it was working just fine. But at the time of submission, when I was checking the whole output of the site, I noticed that it wasn't working at all...
It doesn't change on its on..which it use to do earlier...
When I click on the next or the previous button, it just looks as if it was ' href="#" ', it does nothing at all...
Here is the code -
HTML
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'/>
<li data-slide-to='1' data-target='#myCarousel'/>
<li data-slide-to='2' data-target='#myCarousel'/>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
<div class='item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access' style='width:100%;'/>
</div>
</div>
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
CSS -
.carousel{
background: white;
width: 100%;
}
.carousel-item{
text-align: center;
min-height: 360px;
width: 100%;
}
I made a few changes to your code.
The mistakes that were fixed are the following inside of your carousel-indicators your <li> were first closed incorrectly, therefore, you must change them from
<li class='active' data-slide-to='0' data-target='#myCarousel' />
<li data-slide-to='1' data-target='#myCarousel' />
<li data-slide-to='2' data-target='#myCarousel' />
to
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
The second mistake I noticed you made was inside carousel-inner content
you should use the class carousel-item instead of item
The third mistake was the class name of the a tag is wrong and you didn't close the span correctly.
<!-- Left and right controls -->
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-left'/>
<span class='sr-only'>Previous</span>
</a>
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<span class='glyphicon glyphicon-chevron-right'/>
<span class='sr-only'>Next</span>
</a>
The a tag class names should be changed from this
<a class='right carousel-control' data-slide='next' href='#myCarousel'>
<a class='left carousel-control' data-slide='prev' href='#myCarousel'>
to this
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
you didn't close a span probably.
Your span:
<span class='glyphicon glyphicon-chevron-left'/>
<span class='glyphicon glyphicon-chevron-right'/>
They should be closed like this
<span class='glyphicon glyphicon-chevron-left'></span>
<span class='glyphicon glyphicon-chevron-right'><span>
I also noticed that you were trying to add a custom icon. you can do that by replacing
<span class='glyphicon glyphicon-chevron-right'><span>
by ( the icon bootstrap uses )
<span class="carousel-control-next-icon" aria-hidden="true"></span>
or ( custom icon from fontawesome)
<span> <i class="fas fa-arrow-circle-left" aria-hidden="true"></i></span>
Don't forget to add the fontawesome CDN in your head if you are going to use the custom icon.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
===
Here is your code after applying all the fixes to it.
<div class='container'>
<div class='carousel slide' data-ride='carousel' id='myCarousel'>
<!-- Indicators -->
<ol class='carousel-indicators'>
<li class='active' data-slide-to='0' data-target='#myCarousel'></li>
<li data-slide-to='1' data-target='#myCarousel'></li>
<li data-slide-to='2' data-target='#myCarousel'></li>
</ol>
<!-- Wrapper for slides -->
<div class='carousel-inner'>
<div class='carousel-item active'>
<img alt='Statue of Unity' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKSLYWYT7SANNHJ7KMPQETY232Q%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyNjg0NSIsImV4cCI6IjE1OTg3NDg0NDUiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9EaGtZamMwT1dZdE9EQTVPQzB3TURBd0xUUmhOV1V0WlRFMk5qWTNNMlJoT1RkaSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q0NOVDBRVmVZcW9PanhqdGxiaW4rM3RNY1Y0NzhXLzdyTFJyeG91Sjd5bz0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Tea Farms Kerela' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNNU5JD33JBMEZG2HB4SGJUW4EFW%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODk2MSIsImV4cCI6IjE1OTg3NTA1NjEiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik9HUmtaRGMwT1dZdE9UQTFNUzB3TURBd0xUVmlZamd0WWpBMU1UUm1abU01WXpnNSIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.Q2tEV3NBb0dWaE01d3UvR0pRS3lyMnZVWXYyUXlxS21sYS9sMzhneVNoVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
<div class='carousel-item'>
<img alt='Taj Mahal' src='https://southindia1-mediap.svc.ms/transform/thumbnail?provider=spo&inputFormat=jpg&cs=fFNQTw&docid=https://lpuin-my.sharepoint.com:443/_api/v2.0/drives/b!oY30talLiUS8rG_BEWnrXVosZvQbZtBCgL0B34hPVyiHfGeNwOpCTIXwHQY9v522/items/01QPSJLNKX6KUD55J6GRFYUZH2VXE3LZGZ%3Fversion%3DPublished&access_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJub25lIn0.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTBmZjEtY2UwMC0wMDAwMDAwMDAwMDAvbHB1aW4tbXkuc2hhcmVwb2ludC5jb21AZTE0ZTczZWItNTI1MS00Mzg4LThkNjctOGY5ZjJlMmQ1YTQ2IiwiaXNzIjoiMDAwMDAwMDMtMDAwMC0wZmYxLWNlMDAtMDAwMDAwMDAwMDAwIiwibmJmIjoiMTU5ODcyODgzNCIsImV4cCI6IjE1OTg3NTA0MzQiLCJlbmRwb2ludHVybCI6Imp3Y0s0OWpDdnJhNmJGalJLTFhBZmFNWHNpMmlXZzkzZTBESWZ3Yk11bTg9IiwiZW5kcG9pbnR1cmxMZW5ndGgiOiIxMTUiLCJpc2xvb3BiYWNrIjoiVHJ1ZSIsImNpZCI6Ik5tVmtaRGMwT1dZdFpqQTNOUzB3TURBd0xUUmhOV1l0TkRjME1tSTRPRFV5TmpZMCIsInZlciI6Imhhc2hlZHByb29mdG9rZW4iLCJzaXRlaWQiOiJZalZtTkRoa1lURXROR0poT1MwME5EZzVMV0pqWVdNdE5tWmpNVEV4TmpsbFlqVmsiLCJzaWduaW5fc3RhdGUiOiJbXCJrbXNpXCJdIiwibmFtZWlkIjoiMCMuZnxtZW1iZXJzaGlwfGFtaXQuMTE4MTI2MjFAbHB1LmluIiwibmlpIjoibWljcm9zb2Z0LnNoYXJlcG9pbnQiLCJpc3VzZXIiOiJ0cnVlIiwiY2FjaGVrZXkiOiIwaC5mfG1lbWJlcnNoaXB8MTAwMzdmZmVhZTQ5YTAwMkBsaXZlLmNvbSIsInR0IjoiMCIsInVzZVBlcnNpc3RlbnRDb29raWUiOiIzIn0.VzdGZGUyZFk5SGpkdFZkNzE1SUdCTXZYcFB1RTBSMTRkTEhoMkRoZ1NzVT0&encodeFailures=1&srcWidth=&srcHeight=&width=1366&height=341&action=Access'
style='width:100%;' />
</div>
</div>
<!-- Left and right controls -->
<a class='carousel-control-prev' data-slide='prev' href='#myCarousel'>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class='sr-only'>Previous</span>
</a>
<a class='carousel-control-next' data-slide='next' href='#myCarousel'>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class='sr-only'>Next</span>
</a>
</div>
</div>
and here is a working example I added for you. using bootstrap 4.
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="slider">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1920/1080 " class="d-block w-100 vh-100" alt="pic-1">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1081" class="d-block w-100 vh-100 " alt="pic-2">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1082" class="d-block w-100 vh-100 " alt="pic-3">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1083" class="d-block w-100 vh-100 " alt="pic-4">
<div class="overlay "> </div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1920/1084" class="d-block w-100 vh-100 " alt="pic-5">
<div class="overlay "> </div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?
Here is my current code:
body,
td,
th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career Fair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-primary text-white text-center" id="about">
<div class="container text-center">
<div class="content-section-heading">
<h2 class="mb-5">Vision</h2>
<h4 style="font-weight:normal">business</h4>
<h4 style="font-weight:normal">careers</h4>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Recent Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Stationary</h2>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-1.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Ice Cream</h2>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-2.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Strawberries</h2>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-3.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Workspace</h2>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-4.jpg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>
You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.
Add 'fixed-top' in the nav tag
and remove the " sticky-top" from header tag
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 using Bootstrap on my website. My website has two columns on a desktop screen: a big area for my content, and a small area at the right side for some information about upcoming events. The two areas nicely resize (become smaller) when I make my browser smaller, and at some point, the rightmost column jumps to the bottom, just as the responsiveness is intended.
On my homepage I use the carousel based on this example of w3schools.
The problem is that the picture of the carousel never resizes according to the column width, it always stays the same. In the w3school example, you can see that resizing your browser results in resizing the images.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Arimo:400,700'>
<link rel="stylesheet" type='text/css' href="/Content/bootstrap.css" />
<link rel="stylesheet" type='text/css' href="/Content/bootstrap-datepicker.css" />
<link rel="stylesheet" type='text/css' href="/Content/NYC.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/Scripts/bootstrap-datepicker.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div> <!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-8">
<header>
<h2>Welkom</h2>
</header>
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src='https://farm8.staticflickr.com/7497/15440536044_ddb9b9a4f2_z.jpg' alt="Foto" >
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7542/15440460614_e147f37c21_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm8.staticflickr.com/7562/15761616062_9cd995c76f_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm3.staticflickr.com/2905/13976192867_78bd01faa1_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
<div class="item">
<img src='https://farm4.staticflickr.com/3949/15574689588_2b427e30fa_z.jpg' alt="Foto">
<div class="carousel-caption">
<h2>Caption</h2>
</div>
</div>
</div><!-- /.carousel-inner -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<div class="col-sm-3 col-sm-offset-1">
<header>
<h3>Vandaag</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">Niks te zien</p>
</li>
</ul>
<header>
<h3>Komende evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<a href='/Event/showEvent?eventID=13'>
<p class="posted">
zondag 8 maart 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
Winterwedstrijd
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=20'>
<p class="posted">
zaterdag 14 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
<li>
<a href='/Event/showEvent?eventID=21'>
<p class="posted">
zondag 15 maart 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
Onderhoud infrastructuur
</p>
<br/>
</a>
</li>
</ul>
<header>
<h3>Gepasseerde evenementen</h3>
</header>
<ul class="interestingevents">
<li>
<p class="posted">
zondag 8 februari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=12'>Winterwedstrijd</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 18 januari 2015
</p>
<img src="/Content/Media/logogeneral40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=17'>Ledenvergadering</a>
</p>
<br />
</li>
<li>
<p class="posted">
zondag 4 januari 2015
</p>
<img src="/Content/Media/logosailing40x40.png" />
<p class="text">
<a href='/Event/showEvent?eventID=10'>Winterwedstrijd</a>
</p>
<br />
</li>
</ul>
</div>
</div>
</div>
<footer>
<div id="copyright">
<div class="container">
<p>Created by </p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"c3ad45de45c543c5bc071cf0007d01e5"}
</script>
<script type="text/javascript" src="http://localhost:60883/d9c407548b294087843ff4faeef78add/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Maybe you can try with the Bootstrap CDN links:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Take a look at the Bootstrap website.
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!