Pretty simple nut I'm trying to crack. I'm doing image rollovers with CSS only. When I plugged in my a href link, it just does not work. By not work I mean, it does not act like it's a link and as a result you cannon click through to the page. Figuring it has something to do with the <li> but I can't figure out what. Here's my HTML and CSS:
CSS
ul.navigation,
ul.navigation ul {
margin: 25px 0 0 0;
}
ul.navigation li {
list-style-type: none;
margin:15px;
}
.AboutUsNav{
display: block;
width: 159px;
height: 54px;
background: url('../images/N_About_Us.png') bottom;
text-indent: -99999px;
}
.AboutUsNav:hover {
background-position: 0 0;
}
HTML
<div>
<ul class="navigation">
<li class="AboutUsNav">About Phin & Phebes Ice Cream</li>
<li class="FlavorsNav">Ice Cream Flavors</li>
<li class="WheretoBuyNav">Where to Buy Our Ice Cream</li>
<li class="WholesaleNav">Wholesale Orders Ice Cream</li>
<li class="ContactUsNav">Contact Phin & Phebes Ice Cream</li>
<li>about</li>
</ul>
</div>
Your .AboutUsNav has text-indent: -99999px;, pulling the a outside of the clickable viewport.
You probably want to put the negative text-indent on the a itself, and then set the a element to display: block; width: 100%; height: 100%, depending on your circumstances.
don't apply the text-indent and background to the list - do it to the link instead.
Example:
<div id="main_nav">
<li class="home">
Home
</li>
<li class="news">
News
</li>
</div>
CSS:
#main_nav a {
background-image:url();
}
#main_nav .home a {
width: 82px;
background-position: 0px 0px;
}
#main_nav .news a {
width: 85px;
background-position: 82px 0px;
}
thank you for your help. I tried the approach you both recommended. I think this definitely works under certain circumstances. For me, my background image just wasn't showing up but the links were working.
I ended up solving this problem by leaving the CSS the same but changing the HTML markup as so:
<div>
<ul class="navigation">
<li><a class="AboutUsNav" href="/about">About Phin & Phebes Ice Cream</a></li>
<li><a class="FlavorsNav" href="/flavors">Phin & Phebes Flavors</a></li>
<li><a class="WheretoBuyNav" href="/buy">Where to Buy Phin & Phebes Ice Cream</a></li>
<li><a class="WholesaleNav" href="/wholesale">Wholesale Orders Ice Creamf</a></li>
<li><a class="ContactUsNav" href="/contact">Contact Phin & Phebes Ice Cream</a></li>
</ul>
I was working off this demo, which didn't include an unordered list: http://kyleschaeffer.com/best-practices/pure-css-image-hover/
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I am using SpriteMe for my webpage and have code below. The problem is it show full sprite image instead of single image inside it.
<div class="white_box">
<div class="white_box_top_JS" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); border: 2px solid red; background-position: -279.5px -10px; ">
<h2>Job Seekers</h2>
<ul>
<li>
Register
</li>
</ul>
</div>
</div>
I have read and followed <ul> Sprite Issue but can't get it.
http://jsfiddle.net/6TaQt/30/
It is best to stay away from inline style whenever possible. Additionally, the li element should receive the sprite, not the anchor. Here is a start on the relevant changes:
(also in a forked fiddle )
HTML:
<ul>
<li id="register">
Register
</li>
<li id="post">
Post resumes
</li>
<li id="find">
<a href="/find-jobs/" class="seo" >Find jobs</a>
</li>
<li id="get">
Get jobs by email
</li>
</ul>
CSS:
#register { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -1315px -6px; }
#post { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png) ;
background-position: -1360px -6px; }
#find { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -685px -5px; }
#get { width: 40px;
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png);
background-position: -544px -6px; }
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.
i can't seem to figure out why this works:
#inside-footer {
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 85%;
}
#inside-footer ul.footer_nav {
text-align: left;
float: left;
margin: 20px 10px;
position: relative;
width: 164px;
}
<div id="inside-footer">
<ul class="footer_nav">
<h4>Zeigeist</h4>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact & Support
</li>
<li>
Training
</li>
<li>
Site Status
</li>
</ul>
<ul class="footer_nav">
<h4>Tools</h4>
<li>
Chapter Generator
</li>
<li>
Activies Board
</li>
</ul>
<ul class="footer_nav">
<h4>Documentation</h4>
<li>
Chapter Sites
</li>
<li>
Developers
</li>
</ul>
<ul class="footer_nav">
<h4>External Links</h4>
<li>
News
</li>
<li>
Media
</li>
</ul> <!-- /upper-footer-->
</div><!-- /inside-footer -->
but on my site http://zmgc.net/ the list items are across, and not under the header tags.
i would like to display it like http://jsfiddle.net/ypr8g/13/ but equally distributed within the yui3-u-19-24 div and i perhaps i can split this with another yui3-g and put each within a yui3-u-1-4 div but does not seem right!
what am i missing?
thanks
Where you have #inside-footer li {
float: left;
margin-top: 5px;
padding: 0;
} it needs the float taken out as this displays the li's side by side, change it to #inside-footer li {
margin-top: 5px;
padding: 0;
} and it will display as you want it i.e. below the header tags.