SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Hacks

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Hacks

    Hi guys, had my first go at doing proper html/css couple of days back and came up with this: DAKKA

    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:
    Code:
    #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;
    }
    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:
    Code:
    <!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>
    CSS: (messy i know :3)
    Code:
    /* 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;
    	}
    	}

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The only way to fix the shadow is to make a transparent PNG with the shadow in it as only CSS3 compliant browsers support it, you can see what browsers are CSS3 compliant by visiting HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support and CSS - Contents and compatibility

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by lolage View Post
    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?
    There's no way to use CSS alone to highlight the current page on a navigation menu. You need to add a hook in the HTML. The most simplest way is to simply add id="current" to the relevant item, and style it from that.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    The only way to fix the shadow is to make a transparent PNG with the shadow in it as only CSS3 compliant browsers support it, you can see what browsers are CSS3 compliant by visiting HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support and CSS - Contents and compatibility
    Fair enough, this is what I was going to do but thought it'd be a long way of doign things!

    Quote Originally Posted by Stevie D View Post
    There's no way to use CSS alone to highlight the current page on a navigation menu. You need to add a hook in the HTML. The most simplest way is to simply add id="current" to the relevant item, and style it from that.
    Hmm thanks, had a litle play but struggling abit? Do you know of any tutorial that may be able to help?

    Thanks!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,722
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lolage View Post

    Hmm thanks, had a litle play but struggling abit? Do you know of any tutorial that may be able to help?

    Thanks!
    { visibility: inherit; } Highlight Current Page Plus!
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •