I am trying to create a small donut hold icon - green.
Here is what I tried :
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
}
<div class="col-lg-3"><span class="sucess-icon"> </span>greater than or equal to 75%</div>
I couldn't get it to display. I am not sure what is going on.
By default a <span> is display: inline and so height and width do not apply to it.
Set display: inline-block or some other value to which those properties apply.
You also need to make sure you spell your class names consistently or the selector will not match.
.success-icon {
border: 1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
<div class="col-lg-3"><span class="success-icon"> </span>greater than or equal to 75%</div>
use display:inline-block in the style
.success-icon {
border:1px #62ae41 solid;
border-radius: 10px;
width: 30px;
height: 30px;
display: inline-block;
}
Here are some extra styles to match it to what you were kinda wanting.
.success-icon {
border: 8px #62ae41 solid;
border-radius: 100%;
width: 30px;
height: 30px;
margin: 0 5px 0 0;
display: inline-block;
vertical-align: middle;
}
.col-lg-3{
vertical-align: middle;
}
<div class="col-lg-3"><span class="success-icon"></span>greater than or equal to 75%</div>
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 1 year ago.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
This is my html code and css code when I add an element inside a div one block is going down. Is there any problem with display inline block part. I really can't figure out hope somebody will help
Thanks.
You can use this css hope it's work
.dashboard-monthly-sales{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
vertical-align:top; // Add this line in your code
}
.dashboard-small-total-sales{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
vertical-align:top; // Add this line in your code
}
otherwise, you can use display: flex it helps you what you want
Simply adding vertical-align: top; to the first div solves the problem. This tells the CSS to align the element to the top of the tallest element on the line.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
vertical-align: top;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
h2 {
display: block;
}
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
Try to use a main div containing the inner divs, so that all the inner divs will be aligned inside that main div. And use some css changes as below, so that adding the text inside the empty div will not affect the alignment.
.dashboard-monthly-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 40%;
height: 250px;
}
.dashboard-small-total-sales
{
display: inline-block;
margin-top: 5px;
margin-left: 5px;
background-color: #252525;
border: 1px solid #595E57;
width: 25%;
height: 250px;
}
.container{
display: inline-flex;
width: 100%;
}
<html>
<body>
<div class="container">
<div class="dashboard-monthly-sales">
<h2>Monthly Sales - <?php echo date("Y"); ?></h2>
</div>
<div class="dashboard-small-total-sales">
</div>
</div>
</body>
</html>
use one div as a container which will cover both divs. and in CSS use positioning properties and align it to according to your wish. first off all define the width of whole page.
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
take a look at this:
Here is my css:
<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
margin: 0px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>
Why are margins not working?
I want the "backups_header" to be flush with the top of the backups.
And they are, but the font probably doesn't fill its entire height. There is a bit of spacing around a the letters that make it look like a margin of about two pixels. If you select it, the highlight will reveil the actual line height.
There is no proper way to fix this, because it can be different for each font and even slightly differ on each machine (especially different OS'es), but your best bet would be to set a line-height and tweak it until it is just right.
The main reason is that you are again changing the margins below. write margin:0px above!
`<style>
.backups {
border-radius: 2px;
border: 1px solid #e2e2e2;
padding: 3%;
margin: 0px;
display: inline-block;
width: 100%;
margin-right: 5px;
height: 485px;
}
.backups_header {
background-color: #E7E7E7;
}
</style>`
I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs
I'm trying to align a table of dynamic size within a parent div. The parent container's height is set, and the inner table's height is unknown (variable). I don't think margins/relative positioning adjustments will work since the size of the table is unknown. Can this be done? Right now the code looks like:
html:
<div id="wrapper">
<div id="board">
<table id="evolve">...</table>
</div>
</div>
css:
#wrapper {
width: 100%;
height: 100%;
}
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
margin: auto;
position: relative;
}
Your desired css code
#board {
display:table-cell;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border:solid 1px black;
}
UPDATE
You will need to alter padding-left depending on wrapper width(if you set it to 100% then it will work)
#wrapper {
height: 100%;
padding-left:36%;
}
#board {
display:table-cell;
width: 265px;
height: 222px;
vertical-align: middle;
border: 1px solid black;
}
.evolve {
border: 1px black solid;
}
As soon as i find a better solution i will update it
You can define line-height same as the height of the DIV. Write like this:
#board {
position: relative;
margin: auto;
width: 265px;
height: 222px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
line-height:222px;
}
#board .evolve {
border: 1px black solid;
margin: auto;
position: relative;
line-height:1.5;
}
Check this http://jsfiddle.net/X4L5A/1/