DD Drop in slide show

[theremotedr]

Ok
Another way if possible because Lucida is the font used for Tab headers, things for sale etc.
Have this Italic font on its own so we control the font used for it.
What do you think ?

[coothead]

Hi there theremotedr,

What do you think ?

Personally, I prefer to keep everything simple...

    font-family: verdana, arial, helvetica, sans-serif;

...and I would make them italic or bold wherever necessary.

If you don't want to use basics then you have to take the @font-face route.

When visitors come to your site it's because you "have been supplying spare
replacement vehicle car keys & fobs for many years" not because you are
using the "Lucida Handwriting" font.

Arty-farty fonts will be at the very bottom of their list of requirements.

coothead

[theremotedr]

Ha ha well put.

You might have swung it in your favour or leave it as is.

[coothead]

Hi there theremotedr,

it is very easy to lose sight of what your site is about.

You are looking at with very different eyes to those of your visitors.

You are now concerned with making it look right to your eyes but
you don't have any real idea what will look right to your visitors.

Your main priority should always be to make certain that the real
content is easily obtainable and understandable to your first time
visitors and potential customers.

You can make a site that looks heavenly and perfect to your eyes
but you wont be buying any fobs, cases, keys or remotes from it.

coothead

[theremotedr]

You are correct.
The Italic question was mainly for it looking out of sync with the site.
Just wanted things to look the same etc.

Quick question.
The text colour on the warning message, if I remember correctly I didn't see a font colour option
In its css for it to be changed from black to white etc or was there the option ?

[coothead]

Hi there theremotedr,

you can add "color: #fff;" here...

#warning {
    display: none;
    position: absolute;
    bottom:104%;
    left: 50%;
    width: 17.4em;
    padding: 0.5em;
    border:0.06em solid #000000;
    border-radius: 1em;
    background-color: #CB2027;
    box-shadow: 0.4em 0.4em 0.4em #000;
    font-size: 0.5em;
    line-height: 1.2em;
 }

coothead

[theremotedr]

Hi there theremotedr,

you seem to be experiencing that old cache problem.

Get one of your digits to agitate the F5 function key.

Whilst testing with IE11, though, I did notice a problem with the
animation; it does not work with "top: 0" buts needs "top: 0%".

Change the @keyframes slide section with this...

/* this is for 4 images */ 
@keyframes slide { 
 0%    {top: -100%; z-index:2;}
 5%    {top: 0%;    z-index:2;}
 25%   {top: 0%;    z-index:1;}
 30%   {top: 0%;    z-index:1;}
 30.1% {top: -100%; z-index:0;l}
}


/* this is for 5 images */ 
/*
@keyframes slide { 
 0%    {top: -100%; z-index:2;}
 4%    {top: 0%;    z-index:2;}
 20%   {top: 0%;    z-index:1;}
 24%   {top: 0%;    z-index:1;}
 24.1% {top: -100%; z-index:0;}
 }
*/
/* this is for 6 images */ 
/*
@keyframes slide { 
 0%    {top: -100%; z-index:2;}
 3.33% {top: 0%;    z-index:2;}
 16.66%{top: 0%;    z-index:1;}
 20%   {top: 0%;    z-index:1;}
 20.1% {top: -100%; z-index:0;}
 }
*/
/* this is for 7 images */ 
/*
@keyframes slide { 
 0%    {top: -100%; z-index:2;}
 2.86% {top: 0%;    z-index:2;}
 14.3% {top: 0%;    z-index:1;}
 17.16%{top: 0%;    z-index:1;}
 17.2% {top: -100%; z-index:0;}
 }
*/
/* this is for 8 images */ 
/*
@keyframes slide { 
 0%    {top: -100%; z-index:2;}
 2.5%  {top: 0%;    z-index:2;}
 12.5% {top: 0%;    z-index:1;}
 15%   {top: 0%;    z-index:1;}
 15.1% {top: -100%; z-index:0;}
 }
*/

Morning,

Index page still the same this morning,
F5 yet again did nothing to change the update.

Ctrl & F5 worked straight away,it ignored the cached file i assume and loaded a new once within a split second.
Now animation works as it should.

[theremotedr]

Morning,
Coothead,
Did something change with respect to the scrolling text as shown here http://www.theremotedoctor.co.uk/acc...llto=selection
I mean the text below Return To Menu was cutting off way before it finished.
Within the page itself i change the figure to width 50em,see below, but the best i can get it is cutting off at the word Remote towards then end.

#marquee {
    height: 2.5em;
    border-radius: 1em;
    border: 0px solid #5d0e13;
    box-shadow: 0.25em 0.25em 0.5em  #000;
    overflow: hidden;
    background-color: #66c2f1;
 }

#marquee p {
    width: 50em;
    line-height: 3.5em;
    margin: 0;
    font-size: 0.8em;
    font-weight: bold;
    white-space: nowrap;
    animation: marquee 12s linear infinite;

[coothead]

Hi there theremotedr,

you need to adjust the animation to match the set "p" width...

@keyframes marquee {
    0%   {margin-left: 100%;}
    100% {margin-left: -50em;}
 }

coothead

[theremotedr]

Thats typical of me,
Now this one has been changed and fine.

what is this for that i touched ?

#marquee p {
    width: 50em;