Okay, hi, I feel like this is a very silly question, and I've found a lot of questions like it, but none of the answers seemed to work for me.
My issue is that have one div (taskbar) and inside of it another div (taskbar-bar) and I want taskbar-bar to stay within taskbar. I tried putting position on absolute and relative and it didn't seem to work at all, it's always underneath the taskbar div. I could push it up with top, but I don't feel like that's the way to go right now. I don't know, though, I'm honestly very new to CSS and HTML and still am learning.
Here's a jsfiddle of my code: https://jsfiddle.net/5zghzczs/3/
.taskbar {
width: 100%;
height: 40px;
box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
background-color: #C2C5CA;
position: absolute;
left: 0;
bottom: 0;
}
#taskbar-start {
margin-top: 4px;
margin-bottom: 2px;
margin-left: 2px;
width: 90px;
height: 33px;
background-color: #C2C5CA;
cursor: pointer;
}
.taskbar-start-inactive {
box-shadow: -1px -1px 0px 0px #000 inset, 1px 1px 0px 0px #FFF inset, -2px -2px 0px 0px #868A8E inset;
}
.taskbar-start-active {
box-shadow: -1px -1px 0px 0px #FFF inset, 1px 1px 0px 0px #000 inset, 2px 2px 0px 0px #868A8E inset;
}
.taskbar-start-frame-active {
margin-top: 2px;
margin-left: 2px;
width: 84px;
height: 27px;
border-style: dotted;
border-width: 1px;
position: absolute;
}
.taskbar-start-logo {
margin-top: 6px;
margin-left: 3px;
width: auto;
height: 20px;
-webkit-user-select: none;
}
.taskbar-start-text {
margin-top: 10px;
margin-left: 5px;
display: inline;
font-size: 12px;
letter-spacing: -2px;
-webkit-user-select: none;
font-family: "Press Start 2P";
position: absolute;
}
.taskbar-bar {
height: 35px;
width: 2px;
background: green;
margin-left: 100px;
}
<div class="taskbar">
<div id="taskbar-start" class="taskbar-start-inactive">
<div id="taskbar-start-frame">
<img class="taskbar-start-logo" src="img/logo.png" />
<div class="taskbar-start-text">Start</div>
</div>
</div>
<div class="taskbar-bar"></div>
Your problem is that you are using margin-left, which is trying to give a margin in between one div and the other. Here is a new JSFiddle where I set the position to absolute, changed the margin-left to left, and added top: 0px; to set it to be at the top (overlaying the other div).
.taskbar-bar {
position: absolute;
top: 4px;
left: 100px;
height: 35px;
width: 2px;
background: green;
}
I think the best way to do this is to make the parent a flexbox container.
This will position all children in a row.
display: flex;
See https://jsfiddle.net/5zghzczs/7/
Read more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Change the "display" of taskbar-start and taskbar-bar to "inline-block"
.taskbar-start, .taskbar-start {
display: inline-block;
}
fit-content worked for me like a charm when dynamic text was forcing my modal wider.
max-width: fit-content;
More on fit-content https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
Related
Currently, I am playing with HTML and CSS and I wanted to make a icon from this image
the image is somewhat like that. I tried adding different shapes of ovals and circles inside the bigger circle but it did not work. For the shaded part, I used a box-shadow in styling it. There are already too many divs in my sample icon. I just want to have it simple and readable.
Here is my HTML structure:
<link rel="stylesheet" href="style.css">
<div class="cont">
<div class="icon2">
<div class="inner-circle"></div>
</div>
</div>
and here is my CSS:
.cont {
width: 190px;
height: 190px;
padding: 20px;
}
.icon2 {
position: relative;
border: 2px solid #353332;
width: 187px;
height: 184px;
border-radius: 50%;
background-color: #fff;
box-shadow: inset 20px 35px #1CAEE3;
transform: rotate(177deg);
}
.inner-circle {
border: 7px solid #353332;
width: 120px;
height: 183px;
background-color: #fff;
border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
transform: rotate(240deg);
display: block;
margin: 6px 0px 4px 35px;
border-top: 0;
border-bottom: 0;
border-left: 0;
}
Can you explain me this and how can I come up with a solution to my problem? I'm stuck for hours and I just wanted to try it with pure HTML and CSS and not using photoshop.
You can easily do this with one element and radial-gradient. Simply adjust the percentage used inside the gradient to control the shape:
.box {
width:150px;
height:150px;
border-radius:50%;
border:4px solid;
background:
radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px));
}
<div class="box"></div>
You can also use box-shadow ;)
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.
demo aside your image:
div {
border: solid 6px;
display: inline-flex;
height: 200px;
width: 200px;
border-radius: 50%;
box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px;
}
code {
font-size: 30px;
color: green;
margin: auto;
font-weight: bold;
}
div,
img {
vertical-align: middle;
}
<img src="https://i.stack.imgur.com/HRpQY.png">
<div><code>box-shadow</code></div>
another example :
div {
float:left;
height: 180px;
width: 180px;
margin: 1em;
box-sizing: border-box;
padding: 25px;
background: #F4E5D9;
box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white;
border-radius:50%;
display:flex;
flex-direction:column;
justify-content:center;text-align:center;
}
div + div {border-radius:4em /50%;
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
<div>
<p>inset shadow </p>
<p>border-radius </p>
<p>decreased shadow </p>
</div>
you may also draw citrus slices https://codepen.io/gcyrillus/pen/wutEK .
but SVG would be at best here ;)
You could make use of a pseudo element and have an overflow:hidden to hide the rest of the pseudo element's parts that fall outside of the div's 'outer circle'
div {
height: 200px;
width: 200px;
overflow: hidden;
border: 5px solid black;
background:orange;
border-radius: 50%;
position: relative;
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 200%;
border: inherit;
border-radius: 50%;
background: white;
top: -20%;
left: -100%;
}
<div></div>
This question already has answers here:
CSS3 Box shadow to half of the div
(2 answers)
Closed 6 years ago.
I want to apply the box shadow to the upper half (upper 50%) of the div. I have tried everything but failed.
div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
box-shadow: 0px 0px 5px 5px;
}
Like mentioned: I want to add the box shadow to just the upper half of the div.
<div>Some text.</div>
You can use pseudo-element to add box-shadow and make that pseudo-element 50% of height of parent div. Also you need to set z-index: -1 so that pseudo-element appears under div.
div {
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
position: relative;
}
div:after {
content: '';
z-index: -1;
position: absolute;
left: 0;
height: 50%;
width: 100%;
box-shadow: 0px 0px 5px 5px;
top: 0;
}
<div>Some text.</div>
div{
width: 100px;
height: 100px;
background-color: gray;
margin: auto;
font-size: 30px;
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
}
<div>Box</div>
Try this.
border: none;
border-style: outset;
border-width: 5px 5px 0 0;
border-top-left-radius: 5px;
border-top-color: #6f6f6f;
border-bottom-right-radius: 5px;
border-right-color: #0e0e0e;
box-shadow: inset -2px -14px 47px 1px rgba(56,12,12,0.3);
Hello i have a problem with my styling have two divs witch height is auto for both but the thing is when the first div (.filter) height is changed the second div (.posts) goes down as much as height was changed (.filter height +50 , .post down +50px):
my css :
.fp {
position: relative;
width: 1050px;
height: auto;
background-color: red;
left: 170px;
}
.filter {
background-color: white;
position: relative;
width: 250px;
min-height: 300px;
height: auto;
top: 20px;
border-radius: 4px;
border: 1px solid #1a171a;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
.posts {
background-color: white;
position: relative;
width: 750px;
height: auto;
float: right;
margin-top: -280px;
border-radius: 4px;
border: 1px solid #1a171a;
-webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.6);
}
html :
<div class="fp">
<div class="filter">
</div>
<div class="posts">
</div>
</div>
Always prefer display: inline-block instead float. Floating breaks the normal flow of elements. Also, negative margin isn't a good practice. The declarations position: relative or position: absolute should be used only on specific cases, not to align all blocks.
https://jsfiddle.net/alexndreazevedo/vg9bajrL/
Add float: left to .filter, erase the negative margin-top from .posts and add overflow: hidden to .fp to have the container really covering both elements.
After all the comments, I've set up a complete solution for you here: http://codepen.io/anon/pen/ZWNXEN
It adds margins where necessary or desireable, defines both elements as float (left/right) and lets the container cover the child elements (overflow: hidden). Apart from that I removed position: relative, which is of no use in this context.
I want to apply a border radius to a box-shadow but not the div itself, so the end result will be a rounded box shadow on the left side with 90 degree angle div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
https://jsfiddle.net/alair016/vdcohttk/
The problem with this CSS is that the border-radius is applied to the box-shadow as well as the div on the left side.
The box shadow is not an element. You can't add border-radius to an effect.
Try a pseudo-element instead:
.div-to-style {
border-radius: 0 8px 8px 0;
background-color: red;
width: 200px;
height: 50px;
margin-left: 40px;
position: relative;
}
.div-to-style::before {
content: '';
position: absolute;
left: -20px;
width: 20px;
height: 100%;
background: blue;
z-index: -1;
border-radius: 8px 0 0 8px;
}
<div class="div-to-style">
</div>
Bonus Option: No pseudo-element - Gradient background
.div-to-style {
border-radius: 8px;
background: linear-gradient(to right, blue, blue 20px, red 20px);
width: 200px;
padding-left: 20px;
height: 50px;
margin-left: 40px;
position: relative;
}
<div class="div-to-style">
</div>
You can use a pseudo-element to create the shadow, and apply the border-radius to that pseudo-element.
Working Example:
.div-to-style {
background-color: red;
width: 200px;
height: 50px;
margin-left:40px;
}
.div-to-style:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: relative;
z-index: -1;
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
}
<div class="div-to-style">
</div>
<p>
Want the red section to have a straight border on the left
</p>
The gist is, you need 2 divs. Add the box shadow and radius to the outer div, and the other background or border styles to the inner div.
.div-to-style {
-webkit-box-shadow: -20px 0px 0px 0px blue;
-moz-box-shadow: -20px 0px 0px 0px blue;
box-shadow: -20px 0px 0px 0px blue;
border-radius: 8px 8px 8px 8px;
margin-left: 40px;
}
.inner-style {
background-color: red;
width: 200px;
height: 50px;
}
<div class="div-to-style">
<div class="inner-style">
</div>
</div>
<p>
Want the red section to have a straight border on the left
</p>
Here is a code example:
https://jsfiddle.net/vdcohttk/2/
== Edit
If you're going to downvote, please write a comment explaining why. Thanks!
Please take a look at my site http://kaniamea.com/2/ I am trying to get the contentarea appear correctly behind the three Attractions boxes. My css is:
#attractions {
width: 290px;
height: auto;
display: block;
padding-right: 20px;
float: left;
}
and this is the code of my main container:
#main {
margin: 10px auto 0px;
width: 950px;
max-width:100%;
background: none repeat scroll 0% 0% #FBFBFB;
padding: 10px;
background-color: #FFF;
border: 2px solid #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
When I remove float: left; from #attractions and replace it it with display: inline-block; it works but I need to figure out another solution with float: left; so this will float correctly on mobile. Is there another way to make the contentarea styles appear behind the boxes?