If you go to this site: http://www.marketwatch.com/story/social-networking-for-social-smokers-2011-05-11 and go into the styles and change <div id="blanket"></div> to having a position of static, and then add a wrapper outside of it (or on the body) put position:relative on it, the page changes drastically (the header basically overlaps the content area at that point.
Everything I know about positioning tells me this shouldn't be happening, but I can't quite figure out why. I wasn't able to find anything in the CSS to cause this behavior as well. Anyone have any ideas?
Edit: This isn't related to my job or anything but my friend brought it to my attention and I thought it was a brain tickler.
I've tried doing this:
<body>
<div style="position: relative;">
<div style="position: static;">
<div id="blanket">...</div>
</div>
</div>
</body>
And this doesn't cause the problem, so there is clearly something on that page, but I can't figure it out. It does this in chrome/FF/IE.
Try inspecting the elements in the header. You will see the following style rules on the div#topchrome element:
position: absolute;
top: 0;
width: 981px;
z-index: 10000;
The position on this element (absolute, with top: 0) causes it to be pushed to the very top of the page (default, unmodified behavior). If you change body to have position: relative;, you have basically told #topchrome to be "absolute, but relative to where body is." So now, #topchrome is actually at the top of body, which is the very top of the page. Even so, that still shouldn't change things. The real culript is the third actor, div#breakingnews, which has the property margin-top: 177px. In the new flow, we have:
body { position: relative; }
div#breakingnews { margin-top: 177px; }
div#chrome
div#topchrome { position: absolute; top: 0; }
So, div#breakingnews is causing the content to be pushed down. Indeed, changing div#blanket to have position: static has nothing to do with it, since it is static (the default) to begin with.
Related
I'm currently going to school and I've started to use html for my study notes. I have 1 html for each chapter and each extra assignment. When exam time comes around, I copy each html into a big html. This works but the problem is when I edit something. Sometimes the individual chapters get edited and sometimes I edit the big file. So this becomes a problem.
Using some of the code I've found on this site, I'm able to load chapter01.html to display in full using iframes. But I can't get chapter2.html to fall in line after chapter01. Combining them makes it easier to do searches and get an ereader to read everything. Our last exam had chapters 1,2,3,9,17, and 3 additional assigned sections.
The files are held locally in my computer or on a jump drive and I use VSCode for editing. I'm a beginner and have done enough to do what I needed from watching tutorials. Until this problem came up.
I tried using flexbox as the iframes containers but don't understand it enough.
Just to clear things up. I want to fully load the first html. After that, I want to fully load the 2nd html after the first. And so on preferably without using javascript since I still have to learn this but I'm willing to
Any help would be appreciated.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.content1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.content2 {
position: relative;
left: 0;
right: 0;
top: 0;
/* bottom: 0; */
}
iframe {
width: 100%;
height: 100%;
display: block;
}
<!-- <div class="content1"> -->
<iframe class="content1" frameborder="0" src="ch03 default done.html" frameborder="0"></iframe>
<!-- </div> -->
<!-- <div class="content2"> -->
<iframe class="content2" frameborder="0" src="ch06 default done.html" frameborder="0"></iframe>
<!-- </div> -->
</body>
Some things are commented out because I was testing ideas such as inserting the class into the iframe instead of using the div container, seen above. I've tried other things and came up with different results and I'm not sure how to explain those.
Thanks for any help you can give.
I'm not entirely sure what you're trying to achieve, but from what I'm understanding, you want to display more than one screen/page in the "main" page.
Ideally, you could just extract the necessary contents on the pages, and display those in a <article>, <main> or <section> tag, respectively.
If you're worried about styling the pages, simply give each one a unique class, or even an id.
You could also simply link to these individual pages.
iframes would work, but as you've noticed, they're not quite as simple to work with.
Best of luck!
I have floating button set to position fixed with a z-index of 9999.
When I scrolls the page, some elements see through the button.
So I have set the element to position as relative with a z-index of 10, still sees through.
When I set to -1, it works, but then the element becomes unclickable.
How can I make this work?
#button {
position: fixed;
z-index: 9999;
top: 0;
left: 0;
}
#carousel {
position: relative;
z-index: 1;
}
I've already done the research and saw this post, z-index not working with fixed positioning, but with so solutions to my issue.
Without the HTML and the rest of the code, it would be impossible to help.
From the code you posted, it should work.
It might be a problem from the Parents' Stacking Context.
If you have something like:
<div id="parent-1" style="z-index: 1">
<div id="myDiv" style="z-index: 9999"></div>
</div>
<div id="parent-2" style="z-index: 2"></div>
The [#myDiv] one will always be under the [#parent-2].
Because of the [#parent-1] stacking context (layer) is under the [#parent-2] stacking context (layer).
Another common issue is with using 'transform' on the Parent element, which opens up another bag of hurt.
I ran into an issue with absolute position with a nested p tag. This JSFiddle demonstrates the difference. Based on the description on this question and the comment by user1334007 absolute positioning is relative to the first parent. Even though w3schools does not state that, it appears to be the case for div tags. For p tags, it seems that absolute is relative to the page as Michael Zaporozhets states in the SO answer and w3school describes.
With all these links in mind, am I making a mistake with my styles somewhere or are these performing differently? If they perform differently, can someone offer an explanation as to why this happens please? The main reason I am asking is this is a question in the 70-480 certification tests and even though I know the answer the say is correct, I would like to be able to use positioning with confidence going forward.
Code in jsFiddle link (required to have code to submit jsfiddle link so i just put it all in)
<h2>Paragraph Position</h2>
<p class="outer">Hello Outer
<p class="inner">Hello Inner</p>
</p>
<br/>
<h2>Division Position</h2>
<div class="outer">Hello Outer
<div class="inner">Hello Inner</div>
</div>
.outer {
position: relative;
background-color: red;
height: 100px;
width: 500px;
}
.inner {
position: absolute;
top: 15px;
left: 15px;
background-color: green;
}
If you take a look at the HTML (I looked with Chrome Inspector), you'll see that p.inner isn't actually inside p.outer. Because of this, p.inner will be absolutely positioned relative to the first parent element that has relative positioning or the html tag (in this case the html tag).
Edit: I looked in Firefox as well and it seems as if these browsers will convert nested p tags into separate p tags. So a p tag inside of another p tag will result in three sibling p tags.
I've on my site I've got two images inside their own parents divs (the full structure for each is div a img). The divs have fluid heights (height: 10%;). The images within are set to max-height: 100%;. The images size properly within Webkit, but every other browser seems to have problems with one or both. I've tried searching for possible solutions, but I can't even begin to imagine what the cause even is.
Since it's probably easier to just show you guys, here are the relevant pages and files:
Main page (the center logo image and the "CRASH" logo at the bottom)
CSS (the relevant divs are .logo and .crash)
Below is a breakdown of what I'm seeing. Thanks for any help!
edit: Never actually mentioned what the undesirable result was. In the browsers where it's broken, the images display at 100% -- not at 100% of the parent container, but at the full size of the image itself, breaking out of its container. Hope this clarifies things!
Browser / DIV | .logo | .crash
chrome 22 | works | works (same results on my friend's copy of Safari)
opera 11.61 | broke | broke
ie 9 | works | broke
firefox 12 | works | broke
I figured out it using Firebug in firefox 15.0 and got a solution, Hopefully it will work on all browsers.
1. Remove css rules defined for #footer and add those rules in .crash like below:
.crash {
height: 10%;
position: absolute;
text-align: center;
top: 82%;
width: 100%;
}
2. Add the following rules:
.footerNav {
position: absolute;
text-align: center;
top: 92%;
width: 100%;
}
3. And in .mod-languages replace existing styles with given below:
.mod-languages {
position: absolute;
text-align: center;
top: 96%;
width: 100%;
}
Additional Notes:
Your HTML structure is looking like this:
<div class="moduletable">
<div class="custom">
<div id="logo">
<a href="http://www.millioncranes.com">
</div>
</div>
</div>
So when you wrap moduletable with #footer like below:
<div id="footer">
<div class="moduletable">
<div class="custom">
<div class="crash">
<a title="CRASH Japan" href="http://crashjapan.com">
<img src="/images/crashlogo.png">
</a>
</div>
</div>
</div>
.. /*Another moduletable*/
.. /*Another moduletable*/
</div>
This causing a problem. The style of #footer applying on all moduletable elements inside #footer. So do not need to wrap these elements inside footer. Style your elements like you have styled for #logo, That's it!
Hopefully it will fix your problem in all browsers.
I'm afraid I only have a chromebook here, so I can't test on any non-webkit browser, but here's my guess:
For the rendering engine to know how to apply height: 100% it has to know for sure the height of the container element. People have wrestled with 100% height for a long time.
First, I would make sure your a is display: block so that the img definitely knows how high its container is.
Then I would play around with setting explicit heights for the imgs container elements, and see if any of those fix it - then when you know what the problem is you can find a solution. Hopefully.
Let me know how you get on.
Not all browsers support max-height; see http://caniuse.com/#search=max-height
You don't really say what aspect of the result you don't like: what exactly is the difference between what you expect to happen and what actually happens?
How do you overlap an element over another element that is positioned relatively in Internet Explorer? Z-index doesn't work, it always appears behind the relatively positioned element.
Looks like I'm kidding, but I am not
.myLinkCssClass {
background : url(#);
}
You're not by any chance trying to put something over a combobox (select tag), iframe or flash movie right?
In those cases z-index is a lost cause.
Otherwise what browser version are you using and are you using absolute positioning?
I had a real pain with this problem that this particular workaround wasn't relevant for. It's a little hard to explain so I'll try using code:
<div id="first" style="z-index: 2">In between</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
The problem is that setting the parent's z-index to a higher value would move it to the foreground instead of the back where its supposed to be. I stumbled upon a solution completely by accident: I made a copy of the foreground element (id=third) outside its parent.
<div id="first" style="z-index: 2">In between</div>
<div id="third" style="z-index: 3; visibility:hidden">Foreground</div>
<div id="second" style="z-index: 1">In the back
<div id="third" style="z-index: 3">Foreground</div></div>
Its worth mentioning that in my original code the elements don't have IDs so I don't suffer from 2 elements sharing the same one and invalidating my HTML.
I think its safe to classify this weirdness as another bug that happens to help with the original, but it works, at least for me. Hope somebody finds this useful!
Create and then set an additional transparent background image on the element you want to have on top. For me it finally worked in IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}
I wanted to note that if you are using IE8 and below, it does not support CSS3 filters. This was my issue.
I was using:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#black00', endColorstr='#black00', GradientType=0);
No matter what I set my position or z-index to, you could not see the other layer because it was causing a complete mask over that layer (instead of going from clear to black and to clear again).
By removing the CSS3 filter for just IE8, I was able to solve my problem.
Hope this helps someone who runs into the same issue.
I had the same problem in an html where many repeated relative positioned divs were blocking absolute positioned div's view. The workaround provided by www.brenelz.com, that I've already used with success wasn't working in this case. So, the following worked for me:
I removed the relative positioning from those divs I've mentioned first, then added a CSS to turn those divs on relative when hover. Let me show you the code:
Before:
DivThatYouMustHover {
height: 300px;
position: relative;
width: 200px;
}
After:
DivThatYouMustHover {
height: 300px;
width: 200px;
}
DivThatYouMustHover:hover {
position:relative;
}
This way the others 'sisters' of that div stay with normal positioning and don't interfere with the layout.
It worked very well for me! I hope it helps you too.