I am using a framework which is generating 3 div tags. These three div tags cover one row on the page.
It looks like the first div covers 25% of the row and 2 div covers 25% of the row and the third div covers 50% of the row. I have access to the css class which third div is utilizing which looks like this:
.dataTables_processing {
position: fixed;
top: 50%;
left: 50%;
min-width: 125px;
margin-left: 0;
padding: 7px;
text-align: center;
color: #333;
font-size: 13px;
border: 1px solid #ddd;
background-color: #eee;
vertical-align: middle;
-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
Is there any way to modify this class to make it cover the entire row?
Try adding :
position:absolute;
left:0;
width:100%;
Try this
display: block;
width: 100%;
min-width: 100% !important;
If you are trying to have some div that each one takes a row and you want them to align vertically, use bootstrap and you can do something like this:
<div style='display: flex; flex-direction: column;'>
<div class='row'> my content to take a row </div>
<div class='row'> my content to take second row </div>
<div class='row'> my content to take a third</div>
</div>
Hope it helps.
Related
Hi I am designing a blog site using pure html and css and I have some design in mind. Currently it looks like before graph and I would like to achieve after graph. Right now all these classes are in inline-block and I do not want to change the dom structure. Please refer to this code snippet for implementation:
https://jsfiddle.net/yueeee/vb1we2tk/4/
.container {
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
position: relative;
display:inline-block;
height: 100%;
width: 10%;
max-width: 200px; /*in large resolution dont always want width to be 12%*/
margin-right: 40px;
/* background-color: transparent; */
padding: 0px 10px;
text-align: right;
vertical-align:top; /*always align to the top of container*/
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
vertical-align:top; /*always align to the top of container*/
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
The difficulty I met is how do I set metadata's height equals to content. I checked solution on setting container as table and metadata/ content as table-cell. However, it would cause some other styling issue so I still want to keep everything as inline-block. The other way I am thinking is to set the height of metadata equal to container. It failed because container does not height attribute. I tried something like setting height = 100% cause I do not want a stable height but also did not work.
Need your advice.
Before:
After:
The best choice in these cases is to use the flex property. I added some Properties to both the .container and .meta selectors and deleted some, act like code to get the desired result.
.container {
display: flex;
padding: 10px 40px;
padding-left: 0px;
width: 100%;
height: 100%;
}
.meta {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 10%;
margin-right: 40px;
padding: 0px 10px;
text-align: right;
}
.content {
width: 30%;
display:inline-block;
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="container">
<div class="meta">
<div class="time">
<p>2020/12/09<br>22:18:35</p>
</div>
<div class="tag">
<p>tag1</p>
<p>tag2</p>
</div>
</div>
<div class="content post">
<div class="text">
<h2> title </h2>
<p>content<br>content<br>content<br>content<br>content<br>
</p>
</div>
</div>
</div>
This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 3 years ago.
i try to fit span in another span but for some reason it doesnt work.
I have already tried display: flex and display: flexbox.
JSFiddle
html,
body {
height: 100%;
width: 100%;
}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: block;
position: absolute;
width: 90%;
height: 85%;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
height: 100%;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
Expectation:
Content of span with green background should be inside the lightgray box.
Output:
Content of span with green background is outside of any box.
Can you try adding float:left; to both your #preview span and #cont span. Float left forces two elements to stay on the left side.
#preview, #cont{
float:left;
}
I updated your fiddle. Try the fiddle here:
https://jsfiddle.net/edy0whkp/
Short Answer
You're setting display: block to your span elements. This turns them into block elements which start on a new line and they expand the size of their parent container. Changing the display to dispay: inline-block will cause the elements to not start a new line and to only take up as much space as they need.
https://jsfiddle.net/xypntkc0/
More details
In the JSFiddle I changed the parent element to be a div instead. Setting it to a div makes it a block component so you also don't need the display: block when it's a div. It's bad practice to place block elements inside of inline elements (you have a paragraph tag as a child tag to your span tags) So I would actually change all your span tags to divs
I also changed the position to position: relative on the parent component. You typically only want to set absolute to the children elements inside of a parent component that has position: relative. The parent is set as relative so that their absolute positioned children get positioned relative to the parent.
Even more detail
If you want to align elements next to each other inside of a container, a good tool to use is flexbox. You can set display: flex to the parent element to mark it as a flex container. Then the children will automatically be set as flex items and will render side by side and boom, you're done.
https://jsfiddle.net/vkru8wg7/
It looks like you're trying to make #preview and #cont sit side by side within #midbox. If this is the case, simply make #midbox {display: flex;}
body {
margin: 0;
background-color: #f0f0f0;
}
#midbox {
display: flex;
position: absolute;
width: 90%;
height: 85%;
top:0; right:0; bottom:0; left:0;
margin:auto;
background-color: #7d7c7d;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview {
display: block;
position: relative;
width: 35%;
background-color: #525052;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
#preview p {
margin: 0;
padding-top: 3%;
font-size: 2em;
opacity: 0.7;
color: #f0f0f0;
font-family: 'Lato', sans-serif;
text-align: center;
}
#cont {
display: block;
position: relative;
width: 35%;
background-color: green;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.75);
}
<span id="midbox">
<span id="preview">
<p>Preview</p>
</span>
<span id="cont">
<p>Why does this apper under the box and not on the left?</p>
</span>
</span>
If you want to learn about flexbox there's a great article at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The button in html works perfectly. But I cannot get it styled correctly using CSS.
The goal is to get the button to look like this:
When I add a width or padding/margin to the button it ruins the button style. It should also be responsive. Also for some reason I cannot change the color/border radius.
Tried doing it with an anchor tag as well to make a nice button, but that worked even less than this button.
I also run bootstrap seperately as CSS.
Snippet:
#background-log {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.button-login {
justify-content: center;
align-items: center;
margin: 10px;
background-color: #6441a4;
}
.twitch {
text-transform: uppercase;
width: 100px;
}
<div id="background-log">
<div class="button-login">
<button class="twitch">Sign in with Twitch</button>
</div>
</div>
First set display:block; for the button to make it a block-level element that you can properly apply width and padding/margin on. Use width on the button to make it wider, use padding to increase the space between text and button border and overwrite the default button values like border and background with the values you wish.
To make the buttons responsive, you can also use a percentage value for the width. You can also add a border-radius and box-shadow to make it look more like in your image. See the example below.
#background-log {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.button-login {
justify-content: center;
align-items: center;
margin: 10px;
}
.button-login button {
display: block;
text-transform: uppercase;
width: 300px;
color: #fff;
border: none;
padding: 10px;
margin-bottom: 10px;
border-radius: 2px;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
}
.twitch {
background-color: #6441a4;
}
.hitbox {
background-color: #98cb01;
}
<div id="background-log">
<div class="button-login">
<button class="twitch">Sign in with Twitch</button>
<button class="hitbox">Sign in with Hitbox</button>
</div>
</div>
I would recommend you use bootstrap and set the button to
<button class="btn btn-primary btn-block">
the class btn-block will make it full width with out missing up your padding.
Check out http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_block&stacked=h
If you want a violet button, add a background-color property to the button, not to the surrounding div. I reduced your example to clarify and also added a rounded border as in the example picture:
.twitch {
padding: 10px;
background-color: #6441a4;
color: white;
border-radius: 5px;
border-width: 0px;
}
<button class="twitch">Sign in with Twitch</button>
Is it possible to make a box-shadow CSS call wider than the HTML element to which we are applying it, while keeping the same height as the element to which we are applying it? I can increase the spread, but that will increase the height. As you can see in my snippet, the max width the box-shadow is only as wide as the .box div. Is there a reason why we would not want the box shadow ever wider than the HTML element or why there would be a restriction to this?
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
background-color: gray;
height: 100px;
width: 100px;
}
.box-spread {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}
<div class="container">
<div class="box">box</div>
container
</div>
<br>
<br>
<div class="container-spread">
<div class="box-spread">box</div>
container
</div>
You can make use of the pseudo element to enlarge the element and then apply box-shadow. height: 100% will make sure the height of the box-shadow is same as the element. The width value will be the key value to change.
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
position: relative;
}
.box::after {
box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
content: " ";
height: 100%;
position: absolute;
left: -50%;
top: 0;
width: 150%;
}
<div class="container">
<div class="box">box</div>
container
</div>
While it's not possible to use the spread-radius value to extend the shadow in just the horizontal or vertical directions you can add multiple drop shadows to a single element, the only downside being that any over lap will produce regions of darker shadow. But with a little bit of math you can line them up easily enough.
box-shadow at MDN
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue;
height:50px;
width:50px;
box-shadow:55px 0px 0px 0px rgba(0,0,0,.2),
105px 0px 0px 0px rgba(0,0,0,.2),
155px 0px 0px 0px rgba(0,0,0,.2) ; }
<div class="container">
<div class="box">box</div>
container
</div>
While box-shadow does have a spread setting, it applies to all sides. As far as I know there is no way of adjusting just the horizontal or vertical size of a box shadow.
You could potentially use two (or more) box shadows to achieve the effect, but it is really only applicable when the spread is set to 0
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px;
box-shadow:
55px 0px 0px 0px rgba(0,0,0,.2),
5px 0px 0px 0px rgba(0,0,0,.2); }
<div class="container">
<div class="box">box</div>
container
</div>
Maybe you need this
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px; box-shadow:0px 0px 2px rgba(0,0,0,1); }
<div class="container">
<div class="box">box</div>
container
</div>
I'm making a title bar, links on the left, center, and the right. Each separated by divs.
Floating left is no problem, centering the second div is no problem. But when I try to float the last div to the right it is clearing the other divs and is not inside my header. Why is this? It has to be something simple I am missing? Thank you very much
http://jsfiddle.net/GX9xn/
HTML
<div class="header-fixed">
<div class="header-container">
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-center">
title
</div>
<div class="nav-float-right">
<a>
<span>more</span>
</a>
<div>
</div>
</div>
CSS
.header-fixed {
height:56px;
border-top: 1px solid #222;
width: 100%;
background: green;
position: fixed;
}
.header-container {
width: 700px;
margin: 0 auto;
height: 56px;
}
.nav-float-left {
float:left;
height: 56px;
color: rgba(255, 255, 255, .55);
font-family:'Museo Sans W01 300',san-serif;
font-size: 13px;
text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);
}
.nav-center {
letter-spacing: 0.05em;
margin: 0 auto;
height: 43px;
width: 100px;
padding-top: 13px;
background: black;
color: #d4d2d2;
font-size: 29px;
font-family: “Lucida Grande”, sans-serif;
text-align: center;
box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
cursor: pointer;
}
.nav-center .ss-pika {
font-size: 17px;
margin-left: 1px;
margin-right: 0px;
}
.nav-center a {
display:block;
}
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
}
The center div will be above the float right div because it is a block element and block elements are not placed inline.
A walk around is to add the float-right element first.
<div class="nav-float-left">
<div id="search">
<span>search</span>
</div>
</div>
<div class="nav-float-right">
<a><span>more</span></a>
<div>
<div class="nav-center">
title
</div>
If you use float you also need to set the display property in order to do as you want.
I changed your fiddle by adding display:inline-block.
As you may notice you need to set the dimensions width for your divs (height optional).
Here : Fiddle
You can use display:table; , display:table-cell; instead of floats to arrange elements in single line:
Fiddle
Try this
.nav-float-right {
position:relative;
float:right;
height: 55px;
width: 205px;
bottom: 57px;
left: 12px;
}
You can adjust the right div by set the bottom and left attributes.
Fiddel: http://jsfiddle.net/GX9xn/6/
Please try this FIDDLE
There is slight change in your CSS file
.nav-float-right {
position:absolute;
float:right;
height: 55px;
width: 205px;
right:0;
top:0;
background: #fff;
}