I have a series of CSS-styled boxes. Each box has a heading, followed by a number in a paragraph tag. Some of the headings are 2 lines, and in this case, the number shows up right where I want it: centered in the bottom part of the box. Where the heading is only 1 line, the number floats up higher than I'd like. How can I get the number to be in the center of the white space? What's going on here?
Code here: https://jsfiddle.net/snp3gvke/
<div class="sm red left-margin"><h2>Website<br/>Visitors</h2><p>120,363</p> </div>
Try adding vertical-align:middle; and line-height
This is the hacky solution, but you can solve your problem by adding two line breaks to your headings. That's essentially the problem - when your heading only takes one line, it doesn't push the number down as far into the white part of the div.
p {
font-weight: bold;
font-size: 2em;
text-align: center;
position:absolute;
bottom: 5%;
width: 100%;
}
I was able to do it by using flexbox. I had to make some changes to your CSS to override the colors coming from langsdale-dashboard.css file.
I went ahead and made your CSS a little bit more efficient also. I made changes only on the CSS to make things work. Here's what I did:
Applied the colors to the h2 instead of the parent container.
Removed the height from the parent containers and set the heights to the h2 and p instead.
Applied display:flex; justify-content:center; and align-items:center to both the h2 and the p.
I'm including the code below. You can also view it on JSFiddle: https://jsfiddle.net/m0nk3y/snp3gvke/11/
Let me know if you have any questions.
.lg,.med,.sm {
border-radius: 15px;
border-style: solid;
border-width: 1px;
position: relative;
}
.lg {
width: 700px;
}
.med {
width: 500px;
display: inline-block;
}
.sm {
width: 175px;
display: inline-block
}
.sm, .med, .lg {
vertical-align: top;
}
.left-margin {
margin-left: 15px;
}
.row {
margin-bottom: 10px;
}
h2,
p {
display: flex;
margin: 0;
text-align: center;
justify-content: center;
align-items: center;
}
h2 {
height: 75px;
border-radius: 12px 12px 0 0;
}
p {
height: 100px;
font-weight: bold;
font-size: 2em;
}
.blue, .red, .green, .orange {
background: transparent;
}
.blue {
border-color: #41B6E6;
}
.blue h2 {
background: #41B6E6;
}
.red {
border-color: #ce2029;
}
.red h2 {
background: #ce2029;
}
.green {
border-color: #C4D600;
}
.green h2 {
background: #C4D600;
}
.orange {
border-color: #E35205;
}
.orange h2 {
background: #E35205;
}
<link href="https://langsdale.ubalt.edu/zz-test/langsdale-dashboard.css" rel="stylesheet"/>
<body>
<div class="row">
<div class="lg blue">
<h2>Walk-in Visitors</h2>
<p>109,328</p>
</div>
</div>
<div class="row">
<div class="med red">
<h2>Special Collections<br/>Flickr Views</h2>
<p>75,985</p>
</div>
<div class="sm green left-margin">
<h2>Questions<br/>Answered</h2>
<p>19,570</p>
</div>
</div>
<div class="row">
<div class="sm blue">
<h2>Materials<br/>Circulated</h2>
<p>375,985</p>
</div>
<div class="med orange left-margin">
<h2>Instruction Session<br/>Attendees</h2>
<p>2,045</p>
</div>
</div>
<div class="row">
<div class="med green">
<h2>Database Searches</h2>
<p>330,479</p>
</div>
<div class="sm red left-margin">
<h2>Website<br/>Visitors</h2>
<p>120,363</p>
</div>
</div>
<div class="row">
<div class="lg orange">
<h2>Titles Borrowed via ILL</h2>
<p>5,773</p>
</div>
</div>
</body>
Related
I do not know how to formulate my question but I will explain it easily. My div content is mixing within the next div content when using float: right and I do not know why.
I am trying to achieve something like this using html and css:
I am trying to put that span text to right, using float: right this happens:
I see it is mixing within the next div when It should be outside.
Maybe I do not know what I doing. But this is my code:
#foot {
background-image: url(https://images.pexels.com/photos/3184433/pexels-photo-3184433.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
background-size: cover;
}
#foot .container{
width: 90%;
}
#foot .container .upper-f
{
padding: 2em;
}
#foot .container .bottom-f .bg-container-f
{
padding: 2em;
background-color: rgba(34, 55, 109, 0.85);
}
#foot .container .bottom-f .img-container
{
text-align: center;
}
#foot .container .bottom-f .title-trajes h6
{
text-transform: initial;
line-height: 0.8em;
color: white;
font-size: 0.9em;
font-weight: 600;
}
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
}
#foot .container .semi-title-pu div span
{
padding: 0.5em;
}
<footer id="foot">
<div class="container">
<div class="upper-f">
</div>
<div class="bottom-f">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
<div class="bg-container-f">
<div class="title-trajes">
<h6>testing</h6>
</div>
<div class="img-container">
<img src="./images/uniformalogo png.png" height="24">
</div>
</div>
</div>
</div>
</footer>
How can I float or put that div to right and achieve like the first image?
I changed the position of div content. As well as I added the margin-top to the bg-container-f to decrease the gap between big-container-f and semi-title-pu . You can change it as you want.
#foot {
background-image: url(https://images.pexels.com/photos/3184433/pexels-photo-3184433.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
background-size: cover;
}
#foot .container{
width: 90%;
}
#foot .container .upper-f
{
padding: 2em;
}
#foot .container .bottom-f .bg-container-f
{
padding: 2em;
background-color: rgba(34, 55, 109, 0.85);
margin-top:-15px;
}
#foot .container .bottom-f .img-container
{
text-align: center;
}
#foot .container .bottom-f .title-trajes h6
{
text-transform: initial;
line-height: 0.8em;
color: white;
font-size: 0.9em;
font-weight: 600;
}
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
}
#foot .container .semi-title-pu div span
{
padding: 0.5em;
}
<footer id="foot">
<div class="container">
<div class="upper-f">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
</div>
<div class="bottom-f">
<div class="bg-container-f">
<div class="title-trajes">
<h6>testing</h6>
</div>
<div class="img-container">
<img src="./images/uniformalogo png.png" height="24">
</div>
</div>
</div>
</div>
</footer>
try this:
#foot .container .semi-title-pu
{
background: rgba(206, 39, 36, 0.8);
float: right;
line-height: 1.2em;
transform: translateY(-1.2em);
}
Better to avoid float:right.
Instead use one of these:
text-align: right; on the text element itself. For this to work the text has to be in a block element like <p> or <div>, or you have to add a display: block; to the <span> element.
Put your text element inside of a container, for example a <div> and put display: flex; on it and make sure it's as wide as your page. Then add justify-content: flex-end; to the same container css. This will justify the span within it (and anything else) to the far right on the page.
If you want to have your element float on top of another element you can put the container and text inside or a larger container with a photo background-image. Or you can keep it outside the image container and pull it up on the photo with a negative margin or add position: absolute and use top, left, right and bottom positioning to fine tune the position.
Floats are taken out of the flow context of the html document and is a bit trickier to work with, that's why you should avoid it when you have better alternatives.
Try the red element outside the footer:
<section class="image-container">
<div class="semi-title-pu">
<span>Proveedor de uniformes</span>
</div>
</section>
<footer id="foot">
<div class="container">
<div class="upper-f">
</div>
<div class="bottom-f">
<div class="bg-container-f">
</div>
</div>
</div>
</footer>
Full code: https://jsfiddle.net/ks9tLhzp/
Result:
I have a <div> with a number of sub-elements (which happen to be custom-sized buttons). It can have between 1 and 3 buttons.
Example of HTML with 2 buttons:
<div id="head">
<div id="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
</div>
</div>
When there are 3 buttons, they fill the entire <div>, so it is not an issue. However, when there are 1 or 2 buttons, they need to be centered but I can't seem to accomplish this without introducing ridiculous conditional margins or something.
How can I modify this CSS so that <div> elements with 1 or 2 of these buttons show the buttons centered within the div?
Please refer to the Fiddle: https://jsfiddle.net/bf33wc6w/1/
Edit: With only 2 buttons, I don't want them to be spread out. I want them to be in the center with only ~2px between them similar to their spacing for when there are 3 buttons.
You could set inline block on the items, with container set to text align center.
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
JSFIDDLE DEMO
.control-buttons-container {
text-align: center;
font-size: 0; /*fix inline block gap*/
}
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
height: 73px;
width: 128px;
margin: 3px 1.5px;
display: inline-block;
vertical-align: top;
font-size: 12px; /*reset font size*/
}
.control-button:hover {
background-color: #3FA9DB;
}
#head, #body, #foot {
border: 1px solid red;
position: absolute;
width: 396px;
height: 80px;
left: 0;
}
#head {
top: 0;
}
#body {
bottom: 50%;
-ms-transform: translateY(50%);
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
#foot {
bottom: 0;
}
<div id="head">
<div class="control-buttons-container">
<button class="control-button">some button text</button>
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="body">
<div class="control-buttons-container">
<button class="control-button">proceed with this button</button>
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="foot">
<div class="control-buttons-container">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
Updates:
Fixed same id being used multiple times on a single page, which is in valid HTML - changed it to class.
Improved the position of middle block, make it to always stay in the middle more accurately - by using CSS transform.
Merged some duplicated CSS rules.
Like this:https://jsfiddle.net/bf33wc6w/7/
All I did was change your float to none and the margin to auto for the left and right margin?
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
height: 73px;
width: 128px;
margin: 3px auto;
}
Add these style rules:
#head, #body, #foot { text-align: center; }
#control-buttons-container { display: inline-block; }
As an aside, you shouldn't use the same id (control-buttons-container) multiple times in one document. You should use a classname instead.
Updated fiddle: https://jsfiddle.net/mr8e7kyt/
Try something like this:
<div id="control-buttons-container">
<div class="col-1">
<button class="control-button">some button text</button>
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
<button class="control-button">Seth Rollins, WWE Champion</button>
</div>
</div>
<div id="control-buttons-container">
<div class="col-1">
</div>
<div class="col-2">
<button class="control-button">proceed with this button</button>
</div>
<div class="col-3">
</div>
</div>
.control-button {
background-color: #0E80B4;
color: white;
outline: none;
border: none;
float: left;
height: 73px;
width: 100%;
}
.control-button:hover {
background-color: #3FA9DB;
}
#control-buttons-container {
max-width: 400px;
padding: 1px;
border: 1px solid red;
}
.col-1, .col-2, .col-3 {
width: 32.6%;
display: inline-block;
margin: auto
}
Isn't flawless, but it was made in a couple of minutes and gets the job done: JSFiddle
For the containers without 3 items you should remove the float: left; for the buttons inside it. Leave it for the one with 3 items. Then you can just set text-align: center; on the container.
You can add a class like no-float on the containers you want to control whether its children should be floated or not.
https://jsfiddle.net/bf33wc6w/10/
This answer will probably help you out. Wrap your buttons in a container, give it a fixed width, and change margin to auto. Be sure to remove float: left.
I am trying to set my panel/block to a different color when it has been clicked e.g. active.
My HTML is:
<div class="container">
<div class="content nobg">
<div class="sideEffectBox text-center medium-6 columns">
<div class="panel hlib"> <img src="http://upload.wikimedia.org/wikipedia/commons/2/24/Icon_Transparent_Loupe_256x256.png"/>
<span class="linkText">Record Side Effects</span>
</div>
</div>
</div>
</div>
My CSS is:
.container .content .panel.hlib {
background: #ECC100;
border:none;
text-align:center;
}
.sideEffectBox :active{
background: pink;
}
.container .content .panel.hlib :active {
background: pink;
border:10px black solid;
}
.container .content .panel.hlib img {
display: block;
padding-bottom: 24px;
height: 110px;
}
.container .content .panel.hlib .linkText {
font-size: 20px;
color: #605748;
display: block;
text-align: center;
}
I have a JS fiddle located here: http://jsfiddle.net/liammccann1992/hSu4c/300/
The problem I am having is it's only setting the thing I click to active e.g. the text or the image but shouldn't there parent be active to?
Is there anyway I can force the parent to be active and not them?
as said in my comment, remove the space before :active and it should be solved :)
I wanted to make my text to make my text lower to make it to the center of the <div> tag. But I tried to use margin-top to make it lower a little bit but it just can't work. This is my code.
.loremipsum {
background-color: white;
height: 1060px;
}
.content {
font-family: 'Lato';
text-align: center;
}
h3 {
font-size: 75px;
}
.h3 {
border: 2px black solid;
width: 750px;
margin: auto;
margin-top: 100px;
}
<div class="loremipsum" id="loremipsum" >
<div class="h3">
<h3 class="content" >Why Choose Us?</h3>
</div>
<p class="content">We create the best front-end design.Each template cost only $5.</p>
</div>
I recommend you to look up a lot of web based tutorials before you go any further, as web based development is vast (esp for a complete beginner)
I've created a quick demo of margin and padding examples below, (I would post as a comment, although for demonstration purposes, this might be better)
html{background:gray;}
div {
height: 20px;
border: 1px solid black;
}
.right {
margin-right: 100px;
}
.left {
margin-left: 100px;
}
.top {
margin-top: 100px;
}
.bottom {
margin-bottom: 100px;
}
.left-padded{
padding-left:100px;
}
.right-padded{
padding-right:100px;
}
.top-padded{
padding-top:100px;
}
.bottom-padded{
padding-bottom:100px;
}
<div class="normal">I'm normal</div>
<div class="right">I'm margin-right</div>
<div class="left">I'm margin-left</div>
<div class="top">I'm margin-top</div>
<div class="bottom">I'm margin-bottom</div>
<div class="left-padded">I'm padded-left</div>
<div class="right-padded">I'm padded-right</div>
<div class="top-padded">I'm padded-top</div>
<div class="bottom-padded">I'm padded-bottom</div>
You can set property to important. so it will give priority
` .h3 {
border: 2px black solid;
width: 750px;
margin:auto;
margin-top:100px;
}
h3.content{padding:25px} `
Check it on fiddle : [http://jsfiddle.net/515zttfr/][1]
I have a very simple design where I have 4 small boxes lined up on top of one another each with the same dimensions. However, when I try to apply "float: left" to the boxes, the background color of it's parent div goes away. Why is this? What does it have to do with the background color? I would just like my background color to remain the same.
See jsfiddle: http://jsfiddle.net/mush5ecc/
My html code:
<div id="careers">
<div class="container">
<h2 id="careers_title">Careers</h2>
<div id="four_grids">
<div id="top_left" class="grid"></div>
<div id="top_right" class="grid"></div>
<div id="bottom_left" class="grid"></div>
<div id="bottom_right" class="grid"></div>
</div>
</div>
</div>
My CSS code:
#careers {
background-color: orange;
}
.container {
width: 1026px;
margin: auto;
}
#careers_title {
text-align: center;
padding-top: 67px;
padding-bottom: 60px;
}
.grid {
width: 50px;
height: 50px;
float: left; /* COMMENT FLOAT TO SEE WHAT HAPPENS */
}
#top_left {
background-color: blue;
}
#top_right {
background-color: green;
}
#bottom_left {
background-color: red;
}
#bottom_right {
background-color: yellow;
}
Apply overflow: hidden to <div id="four_grids">.
See here for further details on this behaviour.
I'm a bit unsure of what your goal is, but I added the following css and I think this may be what you are looking for.
#four_grids {
position: absolute;
}