I have looked around quite a bit and cannot find the solution.
I am adding a separator in SceneBuilder. This is easy. Now I want this separator to be a solid line.
This I am having issues with. I have tried :
-fx-border-style: solid;
-fx-border-width: 1px;
But this doesn't seem to work or any combination of this.
i think you missed line part in below css
.separator *.line {
-fx-border-style: solid;
-fx-border-width: 1px;
}
with boarder width 5px
Tip : use CSS Analayzer to know css class/selector for particular part of node, you can find css analyzer in scenebuilder 1.1 view -> Show css Analyzer or ctrl+6 shortcut in windows.
Its the solution of your problem, which was my problem too:
.separator *.line {
-fx-border-style: solid;
-fx-border-width: 0 0 1 0; /* its make really one-pixel-border */
-fx-border-color: red;
}
None of the other answers worked for me. I finally gave it a negative padding as I noticed the divider forms a rectangle and it worked like a charm.
.separator *.line{
-fx-border-style: solid;
-fx-padding: 0 -50 0 0;
}
I didn't want to change all of my separators, just that one, so I needed it as a custom class (chose "blackSeparator" here). Additionally I found out that I don't need the * wildcard and the pixel-width needs to be 0.5px to get it 1 pixel width.
The solution:
.blackSeparator.separator .line {
-fx-border-width: 0.5px;
-fx-border-color: black;
}
Related
My Mathjax code looks fine on the computer but oversized on mobile: http://teach.sg/mathematics/additional-mathematics/trigonometric-functions/
Any way to resize this automatically for mobile?
Note: I am using safari on iPhone 6. Chrome gives me the same result.
I hope this simple solution will fit to you:
Just add overflow-x: scroll; to div's style that containing MathJax equation. It will make your MathJax equation scroll-able, and prevent going equation out of range.
In your example it is a div with
id="std-body-box-2864" style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff;".
Add overflow-x: scroll; at the end of style tag :
style="color:#000000; border-top-color: #56b5ff; border-left-color: #56b5ff; border-right-color: #56b5ff; border-bottom-color: #56b5ff; background-color: #ffffff; overflow-x: scroll;".
It will add a scroll at the bottom of the div. MathJax equation will stay in the "Special Angles" box.
Raw preview :
Actually there can be many solutions(including smart ones using jQuery), you can find appropriate one by googling "responsive tables in html". MathJax is using <span>, it's not actually the tables, but I hope that will help.
In this answer I found a better solution to this problem:
.MathJax_Display, .MJXc-display, .MathJax_SVG_Display {
overflow-x: auto;
overflow-y: hidden;
}
I'm currently developing a site which requires headings as such:
My initial idea was to do this with border-bottom, but how would I limit the width of the border so that it doesn't go all the way across? The border needs to stop when it gets to the text.
Is this possible?
h1 {
background-color: #fff;
line-height: 1;
margin: 0;
display: inline;
position:relative;
z-index: 1;
}
h1:after {
content: '';
display: block;
border-bottom: 2px solid;
position: relative;
z-index: 0;
margin-top: -7px;
}
The length of the border is decided by the size of the element it is bordering. You could create another <div> inline with the text with border-bottom: 1px; and the other borders set to 0. You could then change the margin or width of the <div> to alter the length of the line. Note that you'd have to set a width, because an empty <div> has a width of 0 by default, so won't display.
Another possible (but not recommended) way to do it would be to use a <hr> but these are not well supported in HTML 5, so I would choose the first method personally.
A solution I can come up with is to give the title the same background-color as the page's background, and then to either transform: scale() the title up so that it overflows with the border of its parent, either scale the parent down so that its border hides behind the title's background.
See here for an example:
http://jsfiddle.net/WjRqC/1/
Oh, also, scaling can be replaced by making the title position: relative and moving it downwards a few pixels (and giving it a bit more vertical padding if you don't want the text too close to the line). Actually this is probably a better idea than scaling, because it's not CSS3, so it's more compatible.
Lookie here:
http://jsfiddle.net/7affw/1/
What is the preferred / cleanest method to draw a 1px border between two Susy grid items, in the center of the gutter?
Susy creates a gutter by adding a margin-right to a grid item, so I can't simply add a border-right (like, for instance, you can do with Zen Grids, which creates gutters by applying half a gutter-width of padding on both sides).
I guess it can be done using the with-grid-settings() mixin to define an alternative grid without gutters, but that feels like a messy solution.
There isn't a great solution at the moment, but I hope to have one in the next major release. What you can do, is create your own math using the Susy functions (really the most powerful part of Susy). Something like this:
.left-column {
#include box-sizing(border-box);
float: left;
width: columns(2) + gutter()/2;
padding-right: gutter()/2;
margin-right: gutter()/2;
border-right: 1px solid;
}
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/
I am quite new to XHTML/CSS, but have now got my site laid out nicely. Just one loose end which I can't seem to get past (I've spent a fair bit of time on this & found related info, but nothing quite the same):
All I want to do is overlay a faint image on my background. I don't want to use the "opaque" filters, as they trigger the script security alert on my IE Explorer 8.
I am quite happy to use the opaque gif image I have created.
I can see that z-index is the way to go. However, my image area insists on locating further down the page rather than overlaying.
Here's what I think are the key extracts of the code where I am going wrong [I have snipped detail such as fonts]:
HTML:
body { position:relative; z-index:1;
margin: 0 20px 0 0;
padding: 0;
background: #FFFFFF url(images/ge01.jpg) repeat-y;[snip]}
<div id="transparency">
</div>
CSS:
#transparency {
url(images/transparency.jpg) no-repeat;
width:230px;
height: 1000px;
position: relative; top: 80px; left:0;
z-index:2;
}
Have you tried using position: absolute; on your transparency element?
position: relative means that you will position the transparent element in relation to other content.