CSS Hacks

Discussion in 'CSS' started by lolage, Jul 21, 2011.

  1. #1
    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):
     
    lolage, Jul 21, 2011 IP
  2. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    developerpanda, Jul 21, 2011 IP
  3. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #3
    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.. :D
     
    lolage, Jul 21, 2011 IP
  4. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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:
     
    developerpanda, Jul 21, 2011 IP
  5. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #5
    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! :D
    Thanks
     
    lolage, Jul 21, 2011 IP
  6. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #6
    nvm I was being stupid - it wasnt working for servers too. fixed it for everything! thanks :)
     
    lolage, Jul 21, 2011 IP
  7. kashmirhouseboats

    kashmirhouseboats Peon

    Messages:
    14
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Its not working for me....
    may be I hv made some error, gotta chk each and every thing again
     
    kashmirhouseboats, Jul 21, 2011 IP
  8. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Are you changing code in the live site or in a local test environment? Because I don't see anything changed on the site.
     
    developerpanda, Jul 21, 2011 IP
  9. lolage

    lolage Active Member

    Messages:
    1,129
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    78
    #9
    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.....
     
    lolage, Jul 21, 2011 IP
  10. developerpanda

    developerpanda Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Oh yes! Quite nice :)
     
    developerpanda, Jul 21, 2011 IP