Layout problems
Well, following my brother's suggestion, he helped me design the buttons on my site based on a tutorial posted here:
the problem here is that the buttons all looks messed up.
here are the buttons I want to implement:
the problem is that in both pages, the both ended up looking messed up.
Here's the CSS scripts for the respective pages:
(main)
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: 00;
}
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
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: 00;
}
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:
<?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:
<!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>
I'm still new to css but could it be a z-layer problem? There's examples of creating css image rollovers using a sprite-sheet here: http://www.w3schools.com/css/css_image_sprites.asp It's probarbly completly wrong but I tried :p
I don't really know, since my brother was the one who made it, but he maintained that he did the buttons evenly, and I did check and it seems to be have the same width and height, but I'm not really sure.
can anyone offer a solution? while I'm waiting, might as well make another menu. Now only if my brother stops playing Coldplay, I cant concentrate with those songs..
fuser, this is really getting out of hand. Telling us that you have a project and asking for help with one or two things that you just can't figure out on your own is all right. But, you have told us you have a project, you've asked for help with right about every little hitch and now you're even asking for help with html/css issues. Not only that, but now when you get a suggestion, your response is that you don't know and that it's your brother who made it for you. This is not how projects or making websites work, you can't just ask a third party for help with an issue you're supposed to resolve and especially not one you had someone else do to begin with. If you want help, don't tell us that you don't know and that your brother did it and then complain about the songs he's listening to. If he did it, get him to fix it or get a grasp on it yourself. Why are you doing this project anyhow if there is nothing about it that you can handle? Shouldn't you learn these things before you start on it? Or at least start working on it a long time before deadline so you have plenty of time and don't have to worry about hurrying up with figuring answers out?
Anyhow, if it was your brother who made it and you have no idea and can't figure out if a suggestion will work for you or not, get your brother to do it. We're not here to do your project or anything of the likes for you and this is getting really tiresome.
COM wrote: fuser, this is really getting out of hand. Telling us that you have a project and asking for help with one or two things that you just can't figure out on your own is all right. But, you have told us you have a project, you've asked for help with right about every little hitch and now you're even asking for help with html/css issues. This is not how projects or making websites work, you can't just ask a third party for help with an issue you're supposed to resolve and especially not one you had someone else do to begin with. Why are you doing this project anyhow if there is nothing about it that you can handle? Shouldn't you learn these things before you start on it? Or at least start working on it a long time before deadline so you have plenty of time and don't have to worry about hurrying up with figuring answers out? Wholeheartedly agree. I'd also like to add that, if I currently had the ability, I would have either greatly reduced or completely eliminated the OP; there's no need to post reams of CSS for something that was obviously copied from the URL posted.
That being said, CSS sprite-based navigation is WAY beyond what you're capable of right now, fuser.
I suggest you find a simpler tutorial on CSS top navigation with image buttons. Hell, you could even just know about CSS float and HTML img tags and do it yourself. Key thing here is to take baby steps.
For that matter, you could even just code the whole damn thing in tables and get some respect for the work, since you would have accomplished that simple task on your own. Then, once the "project" is over, learn the things that you're struggling with.