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
Related
I am trying to make a dropdown box with submenus appearing horizontally, which can also scroll vertically.
I have gotten everything working except for the scroll.
.dropdown-container {
background: white;
border: 1px solid #666;
cursor: pointer;
line-height: 24px;
height: 24px;
position: relative;
width: 150px;
}
.dropdown-container a {
color: black;
padding: 0 10px;
text-decoration: none;
}
.dropdown-container:after {
color: #666;
content: '\f107';
font-family: FontAwesome;
position: absolute;
right: 2px;
top: 0px;
}
.dropdown-container:before {
content: attr(data-content);
padding: 0 10px;
}
.dropdown-container li > a:not(:only-child):after {
content: '\f105';
font-family: FontAwesome;
position: absolute;
right: 4px;
top: 0px;
}
.dropdown-container ul {
background: white;
border: 1px solid #666;
display: none;
right: 1px; /*Why is it being nudged 1px right relative to parent?*/
list-style: none;
margin: 0;
max-height: 80px;
overflow-x: visible;
overflow-y: auto; /*This is the problematic line, remove this and the rest works*/
padding: 0;
position: relative;
width: 100%;
}
.dropdown-container:hover > ul {
display: block;
}
.dropdown-container ul li {
background: white;
position: relative;
}
.dropdown-container ul li:hover {
background: rgba(173, 216, 230, 0.6);
}
.dropdown-container ul li:hover > ul {
display: block;
}
.dropdown-container ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
top: -1px; /*Another 1px adjustment required, why aren't they already aligned?*/
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="dropdown-container" role="nav" data-content="Title">
<ul class="dropdown">
<li>
Select 1
</li>
<li>
Select 2
<ul>
<li>
Select 2.1
<ul>
<li>
Select 2.1.1
</li>
</ul>
</li>
<li>
Select 2.2
</li>
</ul>
</li>
<li>
Select 3
</li>
<li>
Select 4
</li>
</ul>
</div>
See JSfiddle here.
But if I set overflow-y on the <ul> to auto to enable scrolling then my submenus get hidden as in the snippet above.
I believe the problem is the same as in this question: when overflow-y: auto and overflow-x: visible, overflow-x is treated as auto too.
Unfortunately the solution suggested (wrapping the <ul> in a position: relative element) has not worked for me.
Does anyone know of another way around this?
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
}
So I'm looking at creating a navigation bar that'll sit at the top of my webpage and stick to it no matter where I scroll, but it always gets caught and disappears as I scroll away?
Not only that, but this is what happens when I hover over it:
Is it possible to also only have the darker background fill the actual black bar it sits inside?
This is the snippet from my style sheet as well:
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
}
.navbar {
height: 5%;
overflow: auto;
margin: auto;
width: auto;
min-height: 60px;
top: 0;
text-align: center;
}
.title {
display: block;
}
.navbar ul {
list-style-type: none;
position: fixed;
top: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
All help is greatly appreciated! First time playing around with CSS!
EDIT:
Here is the snippet of HTML that creates this header
<link rel="stylesheet" type="text/css" href="style/style.css">
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contracts</li>
<li>Other</li>
</ul>
</div>
</header>
Fix the header...not the navbar or the menu.
body {
background-color: #ecf0f1;
margin: 0;
font-family: Arial;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {} .title {
display: block;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
.navbar li a:hover {
background-color: #111;
}
body {
height: 2000px; /* so you can see the header NOT moving */
}
<header>
<div class="navbar">
<ul>
<li class="hvr-underline">Home
</li>
<li>About Us
</li>
<li>Contracts
</li>
<li>Other
</li>
</ul>
</div>
</header>
I am a bit confused. I am not getting any image in my navigation, if I am using background-image in my CSS. If am doing it with HTML img tag I got an image, but if I try it with CSS I got nothing. :(
I tried it like this: https://stackoverflow.com/a/16194594/3701753
But nothing happens. I guess, there is something wrong with my CSS?!
Here is my code:
HTML:
<nav>
<ol>
<li class="home">
</li>
<li>Info
</li>
<li>Projects
</li>
<li>Contact
</li>
</ol>
</nav>
CSS:
/*******************************************
Links
*******************************************/
a:link {
font-family:'Iceland';
font-style: normal;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color: #666;
}
a:visited {
color: #666;
}
a:hover {
color: #F90;
}
a:active {
}
/*******************************************
Navigation
*******************************************/
nav {
width: 100%;
bottom: 0;
left:0;
height: 60px;
position: fixed;
background-color: #333;
}
ol {
list-style: none;
text-align: center;
height: 100%;
}
li {
display: inline;
margin-right: 40px;
}
li a {
}
/*******************************************
Class
*******************************************/
.home {
background: url(../pics/home_button.png);
}
/*******************************************
ID's
*******************************************/
#main {
background-color: #C90;
width: 90%;
height: 84%;
margin: 5% auto;
}
Here is it in fiddle: http://jsfiddle.net/373Bc/2/
I made in icon and I would like to display it in the navigation!
There is some other issue which I am not able to get, may be with character code, indentation, or markup etc.
Because when I TidyUp your code in jsfiddle it works. I am not sure why is this happening.
Demo
.home {
background: url(http://explorelaromana.com/wp-content/themes/explorelaromana/images/home_icon.jpg);
width: 40px;
height: 32px;
line-height: 60px;
}
li {
display: inline-block;
margin-right: 40px;
}
Demo 2
Update the following CSS:
.home {
background:url (http://explorelaromana.com/wpcontent/themes/explorelaromana/images/home_icon.jpg) no-repeat;
display: inline-block;
height: 36px;
width: 43px;
vertical-align: bottom;
}
Hope this hepls. :)
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.