css float ?

**styxlawyer** · 09-16-2015, 02:31 PM

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.

**Comex** · 09-19-2015, 10:04 PM

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.

**Comex** · 09-20-2015, 12:26 AM

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?

**Comex** · 09-20-2015, 12:37 AM

ahhh,

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

**Comex** · 09-20-2015, 01:10 AM

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="!" />

**styxlawyer** · 09-20-2015, 12:48 PM

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.

**Comex** · 09-20-2015, 05:07 PM

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?

**styxlawyer** · 09-20-2015, 06:38 PM

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.

**Beverleyh** · 09-20-2015, 06:54 PM

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

**Comex** · 09-20-2015, 07:34 PM

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.