css float ?

[Comex]

Hello,

Working on a new site area and wanted to float an image over the template on right and left side, is this posible?

The css file I have is rather long, not sure where to place in code, and if this code would work:



}
Inherited from body.home.page.page-id-202.page-template-default.content-r
kentuckyweedradio.com/media="screen, projection"
body {
color: #cdc9c9;
font-size: 12px;
font-family: 'normal';
position: relative;
background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
text-shadow: 1px 1px 1px #202020;
}

Or is there something from the:

CSS Library Image CSS. I can add?

Thank you in advance.

( not sure if I am allowed to add site link, to view my current css coding? )

[Comex]

In the event I am allowed to add my test link:

http://constructionbannerexchange.com/kwr2/

If this is not allowed, please remove link and I can upload css file.

Thank you.

[james438]

In general links are ok if it is to post a resource to help a member such as a link to a regular expressions forum or a particular function at php.net or if you want to demonstrate a script you are working on. It is usually required if you need help with a script on your site. The moderators enforce this on a case by case basis. In your case it was a good idea to post your site so that we can get a better idea of what you are referring to.

Can you give an example of what you are trying to do with your floats? Will they remain stationary when the user scrolls down so that they are always visible or are they more of an extension to your banner or will it overlap the banner to some degree? I notice you are looking for help modifying a wordpress template. Some members here might be knowledgeable about modifying Wordpress templates. Often the people at Wordpress are better equipped to answer those types of questions.

[styxlawyer]

If you're new to Wordpress don't mess with the installed theme CSS. Just add the Simple Custom CSS (https://wordpress.org/plugins/simple-custom-css/) plugin and put all of your stuff in there.

Don't forget to make a child theme before you change anything.

[Comex]

I have a site at: http://kentuckyweedradio.com that I am redoing.

I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site area at:

http://constructionbannerexchange.com/kwr2/

Which will later become the main site of first domain.

@styxlawyer

If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?

@james438

Yes I think stationary is best.

Thank you in advance.

[styxlawyer]

@styxlawyer

If I use the plugin ( without ) a child theme, and add the code, how would I edit what I put in there in the event it comes out incorrectly?


Just access the plugin and it will open a code window so that you can edit you CSS. All the additional CSS you put in will appear on the served page immediately before the </head> tag so will override sttings from any included files.

[Comex]

Thank you.

Dose this look correct to post two images on right and left sides of the template:

background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
text-shadow: 1px 1px 1px #202020;
}

so they are over the template and stationary with page?

[styxlawyer]

Thank you.

Dose this look correct to post two images on right and left sides of the template:

background: url(images/back-body.jpg) top center no-repeat, url(/wp-content/uploads/2014/08/bg-left.png) left top no-repeat fixed, url(/wp-content/uploads/2013/06/bg-right.png) right top no-repeat fixed;
text-shadow: 1px 1px 1px #202020;
}

so they are over the template and stationary with page?

No. CSS3 renders multiple background images in layers from front to back so "back-body.jpg" would be in front of the two other images, which isn't what you are trying to achieve. "back-body.jpg should be the last image in the list.

This page (http://www.css3.info/preview/multiple-backgrounds/) might help.

[styxlawyer]

.
I want the images of the leaves on right and left of template to appear on right and left ( over ) the new site ....
.


I just reread your post #5 and see that you actually want the two leaf images to appear on top of the rest of the site. You cannot do that with CSS background, so you'll have to place the images in the page and use CSS "z-index" to bring them to the front. You need to be aware that "z-index" only works on elements which have a "position" applied to them.

A good reference to "z-index" can be found here (http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892).

[Comex]

I am so lost now?

Does this look anywhere near what I am looking for?


div {
width: 200px;
height: 200px;
padding: 20px;
}

.one, .two, {
position: absolute;
}

.one {
background: http://imagefile name;
outline: 5px solid #000;
top: 100px;
left: 200px;
z-index: 10;
}

.two {
background: http://imagefile name;
outline: 5px solid #000;
top: 100px;
right: 100px;
z-index: 100;
}

[styxlawyer]

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 (http://mydesk.myzen.co.uk/Kwr/index.html) with in-line styling as an example.

[Comex]

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]

Is this not css?

I see this in your 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]

ahhh,

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

[Comex]

This is odd?

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

My player and a few other buttons are non clickable?


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

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]

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


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

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]

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]

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.

[styxlawyer]

You still have this line in your page:



<img src="Left.png" style="position:fixed; top:0; left:0; z-index:10;" alt="!" />



That line came from the test page I created and you don't have the image "Left.png" on your server, so should be removed.

According to the w3.org validator (https://validator.w3.org/nu/?doc=http%3A%2F%2Fconstructionbannerexchange.com%2Fkwr2%2F) there are 135 errors in your page. Any one of these could be the cause of your problem, so you still have a lot of work to do.

[Comex]

The line is present?


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

And the player only works when I remove the code. There must be a close tag or something I am missing here?

As for w3.org I worry about those errors after I am done with the site with a plugun I add later.

[Beverleyh]

Try to think about this logically. You're putting 2 rather large images over the top of your website - images that with their dimensions combined, create a 700 X 650px mask. They may be transparent, but their physical presence is still overlaying everything else. What effect do you think that is having on the interactive elements underneath?

Now, it may be that "pointer-events" will give you a workaround (please Google for the specs) but only in supported browsers.

As for the errors, it would be wise to tackle them sooner rather than later. Fixing them early will stop their (sometimes) compound effect, eliminating knock-on problems before they begin creating other functionality and usability problems in your design.

[Comex]

ok,

So if no one knows a html / php or css fix, I guess I will have to do with it.

[Beverleyh]

It's not so much whether *we* know the answers, rather how *you* understand and act upon the advice you've been given.

If you want somebody to do all the thinking, problem solving, and coding on your behalf, maybe you could consider hiring somebody?

[Comex]

I don't have an issue paying someone, if someone here can be hired? I am at a beginners level and not really understanding a lot of the advice here.

[styxlawyer]

OK, here's a compromise. I have split the overlay image into three parts on each side to reduce the masking effect. Look at lines 12 to 17 in this modified test page (http://mydesk.myzen.co.uk/Kwr/index.html) to see the code. The dotted red lines on the page show the extent of the masking and should be removed from the inline styling. You can also download the six images from that page.

[Comex]

Umm, Now this works! I currently have them linked to your site for the moment.

Not sure what you mean by:

The dotted red lines on the page show the extent of the masking and should be removed from the inline styling.

I ee the red lines, not sure what you mean to have them removed.

Thank you!

[Comex]

I changed dotted red

to

dotted transparent

[styxlawyer]

There's no need to make them transparent. Just remove the "border-left:..../border-right:...." styling from each image.

That temporary file won't be there for very long so you should download the six images and upload them to your own site.

[Comex]

@styxlawyer I tried to PM you, not sure you got it?

[styxlawyer]

Yes, I got your message, but I don't have any more time to spend on your problem. That was a five minute solution using IrfanView and saving the images as PNGs with transparent backgrounds to demonstrate what is possible. You could use Paint Shop Pro or Gimp for a better result.

If you constantly ask other people to do things for you you'll never learn anything.