Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 29

Thread: Correct positioning of image

  1. #11
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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 ?

  2. #12
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default


    Quote Originally Posted by theremotedr View Post
    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
    Last edited by coothead; 02-17-2018 at 03:15 PM.
    ~ the original bald headed old fart ~

  3. The Following User Says Thank You to coothead For This Useful Post:

    theremotedr (02-17-2018)

  4. #13
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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.

  5. #14
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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

  6. #15
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default


    Quote Originally Posted by theremotedr View Post
    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....

    Code:
    
    .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
    ~ the original bald headed old fart ~

  7. #16
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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.

    Code:
    .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 ?

  8. #17
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    Hi there theremotedr,

    your...

    Code:
    
    .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...

    Code:
    
    .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...

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

    Code:
    
    @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
    ~ the original bald headed old fart ~

  9. #18
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    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

  10. #19
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,208
    Thanks
    1
    Thanked 235 Times in 230 Posts

    Default

    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...

    Code:
    
    .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
    Attached Files Attached Files
    Last edited by coothead; 02-17-2018 at 06:52 PM.
    ~ the original bald headed old fart ~

  11. #20
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    Yep i have installed the files from #17

Similar Threads

  1. Replies: 0
    Last Post: 01-19-2011, 04:56 PM
  2. aligning image in correct place
    By hemi519 in forum HTML
    Replies: 4
    Last Post: 11-16-2010, 07:03 PM
  3. Replies: 3
    Last Post: 04-26-2010, 04:51 PM
  4. Replies: 3
    Last Post: 04-20-2009, 04:50 PM
  5. Replies: 0
    Last Post: 02-09-2009, 03:55 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •