I have 2 columns of numbers that I want them to appear side by side. It works when I try using float: left but I want them to appear in the center. Without the float they appear one row then next row downwards.
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
you have to add a parent (container) div around all your html with following styles:
<div style="margin:0 auto; display:inline-block">
see it here:
body {
color: #fff;
text-align: center;
}
#roll, #roll2, #roll3, #roll4 {
width: 40px;
height: 360px;
background: #0077ee;
margin: 0 auto;
}
.roll-h {
width: 40px;
height: 120px;
margin: 0 auto;
overflow: hidden;
}
.shadow {
height: 40px;
margin: 0 auto;
transform: translateY(40px);
}
.black,
.his-h {
width: 40px;
height: 40px;
font-size: 20px;
line-height: 40px;
font-weight: 700;
text-align: center;
float: left;
}
.black {
background: black;
}
.floatleft {
float: left;
}
.container {
display:inline-block;
margin:0 auto;
}
<div class="container">
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll3">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
<div class="floatleft">
<div class="shadow"></div>
<div class="roll-h">
<div id="roll4">
<div class="black">9</div>
<div class="black">0</div>
<div class="black">1</div>
<div class="black">2</div>
<div class="black">3</div>
<div class="black">4</div>
<div class="black">5</div>
<div class="black">6</div>
<div class="black">7</div>
<div class="black">8</div>
<div class="black">9</div>
<div class="black">0</div>
</div>
</div>
</div>
</div>
you can center and keep items side by side using inline-block like this
.floatleft {
display: inline-block;
}
Related
I am new to HTML. In the following chart, how can I add some labels such as
Team 1up
Team blue
Team tigers
Team watermelon
Team crazyred
Team Melt
At the left side of the chart tracks all right aligned?
$(function() {
$('.progress-fill span').each(function(){
var percent = $(this).html();
$(this).parent().css('width', percent);
});
});
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container horizontal flat">
<h2>Team performances</h2>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>100%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>60%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>20%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>34%</span>
</div>
</div>
</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>82%</span>
</div>
</div>
</div>
</div>
You can create a component called progress-group and put progress-label and progress-bar in it. progress-group takes care of responsibility for children alignment. I used flex which makes sense in this case. This gives you much more control if you want to add extra components in future.
https://codepen.io/anon/pen/oPVyYm
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container horizontal flat">
<h2>Team performances</h2>
<div class="progress-group">
<div class="progress-label">Team 1up</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>100%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team blue</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team tigers</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>60%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team watermelon</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>20%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team crazyred</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>34%</span>
</div>
</div>
</div>
</div>
<div class="progress-group">
<div class="progress-label">Team Melt</div>
<div class="progress-bar horizontal">
<div class="progress-track">
<div class="progress-fill">
<span>82%</span>
</div>
</div>
</div>
</div>
</div>
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
.progress-group {
display: flex;
}
.progress-label {
width: 170px;
text-align: right;
padding-right: 10px;
}
.progress-label::after {
content: ":";
}
$(function() {
$('.progress-fill span').each(function(){
var percent = $(this).html();
$(this).parent().css('width', percent);
});
});
Something like this sir?
https://codepen.io/JABedford/pen/RYdMjV
I have simply floated the bars over to the right and decreased the width to 80% and created another span for the relevant text.
<div class="progress-bar horizontal">
<span class="name">Team Name</span>
<div class="progress-track">
<div class="progress-fill">
<span>75%</span>
</div>
</div>
body {
background: #999;
}
.container {
width: 500px;
margin: 20px;
background: #fff;
padding: 20px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: right;
height: 18px;
width: 100%;
padding: 3px 0;
}
.horizontal .progress-track {
position: relative;
float: left;
width: 80%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
position: relative;
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
}
I'm trying to center some divs within another div for a webapp I'm making. I'm using the bootstrap 3 framework, but cannot get the divs to center vertically.
HTML:
<body>
<div id="container-main" class="container" align="center" style="min-height:100%">
<div class="row">
<div id="player-page-top" class="container">
<div id="player-page-summoner" class="container-fluid">
<h1>
<img src="http://i.imgur.com/eDeFxAe.png"> Name
</h1>
<div id="player-page-ranks">
<ul class="ul-ranks">
<li class="ranks">S3 Silver</li>
<li class="ranks">S4 Gold</li>
<li class="ranks">S5 Diamond</li>
<li class="ranks">S6 Master</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div id="player-page-left" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Leagues
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Champion Stats
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div id="player-page-right" class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Recent Matches
</div>
<div class="panel-body">
<div class="player-match container-fluid" align="left">
<div class="championdetails col-md-4">
<div class="champimage">
<img src="http://i.imgur.com/CWlqNvT.png">
</div>
<div class="summonerspells">
<div class="player-match-spell">
<img src="http://i.imgur.com/rTpkXlb.png">
</div>
<div class="player-match-spell">
<img src="http://i.imgur.com/nXFjz2w.png">
</div>
</div>
<div class="keymastery">
<img src="http://i.imgur.com/b5lszzu.png">
</div>
</div>
<div class="score col-md-2">
<div class="kda .text-center">
10 / 7 / 12
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
h1,
h2,
h3,
h4,
h5 {
font-family: "source sans pro", "proxima-nova", sans-serif;
color: #4b4b4b;
}
#media (min-width: 1200px) {
.container {
max-width: 960px;
}
}
.holder {
height: 100%;
width: 100%;
display: block;
}
.match-middle {
display: inline-block;
vertical-align: middle;
float: none;
}
.player-match {
border: solid 1px #ddd;
padding-top: 7px;
padding-bottom: 7px;
}
.championdetails,
.score {
padding-left: 0px;
padding-right: 0px;
text-align: center;
height: 100%;
}
.summonerspells,
.champimage,
.keymastery {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.player-match-spell {
display: block;
margin-bottom: 2px;
}
.summonerspells img,
.keymastery img {
height: 30px;
width: 30px
}
.champimage img {
height: 60px;
width: 60px;
border-radius: 40px;
}
#player-page-left,
#player-page-right {
/*border: 1px solid grey; */
}
#gameplay-baseball-field {
padding-right: 10px;
padding-left: 10px;
}
#player-page-top {
margin: 20px 0 20px 0;
}
#player-page-top img {
width: 60px;
height: 60px;
border-radius: 8px;
}
.ul-ranks>.ranks {
display: inline-block;
color: #4b4b4b;
background: #e0e3e3;
padding: 0 4px 0 4px;
margin: 3px 2px 0px 2px;
border-radius: 4px;
}
.ul-ranks {
-webkit-padding-start: 0px;
}
JSFiddle
I'm trying to center the "score" and "championdetails" divs vertically inside the "player-match" div. I can't get it to center without it skewing the other divs.
I'am new into basics of HTML and CSS.
Trying to create 3 x 3 square "picture", using , but can't find simple solution to put squares in the middle of the page, like nine square in center.
How to put all squares in the big bordered square?
How can we achieve this?
HTML:
<body>
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
</body>
CSS:
body {
background-color: #000000;
font-size: 150px;
}
div {
background: #FFFFFF;
width: 275px;
height: 275px;
margin: 10px 10px 10px 10px;
float: left;
}
Read about display: inline-block CSS property. I think you wants to get the following layout.
body {
background-color: #000;
font-size: 150px;
text-align: center;
}
.square-holder {
border: 1px solid #fff;
display: inline-block;
vertical-align: top;
letter-spacing: -4px;
width: 285px;
font-size: 0;
}
.square {
background: #fff;
letter-spacing: 0;
font-size: 150px;
width: 75px;
height: 75px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
<body>
<div class="square-holder">
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
<div class="square">
</div>
</div>
</body>
Use text-align - CSS with display - CSS
body {
background-color: #000000;
font-size: 150px;
text-align: center /* add this */
}
div {
background: #FFFFFF;
width: 25px;
height: 25px;
margin: 10px;
/*float: left; */
display: inline-block/* add this */
}
<div class="square-one">
</div>
<div class="square-two">
</div>
<div class="square-three">
</div>
<div class="square-four">
</div>
<div class="square-five">
</div>
<div class="square-six">
</div>
<div class="square-seven">
</div>
<div class="square-eight">
</div>
<div class="square-nine">
</div>
I don't really know how to put it in words but I do have pictures which will quite give you an idea of my problem. Seems like float is giving me the problem/
This is what I am trying to accomplish:
This is my problem:
Here's the code:
body {
background: #C52C2C;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
What I would like to do is change the height of the portfolio section but when I change the height, nothing changes. If I remove the boxes then I can change the height. How would I fix this?
Thank you if you well understood this.
That is because of impropper value of the display property for View More element. You should set it to be:
view_more{ display: block; } // Please replace **view_more** with the correct value to select the element
Also do that for the downward arrow.
Do you mean something like this?
https://jsfiddle.net/xsjjo654/1/
Code Sample:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: sans-serif;
}
h1.title {
text-align: center;
color: white;
font-size: 40pt;
margin: 5px auto;
}
#portfolio {
overflow: auto;
clear: both;
min-height: 400px;
width: 100%;
background-color: #c62828;
text-align: center;
}
#portfolio > .wrapper {
display: table;
width: 100%;
}
#portfolio > .wrapper > section {
display: table-cell;
vertical-align: middle;
}
section.side-left {
text-align: right;
}
section.side-right {
text-align: left;
}
section.side-center {
width: 930px;
}
.images {
display: inline-block;
}
.images .box {
width: 300px;
height: 300px;
background-color: white;
display: inline-block;
float: left;
margin: 1px;
}
.button {
cursor: pointer;
background: transparent;
outline: 0;
border: none;
}
.button.round, .button.round-alt {
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 30px;
}
.button.round {
background-color: white;
color: #c62828;
}
.button.round-alt {
border: 2px solid white;
color: white;
margin: 30px;
}
.button.square {
border: 2px solid white;
color: white;
font-size: 14pt;
padding: 12px 30px;
margin: 40px auto;
}
/* (c) 2016 David#Refoua.me, www.Refoua.me */
</style>
</head>
<body>
<div id="portfolio">
<h1 class="title">
Portfolio
</h1>
<div class="wrapper">
<section class="side-left">
<button class="button round prev">
←
</button>
</section>
<section class="side-center">
<div class="images">
<!-- Top Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<br>
<!-- Bottom Boxes -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
<section class="side-right">
<button class="button round prev">
→
</button>
</section>
</div>
<button class="button square more">
View More...
</button>
<br>
<button class="button round-alt down">
↓
</button>
</div>
</body>
Try Bootstrap. It let's you play around with some cool grid functionality AND it's RESPONSIVE!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<style>
.inner {
height:350px;
background-color:white;
margin-top:5px;
margin-left:-25px;}
body {background-color:red;}
</style>
<body>
<div class='container'>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='inner'></div>
<div class='inner'></div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.6/js/bootstrap.min.js"> </script>
Output: http://s28.postimg.org/9y69346tp/test.png You can add more rows later if you're going to refresh your pictures from database automatically.
Hope that helps! Cheers!
if you give a width to images and margin:auto it should center much easier :)
body {
background: #C52C2C;
}
.images {
width:912px;
margin:auto;
}
.images div {
width: 300px;
height: 300px;
background-color: white;
margin: 0 auto;
float: left;
margin: 2px;
}
#portfolio {
overflow: auto;
clear: both;
heigth: 400px;
background-color: #c62828;
}
<div class="images">
<!-- Top Boxes -->
<div class="box-1 left"></div>
<div class="box-2 left"></div>
<div class="box-3 left"></div>
<!-- Bottom Boxes -->
<div class="box-4 left"></div>
<div class="box-5 left"></div>
<div class="box-6 left"></div>
</div>
use this: clearfix
The problem here is that your container doesn't take the height of the inner boxes in consideration, so if you add the clearfix to it that will do the trick
I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height.
I have some of my view:
<div class="col-md-7">
<div class="row recent-information">
<div class="product-navigation">
<div class="product-header-text">
<div class="col-md-3 product-details">
<p>Product name</p>
</div>
<div class="col-md-4 product-details">
<p>Note</p>
</div>
<div class="col-md-2 product-details">
<p>Price</p>
</div>
<div class="col-md-2 product-details">
<p>Stock</p>
</div>
</div>
</div>
#foreach (var item in Model.Products)
{
<div class="product-header">
<div class="product-header-text">
<div class="col-md-3 product-details-entity">
<h6>#item.Name</h6>
</div>
<div class="col-md-4 product-details-entity">
<h6>#item.Description</h6>
</div>
<div class="col-md-2 product-details-entity">
<h6>#item.Price DKK</h6>
</div>
<div class="col-md-1 product-details-entity">
<h6>#item.Stock</h6>
</div>
<div class="col-md-1 product-details-checkbox">
#Html.CheckBox("naem", new { #class = "products-checkbox" })
</div>
</div>
</div>
}
</div>
</div>
And the style:
.product-header {
min-height: 7%;
min-width: 100%;
margin-bottom: 3px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.product-header-text {
width: 98%;
margin-left: 10px !important;
margin-right: 10px !important;
float: left;
font-weight: 700 !important;
margin-bottom: 3px;
height: 100%;
}
.product-details {
font-weight: 500 !important;
margin-top: 13px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
height: auto;
min-height: 100%;
}
.product-details-entity {
margin-top: 20px;
height: auto;
}
input[type="checkbox"] {
background: #f8f8f5;
-webkit-appearance: none;
height: 22px;
width: 22px;
margin-top: 20%;
cursor: pointer;
margin-left: 65px;
}
input[type="checkbox"]:checked {
background-image: url("../Images/checkmark2.png");
height: 22px;
width: 22px;
}
My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow.