Viewing Thread:
"New site, what do you all think?"

Hey all,

I've finished a new site, what do you think?

http://paladin.8bit.co.uk/

Also, I know it works in Mozilla Firefox, Mozilla, and IE, but can you check if it works in Opera etc.

Cheers
S.A.

Stevie boy wrote:
> Tyla wrote:
>
> you declare the link state with a background image (image 1) and the
> link:hover with a different background image (image 2), no scripting
> needed, the CSS handles the lot. You can get clever using
> transparent
> gifs and just changing the background colour using CSS instead.
>
> I can't quite work out how to do this. I wnat the folloing to change
> to GIF/INDEX/index_r2_c3_f2.gif when rolled over and link to
> info.htm:
>
> #index_r2_c3{
> margin-top: 12px;
> margin-left: 205px;
> width: 186px;
> height: 19px;
> background: #FFFFFF;
> background-image: url(GIF/INDEX/index_r2_c3.gif);
> position: absolute;
> }
>
> Cheers a very mucha.


First... YOU SHOULDN'T USE UNDERSCORES IN CSS NAMES!!
Second... All values, including hex colours should be in lowercase
Third.. Use logical names for your images instead of relying on fireworks to name them

Right, now down to the code...

Example;

a.norm:link, a.norm:visited {
display: block;
width: 186px;
height: 19px;
background-color: #fff;
background-image: url(GIF/INDEX/index_r2_c3.gif);
text-decoration: none;
}

a.norm:hover {
background-image: url(GIF/INDEX/index_r2_c3_f2.gif);
text-decoration: none;
}

You place your link text as usual,

If your using images for links that can be reproduced in text/css, DO IT!

Tyla wrote:

> you declare the link state with a background image (image 1) and the
> link:hover with a different background image (image 2), no scripting
> needed, the CSS handles the lot. You can get clever using transparent
> gifs and just changing the background colour using CSS instead.

I can't quite work out how to do this. I wnat the folloing to change to GIF/INDEX/index_r2_c3_f2.gif when rolled over and link to info.htm:

#index_r2_c3{
margin-top: 12px;
margin-left: 205px;
width: 186px;
height: 19px;
background: #FFFFFF;
background-image: url(GIF/INDEX/index_r2_c3.gif);
position: absolute;
}

Cheers a very mucha.

I think I'll just leave it with a 100px margin-left for now. Once you get the hang of this CSS it's much nicer to work with than tables.

taka-Q wrote:
> Oh, very nice. Another one, how would i centre a the folloing
> element:
>
> #blacktopsection{
> margin-left: 25%;
> margin-right: 25%;
> padding: 0px 0px 0px 0px;
> width: 700px;
> background: #000000;
> height: 1px;
> }
>
> I want it to appear in the centre of the browser, but I can't wotk
> out how (you can see my lame attempt with the margins).

Create an outer div (around the whole page), #container for instance and set the text-align to center, thats the quick way.

I can't be bothered to centre the whole thing, it'll just be easier to have it a set distance from the left.

Oh, very nice. Another one, how would i centre a the folloing element:

#blacktopsection{
margin-left: 25%;
margin-right: 25%;
padding: 0px 0px 0px 0px;
width: 700px;
background: #000000;
height: 1px;
}

I want it to appear in the centre of the browser, but I can't wotk out how (you can see my lame attempt with the margins).

taka-Q wrote:
> Can I ask a question Tyla, how would you do image rollovers in CSS?
> Would I have to do them in HTML with javascript as per normal or is
> there a whay of doing them in CSS?

you declare the link state with a background image (image 1) and the link:hover with a different background image (image 2), no scripting needed, the CSS handles the lot. You can get clever using transparent gifs and just changing the background colour using CSS instead.

Can I ask a question Tyla, how would you do image rollovers in CSS? Would I have to do them in HTML with javascript as per normal or is there a whay of doing them in CSS?

taka-Q wrote:
> Edit: Try now...
*****

Yep - works fine now.

Captain Scarlet wrote:
> bit image excessive but then again loads quickly

I used high compression GIF's which is why I limited myself the 2/3 colours so you still got good antialiasing.