I have put up a slideshow on my site. It doesn't align properly when my browser is not maximized or on my laptop.
How do I fix this?
http://www.eastsideyogaandfitness.com/gallery.html
Thanks in advance for your replies
Alan
Alan Bondy
Registered User
24 posts
Inger
Senior Advisor
14,459 posts
Online Now
Try changing the absolute positioning to relative.
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Alan Bondy
Registered User
24 posts
Changing the relative to absolute did not work. It seems to be attached to the side navigation.
When I change the side nav to relative it just dissappears.
Here is the code
<li><object style="Z-INDEX: 100; LEFT: 126px; POSITION: relative; TOP: 429px; WIDTH: 500px; HEIGHT: 462px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="CoffeeCup" align="middle">
<param name="movie" value="myalbum.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="Z-INDEX: 100; LEFT: 126px; POSITION: relative; TOP: 429px; WIDTH: 500px; HEIGHT: 462px;" src="myalbum.swf" quality="high" bgcolor="#ffffff" name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object><a href="Video.html"></a></li></div>
<ul>
<div></div>
<div id="sideNav" style="Z-INDEX: 100; LEFT: 582px; WIDTH: 189px; POSITION: absolute; TOP: 395px; HEIGHT: 260px">
<div align="center">
Thanks Alan
When I change the side nav to relative it just dissappears.
Here is the code
<li><object style="Z-INDEX: 100; LEFT: 126px; POSITION: relative; TOP: 429px; WIDTH: 500px; HEIGHT: 462px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="CoffeeCup" align="middle">
<param name="movie" value="myalbum.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="Z-INDEX: 100; LEFT: 126px; POSITION: relative; TOP: 429px; WIDTH: 500px; HEIGHT: 462px;" src="myalbum.swf" quality="high" bgcolor="#ffffff" name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object><a href="Video.html"></a></li></div>
<ul>
<div></div>
<div id="sideNav" style="Z-INDEX: 100; LEFT: 582px; WIDTH: 189px; POSITION: absolute; TOP: 395px; HEIGHT: 260px">
<div align="center">
Thanks Alan
Mark Sleep
Registered User
388 posts
Use tables and put it in a table. Use % not pixel numbers.
My sites: www.cedarstreetchurch.org, www.lojope.com and www.dteu.info
Alan Bondy
Registered User
24 posts
Putting it in a table works perfectly With I.E.
With Firefox the Slideshow does not go into the table.
This is closer and I am sure that someone can point out my error.
I am using Coffeecup html ver 7
The link is http://www.eastsideyogaandfitness.com/gallery2.html
And here is the code
<table style="Z-INDEX: 106; LEFT: -510px; POSITION: absolute; TOP: -17px" height="504" width="524" border="1">
<tr><!-- Row 1 -->
<td><object style="Z-INDEX: 106; LEFT: 9px; WIDTH: 500px; POSITION: absolute; TOP: 17px; HEIGHT: 462px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="CoffeeCup" align="middle">
<param name="movie" value="myalbum.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="Z-INDEX: 106; LEFT: 9px; WIDTH: 500px; POSITION: absolute; TOP: 17px; HEIGHT: 462px;" src="myalbum.swf" quality="high" bgcolor="#ffffff" name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object></td><!-- Col 1 --></tr></table>
</body>
With Firefox the Slideshow does not go into the table.
This is closer and I am sure that someone can point out my error.
I am using Coffeecup html ver 7
The link is http://www.eastsideyogaandfitness.com/gallery2.html
And here is the code
<table style="Z-INDEX: 106; LEFT: -510px; POSITION: absolute; TOP: -17px" height="504" width="524" border="1">
<tr><!-- Row 1 -->
<td><object style="Z-INDEX: 106; LEFT: 9px; WIDTH: 500px; POSITION: absolute; TOP: 17px; HEIGHT: 462px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="CoffeeCup" align="middle">
<param name="movie" value="myalbum.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param name="salign" value="lt"/>
<param name="bgcolor" value="#ffffff"/>
<embed style="Z-INDEX: 106; LEFT: 9px; WIDTH: 500px; POSITION: absolute; TOP: 17px; HEIGHT: 462px;" src="myalbum.swf" quality="high" bgcolor="#ffffff" name="CoffeeCup" scale="noscale" salign="lt" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object></td><!-- Col 1 --></tr></table>
</body>
Cary
Ambassador
1,073 posts
Remove the positioning information from the embed tag. It doesn't need the z-index, position, left or top styling.
BillR
Ambassador
3,144 posts
73Fender,
I don't think you are going to find a simple solution. There are many errors in your code that could be causing the problem, starting right at the <body> tag.
Notice the closing anchor </a> immediately following the first <div> and then you have a <li> tag which must follow a <ul>. There are several empty <div></div> tags. You also have several characters that show up as ? when the code is viewed from Firefox. Those characters are not compatible with the UTF-8 character set.
These things can all make a browser enter quirks mode and throw your positioning off.
Try starting at the top of your code and place your code in a logical sequence from top to bottom of the display, and left to right. If you start with:
<body>
<div id="header"> </div>
Your header.jpg image will display at the top of the page. Any minor adjustments in positioning can then be done in your external CSS file.
Next, you have a <div> set as id="columncontainer" and your CSS file sets the width at 867 while your code sets the width at 818.
Hope this gives you some help getting your display to work the way you want it to work.
I don't think you are going to find a simple solution. There are many errors in your code that could be causing the problem, starting right at the <body> tag.
<body>
<div></a>
<li><a href="Video.html"></a></li></div>
<ul>
<div></div><a href="Video.html">
<div></div>
<div></div>
<li><a href="Video.html"></a>
<div align="center">
<div></div><a href="Video.html"></div>
<li>
<ul></ul>
<div></div></a>
<div></a>
<li><a href="Video.html"></a></li></div>
<ul>
<div></div><a href="Video.html">
<div></div>
<div></div>
<li><a href="Video.html"></a>
<div align="center">
<div></div><a href="Video.html"></div>
<li>
<ul></ul>
<div></div></a>
Notice the closing anchor </a> immediately following the first <div> and then you have a <li> tag which must follow a <ul>. There are several empty <div></div> tags. You also have several characters that show up as ? when the code is viewed from Firefox. Those characters are not compatible with the UTF-8 character set.
These things can all make a browser enter quirks mode and throw your positioning off.
Try starting at the top of your code and place your code in a logical sequence from top to bottom of the display, and left to right. If you start with:
<body>
<div id="header"> </div>
Your header.jpg image will display at the top of the page. Any minor adjustments in positioning can then be done in your external CSS file.
Next, you have a <div> set as id="columncontainer" and your CSS file sets the width at 867 while your code sets the width at 818.
Hope this gives you some help getting your display to work the way you want it to work.
Heather MacAllister
Registered User
35 posts
Bill R.,
I also get extra <div></div> (and others) when I switch back and forth between the code view and the visual view in the HTML editor program. I recently noticed that adding an element to a web page in the visual mode might land the code outside the <div id="container"> tag that centers everything. It's taken me a year to figure this stuff out, though. I'll bet some of the other coding errors in 73Fender's site are program quirks, too.
Heather
I also get extra <div></div> (and others) when I switch back and forth between the code view and the visual view in the HTML editor program. I recently noticed that adding an element to a web page in the visual mode might land the code outside the <div id="container"> tag that centers everything. It's taken me a year to figure this stuff out, though. I'll bet some of the other coding errors in 73Fender's site are program quirks, too.
Heather
Alan Bondy
Registered User
24 posts
Thanks for all the advice.
I guess I will have to start at the top and clean up the code as I go.
It will be a good learning experience for me b/cuz I am pretty much flying by the seat of my pants!
I guess I will have to start at the top and clean up the code as I go.
It will be a good learning experience for me b/cuz I am pretty much flying by the seat of my pants!
BillR
Ambassador
3,144 posts
HeatherMac wrote:
Bill R.,
I also get extra <div></div> (and others) when I switch back and forth between the code view and the visual view in the HTML editor program. I recently noticed that adding an element to a web page in the visual mode might land the code outside the <div id="container"> tag that centers everything. It's taken me a year to figure this stuff out, though. I'll bet some of the other coding errors in 73Fender's site are program quirks, too.
Heather
Bill R.,
I also get extra <div></div> (and others) when I switch back and forth between the code view and the visual view in the HTML editor program. I recently noticed that adding an element to a web page in the visual mode might land the code outside the <div id="container"> tag that centers everything. It's taken me a year to figure this stuff out, though. I'll bet some of the other coding errors in 73Fender's site are program quirks, too.
Heather
Heather,
That is one of the reasons I stay in code edit. It makes it easier for me if I keep it under my control.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
