-
ok yes, it makes since, but going back a little to position, please.
On this site: http://www.htmlgoodies.com/beyond/cs...ng-Huh.htm#its
"Quote" It says, "position:absolute; states that the image will go exactly where I say it will. If text or another picture is already there -- tough. This will go right over top of it. That is one of the drawbacks to this positioning stuff. "
Position:absolute worked on the trackbed.gif. But when I added another track a couple of px above, it completely hid the first track also the train when I tried to up it by a couple of px above the train.gifs too. It appears as though it will not let the gifs overlap in the "position=absolute". I have tested it over and over and keep coming up with the same thing.
The trackbed.gif is positioned well, no problem with that for now, But when I put a:
style="position:absolute; TOP:517px; LEFT:10px;" after the Id crawlers both train gifs are hidden completely.
What am i doing wrong? Please look at my source.
ps: The htmlgoodies.com site is great, easy to understand. Thanks.
-
I just looked at your source code but the script calls for each marquee are missing - there are only pairs of empty script tags that look like this;
Code:
<script type="text/javascript">
//
</script>
Is your web page editor removing the scripts? Try using something like Notepad++ http://www.google.com/m?q=notepad%20plus%20plus (or even good old Notpad in your Windows programme accessories folder) to edit your web page.
Once the scripts are back in place we can work more on positioning.
-
I haven't done anything different(using notepad). The only thing different is this code that I see in my source.
When I added the "style="position:absolute; TOP:517px; LEFT:10px; "
to mycrawler and mycrawler2 the train.gifs just disappeared from the page.
I will go back to the original so you can see. I dont know what happened.
The original is there now. both trains are showing as before. All I did was remove the style from the div class in both mycrawler and mycrawler2. umph?? :confused:
<!-- ============ Begin Train Marquee ============== -->
<table width="0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle">
<div class="marquee" id="mycrawler" style="position:absolute; TOP:517px; LEFT:10px;" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '2px',
'width': '990px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
direction: 'right',
savedirection: true,
random: true
});
//]]>
</script>
<div class="marquee" id="mycrawler2" style="position:absolute; TOP:517px; LEFT:10px;">
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '990px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
//]]>
</script>
</td>
</tr>
</table>
<IMG STYLE="position:absolute; TOP:537px; LEFT:10px; WIDTH:990px; HEIGHT:5px" SRC="images/trackbed.gif">
<!-- ============ END Train Marquee ============== -->
-
I think the javascript is modifying the style attribute - no worries - try wrapping the crawler div in another set of div tags and add the style="" to that instead.
Code:
<div style="">
<DIV id="mycrawler2" class="marquee"><IMG alt="" src="About%20Railmember%20Fan%20Site_files/shastadaylight.gif">
<IMG alt="" src="About%20Railmember%20Fan%20Site_files/sanfranciscochief.gif">
</DIV>
</div>
-
ok I have wrapped the crawler divs in another set of div tags. I see my source on the net but the train.gifs have disappeared again. The tracks are still there.
Here's the source:
<div style="">
<div class="marquee" id="mycrawler" style="position:absolute; TOP:517px; LEFT:10px;" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
ps. Would you be so kind as to direct me to an easy site that explains divs and what they are all about. I am so used to html basic code but never learned about divs. I would like to understand them, please.
-
You still have the style attribute inside the "mycrawler" div so the same thing as before is still happening.
What I meant was to remove the styling from the "mycrawler" div (as you currently have it) and instead style the div on the outside of that;
Code:
<div style="position:absolute; TOP:517px; LEFT:10px;" >
<div class="marquee" id="mycrawler" >
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
A div is just a container for other elements, but here's some info as requested: http://www.tizag.com/htmlT/htmldiv.php
-
Beverleyh meant:
Code:
<div style="position:absolute; TOP:517px; LEFT:10px;">
<div class="marquee" id="mycrawler">
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
And she's right. You cannot apply style directly to the class="marquee" div.
Alternatively you can use the style property of the init, see the script's documentation for specifics. Do not do both. Example of using the init's style property:
Code:
<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '5px',
'width': '450px',
'background': 'lightyellow',
'border': '1px solid #CC3300'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
persist: true,
savedirection: true
});
</script>
Zooming in on the highlighted section, you would do like:
Code:
style: {
'position': 'absolute',
'top': '517px',
'left': '10px',
'height': '250px' //change the height to the desired height
},
Further, to your question about the div tag - The div is a generic block level tag with no other special properties. Any good HTML reference will tell you about it. It's a lot like the p tag, except that it is not self closing (means it needs a closing </div> tag to close it, a p tag will close, in addition to the usual ways, when it hits the next opening block level element) and unlike p, div has no default margin.
-
I am so thankful for the help from you both Beverleyh and John.
I have learned a lot.
I have made the corrections and the code can be seen in the source.
Please tell my why I see only one of the two trains going to the left when they should be passing one another going in opposite directions and appear to be on the same track? It looks like my code is correct now. But I also noticed that the tran.gifs and track are now covered my my google ad which wasn't a problem before. Please tell me how to correct that.
I know this has to do with the position but this is a new problem.
-
Thanks also for the info on divs. The webpage you sent me to was the first time I really understood divs and seeing an example. Very helpful. thanks again to both of you.
-
On that page I see two crawlers. They are both the exact same size and both in the exact same position. Since they are both positioned absolute, the second one covers the first one. If you want both to be seen in the way I think that you're describing, they should each be half the width that they are now, and one should be positioned farther to the right by that same amount. Something like (changes in 3 places highlighted):
Code:
<div style="position:absolute; TOP:507px; LEFT:10px;">
<div class="marquee" id="mycrawler" >
<img src="images/shastadaylight.gif" alt="" />
<img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler',
style: {
'padding': '2px',
'width': '495px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
direction: 'right',
savedirection: true,
random: true
});
//]]>
</script>
<div style="position:absolute; TOP:507px; LEFT:505px;">
<div class="marquee" id="mycrawler2">
<img src="images/shastadaylight.gif" alt="" /> <img src="images/sanfranciscochief.gif" alt="" />
</div>
</div>
<script type="text/javascript">
//<![CDATA[
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '495px',
'height': '25px'
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
//]]>
</script>
