I'm new to this so apologies for any bad formatting and wrong terminology.
I'm trying to create a nav bar at the top of a page and have it the same width as my wrapper which is 1000px. I managed to get it to the center once but it didn't align with my wrapper and I cant even recreate that.
Any help at all would be appreciated, even if it doesn't directly answer my question
HTML:
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="wrapper">
<p>Main Text</p>
</div>
</main>
</body>
</html>
CSS:
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
float: left;
}
.topnavlink:hover {
background-color: #111;
}
header {
position: fixed;
top: 0;
width: 1000px;
}
.wrapper {
margin: auto;
width: 1000px;
position: relative;
}
body {
padding-top: 50px;
}
Do you mean like this?
.topnavlist {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
text-align: center;
display:flex;
justify-content:center;
}
.topnavlink {
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
display: block;
}
.topnavlink:hover {
background-color: #111;
}
header {
margin:0 auto;
top: 0;
width: 1000px;
}
.wrapper {
margin: 0 auto;
width: 1000px;
position:fixed;
top:0;
}
body {
padding-top: 50px;
}
html
css
<DOCTYPE html>
<head>
<link rel="stylesheet" href="navtest.css">
</head>
<html>
<body>
<header>
<div class="wrapper">
<nav class="topnav">
<ul class="topnavlist">
<li><a class="topnavlink">Menu 1</a></li>
<li><a class="topnavlink">Menu 2</a></li>
<li><a class="topnavlink">Menu 3</a></li>
<li><a class="topnavlink">Menu 4</a></li>
<li><a class="topnavlink">Menu 5</a></li>
<li><a class="topnavlink">Menu 6</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div>
<p>Main Text</p>
</div>
</main>
</body>
</html>
header {
margin:0 auto;
top: 0;
width: 1000px;
}
This part of the code was interfering with the positioning of the nav bar, removing it fixed the issue and didn't cause any other problems.
Related
it works fine with all browsers except chrome, while real-preview using Dreamweaver seems fine with all of them, but when uploading it to the server the problem shows up in chrome only. tried to change the inline/block tag. the display: none/block tag everything and still can not solve it. is it a CSS related thing or javascript or what? the dropdown menu works fine on every browser except Chrome
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
ul > li{
list-style-type: none;
display: inline-block;
}
.grid-container {
display:grid;
}
a {
display: block;
}
#upper-bar {
background-color: #00A2CB;
color: white;
font-weight: bold;
font-family: sans-serif;
padding-left: 50px;
padding-right: 50px;
}
div[id="upper-bar"] a {
color: white;
padding: 5px;
}
#lower-bar {
font-weight: bold;
font-family: sans-serif;
padding-left: 70px;
padding-right: 70px;
}
div[id="lower-bar"] a {
color: black;
padding: 5px;
}
.align-left {
float:left;
}
.align-right {
float: right;
}
li a, .dropbtn {
display: inline-block;
text-align: center;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00A2CB;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #008FB3;}
.dropdown:hover .dropdown-content {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Test page</title>
</head>
<body>
<header class="grid-container">
<div id="upper-bar">
<div class="align-left">
<ul>
<li>|</li>
<li><a href="#" >ABOUT US</a></li>
<li>|</li>
<li><a href="#" >OUR SERVICES</a></li>
<li>|</li>
<li class="dropdown">
HELP
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
<div id="lower-bar">
<div class="align-left">
<ul>
<li></li>
<li><a href="#" >Home</a></li>
<li><a href="#" >Individuals</a></li>
<li><a href="#" >doctors</a></li>
<li><a href="#" >Companies</a></li>
</ul>
</div>
<div class="align-right">
<ul>
<li><a href="#" >Login</a></li>
<li><a href="#" >Signup</a></li>
</ul>
</div>
</div>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
I am making a site with a navbar, but when I resize the page, sometimes one link goes on an extra line like this: Navbar Example
How can I fix this? Here is my code:
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
Any help would be much appreciated!
Thanks,
Jasper
The only way you can avoid the nav bar word wrapping is by setting a minimum width on the nav bar, or add a media query to change it when the screen is too small.
Using the min-width CSS attribute.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale-1.0">
<title>Navbar Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
</style>
</head>
<body>
<div class="sticky">
<ul style="min-width:884px">
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
</body>
</html>
That is a padding issue.
So, there'll be 2 solutions.
use #media to let the menu contains breadcrumb when the browser width is small.
if you're going to force display the navigation items by line breaking, then use flex
Just add 2 lines to your ul style
ul {
...
display: flex;
flex-flow: row wrap;
}
So, the final result will be
body {
margin: 0;
background-color: white;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
ul {
list-style-type: none;
margin: 0;
padding-left: 0px;
padding-right: 0px;
overflow: hidden;
background-color: #F27930;
box-shadow: 5px 0px 0px 0px 5px lightgrey;
}
li {
float: left;
font-family: roboto;
color: white;
}
li a.link {
display: block;
color: white;
text-align: center;
padding: 14px 14px;
text-decoration: none;
}
li a.current {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.divider {
display: block;
top: 50%;
font-size: 25px;
color: #FCD031;
text-align: center;
padding: 8px 2px;
text-decoration: none;
}
li a:hover {
background-color: #feae02;
}
li a.current:hover {
background-color: #F27930;
}
li a.divider:hover {
background-color: #F27930;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<div class="sticky">
<ul>
<li><a class="current"><b>Jump to Article:</b></a></li>
<!-- <hr class="hrNav"> -->
<li><a class="link" href="#top">Top</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article1">Article 1</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article2">Article 2</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article3">Article 3</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article4">Article 4</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article5">Article 5</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article6">Article 6</a></li>
<li><a class="divider">|</a></li>
<li><a class="link" href="#article7">Article 7</a></li>
</ul>
</div>
I've been trying to figure this out for so long and I've finally given up... I've already defined a div and I would like to center some tabs in it, but nothing seems to work. Any suggestions?
HTML:
<section class="area">
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</section>
CSS:
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 75%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
Thanks in advance.
There is a problem with your code , you have set width to area 75% the container width 1170px , container pull out the area div, thats why you got this problem, i just put the area div into container, please check with the snippet. i have solved your issue.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.area{
border: 2px solid #9A9A9A;
border-radius: 3px;
background-color: #FFFFFF;
height: 70%;
width: 100%;
margin: auto;
margin-bottom: 20px;
overflow-y: auto;
overflow-x: hidden;
text-align:center;
}
.nav-tabs > li {
float: none;
display: inline-block !important;
zoom: 1;
}
.nav-tabs {
text-align: center;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="area">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">TAB 1</a></li>
<li><a data-toggle="tab" href="#tab2">TAB 2</a></li>
<li><a data-toggle="tab" href="#tab3">TAB 3</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Put you parent class name before the bootstrap inbuilt classes. May b your css file is not overriding the bootstrap css file.
.area .nav-tabs > li {
float: none;
display: inline-block;
zoom: 1;
}
.area .nav-tabs {
text-align: center;
}
Try this:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">
<center>TAB 1</center>
</a></li>
<li><a data-toggle="tab" href="#tab2"><center>TAB 2</center></a></li>
<li><a data-toggle="tab" href="#tab3"><center>TAB 3</center></a></li>
</ul>
In order to centrally align the tabs you need to add the following:
.area .nav {
text-align:center;
}
.area .nav-tabs>li {
float: none;
display:inline-block;
}
https://jsfiddle.net/tghLqu24/2/ - fiddle created for you to see it working.
I am designing a nav bar, which needs to be closed. This is simple html and css. I am attaching the design.
This is design it should look like :-
This is my current design :-
<html>
<head>
<title>Example</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="body">
<div class="header">
<h1>Home Page</h1>
<div class="navbar">
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Remove from "a. nav" margin style:
margin-left: 15px;
margin-right: 2px;
here is your new navbar class
.navbar {
height: 28px;
padding-top: 7px;
margin-top: 54px;
border: 1px solid #F00;
}
and example: https://jsfiddle.net/sqhaqcoo/1/
to reduce button width change padding: 8px 50px; to padding: 8px 40px;
I would add a fixed width:750px to the .navbar and margin:0 auto, then reduce the margin-left and remove the margin-right for the a.nav like here:
body{
background-color: #dddddd;
margin: 0;
padding: 0;
}
h1{
color:#7ba1cc;
font-size: 20px;
margin: 0;
padding: 0;
}
table{margin: 0 auto;
margin-top: 20px;
width: 70%;
}
table, th, td {
border: 1px solid black;
}
.black{
border-collapse: collapse;
}
.body{
width: 800px;
height: 1000px;
margin: 0 auto;
background-color: #cccccc;
}
.header{
height:115px;
background-color: #1d8bb3;
}
.navbar{
height:25px;
padding-top:8px;
margin-top:57px;
border: 1px solid red;
width: 750px;
margin: 0 auto;
}
ul.nav, li.nav {
display:inline-block;
float: inside;
margin: 0px;
padding: 0px;
}
a.nav {
background-color: #E2DDDD;
padding: 8px 50px 8px 50px;
margin-left: 5px;
text-decoration: none;
text-align:center;
}
a:hover.nav {
background-color: #CCC8C8;
}
<html>
<head>
<title> Homework 2</title>
<meta charset= "UTF-8">
</head>
<body>
<div class="body">
<div class="header">
<h1> Home Page </h1>
<div class="navbar" >
<div>
<ul class="nav">
<li class="nav"><a class="nav" href="#">Menu link 1</a></li>
<li class="nav"><a class="nav" href="#">Menu link 2</a></li>
<li class="nav"><a class="nav" href="#">Menu link 3</a></li>
<li class="nav"><a class="nav" href="#">Menu link 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
So i have a veritcal menu bar posited to the right of the page however I do not want the sub-menu to cross down onto the the main div (blue background).
I have created a JS fiddle link to show this clearer: http://jsfiddle.net/uzeZ6/
currently the menu bar will overflow onto the main div. How do I stop this from happening?
Thank You
HTML
<div id="top">
<div id="nav">
<ul>
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test </a>
<ul>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
<li><a href "#">Link 1</a></li>
</ul>
</ul>
</li>
</div>
</div>
<div id ="main">text goes here
</div>
CSS
#charset"utf-8";
#top {
background-color: #CCC;
padding: 0px;
height: 150px;
width: 640px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;}
#top #nav {
margin: 0px;
padding: 0px;
}
#top #nav ul {
margin: 0px;
padding: 0px;
}
#top #nav ul li {
background-color: #666;
float: left;
position: relative;
border: 1px solid #000;
list-style-type: none;
}
#top #nav ul li:hover ul {
visibility: visible;
left: -152px;
top: -1px;
}
#top #nav ul li a {
font-size: 14px;
color: #FFF;
line-height: 30px;
text-decoration: none;
display: block;
height: 30px;
width: 150px;
}
#top #nav ul li ul {
position: absolute;
visibility: hidden;
}
#nav {
background-color: #333;
padding: 0px;
float: right;
height: 150px;
width: 180px;
}
#main {
height: 300px;
width: 640px;
background-color: #00F;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
Here's the JS fiddle: http://jsfiddle.net/yE8ae/
You can adjust the position as you wish by changing the bottom value on these lines:
#top #nav ul:nth-child(3) li:hover ul {
top: initial; bottom: -33px;
}
#top #nav ul:nth-child(4) li:hover ul {
top: initial; bottom: -1px;
}
HTML
<div id="top">
<div id="nav">
<ul>
<li><a href "#">Test 1</a>
<ul>
<li><a href "#">Test 1, Link 1</a>
</li>
<li><a href "#">Test 1, Link 2</a>
</li>
<li><a href "#">Test 1, Link 3</a>
</li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test 2</a>
<ul>
<li><a href "#">Test 2, Link 1</a>
</li>
<li><a href "#">Test 2, Link 2</a>
</li>
<li><a href "#">Test 2, Link 3</a>
</li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test 3</a>
<ul>
<li><a href "#">Test 3, Link 1</a>
</li>
<li><a href "#">Test 3, Link 2</a>
</li>
<li><a href "#">Test 3, Link 3</a>
</li>
</ul>
</ul>
</li>
<ul>
<li><a href "#">Test 4</a>
<ul>
<li><a href "#">Test 4, Link 1</a>
</li>
<li><a href "#">Test 4, Link 2</a>
</li>
<li><a href "#">Test 4, Link 3</a>
</li>
</ul>
</ul>
</li>
</div>
<p> </p>
</div>
<div id="main">text goes here</div>
CSS
#charset"utf-8";
#top {
background-color: #CCC;
padding: 0px;
height: 150px;
width: 640px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top #nav {
margin: 0px;
padding: 0px;
}
#top #nav ul {
margin: 0px;
padding: 0px;
float: left;
}
#top #nav ul li {
background-color: #666;
float: left;
position: relative;
border: 1px solid #000;
list-style-type: none;
cursor: pointer;
}
#top #nav ul li:hover ul {
display: block;
}
#top #nav ul:nth-child(3) li:hover ul {
top: initial; bottom: -33px;
}
#top #nav ul:nth-child(4) li:hover ul {
top: initial; bottom: -1px;
}
#top #nav ul li a {
font-size: 14px;
color: #FFF;
line-height: 30px;
text-decoration: none;
display: block;
height: 30px;
width: 150px;
}
#top #nav ul li ul {
position: absolute;
display: none;
right: 151px;
top: -1px;
}
#nav {
background-color: #333;
padding: 0px;
float: right;
height: 150px;
width: 180px;
}
#main {
height: 300px;
width: 640px;
background-color: #00F;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}