I'm new to the Bootstrap world and just tried to make a simple scrollspy.
<!DOCTYPE html>
<html>
<head>
<title>Team Avero | Home</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar">
<div class="container">
<ul class="nav nav-tabs pull-left" id="navbar">
<li class="active">Home</li>
<li>News</li>
<li>Team</li>
<li>Social Media</li>
</ul>
<ul class="nav nav-tabs pull-right">
<li>Avero Store</li>
<li>Forums</li>
</ul>
</div>
<div class="jumbotron">
<div class="container">
<h1>Team Avero</h1>
<p>provides the best tools, services and more in the modding community. Guaranteed.</p>
</div>
</div>
<div class="news">
<div class="container">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>
</div>
</body>
</html>
The layout is fine, however when I click on the "News" item in the navigation, it doesn't scroll to the div class news. What's wrong?
You have specified <div class="news"> It should be <div id="news"> because you have used #news for the anchor tag.
# refers to id and . refers to class
Try to replace
<ul id="navbar">
...
</ul>
to
<div id="navbar">
<ul>
...
</ul>
</div>
Related
I have been taking online courses at Udemy and have been struggling with a image slider lesson. I have followed all the steps to make a basic slider. The lesson had me make my banner to have overflow:hidden and then had me go to jquery cycle 2 in order to copy the script links and I did. Then I put my class as "banner cycle-slideshow" just as the lesson instructed me. However it did not make my image slider function. It only stays on the first image. Any help? Here are my codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/Users/owner/Desktop/HTML/css/style6.css">
</head>
<body>
<div class="container">
<header>
<div class=left>
<a href="/Users/owner/Desktop/HTML/pages/page-6.html">
<img src="" height="100" width="200" alt="logo"></a>
</div>
<div class="right">
<form>
<input type="search" placeholder="Search...">
<input type="submit" value=">">
</form>
</div>
<div>
</div>
<nav class="main-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Ways to help
<ul class="drop">
<li><a href="https://homeguides.sfgate.com/ecofriendly-mean-
78718.html" target="_blank">Option 1</a></li>
<li><a href="https://www.wheelsforwishes.org/news/live-a-more-
eco-friendly-lifestyle/" target="_blank">Option 2</a></li>
<li><a href="https://money.usnews.com/money/blogs/my-
money/slideshows/ways-to-live-green-on-a-budget" target="_blank">Option 3</a>
</li>
</ul>
</li>
<li>Tell a friend!</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section class="banner cycle-slideshow">
<img src="" alt="Banner 1">
<img src="" alt="Banner 2">
</section>
<section>
<article>
<main class="push">
<h1 style="color: green;">GO GREEN</h1>
<p>Save the planet by going green. Be eco friendly!
Eco-friendly items and materials are defined as being
not environmentally harmful. These products promote green
living or green manufacturing methods that lessen the amount
or types of resources used. In short, eco-friendly products
help the earth, not cause it harm.</p>
</main>
</article>
</section>
<aside class=beta>
<div>
<h3>Widget</h3>
<ul>
<li>2019</li>
<li><a href="#">2020</li>
<li>2021</li>
</ul>
</div>
</aside>
<hr>
<footer>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="easy">
<h3>Footer Menu</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
<div class="final">
<address>
Written by <a href="mailto:raymondhernandez_4#msn.com">Raymond
Hernandez</a><br>
Visit us at:<br>
<a href="#".com>#.com</a><br>
100, Someplace, Somewhere far. 3495<br>
USA
</address>
</div>
</footer>
<div class="final">
<p><small>Copyright © 2021. All rights reserved.</small></p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
The CDN URL you're linking for Cycle2 is wrong.
The file you're linking to is a deleted file, so you can get it from Cloudfare instead:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
I have a ul element as part of a navigation bar at the top of my webpage, and I'd like to move it downwards slightly. Here is an image of the navigation bar currently:
image
I'd like to move it downward slightly so the text can match up with the white bar running across the top of the page.
Here is a snippet of the HTML:
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
How can I do this using CSS?
EDIT:
Here is all the HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
Meet the team
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2>So what is Serenity?</h2>
<p>
</p>
</header>
<footer>
<div>
Privacy
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><span class="label">Email</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>
margin-top is most likely what you're looking for.
Here is your code with margin-top added to an internal <style>. Keep in mind that the original CSS file is missing, so I can't show you the difference based on the image. The <ul> has been highlighted to show that the margin has been applied above it.
Note that if you want to only have the margin-top applied to the main nav <ul>, you should uniquely specify it (e.g. with a class) so that it does not affect all <ul>s in the document.
<!DOCTYPE HTML>
<html>
<head>
<title>Serenity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="assets/bootstrap-datepicker-1.5.1-dist/css/bootstrap-datepicker.css"/>
<link href="master.css" rel="stylesheet"/>
<script src="master.js"></script>
<script type="text/javascript" src="assets/bootstrap-datepicker-1.5.1-dist/js/bootstrap-datepicker.js">
$('#sandbox-container input').datepicker({
format: "dd/mm/yyyy"
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
<style type="text/css">
html, body{
margin: 0;
padding:0;
border: 0;
}
ul {
margin-top: 50px;
background: cyan;
}
</style>
</head>
<body class="homepage">
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Inner -->
<div class="inner" id="app">
</div>
<!-- Nav -->
<nav id="nav">
<ul>
<li>HOME</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>GET IN TOUCH</li>
</ul>
</nav>
</div>
<!-- Who -->
<div class="wrapper style1">
<article id="who" class="container special">
<header>
<h2></h2>
<p>
</p>
</header>
<footer>
<img style='margin-bottom: 10px' src="./assets/images/mascot.png" height="200" width="170">
<div style='margin-top: 10px'>
Meet the team
</div>
</footer>
</article>
</div>
<!-- Main -->
<div class="wrapper style1">
<article id="what" class="container special">
<header>
<h2>So what is Serenity?</h2>
<p>
</p>
</header>
<footer>
<div>
Privacy
</div>
</footer>
</article>
</div>
<!-- Footer -->
<div id="footer">
<!-- Contact -->
<section id="contact" class="contact">
<header>
<h3>Drop by and say hi!</h3>
</header>
<ul class="icons">
<li><span class="label">Email</span></li>
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
</ul>
</section>
<!-- Copyright -->
<div class="copyright">
<ul class="menu">
</ul>
</div>
</div>
</div>
</body>
I am currently working on a website, also I am new to website programming, so I apologize if I got a few things wrong.
The h1 is appearing before my Navbar leaving the navbar below the heading. Any suggestions? Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSGOCarry | Contact</title>
<link rel="stylesheet" type="text/css" href="contact.css">
</head>
<body>
<div class="container">
<div class="center">
<h1>How To Contact Us</h1>
</div>
</div>
<div class="navbar">
<ul>
<li>Home</li>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Roulette</li>
<ul style="float:right;list-style-type:none;">
<li>Contact</li>
<li>About</li>
<li>Sign In
</li>
</ul>
</ul>
</div>
</body>
</html>
JSFiddle w/HTML & CSS:
https://jsfiddle.net/fo0u1tcp/
You need to change the order that the nav and container appears in the document :
<div class="navbar">
<ul>
<li>Home</li>
<li>Jackpot</li>
<li>Coinflip</li>
<li>Roulette</li>
<ul style="float:right;list-style-type:none;">
<li>Contact</li>
<li>About</li>
<li>Sign In</li>
</ul>
</ul>
</div>
<div class="container">
<div class="center">
<h1>How To Contact Us</h1>
</div>
</div>
here is the code that I am using but the dropdown is not being shown. My javascript ref erence is in the correct sequence. and i have also added a function for dropdown toggle.
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- Include bootstrap CSS -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home </li>
<li> Login </li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook </li>
<li>Twitter </li>
<li> Google+ </li>
</ul>
</li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
</body>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
</body>
</html>
</html>
You have to insert the collapse plugin, and use include the wright versions of jquery and bootstrap. You don't have to insert any script of your own to make it works. Here is your code with the minimal modifications, just to make it works:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar Collapse</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class= "navbar navbar-inverse navbar-static-top">
<div class= "container">
tech site
<button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class= "nav navbar-nav navbar-right">
<li> Home</li>
<li> Login</li>
<li class="dropdown">
Social Media<b class="caret"></b>
<ul class="dropdown-menu">
<li>Facebook</li>
<li>Twitter</li>
<li> Google+</li>
</ul>
</li>
<li> About</li>
<li> Contact</li>
</ul>
</div>
</div>
<div>
<div class="bottom">
<div class="container">
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3>
<p>Content for the first footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3>
<p>Content for the second footer section.</p>
</div>
<div class="col-md-4">
<h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3>
<p>Content for the third footer section.</p>
</div>
</div>
</div>
</body>
</html>
Check this link jsfiddle to see a working example.
It's better if you change the tag of the navbar navbar-inverse navbar-static-top from div to nav. And also add the role="navigation" to every navbar to help with accessibility.
Hope it's useful!
I am using the framework of a previous website I built as part of an assignment to build an actual website. However, when I copy all the code over, my navs do not look the same as they did when I did my assignment.
Here is the code, and you can view a live example of it at 192.241.215.180
The navigations are supposed to be "pills" and they are supposed to go across, not stack up.
<head>
<link href="/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="/css/styles.css" rel="stylesheet"/>
<title>C$50 Finance: Portfolio</title>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/scripts.js"></script>
</head>
<body>
<div class="container">
<div id="top">
<img alt="C$50 Finance" src="/img/logo.gif"/>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password<li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
</body>
you have a couple issues. First, your markup is incorrect, if you want pills, you need to use nav-pills class for the <ul> element, like this:
<ul class="nav nav-pills">
While this should be enough, this alone won't do anything, because you have a bad CSS file and a bad JQuery file. I don't know how you managed to do that, but that's what you got. So, instead of using your files, try using the CDN versions, like this:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
test them and see how they work out for you, but I'm sure this will fix your issues
Try this:
Use <ul class="nav nav-pills">
FULL HTML:
<div class="container">
<div id="top">
<a href="/">
<img alt="C$50 Finance" src="/img/logo.gif" /></a>
</div>
<div class="navbar nav-pills" role="navigation">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Buy</li>
<li>Sell</li>
<li>Quote</li>
<li>History</li>
<li>Change Password</li>
</ul>
</div>
</div>
</div>
<div id="middle">
</div>
<div id="bottom">
Copyright © John Harvard
</div>
</div>
DEMO
Something is wrong with your version of Bootstrap. Using this worked for me:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
there are some problem in your bootstrap.min.css
you can use this links
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
after these changes this will fix your issues