...

View Full Version : Help Please



Decker
08-26-2010, 07:05 PM
Alright I ran into another problem I can't seem to fix. Look at this picture:

http://img822.imageshack.us/img822/3142/34024383.jpg

As you can see the buttons ain't directly on the nav. How can I center them on there?

style.css

body {
font-family: FANTASY;
background-color: #000000;
font-size:100%;
}

#container {
width: 600px;
margin:43px auto 0;
}

#header {
width: 600px;
height: 110px;
background-image:url(images/1.png);
margin: -24px auto;
}

#nav {
width: 600px;
height: 45px;
background-image:url(images/1.png);
margin: 50px auto;
}

#menu {
list-style:none;
}

#menu a{position: relative; float: left; display: block; background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: -6px 5px 0px 5px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">

<div id="header"> </div>

<div id="nav">

<div id="menu">

<div class="menu">

<a href="index.html"><span>Home</span></a>
<a href="register.html"><span>Register</span></a>
<a href="download.html"><span>Downloads</span></a>
<a href="support.html"><span>Donate</span></a>
<a href="forum"><span>Forum</span></a>
<a href="forum"><span>Vote</span></a>
<a href="forum"><span>Contact</span></a>

</div>
</div>
</div>

</body>
</html>

Decker
08-26-2010, 07:51 PM
Alright I kind of have that fixed but now I have another problem, check it out:

http://img201.imageshack.us/img201/66/33470979.jpg

index.html is the same, but here is the new css:


body {
font-family: FANTASY;
background-color: #000000;
font-size:100%;
}

#container {
width: 600px;
margin:43px auto 0;
}

#header {
width: 600px;
height: 110px;
background-image:url(images/1.png);
margin: -24px auto;
}

#nav {
width: 600px;
height: 45px;
background-image:url(images/1.png);
margin: 50px auto;
}

#menu {
list-style:none;
}

#menu a{position: relative; float: left; background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: 5px 5px 5px 6px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

teedoff
08-27-2010, 12:33 AM
Study your margins in the old CSS and the New. You obviously changed some of them to move the tabs down. So if you part of the button positions, you may need to change the other parts to match. Study it out and think about it.

Decker
08-27-2010, 12:48 AM
I have been trying to all day. I cannot figure it out.

Doctor_Varney
08-27-2010, 03:26 AM
What's all that stuff in orange at the bottom?

I can't understand relative positioning, myself - but I do know, that when I've used it, the whole thing goes tits-up. I don't know what the hell I'm doing with CSS, but I would advise not trying to mix relative positioning with floats. I don't think it works and that's why this is happening. Instead, remove the positional attribute altogether, keep the floats and use margins and padding to position the bits and pieces of your menu.

But you don't have to listen to me. As you can see from my sig, I'm crap at CSS.

Dr. V

teedoff
08-27-2010, 03:34 AM
His tabs are made up of two images and he changed some of his margins on one of the images but didnt't change the margins for the other image to compensate. At least I think thats what happened. Im not that good at CSS either. lol

Decker
08-31-2010, 03:13 AM
#Bump

Couple days have passed now and am still having the same issue. Can someone help please?

Decker
09-01-2010, 12:10 AM
#bump

Still needing help........

Decker
09-01-2010, 06:21 PM
#bump again....

Can someone please help me now?

Decker
09-03-2010, 07:42 PM
#bump..................................................

teedoff
09-03-2010, 09:16 PM
Old CSS


#menu a{position: relative; float: left;
display: block;
background: url("images/menuLink.gif") bottom left no-repeat;
padding: 6px 0px 0px 0px;
height: 25px; text-decoration: none;
font-size: 15px; color: #afafaf;}
#menu span{position: relative;
display: block;
margin: -6px 5px 0px 5px;
padding: 4px 15px 0px 10px;
height: 27px;
background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

New CSS


#menu a{position: relative;
float: left;
background: url("images/menuLink.gif") bottom left no-repeat;
padding: 6px 0px 0px 0px;
height: 25px;
text-decoration: none;
font-size: 15px; color: #afafaf;}

#menu span{position: relative;
display: block;
margin: 5px 5px 5px 6px;
padding: 4px 15px 0px 10px;
height: 27px;
background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

the margin values have been changed in the new CSS. Again I think the tabs you are using are created with two images, hence when you changed the margins for one part of the tabs, the other part or image of the tabs were not changed and therefore stay in the original positions. Play around with some of the margins in your CSS. Trial and error can TEACH alot.

Decker
09-04-2010, 07:49 AM
Still doesn't work.

Here is the site (http://www.multiupload.com/S0J0OV5DWN)

abduraooft
09-04-2010, 07:57 AM
Here is the site (http://www.multiupload.com/S0J0OV5DWN)
Would you please post a link to online version? You may even use a free host like freehostia.com

Decker
09-05-2010, 05:28 AM
Would you please post a link to online version? You may even use a free host like freehostia.com

I don't have it setup yet to a website online.

wildreason
09-05-2010, 09:54 AM
Could you post the entire CSS file?

Decker
09-05-2010, 05:32 PM
body {
font-family: FANTASY;
background-color: #000000;
font-size:100%;
}

#container {
width: 600px;
margin:43px auto 0;
}

#header {
width: 600px;
height: 110px;
background-image:url(images/1.png);
margin: -24px auto;
}

#nav {
width: 600px;
height: 45px;
background-image:url(images/1.png);
margin: 50px auto;
}

#menu {
list-style:none;
}

#menu a{position: relative; float: left; background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: 5px 5px 5px 6px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

Decker
09-07-2010, 05:49 PM
#bump

Alright guys. I really need help. I turned it into a site. Here is the link:

http://ddeckerweb.net16.net/

Here is the website files:

http://www.multiupload.com/6WGWPHX8A0

Here is the style.css:

body {
font-family: FANTASY;
background-color: #000000;
font-size:100%;
}

#container {
width: 600px;
margin:43px auto 0;
}

#header {
width: 600px;
height: 110px;
background-image:url(images/1.png);
margin: -24px auto;
}

#nav {
width: 600px;
height: 45px;
background-image:url(images/1.png);
margin: 50px auto;
}

#menu {
list-style:none;
}

#menu a{position: relative; float: left; background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
#menu span{position: relative; display: block; margin: 5px 5px 5px 6px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}


Here is the index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">

<div id="header"> </div>

<div id="nav">

<div id="menu">

<div class="menu">

<a href="index.html"><span>Home</span></a>
<a href="register.html"><span>Register</span></a>
<a href="download.html"><span>Downloads</span></a>
<a href="support.html"><span>Donate</span></a>
<a href="forum"><span>Forum</span></a>
<a href="forum"><span>Vote</span></a>
<a href="forum"><span>Contact</span></a>

</div>
</div>
</div>

</body>
</html>

Thank you everyone.

SB65
09-07-2010, 06:12 PM
OK. Try:


#menu a {
background:url("images/menuLink.gif") no-repeat scroll left bottom transparent;
color:#AFAFAF;
float:left;
font-size:15px;
height:31px;
padding-left:5px;
position:relative;
text-decoration:none;
}

#menu a span{
background:url("images/menuSpan.gif") repeat scroll right bottom transparent;
display:block;
height:27px;
margin:0;
padding:4px 15px 0 10px;
}

#menu {
list-style:none outside none;
margin:0 22px;
}

#nav {
background-image:url("images/1.png");
height:34px;
margin:50px auto;
padding-top:11px;
width:600px;
}

It's just the padding and margins that were the problem. In particular the margin on #menu a span was causing most of the misalignment.

teedoff
09-07-2010, 06:52 PM
Old CSS


#menu a{position: relative; float: left;
display: block;
background: url("images/menuLink.gif") bottom left no-repeat;
padding: 6px 0px 0px 0px;
height: 25px; text-decoration: none;
font-size: 15px; color: #afafaf;}
#menu span{position: relative;
display: block;
margin: -6px 5px 0px 5px;
padding: 4px 15px 0px 10px;
height: 27px;
background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

New CSS


#menu a{position: relative;
float: left;
background: url("images/menuLink.gif") bottom left no-repeat;
padding: 6px 0px 0px 0px;
height: 25px;
text-decoration: none;
font-size: 15px; color: #afafaf;}

#menu span{position: relative;
display: block;
margin: 5px 5px 5px 6px;
padding: 4px 15px 0px 10px;
height: 27px;
background: url("images/menuSpan.gif") bottom right;}
#menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
#menu a:hover span{ background: url("images/menuSpan.gif") top right;}

the margin values have been changed in the new CSS. Again I think the tabs you are using are created with two images, hence when you changed the margins for one part of the tabs, the other part or image of the tabs were not changed and therefore stay in the original positions. Play around with some of the margins in your CSS. Trial and error can TEACH alot.



Decker, I suggested this days ago. And I suggested you play around with the margins. Change the margins in the menu span. then if it doesnt look right, change them again. If they dont move, then change them back. The only way to learn is to do this stuff for yourself. Anyway hope you have it figured out.

Decker
09-07-2010, 08:00 PM
@SB65:
Does not work still. Thank you though.

@teedoff:
Believe me, I have messed around with EVERYTHING in the CSS to try to fix this proble, and still can't seem to come across it.

Still needing an answer.

SB65
09-07-2010, 08:17 PM
@SB65:
Does not work still.


Yes it does. This (http://simonbattersby.com/test/decker.htm) is exactly what I posted before.

Decker
09-07-2010, 08:53 PM
Holy crap, thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum