We are creating our articles page, and the MAIN div contains the article. I have done a fiddle:
http://jsfiddle.net/ozzy/UqwUp/1/
The issue I have ( hover over bottom right corner )
That link only appears if the user hovers over that particular area. What I want is the link to appear, if they mouse anywhere within the main div.
Its driving me nuts lol.
Any help appreciated.
To Clarify:
UNLESS you hover over the DIV , I dont want the link to be seen at all.
You have the CSS:
#mainPane .reportThisLink a {
color: #FFFFFF;
text-decoration: none;
}
Which means the link is there, but in white. Set the color to something else :)
You could just use javascript to catch a :hover event on that div, then make that link show up.
That would be the simplest thing to do, but if you don't use a JS framework on your website right now, it could increase page loading times.
Just an idea.
Related
The logo element on the website:
puerteaspecialists.co.uk
was originally at the front. I didnt even update anything and one day i check the site and now the top 3rd is hidden behind the nav bar.
Ive tried z - index and have kinda worked out why this isnt working, but also havnt actually found the solution.
Is there a way to bring this to the front or anyway to show the full image via css?
Thanks!
A simple solution is to remove the solid background of the uppermost navigation bar...
.top_nav_out {
background-color: transparent;
border: none;
}
The problem is that class name .top_nav_out in your top navigation block applies a high z-index which causes the top-most nav block to overlap the lower navigation block (.top_nav) which hides your logo partially.
remove property:
z-index
from class:
.top_nav_out
and your logo will be displayed in full.
From what I have seen, the z-index property is redundant anyway in that class (layout stayed in good shape after removing it)
Hope it helps a bit!
I have a fb like button on my website but when a user clicks on the button the the pop up comments box is hidden behind the two elements (#centre and footer) and the user can do nothing with it.
My question is, How do I change the z-index of the flyout so when a user clicks the like button it appears in front of other elements?
I have looked at these questions and implemented their answers with no luck in fixing the issue:-
facebook iframe App: Send/Like button z-index issue
Other fixes I have found that did not work were:-
Elements that appear in front of/around the flyout should have overflow: visible; set. (From fb developers FaQ page.)
Changing the z-index of the classes that are listed in the answer from the link above.
Changing the width and z-index of a class generated by the iframe, and located in a script tag, called _56z-
All I would like is the flyout to appear on top of all elements on the page without having to change the layout.
Here is the link to my site http://mikelonsdale.co.uk
Thank you for your time and help.
Change the z-index for your #centre and #footer div's to negative values. This should fix the problem.
Don't forget to change all of the other elements in relation to your site. You will be moving the #centre div to at least to z-index: -2 (to allow room for the #footer div to fit in at -1).
The following code fixes the problem entirely, without having to change the overflow or z-index of anything. You simply add the code below, and voila. HOWEVER, it will throw off your site's layout a little (it will flow over .. ha). Amazing fix, small catch. Borderline acceptable but the best solution I found. (Found it on the WP forums).
.fb-like span {
overflow: visible !important;
width: 450px !important;
margin-right: -375px;
}
I added
.fb-like span {
z-index: 999999999999999;
}
to my css and that fixed it. It isn't even marked as active, and deactivating it in developer tools doesn't change anything either. If I take it out of my CSS things go all stupid again though.
I need help creating something like this link (http://www.standardchartered.co.in/borrow/)
When the user hovers over the navigation, the grey triangle image will appear. I'm not very sure how to go about doing it. Please help!
The best way to do this is to use a plug-in, possibly for jQuery. There are many drop down menu plugins available. A google search for "jquery drop down menu" will help you. One of the first results for me is:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/
The second one down on that page appears to have the effect you want, but it also depends on how you want the rest of the menu to appear. You will need to do some research and choose one that suits you.
OR, if you just want a grey triangle to appear, without the menu, when you hover over an element, then some css like this is what you want:
li:hover {
background:url('./images/grey_triangle.png') center bottom;
}
Which says, when the li element is hovered, use ./images/grey_triangle.png as the background image and place it in the center at the bottom of the element. You would need to create your own grey triangle, set appropriate padding etc, but that is the basic css you need for the effect.
I hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?
Test(XXX)
#b1-wrap {
cursor:pointer;
height:107px;
left:573px; // this seems that the dash-line is caused by the margin on the left.
position:absolute;
top:17px;
width:310px;
}
When the user clicks the text Test, the user will trigger a.php.
Here is the problem, when I click the link without releasing my mouse in firefox, I can see a dash-line across the left.
Please see the screenshot http://i56.tinypic.com/w8kpiw.png
I cannot figure out why? and how to fix it?
Anyone can help?
this seems that the dash-line is caused by the margin on the left because if I increase the value of left, I can see the dash-line expanded. So is there a fix for this problem?
Thank you
Try css on the a tag
outline: none
http://www.w3schools.com/css/pr_outline.asp
The "dash-line" you are referring to is the focus border that indicates which element has the focus. It usually appears on links and not on divs, so you should look at the CSS for your link. It's size is the same as the bounding box of the element, so try adjusting the position/size of the link.