Feb 21 2010, 08:50 PM, updated 16y ago
http://net.tutsplus.com/tutorials/html-css...avigation-menu/
the problem here is that the buttons all looks messed up.
here are the buttons I want to implement:
(homepage)
(artist page)
the problem is that in both pages, the both ended up looking messed up.
(main)
(artist)
Here's the CSS scripts for the respective pages:
(main)
CODE
html {
margin: 0;
padding: 0;
}
body {
background: #CDC2B3 url(images/bg.gif);
text-align: center;
color: #5F3E2F;
font: 11px verdana, sans-serif;
margin: 0px;
padding: 20px 0px 20px 0px;
}
a {
color: #5F3E2F;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #1D110B;
text-decoration: underline;
}
img {
border: 0px;
}
#wrapper {
width: 778px;
margin: auto;
text-align: left;
}
#header p {
font-size:18px;
font-style:italic;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
}
#header p.more {
padding-right: 22px;
}
#header {
height: 320px;
background: url(images/header1.jpg) no-repeat;
}
#header div {
padding: 183px 213px 0px 82px;
}
#header p {
margin: 0px;
padding: 0px;
}
#header a {
color:#FFFFFF;
}
#nav
{
background: url(images/slice.jpg) repeat-x;
width:100%;
height:70px;
}
#navigation
{
margin-left:250px;
}
#navigation li
{
float:left;
display:block;
}
#navigation li a
{
background-image:url(images/mainmenubutton.jpg);
display: block;
outline: none;
position: relative;
height: 70px;
text-decoration: none;
width: auto;
}
#navigation .home
{
background-position:0px 0px;
width:102px;
height:70px;
}
#navigation .artists
{
background-position:-102px 0px;
width:110px;
height:70px;
}
#navigation .login
{
background-position:-212px 0px;
width:108px;
height:70px;
}
#navigation .upload
{
background-position:-320px 0px;
width:102px;
height:70px;
}
#navigation .download
{
background-position:-422px 0px;
width:103px;
height:70px;
}
#navigation .gigs
{
background-position:-525px 0px;
width:103px;
height:70px;
}
#navigation a .hover {
background: transparent url(images/mainmenubutton.jpg) no-repeat;
display:block;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#navigation .home .hover {
background-position: -0px -72px;
}
#navigation .artists .hover{
background-position: -102px -72px;
}
#navigation .login .hover {
background-position: -212px -72px;
}
#navigation .upload .hover {
background-position: -320px -72px;
}
#navigation .download .hover {
background-position: -422px -72px;
}
#navigation .gigs .hover {
background-position: -422px -72px;
}
.lastchild {
border-right: none 0px !important;
}
#body {
background: url(images/body_bg.gif) repeat-y;
clear: both;
width: 100%;
}
#body-top {
background: url(images/body_top.gif) no-repeat;
}
#body-bot {
background: bottom url(images/body_bot.gif) no-repeat;
padding: 21px 25px 15px 42px;
}
#about-box {
float: left;
width: 315px;
}
#about-box ul {
margin-left: 8px;
}
#express-box {
float: right;
width: 327px;
}
#foot {
width: 738px;
margin-left: 20px;
background: url(images/foot_bg.gif) repeat-y;
}
#foot-top {
background: url(images/foot_top.jpg) no-repeat;
}
#foot-bot {
background: bottom url(images/foot_bot.gif) no-repeat;
padding: 13px 21px 12px 28px;
}
#what-box {
float: left;
width: 332px;
}
#what-box img.left {
margin-left: 10px;
}
#what-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#news-box {
float: right;
width: 316px;
}
#news-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#footer {
margin: 14px;
text-align: center;
}
h2 {
margin: 0px;
padding: 0px 0px 10px 0px;
font:Arial, Helvetica, sans-serif;
font-size:20px;
color:#D6D6D6;
}
h2 b{
color:#341c12;
}
ul {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px 0px 5px 20px;
list-style: none;
background: 0px 3px url(images/bullet.gif) no-repeat;
}
p {
margin-top: 0px;
margin-bottom: 10px;
}
div.narrow-text {
margin-right: 18px;
}
img.left {
float: left;
padding-right: 14px;
padding-bottom: 16px;
}
#body p.more {
padding-top: 6px;
}
#news-box p.more {
padding-top: 0px;
margin-top: 0px;
}
p.more {
text-align: right;
}
.clear {
clear: both;
}#wrapper #body #body-top #body-bot #about-box h2 b {
font-family: "Zag Bold";
}
#wrapper #body #body-top #body-bot #about-box h2 b {
font-family: "Zag Bold";
}
h2 {
font-family: "Zag Bold";
color: #000;
}
h2 {
font-size: 24px;
}
#wrapper #body #body-top #body-bot #about-box h2 b {
font-size: 24px;
}
#wrapper #foot #foot-top #foot-bot #what-box h2 b {
font-size: 24px;
}
#wrapper #foot #foot-top #foot-bot #news-box h2 b {
font-size: 24px;
}
artists
CODE
html {
margin: 0;
padding: 0;
}
body {
background: #CDC2B3 url(images/bg.gif);
text-align: center;
color: #5F3E2F;
font: 11px verdana, sans-serif;
margin: 0px;
padding: 20px 0px 20px 0px;
}
a {
color: #5F3E2F;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #1D110B;
text-decoration: underline;
}
img {
border: 0px;
}
#wrapper {
width: 778px;
margin: auto;
text-align: left;
}
#header p {
font-size:18px;
font-style:italic;
color:#FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
}
#header p.more {
padding-right: 22px;
}
#header {
height: 320px;
background: url(images/header1.jpg) no-repeat;
}
#header div {
padding: 183px 213px 0px 82px;
}
#header p {
margin: 0px;
padding: 0px;
}
#header a {
color:#FFFFFF;
}
#nav
{
background: url(images/slice.jpg) repeat-x;
width:100%;
height:70px;
}
#navigation
{
margin-left:250px;
}
#navigation li
{
float:left;
display:block;
}
#navigation li a
{
background-image:url(images/mainmenubutton.jpg);
display: block;
outline: none;
position: relative;
height: 70px;
text-decoration: none;
width: auto;
}
#navigation .home
{
background-position:0px 0px;
width:102px;
height:70px;
}
#navigation .artists
{
background-position:-102px 0px;
width:110px;
height:70px;
}
#navigation .login
{
background-position:-212px 0px;
width:108px;
height:70px;
}
#navigation .upload
{
background-position:-320px 0px;
width:102px;
height:70px;
}
#navigation .download
{
background-position:-422px 0px;
width:103px;
height:70px;
}
#navigation .gigs
{
background-position:-525px 0px;
width:103px;
height:70px;
}
#navigation a .hover {
background: transparent url(images/mainmenubutton.jpg) no-repeat;
display:block;
opacity: 0;
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#navigation .home .hover {
background-position: -0px -72px;
}
#navigation .artists .hover{
background-position: -102px -72px;
}
#navigation .login .hover {
background-position: -212px -72px;
}
#navigation .upload .hover {
background-position: -320px -72px;
}
#navigation .download .hover {
background-position: -422px -72px;
}
#navigation .gigs .hover {
background-position: -422px -72px;
}
.lastchild {
border-right: none 0px !important;
}
#body {
background: url(images/body_bg.gif) repeat-y;
clear: both;
width: 100%;
}
#body-top {
background: url(images/body_top.gif) no-repeat;
}
#body-bot {
background: bottom url(images/body_bot.gif) no-repeat;
padding: 21px 25px 15px 42px;
}
#about-box {
float: left;
width: 315px;
}
#about-box ul {
margin-left: 8px;
}
#express-box {
float: right;
width: 327px;
}
#foot {
width: 738px;
margin-left: 20px;
background: url(images/foot_bg.gif) repeat-y;
}
#foot-top {
background: url(images/foot_top.jpg) no-repeat;
}
#foot-bot {
background: bottom url(images/foot_bot.gif) no-repeat;
padding: 13px 21px 12px 28px;
}
#what-box {
float: left;
width: 332px;
}
#what-box img.left {
margin-left: 10px;
}
#what-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#news-box {
float: right;
width: 316px;
}
#news-box ul {
float: left;
margin-left: 2px;
width: 184px;
}
#footer {
margin: 14px;
text-align: center;
}
h2 {
margin: 0px;
padding: 0px 0px 10px 0px;
font:Arial, Helvetica, sans-serif;
font-size:20px;
color:#D6D6D6;
}
h2 b{
color:#341c12;
}
ul {
margin: 0px;
padding: 0px;
}
li {
margin: 0px;
padding: 0px 0px 5px 20px;
list-style: none;
background: 0px 3px url(images/bullet.gif) no-repeat;
}
p {
margin-top: 0px;
margin-bottom: 10px;
}
div.narrow-text {
margin-right: 18px;
}
img.left {
float: left;
padding-right: 14px;
padding-bottom: 16px;
}
#body p.more {
padding-top: 6px;
}
#news-box p.more {
padding-top: 0px;
margin-top: 0px;
}
p.more {
text-align: right;
}
.clear {
clear: both;
}#wrapper #body #body-top #body-bot #about-box h2 b {
font-family: "Zag Bold";
}
#wrapper #body #body-top #body-bot #about-box h2 b {
font-family: "Zag Bold";
}
h2 {
font-family: "Zag Bold";
color: #000;
}
h2 {
font-size: 24px;
}
#wrapper #body #body-top #body-bot #about-box h2 b {
font-size: 24px;
}
#wrapper #foot #foot-top #foot-bot #what-box h2 b {
font-size: 24px;
}
#wrapper #foot #foot-top #foot-bot #news-box h2 b {
font-size: 24px;
}
here's the site design for the main and artist page:
CODE
<?php
if(!isset($_SESSION)){
session_start();
}
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Online music scene site</title>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<p>This is a site dedicated to the local music scene, and this site caters to all underground musicians.</p>
</div>
</div>
<div id="nav">
<ul id="navigation">
<li><a href="index.php">Home</a></li>
<li><a href="artist.html">Artists</a></li>
<li><a href="login.php">Login</a></li>
<li><a href="upload.html">Upload</a></li>
<li><a href="music">Download</a></li>
<li><a href="online mplayer gigs page.html">Gigs</a></li>
</ul>
</div>
<div id="body">
<div id="body-top">
<div id="body-bot">
<div id="about-box">
<h2><b>About </b>this site</h2>
<img src="images/pic1.jpg" width="112" height="92" alt="Pic 1" class="left" />
<p>This site is wholly dedicated to the local scene, and the genres offered on this site are the most popular in the scene.</p>
<p>We try to cater for our visitors, and user submissions are more than welcome.</p>
<ul>
<li>The bands we specialize here are underground bands, as they also deserve recognition for their services to the lcoal scene. </li>
<li>We aim to be the online hub for the local music scene, since many sites are scattered and many are also genre-centric. </li>
<li>It should be noted, however, that we will not permit offensive material on this site. . </li>
</ul>
</div>
<div id="express-box">
<h2>Disclaimer</h2>
<img src="images/logo.gif" width="112" height="92" alt="Pic 2" class="left" />
<p>DO NOT:</p>
<p>POST OFFENSIVE MATERIAL</p>
<p>POST COPYRIGHTED MATERIAL</p>
<p>FLAME ADMINS AND OTHER USERS.</p>
<p>POST LINKS TO OFFENSIVE AND COPYRIGHTED MATERIAL.</p>
<div class="narrow-text">
<p> </p>
<p> </p>
</div>
<p class="more"> </p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="foot">
<div id="foot-top">
<div id="foot-bot">
<div id="what-box">
<h2><b>What</b> we offer</h2>
<img src="images/pic_3.jpg" width="86" height="77" alt="Pic 3" class="left" />
<ul>
<li>A site where you can find the best bands in the local scene.</li>
<li>MP3's available for both streaming and download.</li>
<li>List of upcoming gigs</li>
<li>More features coming soon</li>
</ul>
</div>
<div id="news-box">
<h2><b>News</b> & events</h2>
<img src="images/pic_4.jpg" width="86" height="77" alt="Pic 4" class="left" />
<ul>
<li>Website Launched</li>
<li><a href="http://www.freewebsitetemplates.com">Check gigs page for upcoming events</a></li>
</ul>
<p class="more clear"> </p>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">
<p> </p>
</div>
</div>
</body>
</html>
and artist:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="artstyle.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sprite.js"></script>
<meta http-equiv="Content-Type" content="text/.; charset=utf-8" />
<title>Artists</title>
</head>
<body>
<div id="nav">
<ul id="navigation">
<li><a class="rock" href="genres/rock.html"></a></li>
<li><a class="hardcore" href="genres/hardcore.html"></a></li>
<li><a class="punk" href="genres/punk.html"></a></li>
</ul>
</div>
</body>
</html>
Quote
0.0174sec
1.88
5 queries
GZIP Disabled