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>
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 am trying to build a very simple navbar with bootstap according to some online tutorials.
I am trying to align the navbar items horizontally but I keep getting the following formation:
My code is the following:
<body>
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
</body>
you need to just add navbar-nav to your ul
<nav class='navbar navbar-inverse'>
<div class='container-fluid'>
<div class='navbar-header'>
<a href='#' class='navbar-brand'> $Whoami </a>
</div>
<ul class='nav navbar-nav navbar-inverse navbar-custom'>
<li ><a href='#'>Skills</a></li>
<li ><a href='#'>Interests</a></li>
<li ><a href='#'>Contact</a></li>
</ul>
</div>
</nav>
<h1> Hello World! </h1>
Try This
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h1> Hello World! </h1>
</div>
</body>
</html>
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>
I am trying to create a new site template based on Zurb's Foundation 5 that has two menus - a top menu and a left menu. That is working for medium and large sizes, but for 'small' I'm trying to hide the top menu with a top-right "hamburger", and then the left menu to work in a similar manner but from the top-left. This is what it looks like at the moment:
The top right works fine, except only the 'hamburger' menu-icon is clickable. The "MENU" text next to it, is not.
The top left has a couple of problems. Only the text that I add appears and is clickable ("TOG" here). The menu-icon does not appear. I guess I could replace "TOG" with "PAGES" as a workaround.
Second, when I click on it to open the menu, it pushes the top bar down one row to cover the title and leaving a white space at the top. Ie.:
Here's my code (very much work in progress - logos will be replaced with images, etc):
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
Does anyone have any thoughts as to what is causing my problems?
As far as i do understand you're trying to use Foundation's Off-canvas (menus) in a manner it is not intended.
It seems you are looking for a mobile menu which can be toggled.
Off-canvas (menus) are a layout structure. When the menu shows up the complete layout moves to the left / right. For that reason you content should be wrapped in the Off-canvas (menus) structure:
From http://foundation.zurb.com/docs/components/offcanvas.html:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu">
<!-- whatever you want goes here -->
<ul>
<li>Item 1</li>
...
</ul>
</aside>
<!-- main content goes here -->
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
See the <!-- main content goes here --> in the above. You can try to rebuild your example as follows:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="fixed">
<nav class="top-bar " data-topbar role="navigation">
<section class="left-small hide-for-medium-up">
<a class="left-off-canvas-toggle menu-icon" href="#"><span>TOG</span></a>
</section>
<section class="middle tab-bar-section hide-for-medium-up">
<h1>LOGO</h1>
</section>
<ul class="title-area">
<li class="name">
<h1 class="hide-for-small">Logo</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li>Search</li>
<li>Facebook</li>
<li>Twitter</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Articles</li>
<li>Constituents</li>
<li>Engineers</li>
<li>Shipping</li>
<li>Locomotives</li>
<li>Rolling Stock</li>
<li>References</li>
<li>Forums</li>
</ul>
</section>
</nav>
</div>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<a class="left-off-canvas-toggle hide-for-medium-up" href="#" >Menu</a>
<!-- Off Canvas Menu -->
<aside class="left-off-canvas-menu hide-for-medium-up">
<!-- whatever you want goes here -->
<ul class="off-canvas-list">
<li><label>LNER</label></li>
<li>Gresley</li>
<li>Thompson</li>
<li>Peppercorn</li>
</ul>
</aside>
<!-- main content goes here -->
<section class="main-section">
<div class="row">
<div class="large-2 medium-3 columns">
<div class="hide-for-small">
<div class="sidebar">
<nav>
<ul class="side-nav">
<li><label>LNER</label></li>
<li><a class="active" href="gresley.shtml">Gresley</a></li>
<li>Thompson</li>
<li>Peppercorn</li>
<li class="divider"></li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Main body content starts here -->
<div class="large-10 medium-9 columns">
<h1>Sir Nigel Gresley</h1>
</div>
<!-- close the off-canvas menu -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Possible also how to make bootstrap off canvas nav overlap content instead of move it will help you further.
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