I'm new to wordpress and website building. Just bought a theme and faced an issue.
I want to put my image over accordion div container. How I can do that? My theme has content building option, but as far as I know it doesn't support creating layers feature (nor any other content builder plugins, like this or this
I would really appreciate any kind of help!
If you find a way to customize the CSS, this should do the trick:
.column.one {
position: absolute;
z-index: 2;
}
The property position:absolute allows you to position the image freely using the CSS properties top, left, right and bottom.
z-index:2 makes sure, that the image is in front of the accordion.
Edit:
Turns out that there is one more problem: since the image overlaps the accordion, the overlapped areas are not clickable anymore. To solve this problem, you can use the CSS property pointer-events:none. But beware! This is not supported by IE and Opera. You may need to find a workaround for these browsers.
Browser Compatibility Table: http://caniuse.com/pointer-events
Article about the Property: http://www.sitepoint.com/css3-pointer-events/
Related
I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I've added the Nivo Slider to a website and made some CSS modifications. When the site is viewed in IE9 however, there is a large black square covering the left-hand side.
http://genesisoak.com.au/
All of my CSS adjustments so far have been in vain, so I'm turning to you guys for help.
Thanks!
Add to your section class "slide" (.slide) this CSS property (in your stylesheet document)
right: 0;
This property will attach the section to the right of the page and will solve the problem.
That's all you need.
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.
I have a small gallery of thumbnails. When I place my mouse pointer over a thumbnail image I'd like to have a full size image pop up in a div in the top right of the screen. I've seen this done using just CSS and I'd like to go down that route rather than use javascript if possible.
Pure CSS Popups2, from the same site that brings us Complexspiral. Note that this example is using actual navigational links as the rolled-over element. If you don't want that, it may cause some stickiness regarding versions of IE.
The basic technique is to stick each image inside a link tag with an actual href (Otherwise some IE versions will neglect :hover)
Text <img class="popup" src="pic.gif" />
and position it cleverly using absolute position. Hide the image initially
a img.popup { display: none }
and then on the link rollover, set it up to appear.
a:hover img.popup { display: block }
That's the basic technique, but there are always going to be major positioning limitations since the image tag dwells inside the link tag. See the link for details; he uses something a little more tricky than display: none to hide the image.
CSS Playground uses pure CSS for this type of thing, one of the demos is surely to help you and as it's all CSS just view source to learn - you probably want to use the :hover pseudo class but there are limitations to it depending on your browser targeting.
Eric Meyer's Pure CSS Popups 2 demo sounds similar enough to what you want.
Here are a few examples:
CSS Image gallery
Cross Browser Multi-Page Photograph Gallery
A CSS-only Image Gallery: Explained
A CSS-only Image Gallery: Example
This last one acts upon click. Just to be complete in behaviours.