I'm new to stackoverflow.com and this is my first post so:
I want to have a h1-text with underline. This underline will be an image and it should have a fixed width of 420px. The text in h1 will often be wider than the 420px, but sometimes shorter. Now I know that these are the solutions to get the underline as an image, but how do I set the fixed width for the underline only?
h1 {
background-image:url('images/hrBg.jpg');
background-position: 0px bottom;
background-repeat: repeat-x;
}
Create the background image with the width of 420px.
Then use the following css
h1 {
background:url('https://images.squarespace-cdn.com/content/v1/5834a5fd9de4bb511a531745/1572560269010-YEGGAHEJ1O3AG5OAMO7M/ke17ZwdGBToddI8pDm48kEnLsHrnzeww6Ind1smsg7N7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QPOohDIaIeljMHgDF5CVlOqpeNLcJ80NK65_fV7S1UZMvWVOiG2zXPfa_FplZumXplNQ97KbZI2EjeHIoBACLnr1xKjsq_-rO8kOgOtwYvw/Burning-Up-BG.jpg?format=2500w') no-repeat left bottom;
min-width:420px;
}
<h1>Text here</h1>
This will ensure that the background is shown only once to with of 420px. I have added the min-width property in case the content of h1 is smaller than 420px. The no-repeat property ensures that the background is shown only once as we have set the length via the actual image.
Related
Example
import styled from 'styled-components';
import { ReactComponent as SvgLogoUnstyled } from 'src/assets/svg/logo.svg';
const SvgLogo = styled(SvgLogoUnstyled)`
height: 40px;
width: 40px;
#media (max-width:1427px){
width: 17px;
height: 17px;
}
`;
export default SvgLogo;
When changing screen size, the svg viewBox remains at 40px, but gets cropped at 17px.
In html css this does not happen. Both the viewBox and dimensions get updated.
Can anyone advise a fix?
Note: Using transform scale - does not resolve this problem, because it keeps the width at 40px which adds unnecessary margin, when I do actually need the logo to be at 17px width.
transform: scale(0.42); /*17 / .4*/
I have managed to hack it a little but its ugly
#media (max-width:1427px){
transform: scale(0.42); /* transform: scale(0.42); /*17 / .4*/
margin: 0 -12px 0 4px; /* added minus margin to reset ( (40 - 17) / 2)*/
box-sizing: content-box; /* enable expansion without cropping if additional margin top/bottom*/
}
Ok it turned out to be simple.
I was using css to set the width and height and change it on mediaquery, but the actual svg itself had a width,height on it. Simply removing the width, height from the svg, but keeping the viewBox, ensured the svg retained its aspect ratio.
Answer here: https://css-tricks.com/scale-svg/
Point going forward, when creating svgs, remove the width, height attributes from them before inserting into html and always use css to set the dimensions.
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/
I have the following fiddle for people to see http://jsfiddle.net/defaye/DhaHP/4/
The result on full screen: http://jsfiddle.net/defaye/DhaHP/4/embedded/result/
The problem I'm having is that when going past a certain width of resizing the window, the left column departs from the group. I need them to remain touching, with the centre column having a min-width 400 to max-width 800px, the sides width: 200px. The header should be 100% however.
Anyone know how to solve this problem? It is driving me insane.
Here is another example, compatible with IE6+: http://jsfiddle.net/DhaHP/12/
Result: http://jsfiddle.net/DhaHP/12/embedded/result
Abstract of the changes:
Changed #left and #right to be above the #center (#right before #left);
min-width and max-width on #container to 800px and 1200px respectively;
No float on #center;
margin-left and margin-right on #center equals the width of each side column;
float-left on #left and float-right on #right;
The only obs on this for IE6 is the min-width and max-width that doesn't work without a little hack or the use of IE7.js. On IE7, it works as should be.
Here's a working fiddle: http://jsfiddle.net/PhilippeVay/DhaHP/8/ (edit: now works with Chromium)
Modifications made:
HTML: #left before #center column
CSS: no relative positioning at all
display: table; on parent and table-cell on the 3 columns. This will be visually (and only visually) a table. Well, a table layout and not a table structure.
200px width on #left and #right
table-layout: fixed; on parent to switch the table algorithm to the one that respect dimensions as told by the author and not those guessed by dimensions of content of cells
Constrained widths for the parent min-width: 800px; (400+200+200) and on the grand-parent max-width: 1200px; (800+200+200) (edit: max-height on #container only worked on Fx, not Chrome). To my surprise, it works as is.
Compatibility: IE8+
You can play with inline-block with IE6/7 if needed (well, display: inline; zoom: 1; the IE6/7 equivalent of inline-block for outdated browsers)
I have a node in JavaFx-application that has an ImageView, which has the size 200,200.
In CSS-file for that node I define an inset for background and border:
.my-item {
-fx-background-insets: -15;
-fx-border-color: #ccc;
-fx-border-style: solid;
-fx-border-insets: -15;
}
This leads to an ImageView with a border that has 15px of space. Alright. Later in code I want to get the bounds for this item including this 15px for the border.
But the methods getBoundsInParent().getWidth() or getBoundsInLocal().getWidth() return 200px. So how can I get the size that I see on the screen?
ImageView doesn't have an -fx-border-insets and -fx-background-insets properties. Thats why its width doesn't change. If you try the same with button method getBoundsInParent().getWidth() will return width with borders.
I'm working on a resizable page with a sidemenu to the right, and it almost works as supposed on this simple example:
http://pastehtml.com/view/1do8cy9.html
The problem though is that position auto and min-width dont react as expected. If you drag the browserwindow smaller than 500px (as the min-width is set to), the red sidemenu continues over the green content..
How do I make the sidebar stop when it reaches the min-width, fx 500px?
The absolute positioned div should be inside the min width div which should have position relative
Edit, better explanation:
For the sidebar: add top: 0 to the red sidebar and place it inside the min-width container.
For the container: replace the margin-right property with padding-right and add position:relative
I have a fix !
It's weird though:
body{
position:absolute;
top:0;
left:0;
bottom:0;
min-width:1300px;
width:100%;
overflow:auto;
padding:0;
margin:0;
}