Hi guys, had my first go at doing proper html/css couple of days back and came up with this: http://dakkagaming.com/ I know the code is generally quite messy (especially the css) I'll organise it all when I have chance. But the main thing that is wrong with it at the moment is that the lovely drop shadow (if your using firefox) does not get shown in other browsers. Is there any easy way to fix this? This is the bit of code which does the shadow: #container { margin: 39px auto 0 auto; width: 800px; height: auto; /* positioning context for first menu inside masthead */ position: relative; background-color: #262626; font-family: sans-serif; /* apply box shadow */ -webkit-box-shadow: 15px 5px 50px 0; -moz-box-shadow: 15px 5px 50px 0; box-shadow: 15px 5px 50px 0; } Code (markup): Also, when people hover across the navigation bar it goes red which is nice, but is there an easy way to make it stay red once on that page? Thanks guys! HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>DAKKA</title> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> </head> <body> <div id="container"> <div id="logo"> <a href="http://dakkagaming.com"><img src="images/logo.png" alt="logo"/> </a> </div> <div id="mainMenu"> <ul> <li><div class="home"><a href="http://dakkagaming.com"></a></div></li> <li><div class="servers"><a href="http://servers.dakkagaming.com"></a></div></li> <li><div class="forum"><a href="http://forum.dakkagaming.com"></a></div></li> <li><div class="blog"><a href="http://blog.dakkagaming.com"></a></div> </li> </ul> </div> <div id="title"> <img src="images/title_bar.png" alt="title"/> </div> <div id="titletext"> <h2>Welcome to DAKKA gaming!</h2> <p>What's up! We're a bunch of guys with a dedicated server and too much time on our hands. A super active gaming community which spans a variety of games including TF2, Minecraft, HoN, Terraria, Brink and Quake. </p> <p>We're currently undergoing some exciting changes which are going to make Dakka an even more awesome place to hang out and play games!</p> </div> <div id="footer"> <ul><li><small><a href="http://dakkagaming.com">DAKKAgaming.com</a></small></li></ul> <ul> <li><a href="http://dakkagaming.com">Home</a></li> <li><a href="http://servers.dakkagaming.com">Servers</a></li> <li><a href="http://forum.dakkagaming.com">Forum</a></li> <li><a href="http://blog.dakkagaming.com">Blog</a></li> <li><a href="http://about.dakkagaming.com">About</a></li> <li><a href="http://contact.dakkagaming.com">Contact</a></li> </ul> </div> </div> </body> </html> Code (markup): CSS: (messy i know :3) /* Reset */ body,html { padding: 0; margin: 0; } /* Body */ body { font-family: "Arial", sans-serif; background:url('images/bg.png'); background-repeat:repeat-x; margin: 0px; padding:0px; } /* Logo */ #logo { margin-top:22px; margin-left: auto; margin-right: auto; margin-bottom: auto; width:500px; position:relative; } #mainMenu { margin-left: auto; margin-right: auto; padding: 0 0 0 0; margin-top: 20px; width:694px; } #mainMenu ul { list-style: none; margin: 0; padding: 0; } #mainMenu li { float:left; margin:0; padding:0; display:inline; } #mainMenu a{ font-family: "Arial", sans-serif; display: block; color: white; text-decoration: none; padding: 0px; margin: 0px; } #title { margin-top:110px; margin-left: auto; margin-right: auto; margin-bottom: auto; width:612px; } #titletext { margin-top:-68px; margin-left: auto; margin-right: auto; margin-bottom: auto; padding-left: 30px; width:612px; color:#f7f7f7; text-decoration: strong; } .home a { display: block; width: 172px; height: 45px; background: transparent url(images/nav/home.png) no-repeat; } .home a:hover { background-position: -172px 0; } .servers a { display: block; width: 172px; height: 45px; background: transparent url(images/nav/servers_nonactive.png) no-repeat; } .servers a:hover { background: transparent url(images/nav/servers_active.png) no-repeat; } .forum a { display: block; width: 172px; height: 45px; background: transparent url(images/nav/forum_nonactive.png) no-repeat; } .forum a:hover { background: transparent url(images/nav/forum_active.png) no-repeat; } .blog a { display: block; width: 172px; height: 45px; background: transparent url(images/nav/blog_nonactive.png) no-repeat; } .blog a:hover { background: transparent url(images/nav/blog_active.png) no-repeat; } #container { margin: 39px auto 0 auto; width: 800px; height: auto; /* positioning context for first menu inside masthead */ position: relative; background-color: #262626; font-family: sans-serif; /* apply box shadow */ -webkit-box-shadow: 15px 5px 50px 0; -moz-box-shadow: 15px 5px 50px 0; box-shadow: 15px 5px 50px 0; } #content { width: 70%; margin: 0 auto; } #footer { border-top: 1px solid #656565; padding: .5em 0 1em 0; margin: 0 auto; margin-top: 35px; width: 60%; color: #656565; } #footer small { text-align: center; width: 100%; display: block; color: inherit; margin-bottom: .25em; } #footer ul { list-style: none; text-align: center; margin: 0; padding: 0; } #footer li { display: inline-block; } * html #footer li { display: inline; } *+html #footer li { display: inline; } #footer li:before { content: " - "; } #footer li:first-child:before { content: ""; } #footer li a { color: inherit; text-decoration: none; font-size: small; } #footer li a:hover { color: red; } #servers {width: 560px; left:50%; margin-left:115px; padding-top: 1px; } } Code (markup):
The "0" at the end of those 3 lines of box-shadow should be #000, like: -webkit-box-shadow: 15px 5px 50px #000; -moz-box-shadow: 15px 5px 50px #000; box-shadow: 15px 5px 50px #000; And if you add a class something like "current" or "active" to the DIV inside <li> of the navigation like: <div class="home active"><a href="http://dakkagaming.com"></a></div> and change CSS like: .home a:hover, .home.active a { background-position: -172px 0; } it will make your active red menu state stay on that particular page. PS: You don't really need DIVs inside of those Lis, just use classes directly on <li>, I have already pointed this out to you in another thread.
Thanks for replying! Did that but still, it doesnt work in IE. Probably because other browsers dont fully support CCS3 i guess! Hmm, if I dont use divs inside my li's how am I supposed to format it? You also used divs in your example above? Slightly confused now..
Yes, unfortunately IE8 and below don't have support for box-shadow. IE9 will display it just fine. Don't revert back changes just yet, keep those changes in box-shadow I mentioned, at least they'll work in major browsers. If you have this markup instead it will work fine too: <ul> <li class="home active"><a href="http://dakkagaming.com"></a></li> <li class="servers"><a href="http://servers.dakkagaming.com"></a></li> <li class="forum"><a href="http://forum.dakkagaming.com"></a></li> <li class="blog"><a href="http://blog.dakkagaming.com"></a></li> </ul> HTML:
Thanks that worked, also worked with servers page with only putting in the new html and the .home a:hover, .home.active a { background-position: -172px 0; } Code (markup): Can't say I understand why it worked for the serverspage too but oh well - it works! Thanks
Are you changing code in the live site or in a local test environment? Because I don't see anything changed on the site.
You should see a difference now: www.dakkagaming.com Thanks for your help! edit: loool. just clicked that link ^ doesnt seem to work however as soon as you click the logo it shows.. :s but the url stays the same.. now im confused.....