I am trying to clip this strap into the parent rectangle.
Image-
HTML CODE:
<div class="pricing_plan ultimate">
<div class="strap">
<P>RECOMMENDED</P>
</div>
<div class="p_name">
<p>Ultimate</p>
</div>
<div class="p_plan">
<p><strike>₹ 2388</strike></p>
<h3>₹ 1,099</h3>
<p>Save 53%</p>
</div>
<div class="p_duration">
<p>12 Months</p>
<p>356 Days</p>
</div>
<a href="">
<button class="pricing_button ultimate">BUY</button>
</a>
</div>
CSS
.s2 .pricing_plans .ultimate .strap{
position: relative;
top: -13px;
right: 65px;
transform: rotate(-35deg);
clip-path: inset(0px 50px 50px 0px);
}
.s2 .pricing_plans .ultimate .strap p{
background-color: white;
font-size: 10px;
color: #3499E0;
padding-left: 20px;
padding-right: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
How can I clip it into the rectangle so that it doesn't flow outside.
I have tried overflow: hidden it doesn't seem to work.
What is the best method to it, so that it is best for a responsive design?
You have to use position:relative with the parent bloc, and position:absolute with the child bloc :
.bloc{
background: red;
position: relative;
overflow: hidden;
width: 200px;
height: 300px;
}
.bloc .label{
position: absolute;
top: 15px;
left: -20px;
width: 120px;
height: 20px;
background: black;
color: #fff;
text-align: center;
transform: rotate(-35deg);
}
<div class="bloc">
<div class="label">
Label here
</div>
</div>
Related
I am trying to arrange my <div>s one below the other but they still end up on the same line, I tried using row and col approach but still it's not working, Answers on SO also didn't work.
Currently my code is like this
.dragAndDropBox{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover{
position: absolute;
width: 80%;
height: 100%;
border: 1px solid #fff;
background-color: gray;
border-radius: 5px;
}
.dragAndDropBox .dragAndDropUpload{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar{
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText{
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
font-family: Arial
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input
accept="image/*"
class="dragAndDropUpload"
type="file"
/>
<div class="dragAndDropText">Drag / Browse</div>
<div
bsstyle="success"
class="dragAndDropProgressBar mt-1 progress">
<div
role="progressbar"
class="progress-bar progress-bar-striped"
style="width: 0%;"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I am using Bootstrap 4.3.1
The <div>s have position: absolute which puts them on top of each other.
I would suggest adding position: relative to .dragAndDropBox so all the absolutely positioned elements have a relative element to refer to.
Here's the fiddle: https://jsfiddle.net/yjdkne3b/
.dragAndDropBox {
position: relative;
width: 80%;
height: 200px;
border: 1px solid #fff;
background-color: gainsboro;
border-radius: 5px;
}
.dragAndDropBox:hover {
background-color: gray;
}
.dragAndDropBox .dragAndDropUpload {
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
.dragAndDropBox .dragAndDropProgressBar {
position: absolute;
bottom: 0;
margin: 0;
padding: 0;
width: 100%;
max-height: 10%;
outline: none;
}
.dragAndDropBox .dragAndDropText {
padding-top: 2%;
text-align: center;
line-height: 1rem;
color: #3b3b3b;
}
<div class="uploadBox w-100">
<div class="uploadDropBox">
<div class="dragAndDropBox">
<input accept="image/*" class="dragAndDropUpload" type="file" />
<div class="dragAndDropText">Drag / Browse</div>
<div bsstyle="success" class="dragAndDropProgressBar mt-1 progress">
<div role="progressbar" class="progress-bar progress-bar-striped" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" />
</div>
</div>
</div>
<div class="uploadedBox w-100">
<div>Filename Delete View</div>
</div>
</div>
I hope this is the solution you are looking for.
Also, you don't have to repeat the properties from the element on hover. If only the background changes on hover it's ok to change just that and the other properties will remain the same. :)
Use <br> as a line break (end-of-line).
I think it is because of the "position: absolute" in your CSS. This makes block elements only use as much space as they need.
You can read more about this here: Does adding a position: absolute to a block element make it behave like an inline?
I have a little css problem, and i dont know of its completely possible to do this in css, but i accept any other solution aswell.
Here i have an example of what i am trying to accomplish.
I am trying to add the red circles in the top right of the divisions.
My code sofar:
HTML
<div class="w3-container customheight">
<div class="center buttons">
<a class="todo roundbutton">
<div class="redicon"></div>
<div class="redicontext">
<span class="todotext">1</span>
</div>
</a>
<a class="decision roundbutton">
<div class="redicontext">
<span class="decisiontext">2</span>
</div>
</a>
<a class="remark roundbutton">
<div class="redicontext"></div>
<span class="remarktext">3</span>
</div>
</a>
</div>
</div>
CSS
.center{
margin: 0 auto;
}
.roundbutton{
width: calc(33.333% - 20px);
height: 100%;
margin: 10px;
margin-top: 20px;
margin-bottom: 20px;
display:block;
background-size: contain;
float:left;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.todo{
background-image: url("../img/todo.jpg");
}
.decision{
background-image: url("../img/decision.jpg");
}
.remark{
background-image: url("../img/remark.jpg");
}
.redicon{
position: absolute;
top: 10px;
left: 3%;
background: red;
padding:10px;
box-sizing: border-box;
border-radius: 100%;
}
.redicontext{
position: absolute;
top: 10px;
right: 3%;
padding:10px;
box-sizing: border-box;
border-radius: 100%;
}
I tried multiple things already:
- creating another div behind the first one to use padding on that div without creating an ovale
- absolute values for the red circles, this can be used with a certain height and width, but it has to work responsive.
I am not that good in css, but i know the basics.
Any help on this is really nice!
Greetings!
Use a relative position and position the circle.
.redicon{
position: absolute;
top: -10px;
right: -10px;
background: red;
padding:10px;
box-sizing: border-box;
border-radius: 100%;
}
Snippet
.center{
margin: 0 auto;
}
.roundbutton{
width: calc(33.333% - 20px);
height: 130px;
margin: 10px;
margin-top: 20px;
margin-bottom: 20px;
display:block;
background-size: contain;
float:left;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.todo{
background-image: url("//placehold.it/150");
background-color: #fff;
border-radius: 100%;
}
.decision{
background-image: url("//placehold.it/150");
background-color: #fff;
border-radius: 100%;
}
.remark{
background-image: url("//placehold.it/150");
background-color: #fff;
border-radius: 100%;
}
.redicon{
position: absolute;
top: -10px;
right: -10px;
background: red;
padding:10px;
box-sizing: border-box;
border-radius: 100%;
}
.redicontext{
position: absolute;
top: 10px;
right: 3%;
padding:10px;
box-sizing: border-box;
border-radius: 100%;
}
<div class="w3-container customheight" style="width: 450px;">
<div class="center buttons">
<a class="todo roundbutton">
<div class="redicon"></div>
<div class="redicontext">
<span class="todotext">1</span>
</div>
</a>
<a class="decision roundbutton">
<div class="redicontext">
<span class="decisiontext">2</span>
</div>
</a>
<a class="remark roundbutton">
<div class="redicontext">
<span class="remarktext">3</span>
</div>
</a>
</div>
</div>
Preview
I'm trying to do is have two boxes, side-by-side, that stay at 50% of the screen width each so that they stay at 50% regardless of the screen width.
However, I'm also trying to put boxes with text inside each of those boxes, but I want the inside boxes completely centered and to remain at a fixed width so that the text doesn't shift around as the screen width changes.
Anyone have any ideas? Seems like a simple thing, but I'm just getting started in CSS, so bear with me.
You can use CSS this way:
.half-screen{
box-sizing: border-box;
display: inline-block;
width: 50%
}
And then you do your logic inside those box
Note that you can use vertical-align: top; if you want them to be side by side and have the same starting point
#sides {
padding-top: 40px;
padding-bottom: 40px;
background-color: white;
}
#leftside {
width: 50%;
background-color: grey;
padding: 20px;
margin: 0px;
position: relative;
}
#rightside {
width: 50%;
display: inline-table;
background-color: #018DCA;
float: left;
padding: 20px;
margin-left: 50%;
position: relative;
}
.
.
.
<div id="sides">
<div id="leftside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
<div id="rightside">
<h1>text</h1>
<p>
<h2>text</h2>
<br>
</div>
</div>
A fixed size in the center of two side-by-side boxes:
.container {
height: 200px;
width: 300px;
background-color: lightgray;
font-size: 0;
}
.box {
display: inline-block;
width: 50%;
height: 100%;
background-color: dodgerblue;
position: relative;
border: solid 1px #222;
box-sizing: border-box;
}
.subbox {
height: 50%;
width: 50%;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: absolute;
background-color: indianred;
}
<div class="container">
<div class="box box1">
<div class="centered subbox">
</div>
</div>
<div class="box box2">
<div class="centered subbox">
</div>
</div>
</div>
i'm new to HTML & CSS and was hoping someone could help me out. I'm having a problem with this page where content is not fixed in place and when I zoom in and out the containers move freely. Any idea how to fix this? Not sure what layout I should be using to prevent this from happening. Thanks
<body>
<img class="img" src="http://i824.photobucket.com/albums/zz162/nathanial292/banner_zps45abd080.png">
<div id="header">
<h3 id="header h3">
Home Servers Shop Forum About Us Contact
</h3>
</div>
<div class="left">
<h1>Server Updates</h1>
<h2><span>Hello readers</span></h2>
</div>
<div class="right">
<a id="nabblelink" href="http://hydronetworks-forums.58422.x6.nabble.com/">HydroNetworks Forums</a>
<script src="http://hydronetworks-forums.58422.x6.nabble.com/embed/f1"></script>
</div>
<div id="footer">All Rights Reserved 2013 HydroNetwork</div>
</body>
#header{
z-index: 1;
border-radius: 5px;
height: 50px;
width: 600px;
background-color: #585858;
border: solid #383838 6px;
position: absolute;
margin-top: 25px;
margin-left:640px;
min-width: 480px;
}
.right{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 400px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-right: 50px;
font-family: Ebrima;
overflow:auto
}
.left{
z-index: 1;
border-radius: 5px;
height: 600px;
border: solid #383838 6px;
width: 600px;
background-color: #585858;
position: relative;
margin-top: 120px;
margin-left:150px;
margin-right: 750px;
text-align: center;
font-family: Ebrima;
}
When you zoom in the content moves to the right and bottom, because you used pixel values.
At any rate you should remove
<body background= "http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png">
from your HTML-Code.
And add this to your CSS-Code:
body{
background: url(http://i824.photobucket.com/albums/zz162/nathanial292/background_zps477e8756.png);
background-position: top center;
}
If you don't want the divs to "move" when zooming, you should use percentages like width: 50%.
I have some very basic code and it works except everything aligns to the top...ideally the bars would align to the bottom. I suppose I could use fixed positioning as the dimensions are squared at 50px by 50px but I'd prefer something a little less "fixed".
<div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
<div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
</div>
I don't want to use a library or JS add on. Keeping this light weight is mission critical.
Also I'd prefer the bars were vertical. Any CSS guru care to shed the bit of light I seem to be missing? I've googled and most examples are far to complicated/sophisticated,
First of all, separate your CSS from your HTML. You're repeating too much code when you could just use a bar class for your inner divs.
bottom: 0 doesn't change anything for relatively positioned div.
If you wish to use relative positioning, get rid of float and bottom and use display: inline-block and vertical-align: baseline;. Also, in this case, you need to get rid of any space in the HTML between the inner divs (newline).
Like this (you can see the demo at http://dabblet.com/gist/2779082 ):
HTML
<div class="graph">
<div style="height: 22px;" class="bar"></div><!--
--><div style="height: 11px;" class="bar"></div><!--
--><div style="height: 6px;" class="bar"></div><!--
--><div style="height: 49px;" class="bar"></div><!--
--><div style="height: 28px;" class="bar"></div>
</div>
CSS
.graph {
width: 50px;
height: 50px;
border: 1px solid #aeaeae;
background-color: #eaeaea;
}
.bar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
I would personally avoid setting xpos explicitly on every element, makes things less maintainable. In some scenarious percentage-basedvalue dumps would be more appropriate too. With that in mind, an imo more scalable and semanticaly correct approach has been mocked up in a fiddle. HTML:
<ul class="graph">
<li><span style="height:45%"></span></li>
<li><span style="height:12%"></span></li>
<!--as many more items as you want !-->
</ul>
and CSS:
.graph {
border: 1px solid #aeaeae; background-color: #eaeaea;/*"canvas" styling*/
float:left; /*should be clearfix'd instead, but this is OK for a demo*/
}
.graph li {
width:8px; height:50px; /*set a bar width and a full height*/
float:left; /*to have bars "left-aligned"*/
position:relative; /*needed for the actual bar fill element*/
margin:2px;
}
.graph li+li {
margin-left:0; /*avoid margin double-up between bars as they don't collapse*/
}
.graph span {
position:absolute;right:0;bottom:0;left:0; /*"bottom-align" the bars,
widths will be set inline*/
background-color: #aeaeae;
}
This also gives you potential to get quite fancy - bars could have content with a negative text indent for semantic value or <span> elements could be abandoned altogether in favor of pseudo-elements.
Kolink's answer is correct. Each bar div's width is 8px, plus margin-left and margin-right, 8+1+1=10px. So I suggest, set the left value to 0px, 10px, 20px ...
<div class="wrapper">
<div style=" left:0px;height:22px;"></div>
<div style="left:10px;height:11px;"></div>
<div style="left:20px;height:6px;"></div>
<div style="left:30px;height:49px;"></div>
<div style="left:40px;height:28px;"></div>
</div>
The css should look like this(I grouped some general css rules):
.wrapper{
border: 1px solid #aeaeae;
background-color: #eaeaea;
width: 50px;
height: 50px;
position : relative;
}
.wrapper > div{
bottom: 0px;
width: 8px;
position : absolute;
background-color: #aeaeae;
margin: 1px;
display : inline-block;
}
You can check this link: http://jsfiddle.net/zhujy_8833/AFbt4/ to see the result of the above code.
If you give the parent position: relative, then you can use position: absolute for child div to place them in precise coordinates by setting left, top, right, bottom, width, height you can precisely control the placement of the bars in your bar chart.
.graph {
position: relative;
width: 54px;
height: 54px;
border: 1px solid blue;
background-color: lightgrey;
}
.bar {
position: absolute;
border: 1px solid blue;
background-color: yellow;
}
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="bottom: 0; left: 0; width: 8px; height: 22px"></div>
<div class="bar" style="bottom: 0; left: 10px; width: 8px; height: 11px"></div>
<div class="bar" style="bottom: 0; left: 20px; width: 8px; height: 6px"></div>
<div class="bar" style="bottom: 0; left: 30px; width: 8px; height: 49px"></div>
<div class="bar" style="bottom: 0; left: 40px; width: 8px; height: 28px"></div>
</div>
</div>
<p></p>
<div class="graph">
<div style="position:absolute; left: 1px; top: 1px; right: 1px; bottom: 1px">
<div class="bar" style="left: 0; top: 0; height: 8px; width: 22px"></div>
<div class="bar" style="left: 0; top: 10px; height: 8px; width: 11px"></div>
<div class="bar" style="left: 0; top: 20px; height: 8px; width: 6px"></div>
<div class="bar" style="left: 0; top: 30px; height: 8px; width: 49px"></div>
<div class="bar" style="left: 0; top: 40px; height: 8px; width: 28px"></div>
</div>
</div>
Use position: absolute, and instead of float:left; use left: 0px;, 8px, 16px and so on.
Also add position: relative to the container.