At this page, I have the following:
body {
background-image: url('http:dev.doig.com.au/images/bg-page.jpg');
background-size: cover;
repeat: no-repeat;
}
#selector {
list-style: none;
max-width: 1322px;
margin: 0 auto;
}
#selector li {
display: inline-block;
width: 11.625%;
margin-right: 0.5%;
margin-top: 1%;
background-color: #012F60;
height: 70px;
display: inline-table;
}
#selector li:last-child {
margin-right: 0%
}
#selector li#job.active {
background-color: #93CB32;
}
#selector li a {
color: white;
text-align: center;
vertical-align: middle;
display: table-cell;
text-decoration: none;
}
<div id="page">
<ul id="selector">
<li id="job" class="active">I want to find a job</li>
<li>I need help at work</li>
<li>NDIS</li>
<li>I need training</li>
<li>I've been injured at work</li>
<li>I want to refer</li>
<li>Psych service</li>
<li>I'm an employer</li>
</ul>
</div>
However, the 5th LI, "I've been injured at work" is shifted upwards.
I can't see why this is the case, or how to resolve this.
Help appreciated.
Change here:
#selector li {
width: 11.625%;
margin-right: 0.5%;
margin-top: 1%;
background-color: #012F60;
height: 70px;
display: inline-table;
vertical-align: top; // Key line
}
Related
I'm trying to do a nav menu in a particular style, It needs to be a bunch of square buttons/list items, then when you hover over an item, the background behind the item changes color, a decent height above the item and behind the drop down list, as seen in the image below.
My issue is that Im curious if I'm doing it the most efficient way and also when I hover over the initial item, it is working but then you go to one of the drop down items and the main/parent item disappears into the background.
Code:
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
padding-top: 100px;
padding-left: 100px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
border: solid 4px #fff;
width: 150px;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
}
li a:hover {
color: #fff;
border: solid 4px #00ee98;
border-top: solid 100px #00ee98;
margin-top: -100px;
}
.droplinks {
position: absolute;
background-color: #00aeef;
min-width: 150px;
display: none;
margin-left: -2px;
}
.droplinks a {
padding: 10px;
display: block;
border: solid 2px #00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Then on hovering a menu item, it changes to this;
However, when I then go to a sub menu item the top level item messes up as in the example above. Would could be done to resolve this?
take a look at this fiddle,
and here is how you can properly show the sub menu on hovering on menu item:
li:hover .droplinks{
display: block;
}
body {
background-color: #00aeef;
}
.navBG {
background-color: #fff;
}
nav {
text-align:center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li {
display: inline-block;
display: inline;
float: left;
background-color: #00aeef;
width: 150px;
position: relative;
}
li a {
display: block;
padding: 10px 5px;
color: #fff;
text-align: center;
border-width: 30px 5px;
border-color: #fff;
border-style: solid;
}
li:hover a {
color: #fff;
border-color:#00ee98;
}
.droplinks {
background-color: #00aeef;
top: 100%;
display: none;
margin-left: 0;
min-width: 150px;
position: absolute;
margin-top: -15px;
}
.droplinks a {
padding: 10px;
display: block;
border-width: 2px 4px;
border-style: solid;
border-color:#00ee98;
}
.droplinks a:hover {
color: #fff;
}
.dropbutton:hover .droplinks {
display: block;
}
<div class="container-fluid navBG">
<nav>
<ul>
<li>Home
</li>
<li class="dropbutton">Products
<div class="droplinks">
Widgets
Cogs
Gears
</div>
</li>
<li class="dropbutton">
Services
<div class="droplinks">
Handshakes
Winks
Smiles
</div>
</li>
<li>Shop
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
Why doesn't my ul li extend all the way to right of the screen? it seems not 100%.. Please HELP In the example provided. The navigation bar does not fully extend across the screen at certain specific resizing it does; the more i extend the browser widow the larger the gap between the last LI child from the UL and the right side of the browser border gets. When you hover you are able to see it. "sign up" item... Please help...
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: rgba(182, 182, 182, 1);
}
div.main_container {
position: fixed;
height: 100%;
width: 100%;
background-image: url("../images/IMG_0060.JPG");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
div.nav_container {
position: fixed;
z-index: 1;
height: 50px;
width: 100%;
min-width: 700px;
background-color: rgba(34, 34, 34, .75);
}
ul.nav {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
height: 50px;
width: 100%;
}
ul.nav li {
background-color: transparent;
display: table;
float: left;
height: 50px;
width: 14.285714286%;
text-align: center;
}
ul.nav li marquee {
position: relative;
display: table-cell;
vertical-align: middle;
color: white;
font-weight: bold;
font-family: fantasy;
}
ul.nav li a {
text-decoration: none;
text-transform: capitalize;
font-family: fantasy;
position: relative;
display: table-cell;
vertical-align: middle;
color: lightgray;
font-weight: bold;
}
ul.nav li:hover {
background-color: rgba(205, 205, 205, .50);
}
ul.nav li:hover marquee {
background-color: black;
color: lightgreen;
}
ul.nav li:hover a {
color: black;
}
<div class="main_container">
<div class="nav_container">
<ul class="nav">
<li>
home
</li>
<li>
projects
</li>
<li>
social
</li>
<li>
tutorials
</li>
<li>
<marquee scrollamount="2">
some sliding text
</marquee>
</li>
<li>
login
</li>
<li>
sign up
</li>
</ul>
</div>
</div>
simply add
min-width with percentage like min-width:99.8% and min-width:14.2%
or whatever and it will restrict browser to keep minimum of width specified
I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle
Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/
So I'm trying to figure out a way to make the tabs in my navigation bar clickable as well as the link text. Adding padding: 20px 30px; makes the second to last tab shift up and the text shift to the right. I'm willing to do some major alterations so please any answer is a good one.Here's my HTML.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres the CSS...
#tab_container
{
background-color: #222;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #222;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: black;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
padding: 20px 30px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
}
set display-blocks to A:
ul li a {
display:block;
height:100%;
width:100%;
line-height:XXpx;
}
I'm working on a new responsive design and I'm having an issue with my menu that I cannot figure out. Basically I want the background of the menu item to turn white when you hover over it and the text to turn blue. Right now, the text turns blue but the background will not turn white.
HTML Code:
<div class="header">
<div class="header_content">
<div class="logo">
<img src="images/new_logo.png" class="hdr_logo">
</div>
<div class="main_menu">
<ul>
<li>ABOUT US</li>
<li>OPERATIONS BRANCH</li>
<li>LOGISTICS BRANCH</li>
<li style="border-right:0;">COMMUNITY</li>
</ul>
</div>
</div>
</div>
CSS:
.header {
background: url('images/header2.png') repeat-x top left;
width: 100%;
height: 150px;
color: #FFF;
margin: 0;
padding: 0;
}
.header_content {
width: 960px;
margin: 0 auto;
height: 150px;
padding: 0;
}
.logo {
float:left;
width:120px;
}
.main_menu {
float:left;
height: 30px;
margin-top: 120px;
line-height: 30px;
padding: 0;
width: 830px;
}
.main_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
height: 30px;
}
.main_menu li {
float: left;
border-right: 1px solid #FFF;
text-align: center;
padding: 0;
margin: 0;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
height: 30px;
cursor: pointer;
}
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: rgb(33,47,57);
}
EDIT: Problem Resolved
The floated li was not a block element so you could not change it's background color. As soon as I added display:block; to the li it resolved this issue.
Seems to work fine for me: http://jsfiddle.net/s3JT9/
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}
I changed the color to red to illustrate.