I have created a portfolio page for myself.
https://alonoparag.github.io/index.html#home
My problem is that when I check the page using Google Developers tools or with my android (samsung galaxy s4) device, the navbar's items are always behind the content of #home.
I tried tweaking the z index of the navbar items versus the home content, with no avail. When Checking the elements in the developer's tools I saw that both the navbar elements and the div z-index have changed, but it didn't affected the way that the elements are stacked.
I would appreciate help with this.
Cheers
here's my code
.topnav.responsive a {
float: none;
display: block;
text-align: left;
z-index: 10000;
}
div.content {
align-content: center;
width: 85%;
margin: auto;
padding: 16px;
z-index: 1;
}
You have to give a position for z-index to work. So if you add position:relative; z-index:10; to your header, it should work fine.
You have to specify a (static) position, for example.
position: relative;
or
position: fixed;
"z-index only effects elements that have a position value other than static (the default)." - https://css-tricks.com/almanac/properties/z/z-index/
The one issue I found is that the parent #home container itself seems to be the one giving you grief. Here are some tweaks I made in the developer console on my end. I tested it on a full desktop view as well as shrunk it down in the mobile preview and it worked properly.
CSS:
#home {
z-index: 1;
}
#myTopnav {
z-index: 999;
}
In addition, make sure to establish a position value for your elements.
That should do the trick for you!
Related
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
An element in my action bar just won't stay put in Safari and on ipad. It even moves up and down irregular (as you can see in the two different images below). Since chrome on ipad is build on the safari webkit engine it should be something with doing with that.
I can't seem to find the solution.
In the images below you can see it starts with div.profile.
nav .profile {
height: 100%;
margin: 0;
padding: 0;
position: relative;
top: 0;
}
There is more code, but that I put in a JSfiddle.
Bootstrap 3 is used and I'm using flexbox, might be worth mentioning.
Anybody knows more
http://jsfiddle.net/ynwvvzt0/
Add this to your css.
nav a.icon, nav .profile, nav .profile div {
display: inline-block;
vertical-align: top;
}
I'm currently modifying a Xenforo theme for my website and I'm having trouble with my header bar after I downloaded a new theme.
http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/
If you scroll down the page, you'll notice that certain elements such as the search bar, breadcrumb arrows and mini avatars are appearing above my header bar.
I'm not sure why this is happening as I've set the header bar's z-index to 9999 and its position is fixed (when you scroll down after a certain point, javascript sets position = fixed). All the elements that are overlapping it have z-indices that are lower than 9999. The odd thing is, this wasn't an issue on my older theme and I never modified any CSS for it to start doing this.
This is the div which contains my header:
#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}
This is the mini avatar that overlaps my header:
.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}
The search bar that overlaps my header:
#searchBar {
position: relative;
z-index: 52;
}
I've also tried setting a high z-index to all of the elements inside my header bar but it makes no difference.
Feel free to inspect any of the HTML in my website if you'd like to get more information.
Any help would be greatly appreciated. Thanks.
When setting Z-index you need to do this on the containing element not the ones inside it.
In your case the #headerMover div has z-index:1; applied to it.
If you take this out of your CSS or add a higher z-index on #headerMover it solves your problem.
#headerMover, .footer, .footerLegal {
z-index: 1000;
}
You need to give the parent/container the z-index, not the elements inside it.
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
I created a form for a Wordpress site http://www.bassetandbeagle.org/adoptionapplication/ and in the CSS code I put div position: absolute, so that the form would scale on mobile devices.
#formContainer {
min-width: 950px;
max-width: 950px;
padding: 10px;
position: absolute;
z-index: -1; }
Now the drop-down menus, above the form, are hidden behind it.
I attempted to set a higher z-index for the menu:
.nav-menu{
position: relative;
z-index: 1; }
But this had no apparent effect. I tried 1, 100, 1000... nada
I was able to get the drop-downs to show up again, by changing the .nav-menu to position: absolute. Unfortunately, this screwed up the positioning of the menus on the page.
I am pretty sure I am on the right track with the z-index property, based upon the other posts I have read. So, what am I doing wrong here?
Thx
Here is the solution of your problem -
CSS:
style.css line: 1431
.site {
margin: 0 auto;
max-width: 68.5714rem;
/*overflow: hidden;*/ /* remove this css rule and you will see the dropdown menu*/
}
Note: Check you site that where your .site class is applying and make the changes in css as per need.
Screen Shot:
Remove position: absolute from #formContainer.