My navbar refuses to display horizontally. I have put all li elements floating to the left and added the display:inline-block element to the individual blocks and to the list elements and to the list itself and tried every combination. I finally got the list to how I like it and now the only thing keeping this list from being perfect is that it is not displaying horizontally. WHY???
<head>
<title>Troop 25 Homepage</title>
<style>
.navbar {
float: top;
width: 182.8px;
height: 30px;
display: inline-block;
}
li {
float: left;
display: inline-block;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
a:link, a:visited {
display: inline-block;
width: 182.8px;
line-height: 30px;
padding-top: 13px;
padding-right: 5px;
padding-bottom: 4px;
padding-left: 5px;
text-decoration: none;
text-align: center;
background-color: #006b00;
color: white;
font-weight: bold;
float: left;
}
a:hover, a:active {
background-color: #C0C0C0;
}
a:active {
color: grey;
}
.nav_bar_text {
font-size: 17px;
}
.Mackin_text {
font-size: 17px;
vertical-align: text-center;
}
h1 {
text-decoration: underline;
color: #006b00;
}
p {
font-size: 30px;
}
</style>
</head>
Here is my HTML for my list.
<div class="navbar">
<ul class="nav">
<li><a class="nav_bar_text" href=#Home>Home</li></a>
<li><a class="nav_bar_text" href="#Resources">Resources</li></a>
<li><a class="nav_bar_text" href="#Calendar">Calendar</li></a>
<li><a class="nav_bar_text" href="#Year Plan">Year Plan</li></a>
<li><a class="nav_bar_text" href="#Gallery">Gallery</li></a>
<li><a class="nav_bar_text" href="#Videos">Videos</li></a>
<li><a class="Mackin_text" href="#Mackin Society">Mackin Society</li></a>
</ul>
</div>
Change your .navbar width to be 100%
.navbar
{
float:top;
width:100%;
height:30px;
display:inline-block;
}
Try this
Related
I'm trying to create a clone of the google homepage as one of my first html/css projects. This is the first time I've ever coded and I'm having trouble with setting the background colour for one of the navigation bars at the bottom of the screen. I was able to set the background colour of the upper navigation bar (the one with the country name on it) but when I try to set the background colour for the lower navigation bar (the one with the Advertising and Business links) it doesn't show and the bar remains white.
This is my html code for the lower navigation bars
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</footer>
This is my CSS
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #f2f2f2;
}
.bottom_nav {
padding-top: 170px;
}
And this is what the page looks like for reference. I want the lowest bar to be grey as well.
google homepage clone
Can anyone help me out?
You do not need to use ul li. You can wrap your bottom link in to div and use display: flex and justfify-content:space-between to have space between your link.
Also i have modified the a links to match exactly as google footer by adding padding and text-decoration:none
Exact copy of google footer in demo.
Working Demo: https://jsfiddle.net/kx291hqm/
Run snippet below.
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 27px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_r {
padding-right: 27px;
}
.bottom_nav {
padding-top: 170px;
}
.bottom_link {
display: flex;
justify-content: space-between;
line-height: 40px;
background: #f2f2f2;
}
a {
text-decoration: none;
white-space: nowrap;
color: #5f6368;
padding-left: 27px;
}
<footer class="bottom_nav">
<div class="country_nav">
Canada
</div>
<div class="bottom_link">
<div class="bottom_nav_l">
Advertising
Business
How Search Works
</div>
<div class="bottom_nav_r">
Settings
Terms
Privacy
</div>
</div>
</footer>
Try with adding following css:
.bottom_nav{
background-color:blue;
}
I hope this will help you..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #ededed;
padding-top: -1px;
padding-bottom: 1px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
margin-left: -10px;
}
section{
background-color: #ebebeb;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
list-style-type: none;
}
.bottom_nav_l li a {
display: block;
margin-left: -10px;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
ul {
list-style-type: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #d7d7d7;
}
.bottom_nav {
padding-top: 0px;
position: relative;
top: 460px;
}
</style>
</head>
<body>
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<section>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</section>
</footer>
</body>
</html>
I have a navigation menu, and the first item replaces the content with an icon. I'm doing this by setting the font-size to 0px of the main element, and then adding an after element. This seems to be a common practice and it works so far so good.
However I can't seem to align the after element with the rest of the navigation menu.
I started playing around with line-height and vertical-align which got me closer to my goal, but as you can see, it's still not properly working as expected.
The fiddle can be found here: https://jsfiddle.net/67dyxLr1/
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
Here is my CSS:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black; /* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {
}
.home a {
font-size:0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
Just add vertical-align: middle to your li
CSS
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle;
}
DEMO HERE
You need to add vertical align to your li:
.nav-primary {
background: #CCC;
}
.nav-primary li {
list-style-type: none;
display: inline-block;
text-align: left;
font-size: 26px;
line-height: 0px;
vertical-align: middle; /* add this */
}
.nav-primary a {
display: inline-block;
padding: 32px 20px;
border: 1px dashed black;
/* border only used for display purpose of alignment*/
margin-right: -4px;
}
.nav-primary a:hover {
background: #FFF;
}
.menu {
width: 100%;
}
.menu-item {} .home a {
font-size: 0px;
}
.home a:after {
font-family: "dashicons";
content: " \f102";
font-size: 40px;
display: inline-block;
vertical-align: middle;
line-height: 0px;
}
<nav class="nav-primary">
<ul class="menu">
<li class="menu-item home">Home</li>
<li class="menu-item">Blog</li>
<li class="menu-item">Contact</li>
<li class="menu-item">About Us</li>
</ul>
</nav>
I'm new to this, so I'm clueless.
Whenever I go to my site with a different resolution the menu changes a lot and does not align correctly. Just tell me if i need more of the html or css.
My webpage is Aulan.co
My code:
ul {
font-size: 25px;
color: black;
text-align: center;
list-style-type: none;
margin-bottom: 2em;
line-height: 150%;
margin-left: 3em;
margin-right: 5em;
}
#menu {
list-style-type: none;
margin: auto;
width: 90%;
height: auto;
padding: auto;
overflow: hidden;
background-color: #353B4E;
text-align: center;
font-size: 18px;
}
li {
text-align: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 70px;
text-decoration: none;
height: auto;
}
li a:hover {
background-color: #111;
display: inline;
}
#menus {
float: left;
<h1> AuLan </h1>
<ul id="menu">
<li id="menus"><a class="active">Forside</a></li>
<li id="menus">Informasjon</li>
<li id="menus">Regler</li>
<li id="menus">Crew</li>
<li id="menus">Kontakt oss</li>
<li id="menus">Seatmap</li>
<li id="menus">Timeplan</li>
</ul>
it's not really clear what you want to achieve, but I tried to change your code in a way that I think you might want. I took out a lot of unneccessary code from the CSS and added some. In the HTML, i change the menusID to a class, since IDs should only be used once per page.
You can adjust especially the min-width and padding setting in the menu li a rule to your needs (but also the other width and padding settings)
#menu {
font-size: 25px;
list-style-type: none;
width: 90%;
background-color: #353B4E;
font-size: 18px;
padding: 10px 20px;
}
#menu li {
display: inline-block;
line-height: 150%;
}
#menu li a {
display: block;
min-width: 100px;
color: white;
padding: 5px 15px;
text-decoration: none;
}
#menu li a:hover {
background-color: #111;
}
<h1> AuLan </h1>
<ul id="menu">
<li class="menus"><a class="active">Forside</a></li>
<li class="menus">Informasjon</li>
<li class="menus">Regler</li>
<li class="menus">Crew</li>
<li class="menus">Kontakt oss</li>
<li class="menus">Seatmap</li>
<li class="menus">Timeplan</li>
</ul>
I'm working on a responsive navigation bar with Bootstrap for my website. I have it mostly figured out, except for one thing. On devices with screen width < ~775px, such that the buttons are stacked vertically instead of horizontally, the first one extends a bit to the left, misaligning it with the rest of the buttons. What is causing this, and how do I fix it?
JSFiddle: https://jsfiddle.net/w10cspvv/
HTML:
<div id="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active navbutton">
<img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Home</span>
</li>
<li role='presentation' class='active navbutton'>
<a href='/about.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>About</span></a>
</li>
<li role='presentation' class='active navbutton'>
<a href='/contact.php'><img class='squidanim' src='https://www.glowingsquid.com/images/squid.gif' /><span>Contact</span></a>
</li>
</ul>
</div>
</nav>
</div>
CSS:
body {
background-color: black;
font-size: 16pt;
margin-top: 2em;
}
#navbar {
border: .25em solid #00aeef;
background-color: #00aeef;
border-radius: 25px;
}
.navbar {
margin-bottom: 0em;
}
.navbar-default {
border-radius: 25px;
border-color: #00aeef;
background: #00aeef;
}
.main {
font-family: Ubuntu, Tahoma, Geneva, sans-serif;
margin-left: 6em;
margin-right: 6em;
text-align: center;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
background-color: #7F00FF;
}
.squidanim {
display: none;
}
.navbutton:hover a > .squidanim {
display: block;
height: 50px;
position: absolute;
z-index: 100;
}
.navbutton {
padding-left: 2em;
padding-right: 2em;
}
.nav > li > a {
padding-top: 0;
padding-bottom: 0;
}
.nav > li > a > span {
padding-top: 10px;
padding-bottom: 10px;
}
#media (max-width: 978px) {
#navbar {
margin-left: 2em;
margin-right: 2em;
}
.main {
margin-left: 1em;
margin-right: 1em;
}
.navbutton {
padding-left: 0;
padding-right: 0;
}
}
I have fixed this in this JSFiddle: https://jsfiddle.net/xpn779Lr/1/
Which overrides the default bootstrap rule
.nav-pills>li+li {
margin-left: 2px;
}
to
.nav-pills>li+li {
margin-left: 0;
}
FYI, this css rule has high specificity.
The plus sign mean that the style applies only to li's directly following another li.
A plain "li" selector would apply the style to every li in the div with a "navpills" class.
See adjacent selectors on W3.org.
I tried something with divs in html, and normally it isn't a problem. However I encountered a problem and I don't find my mistake.
The menu div is supposed to be in the center of the header div and there should be no margin at the top.
here is the example with the error: http://jsfiddle.net/j83eb/
here is the html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
and the css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
Thanks!
Below will fix it (remove margin/padding from ul)
#menu ul {
margin:0;
padding:0;
}
And the Fiddle
As said above, you'll want to clear the default margins on the <ul> element. (No need to clear the padding, there is none). I also removed the height and line-height from everything since that isn't necessary and will likely just cause problems in the future.
Also, make sure to look through your CSS before sending it out for help. There were a number of properties with typos as well as duplicate properties.
http://jsfiddle.net/j83eb/3/