How to Prevent Image from loading top/left? - Html?

[100%]

How to Prevent Image from loading top/left? - Html?

I have used Dreamweaver and Namowebeditor but cant seem to find a solution.
i want 3 frames with scroll bars - all 3 hold the same image but i want them to load in different positions. When i save the file - i Always get the images loaded top left

Is there anyway to state where the Image will be placed?

or do i have to do the annoying method of adding "white space" around the image to make it load where it should(this method is very complicated)

For Example
(each frame consists of the same whole image)
here is the example whole image
http://img.photobucket.com/albums/v47/zedaxax/scrllX.jpg

How It Is when it loads (everything top left...)

http://img.photobucket.com/albums/v47/zedaxax/scrllA.jpg


How i would like it - when it loads (control where the position shall be)

http://img.photobucket.com/albums/v47/zedaxax/scrllB.jpg

[orcutt989]

When you are using frames, it is hard to place images. I always use layers. If you use layers you can place the image anywhere you want, and whether you want scrollbars or not. Use dreamweaver, use the Layer tool, drag the 3 layers to where you want them. Then load the image into them. In the properties window make shure scroll is set to "auto", and then viola. Oh yes, and make sure you make the layer small, maybe like hafl the size of the image. Then load the image into it, so you will trick the layer into making a scrollbar. But still make it the correct length, only make the height of the layer small.

[maskawaih]

just like what orcutt says. make somthing using tables is fun too.

[SingaBoiy]

Is that gay porn?? :blink:

:sick:

[motherflux]

a) stop using frames
b) if you want to position your images, try using css and making the image a background rather than using <img> tags.

the code would look similar to the following (I'm pretending these are <div>'s you've ID'd.
the css sets the width and height of the divs here:


#one {
height:300px;
with:150px;
background-image:url(yourimage.jpg);
background-repeat:no-repeat;
background-position:top left;
}

or you can use shorthand like

#one {
height:300px;
width:150px;
background:url(yourimage.jpg) no-repeat top left;
}


you can use any boolean terms for the position..like...
center left
center center
top right
bottom center
etc

alternately, you can specify X and Y coordinates, either specifially, or by percentage.
like:
background-position: 24 90;
or
background-position:30% 10%;

if all else fails, send me your code, and maybe a photoshop representation of what you're trying to do, and I'll fix it/show you.

[uNz[i]]

Avoid using nested tables.
Putting too many tables inside each other can slow your page's load time to a crawl.

[maskawaih]

']Avoid using nested tables.
Putting too many tables inside each other can slow your page's load time to a crawl.
but not like 10 seconds load. :huh: 3-4 seconds.

[motherflux]

']Avoid using nested tables.
Putting too many tables inside each other can slow your page's load time to a crawl.

using tables for layout purposes is....old-fashioned, labor-intensive, and markup-heavy.

Use css.

[maskawaih]

using tables for layout purposes is....old-fashioned, labor-intensive, and markup-heavy.

Use css.
... and make it separate. ;)

[uNz[i]]

using tables for layout purposes is....old-fashioned, labor-intensive, and markup-heavy.

Use css.
Exactly. But it's a trap many folks new to html can fall into.*

Consider the plight of the html newbie.

They've just got thier head around html and it's 'quirks', when suddenly they discover they need to learn css too.
So they get started. They find font styles fairly straightforward, but then encounter other functions, some of which aren't so easily learnt.

Thier website is suddenly all sorts of weird colours, some of the text has vanished right off the edge of the page and how the hell did that bloody <div> get all the way over there?? :o

Some will just reach a point where they say 'sod it' and start doing layouts using tables because it just seems to be the easier option.
Then they wonder why thier site takes ages to load compared to sites they've seen out there on the web.

...and then they find out about javascript. :ph34r:

*Parts of this post are based on a true story. ;)

[maskawaih]

javascript is fun. but please dont put fancy things in a page. :( something like fancy pointers, star background etc.

[100%]

Thank you for all your Replies -i have some mega homework to catch up on

I need to have ScrollBars for this piece - alot of them - therefore im using the Frames and want the images to run individually.
I tried the Layer technique before but came up with the same problem - guess illl have to try again.
Yes im a html Newb - this the begining - let me try everything you guys said - until i get it right - give me a day or two to test
Thanx again to all

[orcutt989]

Hmm, well when i do layers i dont use code that often. Dreamweaver is predominantly Visual-based, and so it makes it easy to place things with layers.

[motherflux]

scrollbars can be achieved via css simply by defining a <div>'s dimensions at a smaller size than the objects it will contain.
You then place the following property on that div (I'm going to give it an ID for this example)



<html>
<head>
<title>scrollbars</title>
<style type="text/css">
#image1 {
width: 800px;
height: 600px;
}

#container {
width:320px;
height:240px;
overflow:scroll;
}
</style>
</head>

<body>

<div id="container">
<img id="image1" src="whatever.jpg" />
</div>

</body>
</html>