I have a simple HTML/CSS list that is displayed inline. I am using a background image for the list and another variant for the onhover command of that list.
The on hover background image does not seem to sit correctly. It is displayed slightly too big and seems to have some default padding,
What is the best way to control the size, padding and margin of the background-image for the onhover command in CSS?
Thanks in advance
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding: 1px 10px 1px 10px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
}
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Stock</li>
<li>Overview</li>
</ul>
</div>
You could do it like this:
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-size: 50%;
background-position: center;
}
Related
I would like add a border-bottom that displays when I hover over it with the mouse. I want it to override the border underneath so it looks like it changes colour. An example of this can be found here http://www.formaplex.com/services (in the nav bar)
Here is a jsfiddle https://jsfiddle.net/ey006ftg/
Also, a small question: does anyone know why there is a small gap in-between the the links (can be seen when hovering from link to link) and how to get rid of it.
Thanks
Just add this to your css:
nav a {
border-bottom: solid transparent 3px;
}
Here's a jsfiddle with the above code: https://jsfiddle.net/AndrewL32/ey006ftg/1/
You can use a negative margin to overlay the border below, as shown:
nav {
border-top: 1px solid grey;
border-bottom: 3px solid black;
width: 100%;
font-size:0;
}
nav ul {
width: 1056px;
margin: 0 auto;
text-align: center;
width: 1056px;
}
nav ul li {
display: inline-block;
width: 17%;
}
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
}
nav a:hover {
color: orange;
transition: 0.2s;
border-bottom: solid orange 3px;
margin-bottom: -10px;
}
a {
color: black;
text-decoration: none;
outline: 0;
}
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
As for fighting the inline gap, seeing as you defined a font-size later for the a tag, I would just add a font-size:0, which I added to nav in the above Snippet.
fiddle demo
Simply set your default border to transparent - change color on hover
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: solid transparent 3px; /* add this! */
transition:0.3s; /* or even this :) */
}
Try this fiddle
To set border-bottom the way you want, you have to add border to anchor tag like this:
nav ul li a {
display: block;
padding: 21px 0;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 3px solid black;
}
and to make sure the space between menu items is gone use a little fix adding negative margin to your li tags inside menu like this:
nav ul li {
display: inline-block;
width: 17%;
margin-right: -4px;
}
Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO
I'm relatively new to HTML (only a few weeks now), and I'm stuck. The "about" section on my page doesn't seem to be clickable and won't bring me to the linked page. The confusing thing is that the link appears to be clickable since the floating hand icon appears when hovering over the link. I can right-click and open the link in a new tab. If I delete the css and try the link without the formatting, it is also valid.
I'm confused... is the CSS somehow messing with my href tag?
here's the html:
<div id="header">
<div class="container">
<div class="row">
<div class="twelwecol last">
<div id="navigation"> <!-- Navigation Links -->
<ul>
<li>about</li>
<li>members</li>
<li>events</li>
<li>media</li>
<li>social</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and the code from the "navigation.css" page:
#header {
width: 100%;
height: 49px;
color: white;
background-color: #1b1e25;
position: fixed;
z-index: 9999;
}
#logo {
background-image: url('../images/assets/logo.png');
background-repeat: no-repeat;
height: 80px;
width: 80px;
display: block;
float: left;
}
#navigation {
padding-top: 2px;
width: 480px;
display: block;
margin: 0px auto;
}
#navigation ul {
padding:0px;
margin: auto;
text-transform: uppercase;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li a {
color: gray;
text-decoration: none;
font-family:'Scada', sans-serif;
font-size: 13px;
}
#navigation ul li a:hover {
color: white;
}
.current {
border-bottom: 1px solid #cb1c1c;
color: white;
}
#contact {
padding-top: 12px;
float: right;
position: relative;
}
#contact a {
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
color: gray;
padding: 11px;
}
#contact a:hover {
color: white;
border: #333333 1px solid;
padding: 10px;
}
Could someone please tell me what is going on here? Any help would be most appreciated!
it appears clickable because it is contained within the a tag. When you link something your href needs to have a proper extension. Are you sure youre using .htm and not html?
furthermore CSS affects Style (css= cascading style sheet) it wont affect html (or any other) functions like the href function.
try changing your href to href="about.html"
So I'm doing a horizontal website with individual sections which works fine but now that Ive added my menu i'm having trouble where its just ruining my whole content areas and background.
Ive tried using the z-index which has no effect whats so ever... and putting items before it just push it out the way too.
My CSS Nav Bar
#Navigation
{
margin: 0px;
padding: 20px 0px 0px 700px;
font-family: 'american_captainregular', Helvetica, Arial, sans-serif;
font-size: 55px;
float:left;
}
#Navigation ul, #Navigation li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#Navigation a:link, #Navigation a:visited
{
float: left;
line-height: 14px;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #999;
}
#Navigation a:hover { color: #000; }
My CSS For the image
#HomeText{
background-repeat: no-repeat;
background-image: url(Images/HomeText.png);
float:left;
height:158px;
width:450px;
margin-left:461px;
margin-top:126px;
}
The HTML
<div id="Content">
<div class="Tabs TabOne" id="HomeTab">
<ul class="MyNav" id="Navigation">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
</ul>
<div id="HomeText"></div>
</div>
And just in case, the CSS for my Sections
.Tabs{
margin:0px;
bottom:0px;
float:left;
width:3500px;
}
.TabOne{
background: url(Images/BG1.jpg) no-repeat;
}
Ive never encountered this sort of issue with elements being pushed down the page as much as with this
http://jsfiddle.net/BoneStarr/AGfwn/
I have a CSS/HTML list that is using an image as the background and a different image when the mouse is hovered over.
The only problem is that the hover image doesn't line up correctly and has a small but noticable gap.
I have placed a link to a test version to help you to see exactly what I mean.
I am also using Blueprint CSS as a CSS framework.
The source code is below.
As always, thanks in advance
#navbar{
background-image: url('../images/navbar.png');
color: white;
font: 20px arial,sans-serif;
height: 45px;
}
#navbar a{
color: white;
text-decoration: none;
}
#navbar ul{
list-style: none;
margin:0;
padding:0;
}
#navbar li{
border-right: solid 1px white;
display: inline-block;
height: 45px;
line-height: 45px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
padding-top: 1px;
}
#navbar li:hover{
background-image: url('../images/navbar-selected.png');
background-repeat: repeat-x;
}
<div class="container" id="container">
<div class="prepend-top">
<div class="clear" id="navbar">
<ul>
<li>Home</li>
<li>Start HaardHout Vergikelleen</li>
<li>In Jouw Regio</li>
</ul>
</div>
</div>
</div>
Set float: left; for your li elements.
#navbar li { float:left; }