Correct positioning of image

[theremotedr]

Its fine now after taking out the file/// etc

I also come across this at the bottom of the css fil.

C:/Users/coothead/amended-files/slideshow.html

Delete correct ?

[coothead]

I also come across this at the bottom of the css fil.

C:/Users/coothead/amended-files/slideshow.html

Delete correct ?

Yes, please.

I am need to be very careful now as an overload of "Brain Farts" can
often be followed by an uncontrollable deluge of "verbal diarrhea".

coothead

[theremotedr]

No problem.
It was good for me to find some issues.
shows me that using chrome dev tools can work great.

Teaching yourself is hard but its coming along and i use it plenty every day now.

Thanks for your time.

[theremotedr]

Coothead,
Hear is a question for you.

Can you tell me why when i add a link to the facebook icon it nudges it up the page ?

I though by adding a link had no bearing on the icons placement but just when you clicked on it then a new page would open etc.

Take a look http://www.theatticbanwell.co.uk/slideshow.html

Confused

[coothead]

Can you tell me why when I add a link to the Facebook icon it nudges it up the page ?

I certainly can.

It occurs because the CSS originally applied to the only "img element" in the parent "p element" will not work.

The CSS originally applied to the only "a element" in the parent "p element", will be applied to both "a elements".

So you now need to use this revised CSS....

.sub{
    padding: 0 5px ;
    text-align: center;
    color: #fff;
 }

.sub a:nth-of-type(1) {
    display: inline-block;
    padding-top: 32px;
    vertical-align: middle;
 }

.sub a:nth-of-type(2) {
    position: relative;
    top: -32px;
    margin-right: 80px;
 }

@media ( max-width: 30em ) {
.sub {
    width: 12em;
    padding-top: 16px;
    margin: auto;
   }
.sub a:nth-of-type(1) { 
    padding-top: 0;
 }
.sub a:nth-of-type(2) { 
    position: static; 
    margin-right: 0;
  }
 }

coothead

[theremotedr]

Thanks,

Please can you check my demo css.
I have inserted part of the above code starting at line 17

I altered the following so the red text sat more central etc to the white text above etc.

.sub a:nth-of-type(2) {
    position: relative;
    top: -40px;
    margin-right: 145px;

The media query i have placed at the bottom at line 166

Not sure if i need to add 1 or 2 }} afterwards ?

[coothead]

Hi there theremotedr,

your...

.sub{
    padding: 0 5px ;
    text-align: center;
    color: #fff;
 }

.sub a:nth-of-type(1) {
    display: inline-block;
    padding-top: 32px;
    vertical-align: middle;
 }

.sub a:nth-of-type(2) {
    position: relative;
    top: -40px;
    margin-right: 145px;
 }
.sub img {
    padding-top: 1px;
    vertical-align: middle;
 }
.sub a {
    position: relative;
    top: -32px;
    margin-right: 80px;
 }

...should be this...

.sub{
    padding: 0 5px ;
    text-align: center;
    color: #fff;
 }
.sub a:nth-of-type(1) {
    display: inline-block;
    padding-top: 32px;
    vertical-align: middle;
 }
.sub a:nth-of-type(2) {
    position: relative;
    top: -32px;
    margin-right: 80px;
 }

...and your...

 @media ( max-width: 30em ) {
.sub {
    width: 12em;
    margin: auto;
   }
.sub img {
    padding-top: 0;
 }
.sub a {
    position: static; 
    margin-right: 0;
  }
 }

...should be this...

@media ( max-width: 30em ) {
.sub {
    width: 12em;
    padding-top: 16px;
    margin: auto;
   }
.sub a:nth-of-type(1) { 
    padding-top: 0;
 }
.sub a:nth-of-type(2) { 
    position: static; 
    margin-right: 0;
  }
 }

coothead

[theremotedr]

Hi,
I have changed the code and replaced it with your code shown above.

I am needing to make the gap between thumbnails & the white text small.

This is why i altered those 2 lines

[coothead]

Hi there theremotedr,

you have not, as yet, made the changes that I gave you in post #17.

And if you want the text closer together, then of course, you can use this...

.sub a:nth-of-type(2) {
    position: relative;
    top: -40px;
    margin-right: 80px;
 }

...or to save you messing around, just use the updated file in the attachment.

coothead

[theremotedr]

Hi,
Yep i have installed the files from #17