CSS Trouble...

[vrufusx65v]

Okay i got a little sprite navbar problem; i can only see the home button in all its states, but when i hover over where the other buttons should be i can see their alt "mouse-over" text but not the button??? how do i fix my navbar?

if you spot anything else that needs attention (like my search bar on the top) please feel free to comment about those as well...

 

[mattura]

It might be easier for us to see if you have a test url with your files all uploaded...we can always view the source. I don't have any of your images, so it's hard to get an impression of the look of the site, let alone the hover images...
I would check that you have all your buttons on the server, that they are spelt correctly (case sensitive), and that you can access them by typing the url directly in the address bar. (eg http://www.cykstudios.net/wherever_you_are/img/navbar.png)

 

[vrufusx65v]

Okay, it's set up: testgrounds.cykstudios.net

 

[prime1999]

It's because the rest of the pictures should have a negative x-position (I think you missed the negative sign).

So it should be:

ul#navigation li#forums {
background-position: -65px 0px;
}

ul#navigation li#forums:hover {
background-position: -65px -35px;
}

ul#navigation li#forums.current, ul#navigation li#forums:active {
background-position: -65px -70px;
}

and etc.

 

[vrufusx65v]

wow, after re-typing that section of code countless times... at least it works now, except for the tutorials button, its slightly larger than the other buttons. how would i go about changing that specific button to see all of the buttons clearly?

secondly, i'm trying to shrink the space in between the buttons, i have tried re-sizing the ul#navigation width, but it just stacks the buttons. I would like to have about 2-3px of space between the buttons.

also, how would one go about making a custom search bar [like mine in the top right]. I basically want a transparent text box inside [or in this case on top of] the image i have currently...

 

[mattura]

what tutorials button? (I can't see one) If you use an image, best bet is probably to check the image is the same size as the others. If not, assuming you have the same styling for each button, you only have the text width that could be different. A fixed width button could combat this.

It looks like you have a space after each of the links. Remove this space and your buttons will close up. Then style them with 'margin:3px;' or similar.

The search bar is just an '<input>', so you can also style it, for example:

html - make it a class or give it an id:
<input class='search' ... />
css - style that class (.) or id (#):
input.search {color:#000;font:bold 12pt arial;background-color:red;padding:20px;margin:5px;border-color:#f00 #900 #900 #f00;}

 

[vrufusx65v]

what tutorials button? (I can't see one) If you use an image, best bet is probably to check the image is the same size as the others.

I updated the page so now you can see the navbar, but the tutorials button is still the wrong size, i dont know how to change the size of that specific button so that it wont effect the other buttons, which are all perfect now...

As for the Search bar, I now have the text box reacting the way i want it but i cant get the text box to center within the background picture; it's staying at the top-left corner of the background pic when i want a margin or pad of about 2-3px on the top and left of the text box within the search bar...

 

[vrufusx65v]

I also am having trouble aligning the "subscribe via..." text next to the facebook icon. I basically want it to be in the dead center of that background bar they're inside of...

 

[mattura]

Ah I see what you have done now with the bar.
In this situation I would not use background images that way...but since you have, a quick fix would be adding a width to 'tutorials':

ul#navigation li#tutorials {
background-position:-195px 0px;
width:72px; /*or whatever works*/
}

the width is taken from the parent ul#navigation li and is set at 62px for the other buttons

 

[mattura]

Seems like you have the search bar sorted...you can just change the margin values of input.search
4px top and left looks good to me.

For the subscribe, you probably have to id or class either the <p> or the links. They can be set 'vertical-align:middle;' or margin/padding set. Personally, I would just put a line break after "subscribe" and have the text just above the buttons - looks better in my humble opinion.

 

[vrufusx65v]

awesome that worked, and you were off by only 2 px. Thanks...

Now how am i able to fix my whole site so that it stays in the center and doesnt liquify/stretch when i maximize my window [my resolution is 1440x900]

I also need help arranging the lower elements below the news ticker.

I have been tinkering around and trying to place the "Off-Site Posts" and "Poll Center" together and they just don't want to be together, and neither does the entire footer. I tried margining and floating and a tad bit of padding, but nothing seems to work... How do i get the elements to be next to each other???...

 

[vrufusx65v]

Okay I have centered my site, but now when i maximize it on a bigger screen, the navbar goes off the page... is it because its floated and not fixed at a certain point?

Side-note [off-topic]

Does x10hosting support Magento E-commerce?

 

[mattura]

Just change the ul to position:relative; then get rid of the margin-top and left

As a side, it is worth making sure you know exactly how position:relative and position:absolute work together with margins. Then you will always know what you will need in these circumstances