Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Aug 2011
    Posts
    18
    Member #
    29026
    Liked
    2 times
    Hi there - I'm building a Wordpress site for a friend, and I'm trying to recreate an effect I achieved in another site using the following CSS:
    Code:
    .wind {
        position: fixed;
        top: 0px;
        right: 0px;
    
    }
    Example of the code in action is at floathousebooks.com/addons.php - the blue wind power icon that stays in the top right hand corner of your screen at all time. This should be simple to do - but I can't seem to do it on the Wordpress site, and I don't know why not. I don't know if it's to do with the fact that wordpress pages are split into three different .php files (header, page and footer) or if there's something in the wordpress stylesheet that's overruling my commands. The site I'm working on is http://www.leftoversmusic.co.uk/contact-left-overs/, and the image I'm trying to postion is the "Left Overs Music is 100% wind powered. We did it for the penguins." one Here's the WP stylesheet if anyone cares to take a look: www.leftoversmusic.co.uk/wp-content/themes/twentytenWILF/style.css
    Thanks for reading, I hope someone can give me a hint here.

  2.  

  3. #2
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    You've got the image inside the container - if you want it at the bottom right, you have to put it in the footer.php file. And your CSS names a class (.wind) but in your image you have an id(#wind) - change one or the other so they agree.

    WordPress doesn't work like static HTML code - everything is called into the page by PHP, so it might deform your header on scroll or something.

    I've never tried it, but it's a cool idea and I may play with it a bit this weekend - I'll let you know what happens.
    Dr.Suave likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  4. #3
    Junior Member
    Join Date
    Aug 2011
    Posts
    18
    Member #
    29026
    Liked
    2 times
    Thanks, Alpha - you're often the one who comes and helps when I post here. Didn't notice that I'd made that ID/Class discrepancy. I actually stuck the image in the footer to begin with, but there was no joy to be found there - with the class and ID matching I'll try it again. And if you do get round to experimenting I'd be eager to hear about your results.

    Anyway, last time I got in trouble for calling you man, so I'll sign off with a thank you ma'am.
    AlphaMare likes this.

  5. #4
    Junior Member
    Join Date
    Aug 2011
    Posts
    18
    Member #
    29026
    Liked
    2 times
    There we go - got it behaving the way it should. Unfortunately it doesn't look as good as I'd visualised it - one way to remedy this would be to have the image centred on the y axis (vertically), but kept where it is on the x axis - I looked into this once and came away with the conclusion that the current version of CSS doesn't support y-axis centering. I'd be thrilled if someone told me I was wrong!

  6. #5
    Junior Member
    Join Date
    Aug 2011
    Posts
    18
    Member #
    29026
    Liked
    2 times
    OK dokes, got it aligned on the y-axis using the advice here: http://stackoverflow.com/questions/5...-in-the-y-axis

    Seems like this case has been closed, mes amis.
    AlphaMare likes this.

  7. #6
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Dr.Suave, post: 223461
    OK dokes, got it aligned on the y-axis using the advice here: http://stackoverflow.com/questions/5...-in-the-y-axis

    Seems like this case has been closed, mes amis.
    It's always nice to hear the problem has been solved but it's even nicer when the solution is given so others might benefit.

    Thanks!

    P.S. - looked at the site just now - it looks great!
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com