Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 32

Thread: css float ?

  1. #11
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    Sorry for the delay in replying.

    No, that's not right. The CSS directive "position:absolute;" fixes the position of the object relative to the page and you need it fixed to the viewport. For that you have to use "position:fixed;". You probably don't want outlines around the images and the "z-index" values can be the same as the two images aren't overlapping.

    I've created this test page with in-line styling as an example.

  2. #12
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    The stationary example looks great.

    Can you send me the code you used so I can download the plugin and place in the code you created.

    Thank you VERY much in advance.

  3. #13
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Is this not css?

    I see this in your code:

    Code:
    <img src="Left.png" style="position:fixed; top:0; left:0; z-index:10;" alt="!" />
    	<img src="Right.png" style="position:fixed; top:0; right:0; z-index:10;" alt="!" />
    	<img src="Left.png" style="position:absolute; top:300px; left:0; z-index:5;" alt="!" />
    	<img src="Right.png" style="position:absolute; top:300px; right:0; z-index:15;" alt="!" />
    If that is the case, adding the above would work in header?

  4. #14
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    ahhh,

    Seems to have worked via adding to header. Just something with menu not allowing it to overlay that one area.

  5. #15
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    This is odd?

    When I add in the code before the </head> tag.

    My player and a few other buttons are non clickable?

    Code:
    <img src="Left.png" style="position:fixed; top:0; left:0; z-index:10;" alt="!" />
    	<img src="http://constructionbannerexchange.com/kwr2/wp-content/uploads/2015/09/bg-right1.png" style="position:fixed; top:0; right:0; z-index:10;" alt="!" />
    	<img src="http://constructionbannerexchange.com/kwr2/wp-content/uploads/2015/09/bg-left.png"style="position:fixed; top:0; left:0; z-index:10;" alt="!" />

  6. #16
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    You have found the right code but, as I said in my earlier post the styling is "inline" so has to be separated into the <head></head> section of your page. However, you cannot place images into the header so you must separate the styling from the <img> tags.

    As your new site is Wordpress you should add the plugin mentioned previously and add the CSS to that. Each image is only used once so it would be better to give them each an id rather than a class in your custom CSS.

    If the images are behind the menu and you want them to be in front you may have to play with the z-index values.
    Last edited by styxlawyer; 09-20-2015 at 12:52 PM. Reason: Added bit about menu bar.

  7. #17
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    So if I add the css plugin above, just add in the code of:

    Code:
    <img src="Left.png" style="position:fixed; top:0; left:0; z-index:10;" alt="!" />
    	<img src="http://constructionbannerexchange.com/kwr2/wp-content/uploads/2015/09/bg-right1.png" style="position:fixed; top:0; right:0; z-index:10;" alt="!" />
    	<img src="http://constructionbannerexchange.com/kwr2/wp-content/uploads/2015/09/bg-left.png"style="position:fixed; top:0; left:0; z-index:10;" alt="!" />
    Is that correct?

    My only concern is how do I correct it or remove / edit if there is an issue?

  8. #18
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    432
    Thanks
    0
    Thanked 54 Times in 50 Posts

    Default

    No.

    The <img src="..." alt="!"> tags are not CSS but HTML and need to remain within the <body>...</body> tags of the page. The parts within the quotes after the "style=" attribute is CSS and should be separated into the Wordpress CSS plugin. You can remove it easily by just deleting the unnecessary code within the CSS plugin. You should add a unique id to each <img ...> tag and then use those ids within the CSS to identify which CSS belongs to which image.

    To get a better understanding of how this process works, you should test it out on a plain HTML page before you start diving into the complexities of Wordpress.

  9. #19
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Comex,

    It sounds like you would benefit from a revisit/review of the basics - web page structure, defining styles/using CSS, the difference between external, internal and inlined styles - that sort of thing.

    Try Googling for basic/beginner/starter tutorials on using stylesheets. I think this will help you greatly and allow you to fully understand and manipulate the sample codes offered to you in forums. Im sorry to say, but downloading plugins, and copying and pasting will only get you so far.

    Codecademy do some nice online lessons https://www.codecademy.com/

    Hope it helps
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. #20
    Join Date
    Oct 2009
    Posts
    36
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    I do appreciate the feedback. I have attempted to place the code above to page.php .

    It looks 100% better and even appears over the menu, however, again, for some reason, dose not allow me to click play on the second and third player.

    If I can get past this, I'm good to go.

Similar Threads

  1. Float?
    By Vernier in forum CSS
    Replies: 1
    Last Post: 05-26-2012, 01:41 PM
  2. Resolved Help with float margin bug fix
    By jhatter in forum CSS
    Replies: 1
    Last Post: 01-11-2010, 02:35 PM
  3. Resolved subtracting float
    By abs0lut in forum JavaScript
    Replies: 27
    Last Post: 01-12-2009, 12:11 PM
  4. Replies: 0
    Last Post: 11-21-2007, 04:41 PM
  5. Float bar...
    By pedroz in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-03-2006, 09:40 AM

Tags for this Thread

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
  •