This is killing me for hours. Just a simple Anchor tag is not working.
<div id="navigator">
<div class="show">
<span>PORTFOLIO</span><span class="carat"></span>
</div>
</div>
Wherever I am trying to put an anchor tag, its not working
CSS is :
#navigator {
position: fixed;
top: 199px;
left: 0;
}
The page is here.. http://myingage.com/?page_id=25
Add z-index in #navigator in style.css,
#navigator {
display: none;
font-family: 'Titillium Web',sans-serif;
left: 0;
position: fixed;
top: 199px;
z-index: 100;
}
your navigator is behind the page
just add z-index: 1000 (anything bigger than z-index of your content) or move your navigator code behind the code of content
try giving a higher z-index
This works for me.
#navigator {
position: fixed;
top: 199px;
left: 0;
z-index: 10001;
}
Related
Issues I have had
I have not been able to scroll down on my site.
No solutions I ave found work.
Info
My site is execlinux.glitch.me
The CSS files and HTML can be found by going to glitch.com and searching execlinux
I found the solution:
in your CSS file you have a ".text" element which has the fixed position property. It's wrong!!! it should have the relative position like the below:
.text {
position: relative;
top: 100px;
left: 50px;
}
the css below is incorrect:
.text {
position: fixed;
top: 100px;
left: 50px;
}
You could try changing fixed to relative, however if you do there will be other issues you will face.
If you use the following css:
.text {
position: relative;
top: 100px;
left: 50px;
}
you will find that the contents of your <div class="text"> scrolls over the top of your navigation menu and is not left justified.
Perhaps try
.text {
position: relative;
top: 100px;
left: 50px;
z-index-1;
width: 90%;
}
html {
height: 100%;
width: 100%;
overflow: visible;
}
Tested these changes and while not perfect, they achieve a somewhat satisfactory result.
I want to block users to click anywhere on the page except just on top div with a button.
.topdiv {
height: 90px;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
So whole screen is not clickable including the tobdiv than I don't want to. Changing divBlocking=>top: 90; seems not work
Update topdiv class with position: fixed; and z-index: 999;
.topdiv {
height: 90px;
position: fixed;
z-index: 999;
}
.divBlocking {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
You can simply add z-index: -1 to .divBlocking.
This means send .divBlocking to the back.
To show case the difference, I add some background color.
Your original code result like this
Add z-index: -1 to .divBlocking
Edited code
.topdiv{
height:90px;
background-color: red;
}
.divBlocking{
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
cursor: wait;
background-color:rgba(201, 76, 76, 0.3);
z-index: -1;
}
<div class="topdiv" *ngIf="!blockContent">
<button>Cancel</button>
</div>
<div class="divBlocking" *ngIf="blockContent"></div>
<div class="divApp">
//application content/form/inputs
</div>
My understanding of CSS is that you can determine the stack order of elements by using the z-index
In the most basic cases, HTML pages can be considered two-dimensional,
because text, images, and other elements are arranged on the page
without overlapping. In this case, there is a single rendering flow,
and all elements are aware of the space taken by others. The z-index
attribute lets you adjust the order of the layering of objects when
rendering content.
Understanding the z-index
I'm stuck with this... My goal is this page:
I want to place text over an image, for example "STALDEN". I know how to do this, but when i use absolute positioning and insert a new entry the text is on the same position like to one before. How can I solve this better?
Any help much appreciated!
This is what i have:
<div class="karte">
<img src="img/home/stalden.png" alt="">
<h1>STALDEN</h1>
</div>
CSS
.karte img {
width: 100vw;
}
.karte h1 {
position: absolute;
top: 50px;
left: 50px;
color: white;
font-family: "Teko", sans-serif;
font-size: 15vw;
}
You can use image as background of your section
.karte {
background: url('img/home/stalden.png');
}
<div class="karte">
<h1>STALDEN</h1>
</div>
Try this:
.karte{
position: relative;
}
.karte img{
position: absolute;
top: 0;
left: 0;
}
.karte h1{
position: absolute;
top: 50px;
left: 50px;
}
It's exactly that you ask. But it's better to use background-image here because of better semantic and other reasons... Just use background-image. It's better solution.
I am trying to have my facebook like button stay in the top left corner and as the user scrolls down it follows them... What is wrong with my code? It shows but as I scroll down it does not move with the scroll. Tested locally on both of the latest versions safari and firefox. Please help!
topleft{
position: fixed;
top: 0;
left: 0;
}
<top> FACEBOOK "LIKE BUTTON" IFRAME CODE HERE </top>
You aren't selecting your like button properly. You need to add a class attribute for css selection.
Try something like
<div class="facebook">FACEBOOK IFRAME</div>
Notice the ".facebook" rather than just "facebook".
.facebook {
position: fixed;
top: 0;
left: 0;
}
There's no top tag in HTML.
CSS class name selectors should be preceded by a . (period).
topleft{
position: fixed;
top: 0;
left: 0;
}
should be
.topleft{
position: fixed;
top: 0;
left: 0;
}
Assigning the style you've created to the iframe should work.
<iframe class="topleft" ...>
...
</iframe>
JSFiddle
problem with this could be
for topleft class
.topleft{
position: fixed;
top: 0;
left: 0;
}
for topleft id
#topleft{
position: fixed;
top: 0;
left: 0;
}
otherwise it should work.
I have a popup panel which shows nice on chrome and FF like this:
It's a grey iframe with this css style:
element.style {
z-index: 25000;
opacity: 0.5;
position: absolute;
background-color: black;
border-width: 0px;
top: 0px;
left: 0px;
width: 1366px;
height: 361px;
visibility: visible;
}
which contains a DIV:
element.style {
position: absolute;
z-index: 25001;
background-color: transparent;
left: 0px;
top: 0px;
width: 1366px;
height: 361px;
}
which contains another (main) white div:
element.style {
width: 400px;
overflow-y: auto;
overflow-x: hidden;
z-index: 25002;
visibility: visible;
position: absolute;
left: 483px;
top: 77px;
}
I do not understand why on IE 8 the panel with those tabs is white also, so basically it should be in the background like on Chrome...:
Do you have any clue?
I'm almost sure the problem is on the panel with the tabs and not on the popup one...
The css of the panel with the tabs is:
element.style {
width: 280px;
height: 500px;
position: relative;
}
UPDATE:
Panel tab is actually a table with the above style.
Ps: Do not blame me about css for the popup. Is mainly generated by the icefaces component.
Finally, solved...
Added this style to the div which contains the panel tab:
position: relative;
z-index:-2;
Please note that I've tried with z-index:0 or positive but was not working so a negative one was required...
The single drawback for this solution is that now, the parent div with its panel tab does not appear on Firefox.
Grr... I really hate IE.
UPDATE: I ended up using jQuery to put to that div, a negative z-index only for IE.