I am working with zurb foundation 5, and I want to have a fullsize cover on the front.
But because zurb sets the position of the body "relative", I have trouble setting absolute positioned Divs.
Here is the jsfiddle and when you just remove the:
body {
position: relative;
}
you will see, how I actually want it to look like.
http://jsfiddle.net/ZULv9/
I guess I could remove it from the framework, but I rather would like to overwrite it or just to remove the css value in hindsight to keep the my hands out of the framework. I believe that it must be possible somehow, I just haven't found out how this is done.
Therefore I would be happy for any suggestions.
You can set the body styling to:
position: static;
which display all elements in order of how they appear in document flow.
Hope this helps!
body {
position: absolute !important;
}
css override
Related
I have the following html structure (inside a wiki-content div) and I don't know how to reach it.
This doesn't seem to work, would you know why?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100%;
}
Thank you
It doesnt work because you have an inline CSS value of width set to 99.9315%. Inline styles get processed after your css so this will override any other setting for width in your css file.
Try removing the inline width setting.
Have you tried using !important?
.wiki-content .table-wrap relative-table.wrapped.confluenceTable
{
width: 100% !important;
}
You can try doing this and the try to put !important to override the existing width.
.table-wrap .relative-table.wrapped.confluenceTable
{
width: 100%!important;
}
If the inline style width is generated by a certain javascript, you need to re initialized it using also a javascript. because you can't override a inline style using css since it has the most specificity value. Please read this link about https://css-tricks.com/specifics-on-css-specificity/
Please see below javascript code to re initialized the width.
document.getElementsByClassName("relative-table").style.width = "100%";
I have some clickable link and it was working fine. But if I applied css for an another section those link. Here is the CSS:
.strong-view .wpmslider-wrapper {
position: relative;
}
This css is only applicable for .strong-view class. But link of another section is not working. Here is the live link: http://www.cp3472.bmekuet.org/ Here 'Read More' button under Recent News is not working. If I just remove
.strong-view .wpmslider-wrapper {
position: relative;
}
It works fine.
It is really strange!. What problem is going on? Thanks in advance.
It's because you have floated the 3 sections in the middle and didn't clear that float, and .testimonial-container displays below it, but is actually consuming all of the space where the 3 floated sections are because those floats aren't cleared.
The easiest fix is to add
.testmonial-container {
clear: both;
}
A better fix would be to wrap the 3 floated sections in an element with a "clearfix" applied - https://css-tricks.com/snippets/css/clear-fix/
Position relative may affect the z-index of an element (yes, I know that makes no sense, but that's how it seems to me, if anyone has any documentation behind that, I'd love to read it, this is just from my own experiences). Do you have anything else on the page with a z-index? If you change this class's z-index to something higher than your other z-indexes, it will probably solve the clicking problem.
I just came across on the W3Schools that if the position property is not specified, the browser defaults itself to position: static;
So if that's the case, what's the purpose of specifying the position property as static explicitly? Is there any specific purpose? If yes, please guide me.
P.S. I'm a beginner in CSS
You would need to specify it explicitly if you wanted to override a rule that was specified earlier that targets that specific selector. For example, let's say someone does this in a different part of the stylesheet or a different stylesheet altogether:
header * {
position: relative;
}
Well, maybe position: relative isn't behaving the way you want it to on a specific element, so then you override it:
header > .my-special-element {
position: static;
}
That's just one example, but I think that it would be one of the most common scenarios.
The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.
The same reason as there is to specify any other property as its default value: To override some other piece of CSS.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I have a html element with id="#item" I have a UI event that programaticaly alters the css for "#item" by adding the class ".new" to "#item". Initially I want "#item" to have "position:absolute". However once the class ".new" is added to "#item" the only way I can get the formatting I want in Chrome inspector is to removed position:absolute from the css for "#item". I'd like to accomplish this instead via the css in ".new", however in Chrome inspector my options for changing the position attribute are
static
absolute
relative
initial
inherit
fixed
As far as I can tell none of these do the same thing as removing "position:absolute" in Chrome inspector. Can anyone suggest what to put in the css for ".new" to revert to the css default positioning.
http://jsbin.com/ICeweli/1/
#test {
position: absolute;
}
#test {
position: static;
}
Remove one or the other to see the difference.
The CSS2 specification says that the initial position value of an element is static.
So in your case if you can't actually remove a declaration then reset it to the "default" which is static.
#item {
position: static;
}
You cannot use 'none' as an option.
For my need,
.search-bar{
position: static;
}
did the job.