Log in

View Full Version : Mouse over advice needed.


theremotedr
01-29-2012, 08:33 PM
I have been playing with my Ebay listing page by making it look a little more professional than basic.
I have introduced a mouse over affect with 3 photos i have added to the page just to make it better but would like some further help if i may.
Lets say i have the main photo named "A" and two other photos below it named "B" and "C".
When the Ebay page is first viewed photo "A" is displayed correctly at the top in the main position,if you then move your mouse over photo "B" or "C" this image is now shown where photo "A" was just shown in the main position.
This is how i want it to be done & works fine BUT when you move your mouse off photo "B" or "C" it is still shown in the main photo space,i need it to revert back to photo "A" when the mouse is not over the smaller images.
So far i can only make this happen if you leave & return to the page or refresh it.

Can anyone advise a code or string of text which would enable me to complete my goal.
theremotedr
01-29-2012, 09:15 PM
Looking at the codes for this page i see the following.

One smalll photo i use is on line 147
another small photo i use is on line 149
The main photo is on line 139
The photos stay on the same line as mentioned above.
Now on the small photos within the code i see the following class="biankuang2" onmouseover="fda(this.src)" width="125" height="86" vspace="2"></td>
Now not knowing code can we somehow introduce the correct way of offmouseover show the photo on the line 139
Even though its not the correct way of typing it you know what i mean,,,dont you ?
coothead
01-30-2012, 09:31 AM
Hi there theremotedr,

here is an example, that may be of interest to you...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://www.coothead.co.uk/images/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>CSS swap image</title>

<style type="text/css">
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
background-color:#f0f0f0;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
#container {
position:relative;
width:384px;
height:348px;
padding:12px;
border:1px solid #222;
margin:20px auto;
background-color:#555;
box-shadow:#333 10px 10px 20px;
}
#a {
position:absolute;
width:382px;
height:254px;
border:1px solid #f00;
top:10px;
background-image:url(blood.jpg);
background-size:100%;
box-shadow:#222 4px 4px 8px;
}
#b,#c,#d {
position:absolute;
width:118px;
height:78px;
border:1px solid #000;
top:278px;
background-image:url(buddha.jpg);
background-size:100%;
box-shadow:#222 4px 4px 8px;
cursor:pointer;
}
#c {
left:142px;
background-image:url(autumn.jpg);
}
#d {
left:274px;
background-image:url(col.jpg);
}
#b:hover,#c:hover,#d:hover {
opacity:0.6;
}
#b:hover+div+div+div {
background-image:url(buddha.jpg);
border-color:#fef47a;
}
#c:hover+div+div {
background-image:url(autumn.jpg);
border-color:#f93;
}
#d:hover+div {
background-image:url(col.jpg);
border-color:#6785b7;
}
</style>

</head>
<body>

<div id="container">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div>

</body>
</html>

coothead
theremotedr
01-30-2012, 09:53 AM
Your example works perect and is what i am looking for it to do.

These photos get changed as and when i sell something on ebay so i need the code to point to line 139 regardless of what code is in the line that is from photobucket etc.

The next step is not knowing much about html code etc how or where would i put this code into the correct place so it would work.

Thank,i could send you the html file to look at if need be.
manideep
01-31-2012, 04:03 PM
hi exmaple is nice but provide some screen shot for the output of that example ,then it will be more understandable... :)
thank u ... :)
theremotedr
01-31-2012, 04:11 PM
I found this.
http://www.auctionsupplies.com/practice/ebay.shtml

Copy the code above and paste it into the box on the screen from the link supplied.
Its a site that allows you to check your ebay html etc but this code works within it and perfect but i need it to be altered so it can work for me.
Anybody willing to help would be nice.
Or please send pm etc so we can discuss it.
coothead
02-03-2012, 09:19 AM
Hi there theremotedr,

The code below looks OK, when tried out here (http://www.auctionsupplies.com/practice/ebay.shtml). ;)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://i670.photobucket.com/albums/vv62/ipbr21054/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to a.....</title>

<style type="text/css">
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
margin:12px;
background-color:#f0f0f0;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
#container {
width:1023px;
border:4px solid #111;
margin:auto;
background-color:#5d0e13;
box-shadow:#333 10px 10px 20px;
}
#header {
display:block;
width:1023px;
height:130px;
border-bottom:8px solid #000;
}
#content {
width:991px;
height:536px;
padding-top:38px;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('WEBSITE%20PHOTOS/backgroundflames.jpg');
overflow:visible;
}
#picture {
position:relative;
width:658px;
margin:auto;
}
#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url('NEW%20EBAY/SMARTKEYPADFULL.jpg');
background-size:100%;
box-shadow:#000 8px 8px 16px;
}
#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
background-size:100%;
box-shadow:#000 4px 4px 8px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
}
#d {
left:447px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#d:hover+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#ebay-paypal {
width:991px;
height:116px;
padding:3px 0;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('WEBSITE%20PHOTOS/bmw.jpg');
}
#ebay {
float:left;
width:103px;
height:116px;
border:1px solid #fc9;
margin-left:31px;
box-shadow:#000 4px 1px 6px;
}
#paypal {
float:right;
width:115px;
height:106px;
border:1px solid #fc9;
margin:5px 25px 0 0;
box-shadow:#000 4px 1px 8px;
}
</style>

</head>
<body>

<div id="container">

<img id="header" src="WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content">

<div id="picture">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content -->

<div id="ebay-paypal">
<img id="ebay" src="WEBSITE%20PHOTOS/topratedseller.jpg" alt="ebay">
<img id="paypal" src="WEBSITE%20PHOTOS/paypalverified.jpg" alt="paypal">
</div><!-- end #ebay-paypal -->

</div><!-- end #container -->

</body>
</html>

coothead
theremotedr
02-03-2012, 09:25 AM
Hello Coothead.
Can you write a code so i can use it on my ebay page.
What you have works great for me.
I dont mind making a donation.
I can send you the html code to look at,and would appreciate it if you have the time.
When i mentioned about i need it altered so it will work for me i did not mean it did not work on the link i supplied.
I mean i need this code altered etc so it could work the way i need it to work.
I use 1 main photo and 2 small photos.
Please can you help me coothead.

Thanks very much.
coothead
02-03-2012, 09:42 AM
Hi there theremotedr,

the code in my previous post is a reworking of the code that you supplied here...
http://www.htmlforums.com/showpost.php?p=804873&postcount=3 (http://www.htmlforums.com/showpost.php?p=804873&postcount=3)
I thought that was what you wanted me to recode for you. :confused:

coothead
theremotedr
02-03-2012, 09:50 AM
Hi sorry i did not read it correctly.
I will just have a look and reply back in 10 minutes.
Thanks for your time.
theremotedr
02-03-2012, 10:02 AM
Hello.
When i paste it into the link i supplied it works perfect.
When i open frontpage the 3 small photos are not shown,but i do see a,b,c where they were.
These 3 photos are changed as and when i list something.
I get the code from photobucket and then click the first small photo,switch to code in frontpage and the delete the old code and replace with the new code just obtained from photobucket.
Then do the same for the other 2 small photos.
Can i send you then html full code so you can see what i mean.
You can pm me your email so i can send it to you.

Thanks
coothead
02-03-2012, 10:20 AM
Hi there theremotedr,

When I paste it into the link I supplied it works perfect[ly].
So what is the problem. :confused:

The code that I write works in genuine browsers.
I cannot, and certainly don't need to, test code in HTML editors.

As for "Frontpage", according to posts that I have seen in various forums, it is considered to be worthless junk. ;)

You should use "Notepad" instead to edit your code.

You should use the "Manage Attachments" facility to send me files and images.
Just put them all in zip files. ;)

coothead
theremotedr
02-03-2012, 10:38 AM
Here are the 2 files.
I have named them full code & partial.
Partial code shows 3 small photos as per thread post.
Full code is currently in use but with 2 photo only.
I hold my hand up and say im an idiot as after i posted the partial code showing 3 small photo to which i would like it recoded i did not save it.
Would be be able to insert a third photo into the full code file sent here then apply your code so it works like you recoded for me.

I cant believe i did not save it as now i have a working recoded 3 photo page but nothing below the 3 small photos "my text etc" & i also have a full page but with 2 small photos & no code.
I am an idiot,But thanks to you i might learn something when we have a working code with 3 small photos on a full page with my text.

Thanks very much from somebody with a very red face
coothead
02-03-2012, 02:13 PM
Hi there theremotedr,,

here is the full coded page...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://i670.photobucket.com/albums/vv62/ipbr21054/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to Theremotedr</title>

<style type="text/css">
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
margin:12px;
background-color:#f0f0f0;
font-family:arial,sans-serif;
font-size:16px;
text-align:center;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
#container {
width:1023px;
border:4px solid #111;
margin:0 auto 20px;
background-color:#5d0e13;
box-shadow:#333 10px 10px 20px;
}
#header {
display:block;
width:1023px;
height:130px;
border-bottom:8px solid #000;
}
#content-1 {
width:991px;
height:536px;
padding-top:38px;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('WEBSITE%20PHOTOS/backgroundflames.jpg');
overflow:visible;
}
#picture {
position:relative;
width:658px;
margin:auto;
}
#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url('NEW%20EBAY/SMARTKEYPADFULL.jpg');
background-size:100%;
box-shadow:#000 8px 8px 16px;
}
#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
background-size:100%;
box-shadow:#000 4px 4px 8px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
}
#d {
left:447px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#d:hover+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg');
border-color:#527eab;
}
#ebay-paypal {
width:991px;
height:116px;
padding:3px 0;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('WEBSITE%20PHOTOS/bmw.jpg');
}
#ebay {
float:left;
width:103px;
height:116px;
border:1px solid #fc9;
margin-left:31px;
box-shadow:#000 4px 1px 6px;
}
#paypal {
float:right;
width:115px;
height:106px;
border:1px solid #fc9;
margin:5px 25px 0 0;
box-shadow:#000 4px 1px 8px;
}
#content-2 {
border-top:8px solid #000;
background-color:#bc3f0f;
}
#table-1 {
width:986px;
border:3px double #999;
border-collapse:collapse;
margin:19px auto;
background-color:#5d0e13;
font-size:20px;
}
#table-1 td {
padding:4px;
border:1px solid #000;
font-size:120%;
}
#feedback {
display:block;
width:749px;
height:500px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}
#bottom {
height:20px;
}
.color-1 { color:#ff0; }
.color-2 { color:#fff; }
.color-3 { color:#bc3f0f; }
.font-1 { font-size:110%; }
.font-2 { font-size:150%; }
.font-3 { font-size:200%; }
.font-4 { font-size:220%; }
.bold { font-weight:bold; }
.left { text-align:left; }
.center { text-align:center; }
.border1 {
width:710px;
border-bottom:4px dotted #000;
margin:auto;
}
.border2 {
width:110px;
border-bottom:4px dotted #000;
margin:auto;
}
h1 {
font-size:300%;
font-weight:normal;
color:#ff0;
letter-spacing:3px;
}
</style>

</head>
<body>

<div id="container">

<img id="header" src="WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content-1">

<div id="picture">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content-1 -->

<div id="ebay-paypal">
<img id="ebay" src="WEBSITE%20PHOTOS/topratedseller.jpg" alt="ebay">
<img id="paypal" src="WEBSITE%20PHOTOS/paypalverified.jpg" alt="paypal">
</div><!-- end #ebay-paypal -->

<p class="color-1 font-1">The Item you see is the one you will receive</p>
<p class="color-2 font-1 bold">Mouse over to enlarge</p>

<div id="content-2">

<table id="table-1" class="left"><tr>
<td class="bold color-3">Manufacturer</td>
<td class="color-1">SMART</td>
</tr><tr>
<td class="bold color-2">Reprogramming</td>
<td class="color-2 center">*Please research this before bidding otherwise do not bid or buy*</td>
</tr><tr>
<td class="bold color-3">Item Condition</td>
<td class="color-1">NEW</td>
</tr><tr>
<td class="bold color-3">Part Number</td>
<td class="color-1">N/A</td>
</tr><tr>
<td class="bold color-3">Frequency</td>
<td class="color-1">N/A</td>
</tr></table>

<h1>Hello And Welcome To My Listing</h1>
<p class="font-4 bold">Here we have a Smart car key pad</p>
<p class="font-4 bold">3 Button as per photo</p>
<p class="font-4 bold">Very easy to replace with your old/split pad</p>
<p class="font-4 bold">Make sure your key looks like example photo shown</p>
<p class="border1">&nbsp;</p>
<p class="font-2 bold color-1">Worldwide Shipping Available</p>
<p class="font-2 bold color-1">I Use the Royal Mail International Signed For Service</p>
<p class="font-2 bold">Speedy Delivery &amp; Well Packaged</p>
<p class="font-2 bold">UK Items Are Sent 1st Class Recorded</p>
<p class="font-2 bold color-1">Tracking Number Will Be Emailed To The Winner Once Item Posted</p>
<p class="border2">&nbsp;</p>
<p class="font-3 color-2">Item Posted Within 1 Day Of Cleared Payment</p>
<p class="font-3 bold color-2">BUY WITH CONFIDENCE FROM A RELIABLE POWER SELLER</p>
<p class="font-3 bold color-2">WITH A <span class="color-1">100%</span> FEEDBACK SCORE</p>
<p class="font-3 bold color-2">UK Registered Business Seller</p>
<p class="font-2 color-1">Please make sure you understand the buyer is responsible for any<br>
fee that may be incurred for when the parcel enters their country</p>
<p class="font-3 bold">Any Questions Please Ask</p>
<p class="font-3 bold">&gt; <a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION">CLICK HERE TO EMAIL ME</a> &lt;</p>
<p class="font-3 bold">Or Use The ' <span class="color-1">Ask Seller A Question</span> ' Button</p>
<p class="border2">&nbsp;</p>
<p class="font-3 bold">Please Look At My Other Items For Sale</p>
<p class="font-3 bold">&gt; <a class="color-1" href="http://www.ebay.co.uk/sch/the-remote-doctor/m.html?item=150730477159&amp;sspagename=STRK:MESELX:IT&amp;_trksid=p3984.m1586.l2649&amp;_trksid=p4340.l2562">CLICK HERE TO VIEW OTHER ITEMS</a> &lt;</p>

<img id="feedback" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRFEEDBACK.jpg" alt="Photobucket">

<div id="bottom"></div>

</div><!-- end #content-2 -->
</div><!-- end #container -->

</body>
</html>

coothead
theremotedr
02-03-2012, 02:43 PM
WoW very pleased with what you have done for me.
I am very gratefull to you for doing this.

Please could you edit this line of code so its then centered on the page as at them moment its to the left,i did the rest of the text fine but i cant seem to manage this without getting it right.

<h1>Hello And Welcome To My Listing</h1>
coothead
02-03-2012, 03:06 PM
Hi there theremotedr,

all the text, including the h1 element, but excepting nine of the ten td elements has the text centered. ;)

This is coded here...

body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
margin:12px;
background-color:#f0f0f0;
font-family:arial,sans-serif;
font-size:16px;
text-align:center;
}


I do hope that you are not looking at it in that "Editor from Hell". :eek:

coothead
theremotedr
02-03-2012, 03:19 PM
No i used the link as supplied before to view it.
http://www.auctionsupplies.com/practice/ebay.shtml
It was aligned to the left.
The td elements you mention must be the text that i entered center to the code,now when i use the code in the link shown above its all centered.
I have just checked the same code on the same site and it all looks fine ?
Must be a gremlin in the pc.
I have attached a photo to show im not 100% mad but bearly.

When i upload my next set of 3 photos to photobucket how would i then go about replacing the photos currently being used with this file supplied as before i would just edit the section shown below,
src="http://i670.photobucket etc etc
coothead
02-03-2012, 03:50 PM
Hi there theremotedr,

this is the information that you need...


#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url('NEW%20EBAY/SMARTKEYPADFULL.jpg'); /this is the top image */
background-size:100%;
box-shadow:#000 8px 8px 16px;
}

#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the left thumb */
background-size:100%;
box-shadow:#000 4px 4px 8px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the center thumb */
}
#d {
left:447px;
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the right thumb */
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the left thumb */
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the center thumb */
border-color:#527eab;
}
#d:hover+div {
background-image:url('NEW%20EBAY/SMARTPADFRONT.jpg'); /this is the right thumb */
border-color:#527eab;
}

coothead
coothead
02-03-2012, 03:57 PM
Hi there theremotedr,

if, when you have tried the page on ebay itself, you find that the text is still left aligned'
then you will have to add...

style="text-align:center;"
...to each wayward element. ;)

coothead
theremotedr
02-03-2012, 03:59 PM
Just got the reply and have been looking and found it and sorted.
While i was waiting for the reply i did a basic test,basic i mean for a 5 year old.
I took 3 photos and named them left middle & right.
Uploaded them and then just copied the name of each photo.
Then looked at the code and changed them.
Great i thought as all photos were shown left middle & right BUT when i places the mouse over them i seen the old key part ?
Having looked again i seen the same text etc a little way down so by changing that also it works.

I am currently just palying but will send a file so you can see.
Thanks for the help.
theremotedr
02-03-2012, 04:33 PM
Oh Dear.
The link i have been using which allows you to view what your listing will look like before you upload to ebay DOES NOT TELL YOU JAVA SCRIPT IS NOT ALLOWED.

See photo supplied

Any ideas on a workaround ?
coothead
02-03-2012, 04:47 PM
....I haven't used any javascript. ;)
coothead
theremotedr
02-03-2012, 04:51 PM
Would you mind looking at the code just incase i did something ?
All i have done is to add 4 photos.
Enter the word center to the existing text to center it.
coothead
02-03-2012, 04:52 PM
...but I have used a base href.
No problem with that just give all the images the full href...

http://i670.photobucket.com/albums/vv62/ipbr21054/ ....etc
...and remove the base tag from the head section. ;)

coothead
coothead
02-03-2012, 04:58 PM
I am off to see my grandchildren, will have a look at your problems later...

...if I'm still alive. :D
coothead
theremotedr
02-03-2012, 05:01 PM
Could you change that for me with the items below.
In photo bucket i see direct link ?
This is what i have supplied below.
Could you alod sort the base href.

Thanks very much,i ask as im nearly there and dont wish to mess it up.
Once done as file sent back i can then read and look at it.

center photo
http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODACLOSEUP.jpg

left photo
http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAFRONT.jpg

right photo
http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAREAR.jpg
theremotedr
02-03-2012, 06:19 PM
I think i have done it,i mean if i had done something wrong the photos would not show correctly,right ?
Here is the file for what i have done & for you to take a look at if you would.

Also no matter what i do regarding putting style="text-align:center;" in the correct place i see it on the screen ????
It only needs to be done for "Hello And Welcome To My Listing"
Please could you show me how i should be entering it,i have supplied some text from the page if you could show me then im done.

</tr></table>

<h1>"Hello And Welcome To My Listing"</h1>
<p class="font-4 bold center">Here we have a Skoda key remote</p>
<p class="font-4 bold center">2 Button as per photo</p>

Thanks for your time today & i owe you a pint.
coothead
02-03-2012, 08:42 PM
Hi there theremotedr,

I think that this amended code will now meet "ebays" requirements. ;)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to The Remote Dr</title>

<style type="text/css">
* {
text-align:center;
}
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
margin:12px;
background-color:#f0f0f0;
font-family:arial,sans-serif;
font-size:16px;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
#container {
width:1023px;
border:4px solid #111;
margin:0 auto 20px;
background-color:#5d0e13;
box-shadow:#333 10px 10px 20px;
}
#header {
display:block;
width:1023px;
height:130px;
border-bottom:8px solid #000;
}
#content-1 {
width:991px;
height:536px;
padding-top:38px;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/backgroundflames.jpg');
overflow:visible;
}
#picture {
position:relative;
width:658px;
margin:auto;
}
#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/NEW%20EBAY/DRBACKGROUND.jpg');
background-size:100%;
box-shadow:#000 8px 8px 16px;
}
#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODACLOSEUP.jpg');
background-size:100%;
box-shadow:#000 4px 4px 8px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAREAR.jpg');
}
#d {
left:447px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAFRONT.jpg');
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODACLOSEUP.jpg');
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAREAR.jpg');
border-color:#527eab;
}
#d:hover+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/SKODAFRONT.jpg');
border-color:#527eab;
}
#ebay-paypal {
width:991px;
height:116px;
padding:3px 0;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/bmw.jpg');
}
#ebay {
float:left;
width:103px;
height:116px;
border:1px solid #fc9;
margin-left:31px;
box-shadow:#000 4px 1px 6px;
}
#paypal {
float:right;
width:115px;
height:106px;
border:1px solid #fc9;
margin:5px 25px 0 0;
box-shadow:#000 4px 1px 8px;
}
#content-2 {
border-top:8px solid #000;
background-color:#bc3f0f;
}
#table-1 {
width:986px;
border:3px double #999;
border-collapse:collapse;
margin:19px auto;
background-color:#5d0e13;
font-size:20px;
}
#table-1 td {
padding:4px;
border:1px solid #000;
font-size:120%;
text-align:left;
}
#table-1 #center {
text-align:center;
}
#feedback {
display:block;
width:749px;
height:500px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}
#bottom {
height:20px;
}
.color-1 { color:#ff0; }
.color-2 { color:#fff; }
.color-3 { color:#bc3f0f; }
.font-1 { font-size:110%; }
.font-2 { font-size:150%; }
.font-3 { font-size:200%; }
.font-4 { font-size:220%; }
.bold { font-weight:bold; }
.border1 {
width:710px;
border-bottom:4px dotted #000;
margin:auto;
}
.border2 {
width:110px;
border-bottom:4px dotted #000;
margin:auto;
}
h1 {
font-size:300%;
font-weight:normal;
color:#ff0;
letter-spacing:3px;
}
</style>

</head>
<body>

<div id="container">

<img id="header" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content-1">

<div id="picture">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content-1 -->

<div id="ebay-paypal">
<img id="ebay" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/topratedseller.jpg" alt="ebay">
<img id="paypal" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/paypalverified.jpg" alt="paypal">
</div><!-- end #ebay-paypal -->

<p class="color-1 font-1">The Item you see is the one you will receive</p>
<p class="color-2 font-1 bold">Mouse over to enlarge</p>

<div id="content-2">

<table id="table-1"><tr>
<td class="bold color-3">Manufacturer</td>
<td class="color-1">SMART</td>
</tr><tr>
<td class="bold color-2">Reprogramming</td>
<td class="color-2" id="center">*Please research this before bidding otherwise do not bid or buy*</td>
</tr><tr>
<td class="bold color-3">Item Condition</td>
<td class="color-1">NEW</td>
</tr><tr>
<td class="bold color-3">Part Number</td>
<td class="color-1">N/A</td>
</tr><tr>
<td class="bold color-3">Frequency</td>
<td class="color-1">N/A</td>
</tr></table>

<h1>Hello And Welcome To My Listing</h1>
<p class="font-4 bold">Here we have a Smart car key pad</p>
<p class="font-4 bold">2 Button as per photo</p>
<p class="font-4 bold">Red light flashes when both buttons pressed</p>
<p class="font-4 bold">Good working order</p>
<p class="font-4 bold">Has been checked with a frequency tester</p>
<p class="font-4 bold">Some wear to skoda logo so please see photo supplied</p>
<p class="border1">&nbsp;</p>
<p class="font-2 bold color-1">Worldwide Shipping Available</p>
<p class="font-2 bold color-1">I Use the Royal Mail International Signed For Service</p>
<p class="font-2 bold">Speedy Delivery &amp; Well Packaged</p>
<p class="font-2 bold">UK Items Are Sent 1st Class Recorded</p>
<p class="font-2 bold color-1">Tracking Number Will Be Emailed To The Winner Once Item Posted</p>
<p class="border2">&nbsp;</p>
<p class="font-3 color-2">Item Posted Within 1 Day Of Cleared Payment</p>
<p class="font-3 bold color-2">BUY WITH CONFIDENCE FROM A RELIABLE POWER SELLER</p>
<p class="font-3 bold color-2">WITH A <span class="color-1">100%</span> FEEDBACK SCORE</p>
<p class="font-3 bold color-2">UK Registered Business Seller</p>
<p class="font-2 color-1">Please make sure you understand the buyer is responsible for any<br>
fee that may be incurred for when the parcel enters their country</p>
<p class="font-3 bold">Any Questions Please Ask</p>
<p class="font-3 bold">&gt; <a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION">CLICK HERE TO EMAIL ME</a> &lt;</p>
<p class="font-3 bold">Or Use The ' <span class="color-1">Ask Seller A Question</span> ' Button</p>
<p class="border2">&nbsp;</p>
<p class="font-3 bold">Please Look At My Other Items For Sale</p>
<p class="font-3 bold">&gt; <a class="color-1" href="http://www.ebay.co.uk/sch/the-remote-doctor/m.html?item=150730477159&amp;sspagename=STRK:MESELX:IT&amp;_trksid=p3984.m1586.l2649&amp;_trksid=p4340.l2562">CLICK HERE TO VIEW OTHER ITEMS</a> &lt;</p>

<img id="feedback" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRFEEDBACK.jpg" alt="Photobucket">

<div id="bottom"></div>

</div><!-- end #content-2 -->
</div><!-- end #container -->

</body>
</html>

coothead
theremotedr
02-03-2012, 08:50 PM
I need to swap around 2 photos,left & right etc.

Can i ask what you have done so ebay will be ok with it ?

Just curious
coothead
02-03-2012, 09:17 PM
Hi there theremotedr,

Can I ask what you have done...
Well, I....

Removed the base tag from the head section.
Gave the images and background image the full href.
Removed text-align:center from the CSS body rules.
Used...
* {
text-align:center;
}

...instead.
Added id="center" here...
<td class="color-2" id="center">*Please research this before bidding otherwise do not bid or buy*</td>

Added this CSS rule...
#table-1 #center {
text-align:center;
}


coothead
theremotedr
02-04-2012, 08:25 AM
Thanks very much,it now looks great & i what i required.

Is there any need to add some kind of script so nobody can get the source code from it so then they could use it & all this work would then be free of charge for them ?

Thanks
coothead
02-04-2012, 12:23 PM
Hi there theremotedr,

The code that I write is free for anyone to use, no strings attached. ;)

The only 100% certain method of hiding source code, is to not put it on the web. :D

coothead
theremotedr
02-05-2012, 01:17 PM
Hello.
I have been trying to see how i can keep the text in the table aligned as per the photo attached named correct.
If you look at the two photos i have attached you will see that when the text Please Research This etc etc is used the table is how i would like it to stay i mean aligned to the left BUT when i do not use that text and just put N/A in each field the text then goes over to the right hand side of the screen.
Please could you advise a line of code & where to put it so that which ever text is used the wording is aligned like in the photo named correct.
I have also attached the file if would need to see the code or edit it for me but could you advise the selection of it you changed so i can make a note of it for my notes.

Thanks once again.
coothead
02-05-2012, 05:12 PM
Hi there theremotedr,

here is your amended code...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to The Remote Dr</title>

<style type="text/css">
* {
text-align:center;
}
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
margin:12px;
background-color:#f0f0f0;
font-family:arial,sans-serif;
font-size:16px;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
#container {
width:1023px;
border:4px solid #111;
margin:0 auto 20px;
background-color:#5d0e13;
box-shadow:#333 10px 10px 20px;
}
#header {
display:block;
width:1023px;
height:130px;
border-bottom:8px solid #000;
}
#content-1 {
width:991px;
height:536px;
padding-top:38px;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/backgroundflames.jpg');
overflow:visible;
}
#picture {
position:relative;
width:658px;
margin:auto;
}
#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url(http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRBACKGROUND.jpg);
background-size:100%;
box-shadow:#000 8px 8px 16px;
}
#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGFRONT.jpg');
background-size:100%;
box-shadow:#000 4px 4px 8px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGFULL.jpg');
}
#d {
left:447px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGREAR.jpg');
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGFRONT.jpg');
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGFULL.jpg');
border-color:#527eab;
}
#d:hover+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/JAGREAR.jpg');
border-color:#527eab;
}
#ebay-paypal {
width:991px;
height:116px;
padding:3px 0;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/bmw.jpg');
}
#ebay {
float:left;
width:103px;
height:116px;
border:1px solid #fc9;
margin-left:31px;
box-shadow:#000 4px 1px 6px;
}
#paypal {
float:right;
width:115px;
height:106px;
border:1px solid #fc9;
margin:5px 25px 0 0;
box-shadow:#000 4px 1px 8px;
}
#content-2 {
border-top:8px solid #000;
background-color:#bc3f0f;
}
#table-1 {
width:986px;
border:3px double #999;
border-collapse:collapse;
margin:19px auto;
background-color:#5d0e13;
font-size:20px;
}
#table-1 td {
padding:4px;
border:1px solid #000;
font-size:120%;
text-align:left;
white-space:nowrap;
}
#table-1 .center {
text-align:center;
}
#table-1 .width {
width:190px;
}
#feedback {
display:block;
width:749px;
height:500px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}
#bottom {
height:20px;
}
.color-1 { color:#ff0; }
.color-2 { color:#fff; }
.color-3 { color:#bc3f0f; }
.font-1 { font-size:110%; }
.font-2 { font-size:150%; }
.font-3 { font-size:200%; }
.font-4 { font-size:220%; }
.bold { font-weight:bold; }
.border1 {
width:710px;
border-bottom:4px dotted #000;
margin:auto;
}
.border2 {
width:110px;
border-bottom:4px dotted #000;
margin:auto;
}
h1 {
font-size:300%;
font-weight:normal;
color:#ff0;
letter-spacing:3px;
}
marquee {
margin:40px 100px 0;
font-family:'arial black',sans-serif;
font-size:110%;
font-weight:bold;
color:#000;
}
</style>

</head>
<body>

<div id="container">

<img id="header" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content-1">

<div id="picture">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content-1 -->

<div id="ebay-paypal">
<img id="ebay" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/topratedseller.jpg" alt="ebay">
<img id="paypal" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/paypalverified.jpg" alt="paypal">
</div><!-- end #ebay-paypal -->

<p class="color-1 font-1">The Item you see is the one you will receive</p>
<p class="color-2 font-1 bold">Mouse over to see full size photo</p>

<div id="content-2">

<table id="table-1"><tr>
<td class="width bold color-3">Manufacturer</td>
<td class="color-1">JAGUAR</td>
</tr><tr>
<td class="bold color-2">Reprogramming</td>
<td class="color-2" >N/A</td>
</tr><tr>
<td class="bold color-3">Item Condition</td>
<td class="color-1">N/A</td>
</tr><tr>
<td class="bold color-3">Part Number</td>
<td class="color-1">N/A</td>
</tr><tr>
<td class="bold color-3">Frequency</td>
<td class="color-1">N/A</td>
</tr></table>

<h1>Hello And Welcome To My Listing</h1>
<p class="font-4 bold">Here we have a Jaguar flip remote</p>
<p class="font-4 bold">4 Button as per photo</p>
<p class="font-4 bold">Nice clean item</p>
<p class="font-4 bold">Good working order</p>
<p class="font-4 bold">Has been checked with a frequency tester</p>
<p class="font-4 bold">Will require a new key</p>
<p class="font-4 bold">Original Jaguar item</p>
<p class="border1">&nbsp;</p>
<p class="font-2 bold color-1">Worldwide Shipping Available</p>
<p class="font-2 bold color-1">I Use the Royal Mail International Signed For Service</p>
<p class="font-2 bold">Speedy Delivery &amp; Well Packaged</p>
<p class="font-2 bold">UK Items Are Sent 1st Class Recorded</p>
<p class="font-2 bold color-1">Tracking Number Will Be Emailed To The Winner Once Item Posted</p>
<p class="border2">&nbsp;</p>
<p class="font-3 color-2">Item Posted Within 1 Day Of Receiving Cleared Payment</p>
<p class="font-3 bold color-2">BUY WITH CONFIDENCE FROM A RELIABLE POWER SELLER</p>
<p class="font-3 bold color-2">WITH A <span class="color-1">100%</span> FEEDBACK SCORE</p>
<p class="font-3 bold color-2">UK Registered Business Seller</p>
<p class="font-2 color-1">Please make sure you understand the buyer is responsible for any<br>
fee that may be incurred for when the parcel enters their country</p>
<p class="font-3 bold">Any Questions Please Ask</p>
<p class="font-3 bold">&gt; <a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION">CLICK HERE TO EMAIL ME</a> &lt;</p>
<p class="font-3 bold">Or Use The Ebay ' <span class="color-1">Ask Seller A Question</span> ' Link</p>
<p class="border2">&nbsp;</p>
<p class="font-3 bold">Please Take a Look At My Other Items For Sale</p>
<p class="font-3 bold">&gt; <a class="color-1" href="http://www.ebay.co.uk/sch/the-remote-doctor/m.html?item=150730477159&amp;sspagename=STRK:MESELX:IT&amp;_trksid=p3984.m1586.l2649&amp;_trksid=p4340.l2562">CLICK HERE TO VIEW MY OTHER ITEMS</a> &lt;</p>

<marquee behavior="alternate" scrollamount=3>*** Thanks For Looking At My Listing & Please Come Back Again ***</marquee>

<img id="feedback" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRFEEDBACK.jpg" alt="Photobucket">

<div id="bottom"></div>

</div><!-- end #content-2 -->
</div><!-- end #container -->

</body>
</html>

I have removed the highlighted in red code from this line...

<td class="color-2" id="center">*Please research this before bidding otherwise do not bid or buy*</td>

To set the width of the right side td elements, I added the highlighted in red code to this line...

<td class="width bold color-3">Manufacturer</td>

...and added this code to the CSS rules...

#table-1 .width {
width:190px;
}

Finally I tidied up your marquee code a little, by removing the font element and using CSS instead. ;)

Note though that some browsers do not render the marquee effect. :eek:

coothead
theremotedr
02-05-2012, 05:43 PM
Thanks very much.

Bye the way i had a call from a friend who uses Internet Explorer 7 & sent me a screen shot to look at.
He looked at my items and said they are the same layout.
I have attached a photo.

Any suggestions as to why or what to do or is the the Marquee you refer to or is that the text scrolling the screen ?
coothead
02-05-2012, 06:16 PM
HI there theremotedr,

I no longer code for IE6 or IE7.

The latest and final browser for Windows XP is IE8 and your code works OK in that browser. ;)

I do not have the time, and certainly not the inclination, to code or test for browsers that are no longer on my Windows XP pc.

CSS3 is starting to take off in modern browsers, and that is where my coding help for members will be directed.

I need mental stimulation and cannot find it trying to help those who obstinately cling to the past.

I would humbly suggest that you ask your friend why he is still using that dinosaur of a browser.

coothead
theremotedr
02-05-2012, 06:40 PM
Ha Ha

I use Firefox and its perfect,i do appreciate what you have done.
I was just asking why it was like that.

Basically this code works for IE8 & later

A question for you,if somebody is using IE6 or IE7 and viewing my items then the only thing i can do so they see something on my ebay page is to enter a photo in the form of the html code like this <a href="http://photobucket.com" target="_blank"><img src="http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/AUDIPADFULL.jpg" border="0" alt="Photobucket"></a> does that sound correct ?

I appreciate your time for all the posts made.
coothead
02-05-2012, 07:23 PM
Hi there theremotedr,

I cannot really make any useful suggestions with regard to IE6 and IE7 users.

Personally, I would recommend that they be forcefully subjected to extra strong
daily enemas and or colonic irrigation.

My guess, though, is that, if they are not computer savvy enough to update their
computer software, then they will not have the slightest interest in your products.

Did you ask your friend why he is still using an obsolete ten year old browser?

Does he use your products?

From his replies you may discover how you can best deal with these miserable misguided miscreants. :D

coothead
theremotedr
02-05-2012, 07:50 PM
I agree.
I have told him to upgrade to IE8 of which he has now done so.
After installing it together with the updates etc & restarted the pc he said he can still see the main photo off to the right of the page,he also said that the 3 small images below this main photo are not shown.
I have asked him to delete all cookies etc & restart the pc & get back to me.
This also helps me with people who may have IE8 running.

I await his email.
coothead
02-05-2012, 07:57 PM
Hi there theremotedr,

as I said in an earlier post, the code works OK in IE8 with Windows XP.

Obviously, CSS3 box-shadow would not be rendered, but this would not
have any adverse effect on the overall layout. ;)

coothead
theremotedr
02-05-2012, 08:13 PM
Yep i read the post again.
All the text etc is shown fine even the srolling text.
The main photo is off to the right & the 3 small photos are not shown at all.
I will now try and force him to use Firefox.
I will also put a note on my page advising people to upgrade to another browser as i dont want to lose a buyer now do i
theremotedr
02-06-2012, 10:15 AM
Hi,
I have put a note on the listing to inform people of the old browser.
Could you advise me please of something.
I have noticed that there is a drop shadow to the outer edge of the main photo & to the photo at the bottom of the listing.
Was that something you had done,i dont mind as i think it makes its look much better,my question is can you point out the code so i can advise my friend.
I have attached the image & the file.
I have marked it by arrows not to be rude to you but im not to good at explaining things.

Many Thanks.
coothead
02-06-2012, 10:35 AM
Hi there theremotedr,

if you examine the CSS, you will find various instances of box-shadow:#333 10px 10px 20px, some though may have different px values.

This is an example of CSS3 and works in all modern browsers...
http://caniuse.com/#search=box-shadow
...but has no ill effect on older browsers that do not render it. ;)

...but I'm not to good at explaining things.

I am a bit like you then, as I have no problem coding but when asked for an explanation of my methods, I experience great difficulties. ;)

Verbal dexterity would, of course, be a great skill to possess. :D

coothead
theremotedr
02-07-2012, 12:43 AM
Hi,
Another challenge for you of which you will make ease of im sure.:)
So hear goes,
At the bottom of my listing i have a link that reads CLICK HERE TO EMAIL ME
I have had a few people click it and send me an email,but like me not explaining myself enough,when i read the email i have no clue as to what the item is they are asking about.
Currently on line 269 in my code after my email it reads subject=EBAY%20QUESTION
Is there something that can be wrote into the script that when this link is clicked on,it then collects some kind of information from the listing in question so then at least i have a clue as to what they are talking about.
It would be nice if the information could be collected from line 240 and entered into the subject field,so can we remove the EBAY QUESTION text and replace it with the information collected from line 240
On the file i have attached Line 240 reads <p class="font-4 bold">Skoda key remote</p>
When i then list another item i would edit this line to then read say <p class="font-4 bold">Porsche key remote</p> this way at least when i receive the email i would know that they are talking about the Porsche key remote.
Hope this is possible & i have attached the file for you,but should what i have typed not work "possible chance" if you have a different option i am more than willing to use it.
Not being Patronising but i have also added a photo of something i think it would look like when i receive it,somehow the word EBAY before the collected information needs to stay there each time.
My partner tells me all the time i am Patronising but its my way of explaining to people what i mean as i cant get it accross otherwise.:eek:

Thanks.
coothead
02-07-2012, 09:31 AM
Hi there theremotedr,

This...

href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION&amp;body=Item=Skoda%20key%20remote"
...will place

Item=Skoda key remote
...in the body section of the email. ;)

Note:-
Wherever there is a space in the wording, replace it with %20.

coothead
theremotedr
02-07-2012, 09:33 AM
Morning,
When i update each listing will this be email subject field be automatically updated or will i need to edit in manually each time ?
coothead
02-07-2012, 09:44 AM
Hi there theremotedr,

you will have to manually edit it. ;)

coothead
theremotedr
02-07-2012, 09:44 AM
I have made an edit to check it out and this is what i receive if you could give it the once over.
coothead
02-07-2012, 09:57 AM
Hi there theremotedr,

you slightly misread my post and added a double quote to the code. :eek:

<a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION&amp;body=ITEM=Land%20Rover%20key%20remote"">
There should only be one.:D

coothead
theremotedr
02-07-2012, 10:12 AM
Hi,

Thanks for that,its so esay to miss it,for me anyway :eek:

Can we tweak this a little ?
When i receive the email the Item = Land Rover Key etc is in the field where you type the email.
Can we change this so its in the subject field after EBAY QUESTION

EBAY QUESTION Item = Land Rover Key
So then they just start typing in the main text area without the chance of writing over it because of where it is currently situated ?
The EBAY QUESTION is in bold can we also make the Land Rover Key the same.

If im asking to much all the time please advise otherwise thanks once again.
coothead
02-07-2012, 10:31 AM
Hi there theremotedr,

use this then...

<a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION%20%20Item=Land%20Rover%20key%20remote">
coothead
theremotedr
02-07-2012, 10:54 AM
Hi

Many thanks once again.
Its looks real good and i believe its just what i want.
I am looking on the internet to find how i can add code so the ITEM=LAND ROVER KEY REMOTE is blue whilst leaving EBAY QUESTION as it is just so it stands out.
I would of ask you but i think you have helped me enough & getting bored with me by now.
I do try and experiment before i ask and most times dont win :D
coothead
02-07-2012, 11:17 AM
Hi there theremotedr,

it is not possible to format the subject line like that. :(

coothead
theremotedr
02-07-2012, 11:19 AM
That explains why i cant find it
coothead
02-07-2012, 11:31 AM
Hi there theremotedr,

even if it was possible, it would need server-side scripting or javascript to extract and manipulate the text string. ;)

coothead
theremotedr
02-07-2012, 04:02 PM
Hi
Can you advise a free css editor that i could download so i can have a proper look at this css and start to follow some tutorials etc.
coothead
02-07-2012, 04:47 PM
Hi there theremotedr,

I am probably not the best person to ask. :(

I have been coding for about nine years now and have never considered using anything other than...


http://www.coothead.co.uk/images/love_notepad.gif

...with two pinkies, one from each hand. ;)

It does, of course, meet one of your criteria though, it is free and comes with the "Windows" operating system. ;)

Also on the plus side, it does not require a degree in computer sciences to use it. :D

coothead
djr33
02-08-2012, 05:22 AM
We've had a number of discussions here about good editors. All you need is a plain text editor, but three nice bonus features are:
1) Line numbers. It's good to know what line you're changing if you get an error message. In notepad, that's not so easy.
2) Code highlighting. It will change the color of certain commands so that you can easily scan the code visually. It doesn't change it, just has a few colors instead of black for everything.
3) Built-in FTP so you can work directly from your server.

Those features (most likely #1, least likely #3) are included in many programs, and lots of them are free. Notepad++ is popular, but not the only option. It also depends on the operating system you're using.

But again, try searching for information so we don't go through the same discussion all over again. If you come up with a specific question about it, feel free to ask.
theremotedr
02-11-2012, 09:37 AM
Coothead can you advise or help me again.

http://www.dynamicdrive.com/forums/showthread.php?t=67441
coothead
02-11-2012, 10:20 AM
I will poke my proboscis in that direction. :D
coothead
theremotedr
02-17-2012, 02:38 PM
Hey poke you proboscis this way if you could,

http://www.dynamicdrive.com/forums/showthread.php?p=269795#post269795
theremotedr
02-23-2012, 06:32 PM
Hey Coothead any chance you could edit this for me.
Its a small edit but so small i could not get it to work correctly for me.
I have attached a file for you.
A discription of what i would like / what i did.
At the bottom of the view code is my feedback image.
I have copied this & placed it above the feedback photo then i changed the code of the photo to the photo i wish to use.
Looking at your code you did for me for the feedback it reads <img id="feedback"
The photo above is perfect for what i require for size & drop shadow etc only whilst i keep the img id as "feedback"
I need this new photo to be called old photo browser but when i change it from feedback to old photo browser i then lose the size & the drop shadow.
I found the drop shadow code for the feedback so i copied it & then pasted it into the code next to the feedback code and changed it to read old photo browser and not feedback and to my surprise i lose the size & drop shadow again ?????
Please could you work your magic for me so i get the new photo with the same size & drop shadow as the feedback photo below it.

Many thanks & sorry for the story but just letting you know i did have a long go at it first,,,even though i can get it correct :)
coothead
02-23-2012, 10:07 PM
Hi there theremotdr,

your problem can be easily resolved. ;)

The id attribute does not permit spaces.

So use this...

<img id="old-browser-photo" src="http://i670.photobucket.com/albums/vv62/ipbr21054/EBAY/F3.jpg" alt="Photobucket">
...with this...

#old-browser-photo {
display:block;
width:640px;
height:480px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}

coothead
theremotedr
02-23-2012, 10:16 PM
I tried everything BUT thats,its works great.

Thanks again,keep looking you never know i might need HELP again with this.
coothead
02-23-2012, 10:18 PM
I will probably be around until I shake off this mortal coil. ;)
theremotedr
02-25-2012, 12:19 PM
Hello
I received a message from a buyer who is using google chrome that only 1 photo worked with the mouse over affect.
As you know i have 3 small photos,positioned left middle & right.
The person told me that the mouse over only worked for photo on the right.
I have checked this listing in Firefox and all works well for me with no issues.
Is this an out of date google chrome browser ?
Here is the link to watch it.

http://i670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/th_mouseovernotworking.jpg (http://s670.photobucket.com/albums/vv62/ipbr21054/VIDEOS/?action=view&current=mouseovernotworking.mp4)

Please advise.
Thanks
theremotedr
02-25-2012, 01:04 PM
I confirm this is correct.
I have downloaded google chrome and have installed version 17.0.963.56 of which is the latest.
I can reproduce the same as what the buyer has mentioned.
No mouseover working on the left or middle photo but the mouseover works well for the right photo.
Is this somethiong that i have done or i cant explain ?
I have attached the file if you could have a look for me.
I assume Coothead will look this way thanks.
coothead
02-25-2012, 01:40 PM
Hi there theremotedr

I do not use Chrome for my testing, but do know that google does use Safari's WebKit for it's browser.

In the code that I gave you, there was this code in the CSS that was specific to Safari...


body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
background-color:#f0f0f0;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}

...and therefore to Chrome.

You, for some reason, decided to remove it and that is the cause of your problem. :D

coothead
theremotedr
02-25-2012, 01:43 PM
How or why i did that i cant explain :eek:

Would you be so kind to add it into the file i attached.
I can then sort things out.
Sorry to be a pain but why or how did i do that ????
coothead
02-25-2012, 02:01 PM
Hi there theremotedr,

here is the code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Welcome to The Remote Dr</title>

<style type="text/css">
body {
-webkit-animation: bugfix infinite 1s; /* Safari adjacent sibling bug fix */
background-color:#f0f0f0;
}
@-webkit-keyframes bugfix { /* Safari adjacent sibling bug fix */
from { padding: 0; } to { padding: 0; }
}
* {
text-align:center;
}
#container {
width:1023px;
border:4px solid #111;
margin:0 auto 20px;
background-color:#5d0e13;
box-shadow:#333 10px 10px 20px;
}
#header {
display:block;
width:1023px;
height:130px;
border-bottom:8px solid #000;
}
#content-1 {
width:991px;
height:536px;
padding-top:38px;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/backgroundflames.jpg');
overflow:visible;
}
#picture {
position:relative;
width:658px;
margin:auto;
}
#a {
position:absolute;
width:640px;
height:480px;
border:9px solid #352929;
background-image:url(http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRBACKGROUND.jpg);
background-size:100%;
box-shadow:#000 8px 8px 16px;
}
#b,#c,#d {
position:absolute;
width:122px;
height:91px;
border:1px solid #fc9;
top:552px;
left:67px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/LANDROVERFRONT.jpg');
background-size:100%;
box-shadow:#FFF 8px 8px 10px;
cursor:pointer;
}
#c {
left:256px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/LANDROVERFULL.jpg');
}
#d {
left:447px;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/landroverkey.jpg');
}
#b:hover,#c:hover,#d:hover {
opacity:0.7;
}
#b:hover+div+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/LANDROVERFRONT.jpg');
border-color:#527eab;
}
#c:hover+div+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/LANDROVERFULL.jpg');
border-color:#527eab;
}
#d:hover+div {
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/landroverkey.jpg');
border-color:#527eab;
}
#ebay-paypal {
width:991px;
height:116px;
padding:3px 0;
border-right:4px solid #000;
border-left:4px solid #000;
margin:auto;
background-image:url('http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/bmw.jpg');
}
#ebay {
float:left;
width:103px;
height:116px;
border:1px solid #fc9;
margin-left:31px;
box-shadow:#000 4px 1px 6px;
}
#paypal {
float:right;
width:115px;
height:106px;
border:1px solid #fc9;
margin:5px 25px 0 0;
box-shadow:#000 4px 1px 8px;
}
#content-2 {
border-top:8px solid #000;
background-color:#bc3f0f;
}
#table-1 {
width:986px;
border:3px double #999;
border-collapse:collapse;
margin:19px auto;
background-color:#5d0e13;
font-size:20px;
}
#table-1 td {
padding:4px;
border:1px solid #000;
font-size:120%;
text-align:left;
white-space:nowrap;
}
#table-1 .center {
text-align:center;
}
#table-1 .width {
width:190px;
}
#feedback {
display:block;
width:749px;
height:500px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}
#oldbrowser {
display:block;
width:640px;
height:480px;
border:1px solid #5d0e13;
margin:76px auto 0 ;
box-shadow:#000 4px 4px 8px;
}
#bottom {
height:20px;
}
.color-1 { color:#ff0; }
.color-2 { color:#fff; }
.color-3 { color:#bc3f0f; }
.font-1 { font-size:110%; }
.font-2 { font-size:150%; }
.font-3 { font-size:200%; }
.font-4 { font-size:220%; }
.bold { font-weight:bold; }
.border1 {
width:710px;
border-bottom:4px dotted #000;
margin:auto;
}
.border2 {
width:110px;
border-bottom:4px dotted #000;
margin:auto;
}
h1 {
font-size:300%;
font-weight:normal;
color:#ff0;
letter-spacing:3px;
}
marquee {
margin:40px 100px 0;
font-family:'arial black',sans-serif;
font-size:110%;
font-weight:bold;
color:#000;
}
</style>

</head>
<body>

<div id="container">

<img id="header" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/header.jpg" alt="header">

<div id="content-1">

<div id="picture">
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="a"></div>
</div><!-- end #picture -->

</div><!-- end #content-1 -->

<div id="ebay-paypal">
<img id="ebay" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/top-rated-seller-logo.png" alt="ebay" style="border-width: 0px">
<img id="paypal" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/paypal-verified.png" alt="paypal" style="border-width: 0px">
</div><!-- end #ebay-paypal -->

<p class="color-1 font-1">The Item you see is the one you will receive</p>
<p class="color-2 font-1 bold">Place Your Mouse over The Photos to View Them At full size</p>
<p class="color-1 font-1 bold"><i>Cant See The Photos ?</i></p>
<p class="color-2 font-1 bold"><i>Then Please Scroll Down To View An Alternative Photo</i></p>

<div id="content-2">

<table id="table-1"><tr>
<td class="width bold color-3">Manufacturer</td>
<td class="color-1">LAND ROVER</td>
</tr><tr>
<td class="bold color-3">Reprogramming</td>
<td class="color-1" >* Please Research This Before Bidding Or Buying *</td>
</tr><tr>
<td class="bold color-3">Item Condition</td>
<td class="color-1">REMANUFACTURED</td>
</tr><tr>
<td class="bold color-3">Part Number</td>
<td class="color-1">N/A</td>
</tr><tr>
<td class="bold color-3">Frequency</td>
<td class="color-1">433MHz</td>
</tr></table>

<h1>Hello And Welcome To My Listing</h1>
<p class="font-4 bold">Today we have the following item</p>
<p class="font-4 bold">Land Rover key remote</p>
<p class="font-4 bold">2 Button as per photo</p>
<p class="font-4 bold">Good used circuit board fitted into new uncut key shell</p>
<p class="font-4 bold">Good working order</p>
<p class="font-4 bold">Has been checked with a frequency tester</p>
<p class="font-4 bold">Red light flashes when both buttons pressed</p>
<p class="font-4 bold">*****</p>
<p class="font-4 bold color-1">This Page Is Not Suitable For Internet Explorer 8 Or Below</p>
<p class="font-4 bold color-1">" Please Upgrade Your Browser "</p>
<p class="font-4 bold color-1">To Firefox Or Chrome Etc For Maximum Benefit</p>
<p class="font-4 bold color-1">Any Problems Contact Me Using The Options Shown
Below</p>
<p class="font-4 bold">*****</p>
<p class="font-4 bold color-0">" Photo Shown Below For Out Of Date Browser Users "

<img id="oldbrowser" src="http://i670.photobucket.com/albums/vv62/ipbr21054/NEW%20EBAY/LANDROVERFULL.jpg" alt=""></p>
<p class="font-4 bold">*****</p>
<p class="font-2 bold color-1">Worldwide Shipping Available</p>
<p class="font-2 bold color-1">I Use the Royal Mail International Signed For
Service</p>
<p class="font-2 bold">Speedy Delivery &amp; Well Packaged</p>
<p class="font-2 bold">UK Items Are Sent 1st Class Recorded</p>
<p class="font-2 bold color-1">Tracking Number Will Be Emailed To The Winner
Once Item Posted</p>
<p class="font-4 bold">*****</p>
<p class="font-3 color-2">Item Posted Within 1 Day Of Receiving Cleared Payment</p>
<p class="font-3 bold color-2">BUY WITH CONFIDENCE FROM A RELIABLE POWER SELLER</p>
<p class="font-3 bold color-2">WITH A <span class="color-1">100%</span> FEEDBACK
SCORE</p>
<p class="font-3 bold color-2">UK Registered Business Seller</p>
<p class="font-2 color-1">Please make sure you understand the buyer is
responsible for any<br>
fee that may be incurred for when the parcel enters
their country</p>
<p class="font-3 bold">Any Questions Please Ask</p>
<p class="font-3 bold">&gt; <a class="color-1" href="mailto:THEREMOTEDR@GMAIL.COM?subject=EBAY%20QUESTION%20%20Item=LAND%20ROVER%20KEY">
CLICK HERE TO EMAIL ME</a> &lt;</p>
<p class="font-3 bold">Or ' <span class="color-1">Ask Seller A Question</span> '
Link</p>
<p class="font-4 bold">*****</p>
<p class="font-3 bold">Please Take a Look At My Other Items For Sale</p>
<p class="font-3 bold">&gt; <a class="color-1" href="http://www.ebay.co.uk/sch/the-remote-doctor/m.html?item=150730477159&amp;sspagename=STRK:MESELX:IT&amp;_trksid=p3984.m1586.l2649&amp;_trksid=p4340.l2562">
CLICK HERE TO VIEW MY OTHER ITEMS</a> &lt;</p>

<marquee behavior="alternate" scrollamount=3>*** Thanks For Looking At My Listing & Please Come Back Again ***</marquee>&nbsp;

<img id="feedback" src="http://i670.photobucket.com/albums/vv62/ipbr21054/WEBSITE%20PHOTOS/DRFEEDBACK.jpg" alt="Photobucket">

<div id="bottom"></div>

</div><!-- end #content-2 -->
</div><!-- end #container -->

</body>
</html>

coothead
theremotedr
02-25-2012, 02:22 PM
I am now correcting my mistakes.

Cheers again