HTML Coding Help

2008-01-14 19:14:38

#1

tazz.: oz.; +1,339|6454|Sydney | ♥

Ohk...

I have previously made a what i like to call, Picture Website....

It can be found here...

http://www.ausaf-gamers.net/

Now...

As you can see, the image is a bit to big for normal people,

is there a way, when the screen resolution is smaller, for all the images, to not stop when it reaches the side of the browser, but keep going, keeping it symmetrical, if your not sure what i mean, i dunno,

thanks

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-14 19:22:09

#2

AussieReaper: ( ͡° ͜ʖ ͡°); +5,761|6432|what

Are the images centered?

2008-01-14 19:23:28

#3

tazz.: oz.; +1,339|6454|Sydney | ♥

Yeah, but when the resolution is small, it isnt centered....

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-14 19:35:23

#4

AussieReaper: ( ͡° ͜ʖ ͡°); +5,761|6432|what

Try using the

Code:

<nobr> </nobr>

tag around the images. This forces the brower not to wrap the images when resizing a window and forces them the stay on the same line (no break).

Make sure the the images also have width, height and border dimensions attributed. eg:

Code:

a href="index.htm"><img src="home.gif" alt="Home" width="200" height="50" border="0" /></a>

Otherwise you can use tables to format the webpage, or even create an imagemap.

2008-01-14 19:45:51

#5

Cheez: Herman is a warmaphrodite; +1,027|6718|King Of The Islands

Adapt it to how Chuy does his:

Code:

<style>
html,body {
background: #000 url('t.gif') center center no-repeat;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>

Obviously don't slice your background though...

My state was founded by Batman. Your opinion is invalid.

2008-01-15 00:52:25

#6

tazz.: oz.; +1,339|6454|Sydney | ♥

Both did not work....

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-15 00:55:52

#7

G3|Genius: Pope of BF2s; +355|6906|Sea to globally-cooled sea

I use a widescreen monitor, so I can't tell lol

2008-01-15 03:04:51

#8

tazz.: oz.; +1,339|6454|Sydney | ♥

>.o

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-15 03:12:29

#9

TheEternalPessimist: Wibble; +412|6900|Mhz

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div align="center" width="100%">

<table id="Table_01" width="1200" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<div align="center"><img src="images/index_01.gif" width="1200" height="158" alt=""></div></td>
</tr>

Add the bold bit. It may or may not work I'm quite tired lol.

EDIT:
*Engages basic brain function*

You can't make it scale down, the table will always expand to fit the image it contains, width and height attributes are just minimum sizes, you could set them all to 1x1px and they'd still expand to the size they are now, only way I can think of round it is to make a separate 'low res' version of the page and have a link to it. Where's Zimmer when you need him? lol

Also I just re-read the OP, you want it to stay the same size but just hang over both sides instead of getting pushed off the right hand side only? Don't think that's possible either but, I'm not that great at this stuff.

Last edited by TheEternalPessimist (2008-01-15 03:33:15)

2008-01-15 03:15:30

#10

justice: OctoPoster; +978|7021|OctoLand

It looks fine to me

I know fucking karate

2008-01-15 03:18:03

#11

TheEternalPessimist: Wibble; +412|6900|Mhz

justice wrote:
It looks fine to me

Make the window smaller (i.e. pretend you're on a small monitor) the page doesn't resize to fit, it just shuffles off the right side of the screen.

Last edited by TheEternalPessimist (2008-01-15 03:18:23)

2008-01-15 03:32:22

#12

Cheez: Herman is a warmaphrodite; +1,027|6718|King Of The Islands

tazz. wrote:
Both did not work....

Eh? I just tested it.

In Firefox, it will shrink it, but there's a limit (it stops at about 860, but fuck 800x600ers)

In IE, *gasp* it works no matter the width.

Images stoles to make example:

https://img149.imageshack.us/img149/7258/29817463tu7.th.jpg

https://img149.imageshack.us/img149/2428/19655120go1.th.jpg

My state was founded by Batman. Your opinion is invalid.

2008-01-15 03:36:05

#13

TheEternalPessimist: Wibble; +412|6900|Mhz

Cheez wrote:
tazz. wrote:
Both did not work....
Eh? I just tested it.

In Firefox, it will shrink it, but there's a limit (it stops at about 860, but fuck 800x600ers)

In IE, *gasp* it works no matter the width.

Images stoles to make example:
http://img149.imageshack.us/img149/7258 … tu7.th.jpg
http://img149.imageshack.us/img149/2428 … go1.th.jpg

Doesn't seem to do that in IE7, isn't on my work PC anyway.

https://img184.imageshack.us/img184/7336/66772142qv8.th.png

Last edited by TheEternalPessimist (2008-01-15 03:40:14)

2008-01-15 03:51:55

#14

Cheez: Herman is a warmaphrodite; +1,027|6718|King Of The Islands

I know, that's a screenie of my mockup, which works with both IEs (I tested it early today on my lappy, that's why I suggested it).

My state was founded by Batman. Your opinion is invalid.

2008-01-15 06:50:51

#15

Zimmer: Un Moderador; +1,688|7036|Scotland

Gah!
Tables!
Gah!

Ok, all your background, create one image.

Then, here is your HTML code for the backround.

Code:

<div id="wrapper">

</div>

In your CSS

Code:

/* kill defaults */

html, body, ul, dl, li, h1, h2, h3, h4, img    {
margin: 0;
padding: 0;
}

ul    {
list-style: none;
}

img    {
border: 0;
}

/* ============= */

body    {
background: #000;
font-family: "Cambria Math", Cambria, Arial, sans-serif;
}

#wrapper    {
width: 1200px; [b]This is where you add the width of the background[/b]
background: #000 url(images/background.png) top center no-repeat;
margin-left: auto;
height: 100%;
margin-right: auto;
position: relative;
}

That will work for your background. Now, as for your links, go take a look at my first website tutorial
My tut

That should help you on your links. Instead of having the background-color for each link, have the image
I.e

Code:

background: #000 url(link1.png);

It shouldn't be too hard. If you need any more help, give me a shout.

Just don't use tables or slicing. It's old and ugly. And slow. As all your images load through HTML, the load time is about 30% more. Through CSS they load almost instantly. Espcially if you are using FF or Opera.

2008-01-15 08:34:03

#16

Vilham: Say wat!?; +580|7046|UK

Should use imagemap i think its called havent done html in half a year. Much better. Then its just one image with sections of it that link to other pages.

2008-01-15 08:45:38

#17

Zimmer: Un Moderador; +1,688|7036|Scotland

Vilham wrote:
Should use imagemap i think its called havent done html in half a year. Much better. Then its just one image with sections of it that link to other pages.

No, not anymore. It should be CSS and XHTML valid. No old HTML. The cleaner and less HTML used, the better.

2008-01-15 16:58:54

#18

CrazeD: Member; +368|6952|Maine

Zimmer wrote:
As all your images load through HTML, the load time is about 30% more. Through CSS they load almost instantly. Espcially if you are using FF or Opera.

Did not know that...

*changes big images on site to CSS*

2008-01-15 17:10:12

#19

tazz.: oz.; +1,339|6454|Sydney | ♥

I aint gonna put hours of work into something that can be done in image mapping, which is what i'm gonna do.....

I shall use this code here...

Code:

<style>
html,body {
background: #000 url('Untitled-1.jpg') center center no-repeat;

height: 100%;
margin: 0;
padding: 0;
}
</style>

thanks for your help, i'll karma most...

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-15 17:45:56

#20

elbekko: Your lord and master; +36|6681|Leuven, Belgium

Image maps are perfectly acceptable XHTML as far as I know.

2008-01-16 03:08:22

#21

Zimmer: Un Moderador; +1,688|7036|Scotland

tazz. wrote:
I aint gonna put hours of work into something that can be done in image mapping, which is what i'm gonna do.....

I shall use this code here...
Code:
<style>
html,body {
background: #000 url('Untitled-1.jpg') center center no-repeat;

height: 100%;
margin: 0;
padding: 0;
}
</style>
thanks for your help, i'll karma most...

Rubbish. It would take you 30 minutes to position and create links out of the 4 extra images.

A. It would load faster
B. You could create good image rollovers.
C. Its cleaner.

You just don't want to.

Elbekko, I know, but what would you prefer? CSS or Image Maps?

2008-01-16 03:11:46

#22

tazz.: oz.; +1,339|6454|Sydney | ♥

30 Minutes, if i knew already how, and had good experience.....

Thus cause i dont know it, it would take me a long time, like 1-2 hours to learn thuroly this area or5 coding,....

imo, cbf...

^{everything i write is a ramble and should not be taken seriously.... _{seriously. ♥}}

2008-01-16 05:52:45

#23

elbekko: Your lord and master; +36|6681|Leuven, Belgium

Depends on the use. For a simple menu, CSS. For making parts of a large image clickable, image maps

2008-01-16 05:57:29

#24

Zimmer: Un Moderador; +1,688|7036|Scotland

elbekko wrote:
Depends on the use. For a simple menu, CSS. For making parts of a large image clickable, image maps

It's only 4 images.

2008-01-16 06:04:25

#25

elbekko: Your lord and master; +36|6681|Leuven, Belgium

CSS it is.

BF2S Forums HTML Coding Help

Code:

Code:

Code:

justice wrote:

tazz. wrote:

Cheez wrote:

tazz. wrote:

Code:

Code:

Code:

Vilham wrote:

Zimmer wrote:

Code:

tazz. wrote:

Code:

elbekko wrote:

Board footer