I am trying to use this image for the navigation but this is my first time working with sprites and I can't seem to get it to work. The main image shows up but the hover states do not work, and the cursor does not indicate that they are even links. I know there are other ways to do this without using an image sprite, but for the sake of troubleshooting, just pretend they don't exist.
I am a noob when it comes to html and css which doesn't help any either. If somebody can please tell me how stupid I am I would greatly appreciate it!
(It won't let me post the image)
<nav>
<ul id="main-navigation">
<li id="home">Home</li>
<li id="videos">Videos</li>
<li id="recentWork">Recent Work</li>
<li id="bio">Bio</li>
<li id="castingCall">Casting Call</li>
<li id="contact">Contact Me</li>
</ul>
</nav>
/CSS/
nav {
width: 100%;
}
#main-navigation {
background: url('images/nav_sprite2.jpg') no-repeat;
width: 612px;
height: 44px;
margin-left:auto;
margin-right:auto;
}
#main-navigation li, #mainNavigation a {
height: 45;
display: block;
}
#main-navigation li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#home { width: 53px; }
#videos { width: 64px; }
#bio { width: 29px; }
#recentWork { width: 127px; }
#castingCall { width: 125px; }
#contact { width: 116px; }
#home a:hover { background:url('images/nav_sprite2.jpg') 0px -45px no-repeat; }
#videos a:hover { background:url('images/nav_sprite2.jpg') -53px -45px no-repeat; }
#bio a:hover { background:url('images/nav_sprite2.jpg') -157px -45px no-repeat; }
#recentWork a:hover { background:url('images/nav_sprite2.jpg') -204px -45px no-repeat; }
#castingCall a:hover { background:url('images/nav_sprite2.jpg') -351px -45px no-repeat; }
#contact a:hover { background:url('images/nav_sprite2.jpg') -496px -45px no-repeat; }
/End CSS/
There are several problems with your CSS code:
#mainNavigation a should be #main-navigation a
#main-navigation li is assigned display:inline and later display:block. You need the latter in this case for the A elements to be as high as the LI elements..
height:45 should be height:45px
I think you need to take this line out: text-indent: -9999em;
It would be better to only use background-position in those #id a:hover rules and put the background: url(...) no-repeat in a rule for #main-navigation a:hover.
Related
I'm trying to create a menu which will have an image in the middle of it. For example three links to the left & three to the right of the image, each menu item also has to list all child pages.
The parent level menu items have to dynamically update the text based on what has been entered in the CMS but the user doesn't have to be able to reorder or add / remove items from the menu.
What is the best way of going about doing the above? My initial thought was to hard code all the pages & use get_permalink() to get the URLs encase they change but this wouldn't take all the requirements listed above into account.
Here Is Ans that you want. for details follow link
In Below example logo is outside from ul class but then also you can set logo in between li class. so logo in middle of menu.
HTML
<div id="header">
<a class="logo" href="index.html"><img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" /></a>
<ul>
<li>Home</li>
<li>Stats</li>
<li>Schedule</li>
<li>Store</li>
<li>Gallery</li>
<li>Roster</li>
</ul>
</div><!--end header-->
CSS
body {
font-family: Helvetica, Arial, Century;
font-size: 12px;
margin: 0;
background: url('images/bluebg.jpg') repeat-x top center;
}
#header {
background-color: #ffd727;
height: 40px;
position: relative;
margin: 150px auto 0;
}
#header ul {
margin: 0 auto;
width: 800px;
padding: 0;
list-style: none;
}
#header ul li {
float: left;
width: 97px;
}
#header ul li:nth-of-type(4) {
margin-left: 217px;
}
#header ul li a {
text-transform: uppercase;
text-decoration: none;
display: block;
text-align: center;
padding: 12px 0 0 0;
height: 28px;
}
#header ul li a:hover {
background: rgb(235,200,35);
}
.logo {
position: absolute;
left: 50%;
margin: -48px 0 0 -108px;
}
#media screen and (max-width: 800px) {
.logo {
bottom: 100%;
}
#header ul li:nth-of-type(4) {
margin-left: 0;
}
#header ul {
width: 600px;
position: relative;
}
}
For JS - Refer below This Link
http://codepen.io/wolfcry911/pen/HyLdg
Method 2
you can also do it with left and right different menu..but method 1 is best for wp
http://foundation.zurb.com/forum/posts/1832-logo-centered-in-top-bar
I'm trying to get a website up and I'm using CSS to get it designed but I am unfamiliar with navbars and getting stuff side by side. I used a "float: left" for my image (logo) and well the text aligned but, it seems like I cannot fully click on the image anymore since it's also something that can be clicked using the tag. So, any ideas? My code:
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
display: fixed;
}
#navbar img {
opacity: 1;
float: left;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul
{
position: relative;
list-style-type:none;
margin:0;
padding: 8px 0 0 0;
color: white;
font-size: 1.5em;
}
#navbar ul a
{
display:block;
width:60px;
}
#navbar li
{
display:inline;
}
HTML:
<div id="navbar">
<img src="logo.png"/>
<ul> <li>Hello</li> <li>World</li>
</ul>
</div>
Hi Please see the below html and css
HTML:
<div id="navbar">
<ul>
<li><img src="logo.png"/></li>
<li>Hello World</li>
</ul>
</div>
CSS:
#navbar {
width: 100%;
height: 40px;
background-color: black;
opacity: 0.7;
}
#navbar img {
opacity: 1;
}
#navbar img:hover {
opacity: 0.7;
}
#navbar img a
{
margin: 0;
padding: 0;
}
#navbar ul li
{
list-style-type:none;
margin:0;
padding: 8px;
color: white;
font-size: 1.5em;
}
#navbar ul li
{
display:inline-block;
}
Please check the jsfiddle: http://jsfiddle.net/Luncqwn3/3/
I have cleaned up your html and css
I have placed the logo ,as well as the text in the ul li and given
display:inline-block which will make them appear next to each other
in a single line.
Please try using hexadecimal codes for color like #000 or #fff
instead of specifying white,black,green etc.
There is no such thing as display:fixed, please see w3schools
site for better understandong.
I removed float:left for the img tag , because i achieved
bringing the logo and text next to each pther using
display:inline-block for the ul li.
can anyone help me find out what the problem is? I'm trying to make the active state of the css sprite work.
At the moment, it is not doing anything
HTML
<ul id="nav">
<li id="Contact">Contact</li>
<li id="Manual">Manual</li>
<li id="FAQ">FAQ</li>
</ul>
CSS
#nav {
background:url("../img/nav_final.png") no-repeat;
width: 372px;
height: 47.5px;
margin: 70px auto;
margin-bottom:25px;
padding: 0;
}
#nav li, #nav a {
height: 47.5px;
display: block;
}
#nav li {
float: left;
list-style: none;
display: inline;
text-indent: -9999em;
}
#Contact { width: 120px; }
#Manual { width: 140px; }
#FAQ { width: 112px; }
#Contact a:hover, #Contact a:active { background:url("../img/nav_final.png") 0px -47.5px no-repeat; }
#Manual a:hover, #Manual a:active { background:url("../img/nav_final.png") -118px -47.5px no-repeat; }
#FAQ a:hover, #FAQ a:active { background:url("../img/nav_final.png") -260px -47.5px no-repeat; }
Thanks for reading
The :active selector is when you have the mouse key pressed down. Not when you are at the actual link location.
Try defining the background-image on the links inside the nav. Also a background-repeat: no-repeat causes problems when using negative positioning.
Here is a reduced test-case
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>
Please see http://jeaffreygilbert.com/workatplayheader.html
and the accepted question answer CSS: How to make this topheader?
As you can see all links(services, toolbox, and so including the work[at]play logo + contact us) is in this:
(source: workatplay.com)
I wish to have normal html links.. so I have normal services. And it have anything to do with the sprite-nav.png.
Those already HMTL links, just wrapped with list. All you need to do is only modify the CSS.
I did it for you, you can replace old style with this one:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
font:13px Verdana;
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
color:white;
text-decoration:none;
padding:10px;
}
.header ul li:hover {
background:red;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 10px;
display: block;
}
ul#nav li.home {
float: right;
}
/* Sub Nav */
ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
}
ul#nav-sub li {
margin-top:10px;
}
ul#nav-sub li.contact {
float: right;
}
If you don't want to use CSS sprites, but instead use that nav bar as a whole image, then u can use map tag to create a map over that image with links to separate pages. Here comes an example:
<map id="headermap" name="headermap">
<area shape="rect" coords="43, 57, 119, 97" href="services.html" alt="Go to services" />
and so on...
</map>
<img src="07jVk.png" alt="" usemap="#headermap" />
Well, I'm not sure if I completely understand your question, but I hope it's what you're looking for.
For detailed information about map, please refer to W3Schools website.