Not sure where to put this!!

Galaxyblue · #1 Feb 20th, 2004, 01:13

Please have a look here:

www.galaxy.silvern.co.uk

Ok... yes, I know they are images and I am naughty, but... am admitting defeat till I know more about Mozilla etc.

This looks fine in Opera, Mozilla and IE. Fantastic! But... I want the second row of buttons to butt up against the top row and its just not happening.

I have tried taking text block off the external style sheet, and separating them with a
tag but when I do that, the buttons don't work in Mozilla!

I think I am slowing going insane.

BTW... what do you think of the colours??

Sarah xxx

courtjester · #2 Feb 20th, 2004, 04:24

I have a terrible headache... It really hurts bad...

jamslam · #3 Feb 20th, 2004, 05:04

Alright, i really hope you benefit from this..

took me about an hour

It validates as XHTML 1.0 Strict, and CSS 2/3

Here's the CSS... just copy and paste it into your external CSS file... (overwrite what you have now) it's all commented up.. so it's good

/* OPERA doesn't seem to let the buttons touch.. no clue why..
* I hate opera anyways

* This is also a pixel perfect layout, so touching any of the
* pixel sizes could definitely screw things up! */

/* regular body properties */
body {
background: #ede5d0;
margin-top: 57px;
}

/* this holds everything */
#content {
width: 716px;
margin-left: auto;
margin-right: auto;
border: 3px solid #006666;
}

/* this holds everything inside...
* basically only here for the "double border" effect */
#container {
margin: 1px;
padding: 1px;
border: 1px solid #006666;
}

/* this is for the text and crap */
#content2 {
padding-left: 4px;
padding-right: 4px;
padding-top: 1px; /* this is a fix for mozilla */
}

/* formats the UL for the navigation
* If you're wondering why i use an unordered list
* it's because it's the proper way to structure a navigation

*/
ul.navList {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 3px;
}

/* allows the LI's to all be on one line */
ul.navList li {
float: left;
margin-right: 1px;
}

/* your formatting for the links */
ul.navList li a {
width: 140px;
height: 31px;
background: url(buttons/homeup.gif) no-repeat;
display: block;
text-decoration: none;
}

ul.navList li a:hover {
background: url(buttons/homedown.gif) no-repeat;
}

/* this is for a fix in OPERA
* add extra formatting, and enclose
* all paragraphs with the

and </p>*/
p {
margin: 0;
margin-top: 15px;
}

/* IMPERATIVE.. used whenever you use the "float"
* property... in IE it doesn't do anything, but it
* does major work in mozilla, and i believe OPERA as well */
div.spacer {
clear: both;
}

And here's your beautiful markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Galaxy </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="content">
<div id="container">
[img]banner/banner.jpg[/img]

<ul class="navList">
[*]
[*]
[*]
[*]
[*]
[/list]
<ul class="navList">
[*]
[*]
[*]
[*]
[*]
[/list]

<div class="spacer"></div>

<div id="content2">

Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. </p>
</div>
</div>
</div>

</body>
</html>

That's that whole layout re-coded... hope this helps you on your HTML & CSS ventures

Smokie · #4 Feb 20th, 2004, 09:26

jamslam you got too much time on your hands!

Sarah, using images ISNT naughty!!

Galaxyblue · #5 Feb 20th, 2004, 10:37

Thanks Jamslam! You are an angel!! Now, I just have to go out for a while but I am going to give that a go when I get in...

Thank you!!!

Rob · #6 Feb 20th, 2004, 10:40

Jamslam.... get an avatar dude.. :wink:

jamslam · #7 Feb 20th, 2004, 13:05

Too much time? Hah... that's almost laughable. I was just on a break from my project

Yea I'll get around to making an avatar later today Rob, if it pleases you

lol

Alright I added one.. but the BBS seemed to have distored the image... oh well

courtjester · #8 Feb 20th, 2004, 15:23

I think the slam part is dynamic text... That's why its leaving ink stain looking trails as it moves. Make sure its static.

jamslam · #9 Feb 20th, 2004, 16:15

<blockquote id="quote"><font size="1" face="geneva, verdana, arial" id="quote">quote:<hr height="1" noshade id="quote">Originally posted by kulegamr

I think the slam part is dynamic text... That's why its leaving ink stain looking trails as it moves. Make sure its static.
<hr height="1" noshade id="quote"></blockquote id="quote"></font id="quote">

Nope, it works fine in other BB's. The image is actually 64x64 (http://www.webtrickscentral.com/imag...slamScroll.gif)... but the BB made it 96x64 or something of that sort

courtjester · #10 Feb 20th, 2004, 17:07

Yeah, but still it shouldn't leave those marks even if it is the wrong size. Flash is made in vector's so size shouldn't effect the quality of all things made in flash. Imports are a different story.

jamslam · #11 Feb 20th, 2004, 18:04

It isn't flash

It's an animated gif made in Adobe ImageReady...

Anywho, does anyone know why this BBS resizes avatars like that?

courtjester · #12 Feb 20th, 2004, 18:25

you serious??? My rightclick gives me flash properties... This is starting to scare me.....

jamslam · #13 Feb 20th, 2004, 19:05

wow this is weird..

when i go to properties it says the type isn't available... maybe the BBS has got the mime types screwed up? but i don't get flash options, that's for sure

that is definitely odd... O_o

Galaxyblue · #14 Feb 21st, 2004, 17:30

I wonder if someone can help me with this:

If I add a banner that is larger than the one that Jamslam wrote that style.css for all my formatting goes funny and the buttons go down the page...

Any ideas on what I need to amend on the style sheet to get round that? Oh and also how do I centre the whole site as opposed to having it on the left?

Thanks in advance!

jamslam · #15 Feb 21st, 2004, 17:50

the site is centered. Remember to have this at the top of every HTML Document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I put that in the HTML, if the site isn't centered, it means you took that out, or used a different one.

Basically, you're going to have to do a lot of tweaking.

#content {
width: 716px;
margin-left: auto;
margin-right: auto;
border: 3px solid #006666;
}

You'd probably want to change that. But basically, making a banner smaller is a no-no, unless you want to make the width of the buttons smaller.

Making a banner larger is ok though, you're just going to have more space between the buttons. If you make the banner a lot bigger, like at least 20px, you can change this to "2px"

ul.navList li {
float: left;
margin-right: 1px;
}

And then finally, you want to change the left offset for each of the navigation lists (there's two lists). This is basically to even out both sides of the list, so they look centered.

ul.navList {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 3px;
}

Remember, you're going to have to do a lot of tweaking for each of those things I gave you, but it should work without you having to change anything else.

Galaxyblue · #16 Feb 21st, 2004, 18:04

Cheers Jamslam... I'd taken this out :

margin-left: auto;
margin-right: auto;

This is for someone elses site...

Sarah x

jamslam · #17 Feb 21st, 2004, 19:19

yes, the "margin-left: auto; margin-right: auto;" is the proper way to center something using CSS

Galaxyblue · #18 Feb 22nd, 2004, 15:46

I have another question... If I use blank images for the buttons and use normal text to go on top, the way I am centring it is by using the top and bottom padding. If I do this, I get space in between the buttons which I don't want.

Is there any way round this?

Thanks in advance

jamslam · #19 Feb 22nd, 2004, 15:52

I believe the padding will actually make the height bigger, i mean that's what it does
So, get rid of the height property for the links. Then use the padding-top and padding-bottom to show the background image, AND center it. You'd probably want to have padding-top = padding-bottom, or give or take one pixel.

Galaxyblue · #20 Feb 22nd, 2004, 16:10

Thanks Jamslam - wow, super quick reply!! I shall give that a go.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Not sure where to put this!!