Getting An Image To Scroll On With Content

Albus Dumbledore

Feb 18 2006, 02:47 AM

ok, well i had had people review Hogwartsmagic.net and they said that i should get it to not be one huge image as a layout..and i have figured most of it out and it has proven sucessful! but now i am having diffuclty, i am pretty much only a basicl HTML kinda person... and i was wondering if anyone knows an html code that will allow one image to scroll the entire length of a pages content? for example, if i were to add 200 links to the right navigation..the image would go with the content.. i am testing it out here HERE any help would be much appreciated

jlhaslip

Feb 18 2006, 04:59 AM

Don't quite get what you are looking for. Do you want the lists to scroll and the image to stay positioned on the page?

Albus Dumbledore

Feb 18 2006, 05:07 AM

well, what i mean in that you can have a 1/4 inch image..as a main image...and have it multiply itself as many times as needed until it reaches for say the end of the content and connects with the footer...

jlhaslip

Feb 18 2006, 05:37 AM

http://www.w3schools.com/css/css_background.asp

This will even let you try out changing the code to see how it works.

Avalon

Feb 18 2006, 05:42 AM

Not exactly sure what it is you want. If you want to repeat an image in a page I think the easiest is to use a table and set your image as the background. e.g. <table backgorund="image.jpg"> etc.. You can also CSS to set the background images of a table.

Albus Dumbledore

Feb 18 2006, 06:07 AM

ok, i understand what im saying is makin no sence maybe this one will help..

CODE

<html>
<title>Hogwarts Magic :. Where Real Magic is Possible! :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Hogwarts Courtyard, Harry Potter, Ron Weasley, Hermione Granger, Lord of the Rings, Daniel Radcliffe, Rupert Grint, Emma Watson, Sorcerer's Stone, Chamber of Secrets, Prisoner of Azkaban, Goblet of Fire, Order of the Phoenix, Half-Blood Prince, Quidditch, Rowling">
<meta name="description" content="Hogwarts Magic : Where Real Magic is Possible!">
<meta name="generator" content="Microsoft Notepad">
<meta name="author" content="Phillip Morehead">
<meta name="copyright" content="© 2006 Phillip Morehead">
<STYLE type=text/css>
BODY {
}
A:link {
    COLOR: #AABBCC; TEXT-DECORATION: underline;
}
A:active {
    COLOR: #AABBCC; TEXT-DECORATION: underline;
}
A:visited {
    COLOR: #AABBCC; TEXT-DECORATION: underline;
}
A:hover {
    COLOR: #AABBCC; TEXT-DECORATION: none;
}
TD {
    FONT-SIZE: 11px; COLOR: #ff0000; FONT-FAMILY: Verdana, Tahoma, Arial
}
</STYLE>
<script language="JavaScript" type="text/JavaScript">

</script>
<img src="header.jpg" width="775" alt="">
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">
<img src="index.jpg">

<div id="navRight" style="position:absolute; width:125px; height:694px; z-index:3; left: 633px; top: 219px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;"> <div align="center"><?php include("site_files/bottom.html"); ?></div></div>
<div id="content" style="position:absolute; width:418px; height:746px; z-index:2; left: 176px; top: 193px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">
<p><font size=-2><center><img src="images/quidditch.gif"></center><br><B>Title:</B> Quidditch Through the Ages<BR>
<B>Author:</B> Kennilworthy Whisp<P>
Quidditch Through the Ages is a great book to read if you like the Harry Potter books and the sport Quidditch.This book guides you from the beggining of Quidditch until the present of what Quidditch is now.The book is focused only on Quidditch, it talks about the many teams from England and many other countries as well. It also talks about where the bludgers came into existence, and why the teams have certain logos on their uniforms.The book mentions amazing events and things that have happened in historic matches. It also talks about how certain rules have changed through time.
<br><br><br>
<center><img src="images/fantasticbeasts.gif"></center>
<br><br>
<B>Title:</B> Fantastic Beasts and Where to Find Them<BR>
<B>Author:</B> Newt Scamander<P>
This is a reprint by Obscurus House of Newton Artemis Fido Scamander's classic magizoological reference work. Forward by Albus Dumbledore. This particular edition is the first to be offered to the non-wizarding public. The introduction covers the classification of magical creatures into beings, beasts, or spirits. The history, politics, and fine points of this division is examined.
<P>
Next, there is a section on the concealment of magical beasts from the non-wizarding public. This includes the establishment of safe habitats, as well as the use of disillusionment charms, memory charms, and other techniques. The activities of the Office of Misinformation in spreading false information are also examined. The Ministry of Magic classifications of all known magical creatures from XXXXX (known wizard killer) to X (positively boring) are listed and defined.
<P>
The main body of the reference lists all known magical creatures alphabetically. The M.O.M. classification, physical description, habitat, behavior, and distribution are clearly and concisely noted for each entry. These entries are: Acromantula, Ashwinder, Augurey, Basilisk, Billywig, Bowtruckle, Bundimum, Centaur, Chimaera, Chizpurfle, Clabbert, Crup, Demiguise, Diricawl, Doxy, Dragon (all breeds), Dugbog, Erkling, Erumpent, Fairy, Fire Crab, Flobberworm, Fwooper, Ghoul, Glumbumble, Gnome, Graphorn, Griffin, Grindylow, Hippocampus, Hippogriff, Horklump, Imp, Jarvey, Jobberknoll, Kappa, Kelpie, Knarl, Kneazle, Leprechaun, Lethifold, Lobalug, Mackled Malaclaw, Manticore, Merpeople, Moke, Mooncalf, Murtlap, Niffler, Nogtail, Nundu, Occamy, Phoenix, Pixie, Plimpy, Pogrebin, Porlock, Puffskein, Quintaped, Ramora, Red Cap, Re'em, Runespoor, Salamander, Sea Serpent, Shrake, Snidget, Sphinx, Streeler, Tebo, Troll, Unicorn, Werewolf, Winged Horse, and Yeti.
      </p></font>
</div>
<div id="navLeft" style="position:absolute; width:119px; height:636px; z-index:1; left: 17px; top: 248px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;"><?php include("site_files/menu.html"); ?>
</table>
<!-- END IMAGE READY --!>
<img src="footer.jpg">
</body>
</html>

the stuff in bold, *edit ok, not bold..but all the image codes *edit* i want the images to be looped like that, until the end of the content, just without having to have so many, of the <img src....'s if you look at the page that is kind of what i wish it to look like

i have tryed both of those, but i cant get it to work

Avalon

Feb 18 2006, 06:22 AM

Try something like this, starting from the line below your <body> tags.

CODE

<table background="index.jpg">
<tr>
<td>

<div id="navRight" style="position:absolute; width:125px; height:694px; z-index:3; left: 633px; top: 219px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;"> <div align="center"><?php include("site_files/bottom.html"); ?></div></div>
<div id="content" style="position:absolute; width:418px; height:746px; z-index:2; left: 176px; top: 193px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;">
<p><font size=-2><center><img src="images/quidditch.gif"></center><br><B>Title:</B> Quidditch Through the Ages<BR>
<B>Author:</B> Kennilworthy Whisp<P>
Quidditch Through the Ages is a great book to read if you like the Harry Potter books and the sport Quidditch.This book guides you from the beggining of Quidditch until the present of what Quidditch is now.The book is focused only on Quidditch, it talks about the many teams from England and many other countries as well. It also talks about where the bludgers came into existence, and why the teams have certain logos on their uniforms.The book mentions amazing events and things that have happened in historic matches. It also talks about how certain rules have changed through time.
<br><br><br>
<center><img src="images/fantasticbeasts.gif"></center>
<br><br>
<B>Title:</B> Fantastic Beasts and Where to Find Them<BR>
<B>Author:</B> Newt Scamander<P>
This is a reprint by Obscurus House of Newton Artemis Fido Scamander's classic magizoological reference work. Forward by Albus Dumbledore. This particular edition is the first to be offered to the non-wizarding public. The introduction covers the classification of magical creatures into beings, beasts, or spirits. The history, politics, and fine points of this division is examined.
<P>
Next, there is a section on the concealment of magical beasts from the non-wizarding public. This includes the establishment of safe habitats, as well as the use of disillusionment charms, memory charms, and other techniques. The activities of the Office of Misinformation in spreading false information are also examined. The Ministry of Magic classifications of all known magical creatures from XXXXX (known wizard killer) to X (positively boring) are listed and defined.
<P>
The main body of the reference lists all known magical creatures alphabetically. The M.O.M. classification, physical description, habitat, behavior, and distribution are clearly and concisely noted for each entry. These entries are: Acromantula, Ashwinder, Augurey, Basilisk, Billywig, Bowtruckle, Bundimum, Centaur, Chimaera, Chizpurfle, Clabbert, Crup, Demiguise, Diricawl, Doxy, Dragon (all breeds), Dugbog, Erkling, Erumpent, Fairy, Fire Crab, Flobberworm, Fwooper, Ghoul, Glumbumble, Gnome, Graphorn, Griffin, Grindylow, Hippocampus, Hippogriff, Horklump, Imp, Jarvey, Jobberknoll, Kappa, Kelpie, Knarl, Kneazle, Leprechaun, Lethifold, Lobalug, Mackled Malaclaw, Manticore, Merpeople, Moke, Mooncalf, Murtlap, Niffler, Nogtail, Nundu, Occamy, Phoenix, Pixie, Plimpy, Pogrebin, Porlock, Puffskein, Quintaped, Ramora, Red Cap, Re'em, Runespoor, Salamander, Sea Serpent, Shrake, Snidget, Sphinx, Streeler, Tebo, Troll, Unicorn, Werewolf, Winged Horse, and Yeti.
</p></font>
</div>
<div id="navLeft" style="position:absolute; width:119px; height:636px; z-index:1; left: 17px; top: 248px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF;"><?php include("site_files/menu.html"); ?>
</tr>
</td>
</table>
<!-- END IMAGE READY --!>

I notice also that you have an image tag <img src="header.jpg" width="775" alt=""> above your body tags. There should really be no content above your body tags, scripts can go above the body tags but not images or content text.

Albus Dumbledore

Feb 18 2006, 06:33 AM

i tryed that jsut now, and it didn't do anything maybe the dividing code doesn't allow it? lol...i love computers but when it gets complicated it gets weird >_< thanx for all ya help...

jlhaslip

Feb 18 2006, 06:44 AM

More like this?

http://www.w3schools.com/css/tryit.asp?fil...ckground-repeat

Albus Dumbledore

Feb 18 2006, 06:58 AM

well i added that, and it does extend to the content like it should, i just got the problem of the footer is like still at the top...ne ideals? thnx! soo much for that code!

Latest Entries

Albus Dumbledore

Feb 24 2006, 11:44 PM

well i tryed that and i still couldn't get it to work.FOR NOW i am done with this problem because i just give up >_< but if anyone comes to the forum and has a solution to this problem please feel free to post the answer here or PM it to me if this gets closed..thank you two for all your help..

jlhaslip

Feb 19 2006, 03:34 AM

Okay, this ought to work... Check here to see an example in action.

There is a containing div which includes the full width header div followed by a sidebar div of a %'ge width and the main content div with a margin to suit the width of the sidebar div. The sidebar and content don't conflict with each other. The sidebar is floated to the left hand side of the page and the content has a margin of the same width as the sidebar. No absolute positioning is required.

THEN, the footer is added to the bottom of the page OUTSIDE of the containing div so that it is always below the longest of either the sidebar or the content.
I suppose there could be an overall wrapper div to contain the whole works, but it works this way. And at one time it validated, too, so whatever it takes is good for me.

The css is here . (I'll clean it up later) ( ya, right)

Albus Dumbledore

Feb 18 2006, 05:33 PM

well that doesn't work either, i thanx you for all of your help....but i think i am going to take umm, avalon's ideal on using tables and seeing if that works which i hope it does, if not i shall come back to the forum and see if neone else has put up any suggestions...thanx again for you and avalons help..

Similar Topics

Keywords : image scroll content

Fixed Background Image - Just little reminder (10)
Easy teahnic, post the following codes between and QUOTE  For red colour, change it to your
image's location. For green colour, it is used to set horizontal and vertical position of
background image. I hope it can help you. /tongue.gif' border='0' style='vertical-align:middle'
alt='tongue.gif' /> ...

Help With Background Image - please? :) (6)

Background Image Picture On A Website - how do u make a pic a backround?? (3)

?email me if u know! Trap17 forum asks you to post contributes with substance. ...

How To Make Cms For My Dynamic Website? - A Content Management System (3)

It is a pain trying to have to write new code everytime you want to change something on my website.
I know there is an easier way to update content. I read about COntent Management systems which
apparently use XML. When I would enter the administartion area there woudl be dynamic fileds in
which I could edit the data and when I click submit it would change. The thing is that I know how
to add these forms to a page but I dont know how to create an adminstration area. I use php and one
of my friends said to use XML. I have a book but it is taking a long time to read....

Image Links - (5)

Ok...another question...may sound stupid, but we're all stupid...how'd I be able to create
an image link. Uh...let me rephrase this: If I were to create an "Enter" image and wanted people to
click the image to enter to a certain page, how would I do it without some sort of the famous "Blue
Line" around it? Any help would be greatly appreciated... /unsure.gif"
style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" />...

Typing Over Image - (7)

Is it possible to have a linked font over an image (not being a background image)? If so, how do I
accomplish that?...

Html Help: Div Cuts Off Unexpectedly - html bug: failure to encompass all content (6)

Hey guys, I'm making a new template because I decided that I needed a much simpler one that
goes with the times. Template here: http://nerdnirvana.org/newlay0ut/v3.htm As you can see,
everything looks fine, but if the content area is smaller in length than the sidebar, then the
layout screws up because the layout refuses to expand to encompass everything. Link:
http://nerdnirvana.org/newlay0ut/comments.htm Does anyone know what I can do so that the layout
expands if necessary? I tried clearing the div, but that doesn't help. Thanks!...

Image Roll Over Drop Down Menu Help - (2)

Ok I been searching for days now on a half way descent tutorial on how to do a Image Roll Over Drop
Down Menu in CSS without the use of javascript, I been seeing alot of the suckerfish set up but of
course no one goes in to detail on how to set up the image rollover version of it. Plus I don't
want the dhtml or the javascript setup just good ole pure css. Also I need ot be able to control
multiple menus in one script as well. CODE <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict...

Need Help With Image Wrapping - (13)

ok my problem now is that i need it to auto width the image that needs to be use so then I can use
tags for the content without the need for the image to expand from left to right. heres the css for
the image wrap CODE <style type="text/css"> span {     background-image:
url(images/gfxtrap_42.gif);     background-repeat: repeat-y;
    background-position: top left, bottom right;     height: 200px;     border: 0px; }
</style> heres the rest of the website code. CODE <!DOCTYPE html PUBLIC
"...

Getting Content From A Different File - (4)

Hey, I think this would be simple to html programmers.. but not to me. I got a website template to
make it easy, and there are boxes at the side that i can just put text in. But what I put in these
boxes I want to appear on every page of the site. So by doing that i put a piece of code in telling
it to get the text content from an external file. How would I do this? Here is the string at the
moment. Code: CODE <TD COLSPAN=3 background="images/image_45.jpg"><div
align="center"><font color="#FF8000" size="2" face=...

Ie5 Mac Does Not See My Site - It shows the body bg image only... (11)

Remember that site layout I was hacking down for IE? Which by the way I didnt really like, but it
was the customer's design... and yes, he is not a graphic designer hehe... Anyway I was really
surprised that I got to the solution and fixed it... but as I'm testing between browsers, I come
to see that Internet Explorer in Mac does not show nothing of my page, yet the source code is there,
if you click command + e in order to see the html source code, its all there! But all I can see
from the page itself is the body background-image... I tried removing the d...

Usemap And Table Background Image Changing - (5)

I have a menu page that consists of links to other pages. The page has a background image of a
globe. The globe is divided into seperate sections for each menu item. As a user hovers over each
section I change the background image(The same globe with that section highlighted.) That is what I
have so far except that they have to hover over a small anchor tag that I put in not the whole
section. I want to change it so that they can actually hover over all of the section they are
selecting. I found usemap online but haven't found any examples where it will actually ch...

Image Doesn't Load - (6)

Hi, Never hapened to me since HTML was invented. I've got a webpage ( h.shtml - I've also
tryed .htm, .html ) with the following code: Code: CODE <html> <head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta
name="ProgId" content="FrontPage.Editor.Document"> <meta
http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Horoscope</title> </head> <body> <div
align="center"> <cente...

Image.index.html - (10)

hello there well i designed this image that includes text a logo i shall say i am aware that i need
to title it index.html when i upload the file i visit my website and it shows the file folder. now i
only want that image i designed on there so when clients visit my site it only goes to that page the
rest of my site isent done yet. i want it to be just like the sites you visit and it states
underconstruction. programs ive tried: indesign, image ready, incopy cs2, dreamweaver. and i
still dont understand please help meeh thanks oh and what classify's images html,...

Makeing A Div Thing Go From Top To Bottom, - regardless of its content. (3)

ok so i dont really know how to call this so if someone know a better title please let some mods
change it. I want to make a site that goes 100% page diagonaly. and has a border image left and
right. since this probably makes no sense at all ill show you the page i designed in Macromedia
Fireworks and maybe you will understand. i hope someone can help me. ...

Box Content - how do i create some? (5)

/wink.gif' border='0' style='vertical-align:middle' alt='wink.gif' /> i want to know how to
create a box content? and how to make them with color i dont need to know the color codes like
#000000 i know that /smile.gif' border='0' style='vertical-align:middle' alt='smile.gif' /> i
just want to know how to make a box content to but text inside ect. Thanks for your help.
-Microsoft...

Substitute Form Button For An Image - homemade images in forms buttons (3)

Hi, I have the next formular : CODE <form method='post'
action='index.php?mode=2&id=1'> <input type='hidden'
name='name' value='Canon Digital Ixus 700'/> <input
type='hidden' name='id' value='1'/> <input
type='hidden' name='qty' value='1'> <input
type='hidden' name='cost' value='40'> <input
type='submit' value='Add to ca...

Page Content Shifts In Different Browsers - (4)

The content on my pages either shifts or looks recognizably different between IE and Mozilla Firefox
browsers. I formatted the text with css classes hopping that might help. However, that didn't
help this problem. The page doesn't look the same in IE and Mozilla Firefox. What can I do to
fix this? Thanks, kvarnerexpress ...

Scroll Bars - Scroll bars (5)

I would like to know the code for making your own kind of scroolbar. you know modifing its color and
stuff like. /biggrin.gif' border='0' style='vertical-align:middle' alt='biggrin.gif' /> ...

Scroll Color - CODE (2)

i find this code :: CODE <STYLE type=text/css>BODY { SCROLLBAR-FACE-COLOR:
#ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #0099cc; SCROLLBAR-TRACK-COLOR:
#ffffff; SCROLLBAR-DARKSHADOW-COLOR: #394963 }</style> with this code you can change
your Scroll color /blink.gif' border='0' style='vertical-align:middle' alt='blink.gif' /> ...

Simple Smil Question About Image Positioning - (3)

Howdy all, I'm working on a project for college but ran into a "little" problem with SMIL,
concerning positioning images. You can see the smil presentation here:
http://www.ket.trap17.com/smil-show/index.html (its only a 15 second presentation and doesn't
take long to load. don't mind the language on the left image, its portuguese) What i want to
do, is to make the image on the right, to fade in in the same place as the left image. I tried
setting a region but that didn't work, I tried using the layout tags in the but that also
didn't work (o...

Looking for image, scroll, content

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE