web design question

[lurkist]

Hi guys,

Sorry if this is in the wrong section.

If I wanted 4 different images in the 4 corners of a web page, what would I need to do?

Cheers, Lurkist

[kd7ota]

As far as I know,

I worked with CSS, and this allows you to define where to put images on all 4 corners of a webpage, but also you may be able to somehow trick that by using tables...

[motorollin]

You have two options: DHTML, which allows you to specify the pixel position of an element on the page, or a table. The latter would be my preference. You need to create a table with a width of 100% and a height of 100%. Then you need three rows and three columns, the top left, top right, bottom left and bottom right cells containing your images. The remaining cells also need a width and height of 100% to make sure they become as large as they can to fill the window and push the cells containing the images to the edges of the window.

If you need the precise table code let me know.

--
moto

[motorollin]

Here is the code you need to do it with tables:




   
      
      
      
   
   
      
   
   
      
      
      
   

image		image
image		image

[EDIT]
- Removed left and right cells in the middle row.
- Added cellpadding and cellspacing tags to force images right to the edge of the table.
[/EDIT]

This is IMO the easiest way to do it. You obviously need to replace the word "image" with your actual images.

HTH

--
moto

[weirdami]

Here is the code you need to do it with tables: ...

Of course, if the content in the middle column (that colspan=3 business) were taller than a browser window, the bottom pictures wouldn't show up until you scrolled down. For the same reason, if it were wider, the right side images would be unseen unless you scrolled sideways. Tables are weird and all dynamicy or something because the content inside seems to always screw with your carefully planned layout if you aren't careful. :-(

[motorollin]

Yes that's true, but if you use DHTML to place the images precisely by pixel then when the window scrolls the images will scroll with it. I think using tables is a better solution, and then put an IFRAME in the center cell for the page content. That way the content can scroll without affecting the positioning of the images.

--
moto

[uncharted]

There is no height attribute for in any standard.  So Moto's code is not guarenteed to work in every browser.

If you're targetting modern browsers then CSS is probably the answer.  Using fixed positioning you can place objects at fixed point within the window.  They will stay there regardless of scrolling.

 

lurkist

• Hero Member
• 
• Join Date: Sep 2002
• 
• Posts: 513
• • 

Re: web design question

Thanks for the answers.

The content is indeed an iframe of roughly postcard size which is bang in the center, and since I wanted to avoid css I think I`ll try Moto`s idea a bit later.

Many thanks, Lurkist

A1200 Power Tower, Blizzard 1260 66 +32MB, OS3.9, 2.5\\" HD, IDEfix97 + DVD-RW + Zip, SD/FF + 15\\" CRT, Ioblix1200P + scanner, PCMCIA LAN + router

 

lurkist

• Hero Member
• 
• Join Date: Sep 2002
• 
• Posts: 513
• • 

Re: web design question

Nearly there I think.  The page is

http://www.teague.abelgratis.com/IGS/IGS3.html

Just need to align the images within their tables.

A1200 Power Tower, Blizzard 1260 66 +32MB, OS3.9, 2.5\\" HD, IDEfix97 + DVD-RW + Zip, SD/FF + 15\\" CRT, Ioblix1200P + scanner, PCMCIA LAN + router

 

lurkist

• Hero Member
• 
• Join Date: Sep 2002
• 
• Posts: 513
• • 

Re: web design question

Used align and valign, results are better.

There still seems to be a gap at the bottom though. (using IE6 here)

Cheers

A1200 Power Tower, Blizzard 1260 66 +32MB, OS3.9, 2.5\\" HD, IDEfix97 + DVD-RW + Zip, SD/FF + 15\\" CRT, Ioblix1200P + scanner, PCMCIA LAN + router

 

jj

• Lifetime Member
• Hero Member
• 
• Join Date: Feb 2002
• 
• Posts: 4052
• Country:
• Thanked: 2 times
• Gender:
• • 

Re: web design question

using IE6 here in work, and as soon as you open that page full size, running a res of 1280 X 800 here, and the bottom corner images apear half way up page

“We don't stop playing because we grow old; we grow old because we stop playing.” - George Bernard Shaw

Xbox Live: S0ulA55a551n2
 
Registered MorphsOS 3.13 user on Powerbook G4 15"

 

lurkist

• Hero Member
• 
• Join Date: Sep 2002
• 
• Posts: 513
• • 

Re: web design question

Hmm, it`s not using 100% of the page.  I`ve left the tableborder in for troubleshooting purposes.

Help!

A1200 Power Tower, Blizzard 1260 66 +32MB, OS3.9, 2.5\\" HD, IDEfix97 + DVD-RW + Zip, SD/FF + 15\\" CRT, Ioblix1200P + scanner, PCMCIA LAN + router

 

uncharted

• Hero Member
• 
• Join Date: Mar 2002
• 
• Posts: 1520
• • 

Re: web design question

Is the centre content supposed to scroll or all be visible at once?  I get a scroll-bar viewing on Firefox on the iBook (1024x768).

 

lurkist

• Hero Member
• 
• Join Date: Sep 2002
• 
• Posts: 513
• • 

Re: web design question

Center content is supposed to scroll.

A1200 Power Tower, Blizzard 1260 66 +32MB, OS3.9, 2.5\\" HD, IDEfix97 + DVD-RW + Zip, SD/FF + 15\\" CRT, Ioblix1200P + scanner, PCMCIA LAN + router

 

motorollin

• Hero Member
• 
• Join Date: Nov 2005
• 
• Posts: 8669
• • 

Re: web design question

For some reason the height property of the center cell is not working in your code. Check your source against the example I posted, and if necessary re-paste the code in to yours. Check that works, then add things one a time and keep checking so if it breaks, you'll know why.

--
moto

Code: [Select]

10  IT\'S THE FINAL COUNTDOWN
20  FOR C = 1 TO 2
30     DA-NA-NAAAA-NAAAA DA-NA-NA-NA-NAAAA
40     DA-NA-NAAAA-NAAAA DA-NA-NA-NA-NA-NA-NAAAAA
50  NEXT C
60  NA-NA-NAAAA
70  NA-NA NA-NA-NA-NA-NAAAA NAAA-NAAAAAAAAAAA
80  GOTO 10

 

• Print

Pages: [1] 2   Go Up

« previous next »

• Amiga.org »
• The "Not Quite Amiga but still computer related category" »
• Alternative Operating Systems »
• web design question

 

There was an error while thanking

Thanking...

• AMIGA.org™ & logo copyright ©1994-2025 A-EON Technology Ltd. & AmigaKit Ltd.
• AMIGA.org™ is a valid trade mark used world wide.
• Powered by SMF & Theme by MLM

Page created in 0.221 seconds with 21 queries.

[lurkist]

Thanks for the answers.

The content is indeed an iframe of roughly postcard size which is bang in the center, and since I wanted to avoid css I think I`ll try Moto`s idea a bit later.

Many thanks, Lurkist

[lurkist]

Nearly there I think.  The page is

http://www.teague.abelgratis.com/IGS/IGS3.html

Just need to align the images within their tables.

[lurkist]

Used align and valign, results are better.

There still seems to be a gap at the bottom though. (using IE6 here)

Cheers

[jj]

using IE6 here in work, and as soon as you open that page full size, running a res of 1280 X 800 here, and the bottom corner images apear half way up page

[lurkist]

Hmm, it`s not using 100% of the page.  I`ve left the tableborder in for troubleshooting purposes.

Help!

[uncharted]

Is the centre content supposed to scroll or all be visible at once?  I get a scroll-bar viewing on Firefox on the iBook (1024x768).

[lurkist]

Center content is supposed to scroll.

[motorollin]

For some reason the height property of the center cell is not working in your code. Check your source against the example I posted, and if necessary re-paste the code in to yours. Check that works, then add things one a time and keep checking so if it breaks, you'll know why.

--
moto