Can anybody recommend a good tool that could give the visual of my html page content stack when using z-index properties for some div tags on a given html document?
At present, I'm facing this troubling bug that is preventing me to navigate to other menu links on top navigation menu bar.
http://cms.tmadev.com.au/companyprovider.html
After spending sometime trouble shooting, I found out the reason the top menu navigation bar is 'disabled' due to the image logo.
<div class="logo">
<img src="images/CRSlogo.png" alt="">
</div>
If you look into the html file closely, if you remove this div class logo, the top menu navigation bar links will be restored to normal.
Thus I'm suspecting because of its default z-index value (whatever it is), it's causing the image to go infront of the top menu navigation bar.
I tried hacking the CSS to push its z-index far back as -9999 - but it's not working! Links are still disabled.
Any ideas how I should handle z-index properties properly?
Cheers!
As a practice, try avoiding giving explicit height to elements
Heres the fix
HTML
<div class="header">
.. some other content ...
</div>
CSS
.header {
/*height:100px --avoiding height */
overflow:hidden; /* one way to force element containing floated elements to have a height */
}
details about above overflow-hidden-float-trick here
although the above should work, if your navigation has some dropdowns, chances are, it will get chopped off because of overflow property of parent set to 'hidden'
a good way to clear floats would be to use something called a "clearfix" detailed here and there and everywhere
So,
HTML
<div class="header clearfix"> <!-- notice the new clearfix class -->
.. some other content ...
</div>
CSS
.header {
/*height:100px --avoiding height */
/* overflow:hidden; --not required */
}
.clearfix:before,
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
*zoom:1; /* for ie7 */
}
When I look at the example on which button clicked: "Administrator", I get the div "middle", it is therefore necessary to provide a stronger value to your "menu_tab" z-index: 2", and a lower to your "middle z-index: 1";
http://fr.html.net/tutorials/css/figure020.gif
Envoy !
So FireFox has a 3D view in its web inspector, here's a 3D view of the Google homepage:
To enable it:
Visit your web site
Open the dev tools (View > Toolbar > Web Development Toolbar)
Select the "Inspector" tab and select the 3D box third from the right on the same tab bar.
.header {height: 140px;} without z-index system
Varinder Say the true !
Related
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
Today I encountered a weird experience in my site LiveGreen
When I hover on the Menu Services, the dropdown goes underneath the image section below that. I tried every possible way like positioning and z-index ing and all kind, and googled a lot, am not bad with HTML and CSS still, it is testing me.
This theme is purchased, so cant post the code. you can check it from the website itself.
Please Help me.
Remove the z-index property on your .main class.
.main {
z-index: 1; /* this is causing your problems */
}
It's fairly difficult to pull off because there are so few unique classes to key off of. The root cause of the issue for you is that the element with a z-index that is higher than your menu applies that z-index higher up the DOM tree which makes it render on top. The best I could come up with is to apply the following, provided that the #aq-block-8801-5 block is always and will always be the nav menu container.
#aq-block-8801-5 {
position: relative;
z-index: 2;
}
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.