I want to put a svg before a div element in Oxy, I tried it with css but I failed because I am still learning css.
I hope the image makes sense. I want to put the SVG where the arrow points to svg.
Thanks for your time already,
Best regards,
Mark
image for clarification
As promised here is what I used.
.pseudo--code:before {
position: absolute;
content: url("https://images-svg.svg");
width: 10em;
max-height: 100%;
left: 10px;
overflow-x: hidden;
overflow-y: hidden;
opacity; .1;
}
This is the basic structure to achieve what you need.
<body>
<div class='outter-container'>
<h2>Some headline</h2>
<div class='inner-container'>
<svg>SVG goes here</svg>
<div class='text-button-container'>
<p>Some text here</p>
<button>Click me</button>
</div>
</div>
</div>
</body>
To style it, you will need to apply CSS.
.outter-container {
display: flex;
justify-content: center;
flex-direction: column;
}
.inner-container {
display: flex;
align-items: center;
justify-content: flex-start;
border: 1px solid #000;
width: 500px;
height: 200px;
}
Related
Edit: In order to make it easier to work with:
Sandbox
I have been stuck for 3 days with this issue so I post here in hope someone can help me find a solution.
I am making the following table (not a <table>, made with divs) since I didn't find any library to get this kind of calendar, which displays every day on a year,its purpose is to show vacations taken by each employee (that are blurred on the left).
I'm trying to use the position:fixed and other solutions to keep the employees column fixed as well as the top yellow rows while I scroll over the grid, however, I'm unable to get the intended effect.
Note that this is a react Component, so for some reason if I use position fixed, it leaves the parent component to be fixed to the main window.
This is the Component on the parent: (I did it this way as I expect to call <VisorVacaciones> inside other components with different sizes)
<div style={{width:"inherit",height:"400px",maxHeight:"400px",marginTop:"15px"}}>
<VisorVacaciones empleados={empleados} years={"2022"} vacas={vacasSelectedEmpleado}/>
</div>
This is the render of the component:
<div className='visorVMainDiv'>
<div id="columna_der_calendar_datos" className='calendario_y_celdas'>
<div id="elemento_emp" className='visorV_nombres_emp visorV_grow3'>
Empleados
</div>
<div id="cabeceras" className='visorV_cabeceras_vertical'>
<div id="meses" className='visorV_cabeceras_horizontal'>
{Array(12).fill(null).map((el,i)=>{
var month_css_width= MonthWidth(i+1,years)+"rem";
return (
<div style={{outline:"1px solid black",minWidth:month_css_width,alignItems:'center',justifyContent:'center',display:'flex',boxSizing: "border-box",backgroundColor: '#f8af07'}}>
{moment("01/01/"+years).add(i,"months").format("MMMM")}
</div>)
})}
</div>
<div id="diassemana" className='visorV_cabeceras_horizontal'>
{Array(daysOfYear(years)).fill(null).map((el,i)=>{
return (
<div style={{outline:"1px solid black",minWidth: universalSize,alignItems:'center',justifyContent:'center',display:'flex', boxSizing: "border-box",backgroundColor: '#f8af07'}}>
{moment("01/01/"+years).add(i,"days").format("dd")}
</div>)
})}
</div>
<div id="dias" className='visorV_cabeceras_horizontal'>
{Array(daysOfYear(years)).fill(null).map((el,i)=>{
return (
<div style={{outline:"1px solid black",minWidth: universalSize,alignItems:'center',justifyContent:'center',display:'flex', boxSizing: "border-box",backgroundColor: '#f8af07'}}>
{moment("01/01/"+years).add(i,"days").format("D")}
</div>)
})}
</div>
</div>
</div>
<div id="data" className='visorV_cabeceras_vertical'>
{empleados?.map((emp)=>{
return (
<div className='visorV_empleado_y_casillas_horizontal'>
<div id="elemento_emp" className='visorV_nombres_emp'>
{String(emp.nombre+" "+emp.apellidos).length <= 25 ?
emp.nombre+" "+emp.apellidos
: String(emp.nombre+" "+emp.apellidos).substring(0,25)+"..."}
</div>
<div className='visorV_empleado_y_casillas_horizontal'>
{Array(daysOfYear(years)).fill(null).map((arr,index)=>{
return <C estado={vacas!==null && index===0 ? "cyan": "pink"}</C>
})}
</div>
</div>
)})}
</div>
</div>)
And CSS rules
.visorVMainDiv{
display:flex;
flex-direction: column;
align-items:flex-start;
justify-content:flex-start;
width: 100%;
height:100%;
border:2px solid #f8af07;
font-size: 0.8rem;
overflow-y: hidden;
overflow-x: scroll;
}
.Columna_empleados{
display: flex;
width: 200px;
height:100%;
flex-direction: column;
}
.calendario_y_celdas{
display: flex;
width: 100%;
height:100%;
flex-direction: row;
}
.visorV_vertical{
display: flex;
flex-direction: column;
}
.visorV_cabeceras_horizontal{
display: flex;
width: 100%;
min-height: 1rem;
}
.visorV_cabeceras_vertical{
display: flex;
width: 100%;
flex-direction: column;
}
.datos_scroll{
overflow-y: visible;
}
.visorV_grow3{
display: flex;
justify-content: center;
min-height: 3rem !important;
align-items: center;
}
.visorV_nombres_emp{
min-width: 200px;
height: 1rem;
min-height: 1rem;
z-index:1;
outline: 1px solid black;
position: sticky;
}
.visorV_empleado_y_casillas_horizontal{
display: flex;
width: 100%;
}
I have problem with change size while manipulating browser size. I need to keep one column on another so I use relative + absolute combination.
I'm wondering if there is an option with only CSS to make such element responsive.
<div class="clock">
<div id="apDiv3" class="opening">
<div class="clock">
<img id="apDiv2" class="clock" src="./assets/stoper-01.png" usemap="#image-map">
<img id="apDiv1" class="clockArrow" src="./assets/stoper-01-arrow.png">
<map name="image-map">
<area area settings>
...
</map>
</div>
</div>
</div>
div.clock {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
img.clock {
position: relative;
}
.clockArrow {
position: absolute;
}
You could try using the CSS calc() function like the given eg.
.top-img{
...
width: calc(var(--background-img-width) - var(--offset));
...
}
Here, add --background-ing-width to your :root and apply it in .background-img's width. Then you can add --offset in your :root and add to .top-img as shown and tweak these two variables to your liking.
I'm wondering if there is an option with only CSS to make such element responsive.
Here's a sample:
.wrapper{
height: 100vh;
margin: 0 30%;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
min-width: max-content;
}
.circle{
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fc1.staticflickr.com%2F1%2F694%2F23104548209_fed5c6d1cd_b.jpg&f=1&nofb=1);
height: 50vh;
width: 50vh;
border-radius: 50%;
background-size: 100% 100%;
display: flex;
align-items: center;
padding: 1.3vh;
}
.rec{
flex: 1;
height: 15vh;
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.cameraegg.org%2Fwp-content%2Fuploads%2F2012%2F09%2FSony-DSC-RX1-Sample-Image.jpg&f=1&nofb=1);
background-size: 100% 100%;
}
<div class="wrapper">
<div class="circle">
<div class="rec"></div>
</div>
</div>
You can make use of viewport height and width to make the elements responsive. More on units here.
I would like in CSS force break-line on space and not break words like "Plan[break-line]individual"
I'm using Flexbox to make an easy responsive code.
HTML
<section class="card-container">
<div class="card card-inline text-center">
<div class="card-block">
<h4 class="card-title">Plan individual</h4>
<p class="card-text">€10.00 / year</p>
<button click="#'">Sign in</button>
</div>
</div>
...
</section>
style.css
.card-container{
display: flex;
height: inherit;
width: inherit;
}
.card{
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
width: 170px;
}
.card-inline{
display: inline-flex;
margin: .75rem;
}
.card-block {
flex: 1 1 auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
h4.card-title{
margin: .5rem !important;
font-size: 100% !important;
}
.text-center{
text-align: center !important;
}
I tried white-space, word-wrap, flex-wrap... without success.
Does anyone have an idea how to prevent the words from being hyphenated?
The code you included doesn't give the result you show in your image, so you must have a CSS rule somewhere else that's causing it.
However, you should be able to override it with the following:
h4 {
hyphens: none;
}
For a simpler solution, just at a <br/> tag to your html in between the words. You can add a class if you want to target it with media queries to turn the break on and off based on the screen width.
Here is my attempt at what I'm trying to solve, but all answers are we:
https://jsfiddle.net/L2qukchc/
it's just doing this:
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.box-front {
display: flex;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 5px rgba(57,70,78,1.2);
}
.box-back {
display: flex;
z-index: -1;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 5px rgba(57,70,78,1.2);
margin-top: -10px;
}
But I'm using negative margin (boo!).
I am using flexbox, but I want to have multiple layers [as would be attained through position:absolute and z-index]. The reason I am having trouble with absolute is that the layers are relative to each other, so writing a lot of breakpoints to solve this is not ideal.
The general question, "What are all the options with css to overlap divs", refers to whether or not I can position elements relatively but preventing my flexbox divs from making space for the newer elements I want to add [a la, layers]. Thanks!
Edit: A suggestion given to use relative layout works well:
https://jsfiddle.net/vdv09549/
wondering if there were others?
As the mentioned negative margin is not suitable for this (see sample 3), I can only think of 2, position: relative in combo with top/left and transform: translate, where I would say the latter is probably the recommended one in most cases.
.parent {
display: flex;
height: 100px;
}
.parent ~ .parent {
margin-top: 30px;
}
.child {
flex: 1;
border: 1px dashed #000;
}
.parent.nr1 .child.nr2 {
position: relative;
left: -20px;
top: 20px;
}
.parent.nr2 .child.nr2 {
transform: translate(-20px,20px);
}
.parent.nr3 .child.nr2 {
margin-left: -20px;
margin-top: 20px;
}
<div class="parent nr1">
<div class="child">Sample 1
</div>
<div class="child nr2">
</div>
</div>
<div class="parent nr2">
<div class="child">Sample 2
</div>
<div class="child nr2">
</div>
</div>
<div class="parent nr3">
<div class="child">Sample 3
</div>
<div class="child nr2">
</div>
</div>
My question is simple. Is it possible to have display: table on a flex item?
When I set it on an item, the layout doesn't work as expected - the second flex item doesn't grab the available vertical/horizontal space.
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
flex: 1;
display: table;
background-color: red;
}
.content > span {
display: table-cell;
vertical-align: middle;
}
<div class="parent">
<div class="header">
<span>Header</span>
</div>
<div class="content">
<span>Main content</span>
</div>
</div>
Of course you can, but not necessarily a good solution though.
May I suggest you use flex all the way.
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
flex: 1;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
<div class="parent">
<div class="header">
<span>Header</span>
</div>
<div class="content">
<span>Main content</span>
</div>
</div>
Side note:
A table element is special and doesn't behave as normal block or inline elements. To make it work with display: table, you need to set a height to your parent as well as to the table, like in this sample, http://jsfiddle.net/LGSon/0bzewkf4.
Still, as you can see, the table height is 200px because flex has some flaws when it comes to limit height's, so it is not display:table that breaks your flex, it is flex who is somewhat broken.
Here is another answer of mine, showing yet another workaround where flex doesn't behave: Normalizing Flexbox overflow in IE11
It's a big question why you use table in flexbox...
But you can set width to your table and inherit min-height from parent
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
display: table;
flex:1;
background-color: red;
width:100%;
min-height:inherit;
}
.content > span {
display: table-cell;
vertical-align: middle;
height: 100%;
}
<div class="parent">
<div class="header">
<span>Header</span>
</div>
<div class="content">
<span>Main content</span>
</div>
</div>
You should not need to use a table layout at all here. Just add align-self: center; to .content- > span {.... And make the span element become a flex item as well, by adding display:flex to the .content element. The reason why the table layout is not working for you is because vertcal-align has no effect on the alignment of flex items. So mixing a flex-layout with a table-layout by changing the display property of a flex-item seems not to be a good idea, because you are loosing the flexibility of the flex-layout.
Properties not affecting flexible boxes
Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:
column-* properties of the multiple column module have no effect on a flex item.
float and clear have no effect on a flex item. Using float causes the display property of the element to compute to block.
vertical-align has no effect on the alignment of flex items.
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
flex: 1;
display: flex;
background-color: red;
}
.content > span {
flex: 1;
align-self: center;
}
<div class="parent">
<div class="header">
<span>Header</span>
</div>
<div class="content">
<span>Main content</span>
</div>
</div>
Tables are row or horizontally oriented so wouldn't you get weird results if placed within a flex-column? I changed everything to a good old block, they stack very well in a column flow--vertical harmony.
.content is dead center by using: position: relative; top: 50%; and translateY(360%); for vertical and text-align: center; for horizontal. Oh and of course turning that span into a useful block.
Changed the following:
.content {
flex: 1;
background-color: red;
}
.content > span {
display: block;
position: relative;
top: 50%;
transform: translateY(360%);
text-align: center;
}
I changed display: table to table-row is this what you wanted?
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
flex: 1;
background-color: red;
}
.content > span {
display: block;
position: relative;
top: 50%;
transform: translateY(360%);
text-align: center;
}
<div class="parent">
<div class="header">
<span>Header</span>
</div>
<div class="content">
<span>Main content</span>
</div>
</div>