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:
#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:
<!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)
/* 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;
}
}