Follow us on Twitter!
Hacking isn't just Computers & Exploits. It's a Philosophy. - Mr_Cheese
Friday, April 18, 2014
Navigation
Home
HellBoundHackers Main:
HellBoundHackers Find:
HellBoundHackers Information:
Learn
Communicate
Submit
Shop
Challenges
HellBoundHackers Exploit:
HellBoundHackers Programming:
HellBoundHackers Think:
HellBoundHackers Track:
HellBoundHackers Patch:
HellBoundHackers Other:
HellBoundHackers Need Help?
Other
Members Online
Total Online: 29
Guests Online: 28
Members Online: 1

Registered Members: 82828
Newest Member: uberscon
Latest Articles
View Thread

HellBound Hackers | Computer General | Webmasters Lounge

Author

Layout problems

fuser
Member



Posts: 960
Location: in front of a computer (duh)
Joined: 05.04.07
Rank:
Mad User
Posted on 21-02-10 12:48
Well, following my brother's suggestion, he helped me design the buttons on my site based on a tutorial posted here:

http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

the problem here is that the buttons all looks messed up.

here are the buttons I want to implement:

(homepage)
img717.imageshack.us/img717/3945/mainmenubutton.th.jpg

(artist page)
img41.imageshack.us/img41/1425/genrebutton.th.jpg

the problem is that in both pages, the both ended up looking messed up.

(main)
img85.imageshack.us/img85/8366/buttonprob.th.png

(artist)
img41.imageshack.us/img41/7089/buttonprob3.th.png

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: 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
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: 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:

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>






img.userbarz.com/51/10006.png
img.userbarz.com/146/29144.gif
img.userbarz.com/99/19602.jpg
img.userbarz.com/4/600.png
img.userbarz.com/45/8814.gif
img360.imageshack.us/img360/9231/bfbarlr0.jpg
[url=http://userbarz.com/][img]ht
catinthecpu@hotmail.com
Author

RE: Layout problems

yours31f
Member



Posts: 1678
Location: Dallas Texas
Joined: 27.04.07
Rank:
Elite
Posted on 21-02-10 14:12
You could have 1 of 2 problems. 1) padding in cells or 2) images are not cropped right.


Debugging is what programmers do to beta software to make it take up more room on your hard drive if it is running too efficiently.


img259.imageshack.us/img259/3713/sigr.png

yours31f@live.com yours31f@yahoo.com rpwd.info
Author

RE: Layout problems

NotMyFault
Member

Your avatar

Posts: 68
Location:
Joined: 23.12.09
Rank:
Newbie
Posted on 21-02-10 14:18
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.w3scho. . .prites.asp
It's probarbly completly wrong but I tried Pfft


Author

RE: Layout problems

fuser
Member



Posts: 960
Location: in front of a computer (duh)
Joined: 05.04.07
Rank:
Mad User
Posted on 21-02-10 14:23
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..




img.userbarz.com/51/10006.png
img.userbarz.com/146/29144.gif
img.userbarz.com/99/19602.jpg
img.userbarz.com/4/600.png
img.userbarz.com/45/8814.gif
img360.imageshack.us/img360/9231/bfbarlr0.jpg
[url=http://userbarz.com/][img]ht

Edited by fuser on 21-02-10 14:31
catinthecpu@hotmail.com
Author

RE: Layout problems


Member

Your avatar

Posts:
Location:
Joined: 01.01.70
Rank:
Guest
Posted on 21-02-10 16:37
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.


Author

RE: Layout problems


Member

Your avatar

Posts:
Location:
Joined: 01.01.70
Rank:
Guest
Posted on 21-02-10 23:27
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.


Author

RE: Layout problems

fuser
Member



Posts: 960
Location: in front of a computer (duh)
Joined: 05.04.07
Rank:
Mad User
Posted on 22-02-10 00:44
Actually, after some consideration, i just ditched the whole thing and made a new drop-down menu using js and css. Doesn't look flashy but its nice to look at. Lock the thread, ok?


img.userbarz.com/51/10006.png
img.userbarz.com/146/29144.gif
img.userbarz.com/99/19602.jpg
img.userbarz.com/4/600.png
img.userbarz.com/45/8814.gif
img360.imageshack.us/img360/9231/bfbarlr0.jpg
[url=http://userbarz.com/][img]ht
catinthecpu@hotmail.com