Amiga.org
The "Not Quite Amiga but still computer related category" => Alternative Operating Systems => Topic started by: lurkist on July 04, 2007, 12:57:34 AM
-
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
-
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...
-
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
-
Here is the code you need to do it with tables:
[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
-
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. :-(
-
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
-
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.
-
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
-
Nearly there I think. The page is
http://www.teague.abelgratis.com/IGS/IGS3.html
Just need to align the images within their tables.
-
Used align and valign, results are better.
There still seems to be a gap at the bottom though. (using IE6 here)
Cheers
-
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
-
Hmm, it`s not using 100% of the page. I`ve left the tableborder in for troubleshooting purposes.
Help!
-
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).
-
Center content is supposed to scroll.
-
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
-
@Moto
If I use you code I get this-
http://www.teague.abelgratis.com/IGS/IGS4.html
-
Then I add the aligns and valigns for the 4 corner images, I get this-
http://www.teague.abelgratis.com/IGS/IGS5.html
-
The problem is with the stuff above the tag. I just pasted the source in to a new file and had the same problem. I then removed everything above the body tag and it worked.
--
moto
-
Specifically, it is this line:
"http://www.w3.org/TR/html4/loose.dtd">
Remove that and it works.
--
moto
-
I`ve just been playing with different doctypes and running them through the w3 checker!
Frameset is probably my best bet.
-
lurkist wrote:
Frameset is probably my best bet.
... or just remove that line.
--
moto
-
Done ;)
Thanks Moto!
Lurkist
-
No problem :-D Just tested in Safari and Firefox, and it works in both. No point checking in iBrowse since it doesn't support IFrames :-(
--
moto
-
...although you will get an interesting message ;)
Thanks again.
-
Yeah, I saw that in the source code :-)
--
moto