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; }
Related
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
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 get the white color on hovering and all other syling works, its just in its static position it is still having the standard color. I have looked over and over I just cant see it!
the css
.MainMenu li{
display: inline;
margin-left: 0px;
text-decoration:none;
height: 35px;
color: #ffffff;
}
.MainMenu :link{
text-decoration:none;
margin-left: 0px;
height: 35px;
font-size: 24px;
padding-top:10px;
padding-bottom:10px;
padding-left: 5px;
padding-right: 5px;
color: #ffffff;
}
.MainMenu :hover {
background: #34a4f8;
text-decoration: none;
height: 35px;
color: white;
}
.MainMenu {
padding-left:0px;
}
p.MainMenu {
color:#ffffff;
}
the html
<p class='MainMenu'>
<ul class="MainMenu">
<li>Home</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</p>
To echo the comments from #mrtsherman, it's not clear what you want.
But this will help in your testing, I believe:
instead of <a href="">, try testing with <a href="#">.
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;
}