Please find here a HTML snippet and the corresponding CSS which build a BorderLayout:
https://jsbin.com/zokutalafe/edit?html,css,output
-
The yellow area in that BorderLayout example shall have a height of 100%, unfortunatelly it has not :-(
The question is now: Is it possible to change that yellow container's height to 100% by just modifying the CSS, NOT(!) the HTML, without using new [Edit: I mean "additional"] CSS selectors (means: something like ".borderlayout-center > div { height: 100% }" is not allowed)???
This is for a very special use case - that's why I have the above mentioned strange constraints.
Thanks a lot in advance.
You can use like below:
.borderlayout-center div {
height: 100%;
}
I'm not shure what you mean with new CSS selectors
But something like
.borderlayout-center div{
height: 100%;
}
it's nothing new and it works...
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'm a complete CSS novice -- my background is back-end development. So please forgive the ignorance in advance.
I'm attempting to learn a bit more about the application (or.. practical use) of CSS.
Given the following CSS:
.input-size {
height: 25px;
width: 250px;
}
I'm trying to figure out why the following line of HTML in a WordPress page produces odd results:
<input type="text" placeholder="Search" class="input-size">
I believe the issue has to do with specificity, but I am unsure on how to give a heavier weight to the style above.
The following image is what I expect:
Notice the spacing between the bottom of the element and the canvas below.
However, when I apply the style to a textbox, I get the following:
There appears to be about a 25 pixel padding at the bottom, but that is not specified in the style posted above.
Any advice on moving forward would be appreciated. I'm, unfortunately, unsure of how to proceed with figuring out what could be causing the issue.
Thank you!
What you have is correct, however you do not have padding defined in your new class. What is most likely happening is that padding is defined for input and it just inheriting the properties from the default style. Since you have it inspected - trace the margin rule.
In the CSS, try specifying
padding : 0;
So it would be:
.input-size {
height: 25px;
width: 250px;
padding:0;
}
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
This question is pretty short on purpose, but I'm very curious if it's possible.
Can you fetch other styles inside a CSS Stylesheet "with" CSS?
A bit like doing this with jQuery:
var header_height = $('#header').css('height');
So I can do calculations like this:
#content {
height: calc(100% - property('#header', 'height') - property('#footer', 'height'));
}
Where property would then for example represent the fetching of another tag's CSS-style.
No JavaScript allowed for this question ^^
A short answer: no it's not possible with pure CSS. You can only do that with JavaScript or with restrictions in languages like SASS or LESS that generate pure css. But if the dimensions change dynamically, both won't help either.
Your only chance in CSS is with percentages like
#content {
height: 80%;
}
where the height changes accordingly to the parents height. But this only works with parent elements of course.
I'm not sure if I the title's correct, so feel free to edit it to something more descriptive.
How to, if there's a way to, read the width/height of an background-image image and pass it to width/height property of that element in CSS (without the use of JavaScript)?
So, since I think the question is still confusing, I'll best provide an example:
element {
background: url(image.png);
width: auto;
height: auto;
}
I know the above example doesn't work, but I was wondering if there is something similar to it that might.
Thanks!
P.S: I can do it in JS, so posting a JS solution won't be necessary.
There is no way to do this with only CSS.
I'm not sure what else there is to say.
It is impossible - workaraound is to put there img , set overflow to hidden, and put second div in with position relative ( it some setup to fit it all, but it works )