[HTML] Need help making a couple of things..

[Bastinka]

Hello,
I realize it's been a while since I've been on. Anyway cutting to the chase, I've been trying to make a website for this guys WoW Guild for good practice and spoils.

Heres a picture, in .jpg originally a .psd:
http://www.bastian-de-byl.de/Template.jpg

I've been trying to get the button on the left http://bastian-de-byl.de/nav_ic_activated.jpg the Activated. When the mouse has it pressed down, or it is displaying that current page.

Middle picture is http://bastian-de-byl.de/nav_ic_active.jpg the Active. When the mouse roll's, or hovers, over the image.

Right picture is http://bastian-de-byl.de/nav_ic_inactive.jpg the Inactive. When the mouse has no interaction with it.




That's just the biggest problem I have yet to figure out. The other is getting the Header Picture, Locked n Loaded WoW Picture, to be centered in the overall background picture.

Background picture, seamless but no idea how to vertically repeat:
http://bastian-de-byl.de/background.jpg

Have been trying to figure out how to make that contain the other things, or just have everything dead center in the current browser window.




If anyone could give me a couple points in the correct direction, or to another forum which might also aid me that'd be nice. +Rep will be rewarded to any help recieved.

[RecycleBin]

http://w3schools.com/html/default.asp

[klange]

What, specifically, are you looking for help with in this?
Are you looking to explore a particular methodology for your buttons? You can do them in pure CSS through background-image's, or with Javascript (which is the norm, but overly complex considering the ease of implementation with CSS), or even Flash (waaay over the top).
Getting your background and everything centered is a matter of making a <div>, giving it a specific width and setting its left/right margins to 'auto', then just give it that background-image.

[sdavis117]

You could use GIMP or Photoshop (or even Paint) to manually repeat your background. Be careful though. People with resolutions that are higher then your background will see it repeated horizontally too.

I have some old CSS code that makes it so that when someone rolls over a navigation button, the button changes color. I could try to dig that up for you to use with your buttons.

[Bastinka]

CSS Seems to be overall better. Easiest and whatnot, just aiming to throw in some text over those buttons. A lot easier then remaking all buttons and just adding text in the .jpg's which is a waste of space.

Figured out the background image repeating and centered, but not the header placed at the top and the nav bar right under it.

Nav Bar, fixed height and width placed under header:
http://bastian-de-byl.de/nav_bar.jpg


EDIT:

You could use GIMP or Photoshop (or even Paint) to manually repeat your background. Be careful though. People with resolutions that are higher then your background will see it repeated horizontally too.
Yes that is an option, but you can just add a vertical repetition by adding the word 'repeat' in a simple area. Now that seems a lot easier.

[ShadowSpartan]

http://w3schools.com/html/default.asp
Posting a link which takes you 2 seconds to google is not helpful. Just stop trying, because you are failing.

[klange]

Again, you can use a div.
See this mockup site of mine (http://oasisgames.net/) for an example (though I'm not actually setting a background image and a number of other layout systems are used, just try and ignore them).

Basically, we have something like this:
CSS


.main {
width: 900px;
background-image: url(http://bastian-de-byl.de/background.jpg);
margin-left: auto;
margin-right: auto;
padding: 0px;
text-align: center;
}
.navbar {
width: 802px;
background-image: url(http://bastian-de-byl.de/nav_bar.jpg);
margin-left: auto;
margin-right: auto;
padding: 0px;
text-align: center;
}

Then your (X)HTML looks like this:
HTML


<div class="main">
<div class="navbar"><!-- A table or something to hold the buttons (it's just an easy way to do it) --></div>
<!-- your main content -->
</div>

[Bastinka]

Seems well put together, but I'm thinking of making the buttons into a horizontal list. That way they have an invisible draw box with a text overlay. Yet, I still have no idea how to go about making the image change on mouse rollover.

[Cojafoji]

just dump a div container in there, and set your margins to like 7-10 pixels.

[klange]

Alright, rollover time.
First off, I'll just say that Javascript rollovers are simple and easily implemented cross-browser, but they're still javascript: and they'd also require a bunch more work if you want to have just one background image.
For these reasons, we turn to the CSS rollover. There are a number of methods involving background images and such, but we're going to use something a bit more friendly that uses an img, a span and some relative positioning.

CSS:

.button {
position: relative;
background: url(button_prelight.jpg) no-repeat;
white-space: nowrap; /* just makes formatting easier */
display: block; /* important */
width: ****px; /* width of buttons */
height: ****px; /* height of buttons */
margin: 0;
padding: 0;
}

.button a {
display: block;
width: ****px; /* adjust to suit */
height: ****px; /* (same as above) */
display: block;
float: left;
}

.button img {
width: ****px; /* adjust to suit */
height: ****px; /* (also save as above) */
border: 0;
}

* html a:hover {
visibility:visible;
}

.button a:hover img {
visibility:hidden;
}

.button span {
position: absolute;
left: ****px; /* adjust to suit */
top: ****px; /* (text offsets in buttons) */
margin: 0px;
padding: 0px;
} Add any extra formatting you may want (you'll probably want to set text-decoration: none, change some fonts and some text colors, etc. etc.)

HTML:

<div class="button"><a href="http://www.example.com"><img src="button_idle.jpg" alt="alt text" /><span>Button Title</span></a></div>
That's for one button. Put a bunch in a <div>.

[Limited]

Nice work Admiral, should do the trick for him.

So, your making a site for some WoW guild silent, I take it your part of that guild, and therefore got addicted to WoW and thats why you never talk to me??? Outrageous.

[Bastinka]

Does the trick, and no I'm not part of it Limited.

I've been addicted to GarrysMod, Battlefield: Bad Company and overflowing school homework.