I'm trying to create a simple image navigation for my site, using CSS to declare the background-image property of a list-item (li). The problem is, when I use text-indent to put the image off-screen, the link is no longer there (off screen as well I presume). Any help would be greatly appreciated. Here is my XHTML:
<div id="nav">
<ul>
<li class="current about">
about
</li>
<li class="contact">
contact
</li>
<li class="networks">
networks
</li>
</ul>
</div>
Here is my CSS:
#nav li {
display: block;
float:left;
background-image: url("images/nav-normal.png");
height:47px;
text-indent: -9999px;
}
I have also set up background-positions for the individual list-items because I'm using image sprites. Thanks in advance!
Apply that style to the #nav li a. Otherwise everything inside the li, including the link, is shifted off screen.
Related
The navigation bar (can be viewed here) has become misaligned in Google Chrome (latest version) without any change to the coding.
The large white space present between the two rows did not used to exist, nor did the further misalignment of the four far right links.
I am only of aware of this issue in Chrome - it displays correctly in Safari and Firefox.
Code:
A code snippet for the navigation bar in the header.php is below:
<center>
<div class="navholder">
<div class="navigate">
<ul class="navigate">
<li class="navigate">Home</li>
<li class="navigate">Bus Routes</li>
<li class="navigate">Maps & plans</li>
<li class="navigate">News</li>
<li class="navigate">Enthusiasts</li>
<li class="navigate">MyRoute</li>
<li class="navigate">Live updates</li>
<li class="navigate">Tickets</li>
</ul>
</div></div>
<div class="navigateopposite">
<ul class="navigateopposite">
<li class="navigateopposite">Free travel</li>
<li class="navigateopposite">Mobile</li>
<li class="navigateopposite">Operators</li>
<li class="navigateopposite">Using the bus</li>
<li class="navigateopposite">TBR Team</li>
<li class="navigateopposite">Contact</li>
<li class="navigateopposite">Advertising</li>
<li class="navigateopposite">About</li>
</ul>
</div></div>
</center>
CSS:
The related CSS is also here:
/*Navigation bar*/
.navigate ul{float:left;width:1050px;margin-top:1px;text-align:center;}
.navigate ul li{display:inline;}
.navigate ul li a{width:127px;background:url(../images/navbar.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigate ul li a:hover{color: #fff;}
.navigate ul li a:active{color:#FFF;}
.navigateopposite ul{float:left;width:1050px;margin-top:1px;}
.navigateopposite ul li{display:inline;}
.navigateopposite ul li a{width:127px;background:url(../images/navbaropposite.gif)center center no-repeat;color: #000;text-decoration:none;float:left;text-align:center;line-height:50px;font-size:20px;vertical-align:top;margin: 0 1px 0 0;}
.navigateopposite ul li a:hover{color: #fff;}
.navigateopposite ul li a:active{color:#FFF;}
Question:
What would be causing this strange misalignment?
Try adding this to your CSS
li.navigate, li.navigateopposite {
float: left;
margin: 0;
}
I added this through Chrome's developer tools and it seemed to remedy the problem.
This might fix it but seriously... as j08691 and David Thomas pointed out... that's some pretty crazy HTML you've got going on there. With nothing but good intentions, I hope you don't mind if I make a few comments?
You've got multiple <head>s in your document - you can only have one.
You're using <div> purely for layout purposes - if you need to add spaces in the layout you should be using pure CSS... HTML, as the name describes, is for markup only - not style information. By my reckoning you could lose at least half of that markup. As a generalisation, the more markup you have, the more difficulties you're going to get into like stuff apparently breaking randomly.
I can understand not wanting to support IE7 at a push, but all versions of IE?? ("Something not working? You're using Internet Explorer"). I know IE can be pretty hateful but you can't throw the book at 10% of all of your website visitors.
I hope this helps set you in the right direction.
How can I center the navbar on this page, while still keeping the background gradient? I've seen some tricks where the li is set to display inline, the a to display inline-block, and the ul to align the text in the center, but these require me to add float:none to the code, which breaks my background gradient. Could someone please shed some light?
Add two classes in markup (with optional names, just to override CSS). Lets call it .nav-container and .menu-nav.
<div class="navbar-inner">
<div class="container nav-container">
<ul class="nav menu-nav">
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
and then add in CSS
.nav-container {
text-align: center;
}
.menu-nav {
float: none;
}
I've changed that in my Chrome inspector, and background gradient looks same as before that.
ok, so developing a site for one of my friend's church using wordpress and I've run into a snag. I dont normally get all fancy with the nav bar, but I decided to take a swing at it... so here's what I'm doing:
nav bar background is a 1x64 pixel repeat-x. nav bar is actually a UL inline display. I want to have the background of each <li> tag be a static set image butted up next to each other for dynamic awesomeness. the problem: I cant force the background image to its full 100%. it is only as wide as the text is. The image size (made in photoshop) is 167x64 pixels. I cant center the links inside the <nav> tag horizontally and cannot get the <li> background the full size it's supposed to be. I've tried manually setting the height on everything in each level to be 64px as well as using verticle-align:middle; for the positioning I want and it's just really messing with my head #.#
site located at http://parnell.co/hurricane-church-of-god
page source:
<div class="nav-wrapper">
<!-- Nav -->
<nav>
<ul id="menu-nav-bar" class="menu">
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-18">Home</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">Sample Page</li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">Blog</li>
</ul> </nav>
<!-- /Nav -->
<br class="clear">
</div>
<!-- /nav-wrapper -->
CSS Source:
/******************************************************
* Navigation *
******************************************************/
div.nav-wrapper {
margin-top:-16px;
-moz-border-radius: 15px;
border-radius: 15px;
background:url(img/nav-bg.png) repeat-x;
height:64px;
vertical-align:middle;
}
div.nav-wrappter ul,
nav ul li {
float:left;
height:64px;
vertical-align:middle;
}
nav ul#menu-nav-bar li {
display: inline;
list-style-type: none;
vertical-align:middle;
background-image:url(img/nav-button.png);
background-size:100%;
background-repeat:no-repeat;
height:64px;
}
nav ul#menu-nav-bar li a {
text-decoration:none;
height:64px;
vertical-align:middle;
}
Please bear with my sloppiness in code, i've been trying to wrap my head around it all day and have more or less started from scratch on that one part like 8 times. Any help you can give would be greatly appreciated
Ok, thanks to #ahillman3, I was able to get my mind straight and figure it out. Great link btw. As well the typo... that was about the biggest issue because nothing would have worked right until that was fixed. Specifying the width for the <li> tag forced the buttons to behave correctly. And as for centering the text, the css attribute display:block; when applied to nav ul#menu-nav-bar li a {} was the key to making the <a> tag (a line object) behave like a div or table (a block object). after that, it was as simple as adding some margin to get the text center in the box.
thanks guys!
In Firefox, the clickable area of the links in my footer is TINY. The clickable area does not span the entire label - both in terms of width and height. In IE, it's fine. Any ideas?
Here is my footer code:
<div id="footer">
<ul>
<li>RKM Research and Communications, Inc. |</li>
<li>1039 Islington St |</li>
<li>Portsmouth, NH 03801 |</li>
<li>603.433.3982 |</li>
<li>email us</li>
</ul>
<ul class="copyright">
<li>© 2012 RKM Research and Communications, Inc. </li>
<li>Privacy policy </li>
<li>Terms of use</li>
</ul>
and my CSS:
div#footer ul li{
color : #036;
background-color : transparent;
display: inline
}
div#footer ul li a{
color : #115EAC;
text-decoration : none;
display:inline-block;
paddding:10px 20px;
}
.footer ul li a:hover{color:#F6901E;
text-decoration : underline;
}
I've even tried to apply a block style using a class, but it still did not help:
<li class="flink">email us</li>
</ul>
css:
.flink ul li a{
color : #115EAC;
text-decoration : none;
display:block;
paddding:10px 20px;
float:left;
}
Small world, I also live in Portsmouth.
With the code you provided, the clickable area is just as it should be. You can verify this here: http://jsfiddle.net/cCDaL/1/
I've made the background of each a element yellow, so you can see exactly what the clickable area is, and it is indeed what it should be.
I think the answer to your problem is that you have another CSS rule that is making the clickable area tiny, possibly line-height or padding (padding is not clickable in links). You can use the Chrome or Firefox inspectors to see what could be the problem here.
Another edit: In Firefox Aurora 14.0a2, the clickable area is indeed also normal, for me, on your website http://www.rkm-research.com/. Here's a screenshot with the Firefox inspector:
I am looking to style a list with images at the top and the bottom of the list. I know that in css3, there is the border-image property, however I need something that works in older browsers as well.
The list looks like this:
<ul>
<li> a </li>
<li> b </li>
</ul>
I need to have an image that comes before all the list items, and another one that comes after all the list items.
I know that I can do something like this:
<div id="top-image"></div>
<ul>
<li> a </li>
<li> b </li>
</ul>
<div id="bottom-image"></div>
Are there any better options than this?
May be you have to define bottom image in UL background & top image in first LI. like this:
ul{
background:url(bottom-image) no-repeat left bottom;
}
li{
background:url(bottom-image) no-repeat 0 0;
}
li + li{
background:none;
}
Check this example http://jsfiddle.net/CY5ck/