I'm trying to do the next thing:
so I tried it by:
http://jsfiddle.net/7ewrM/22/
<div class="container">
<div class="row-fluid">
<div class="col-xs-4">
<div class='img-container'>
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
<div class='img-text'>Mark zuckerberg</div>
</div>
</div>
<div class="col-xs-8">
some text
</div>
</div>
</div>
Any help appreciated!
.container {
border: 1px solid red;
padding: 0;
}
.img-container{
padding: 0 10px;
}
.imggg {
display: inline-block;
width: 25%;
padding: 10px;
border-right: 1px solid red;
}
.text {
width: 70%;
display: inline-block;
}
.marc-zuckerberg{
border-top: 1px solid red;
width: 100%
display:inline-block;
}
<div class="container">
<div class='img-container'>
<div class="imggg">
<img src='http://graph.facebook.com/112845672063384/picture?type=square' />
</div>
<div class='text'>text</div>
</div>
<div class='marc-zuckerberg'>Mark zuckerberg</div>
</div>
Here you go: http://jsfiddle.net/7ewrM/24/
Related
I was trying to make the border-radius: 20px; but I don't know why the background color overflowed out of the border. Please help me how to solve this one.
Here is the sample codes. Thank you.
.bar{
padding: 20px;
}
.barContainer{
width: 50%;
background-color: #cccccc;
border: 1px solid #111;
border-radius: 20px
}
.per {
text-align: right;
padding: 10px 0;
color: #111;
}
.html {width: 90%; background-color: #f44336;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #FEF70F;}
.java {width: 60%; background-color: #808080;}
.php {width: 60%; background-color: #008631;}
<div class="bar">
<div class="topic">HTML</div>
<div class="barContainer">
<div class="per html">90%</div>
</div>
<div class="topic">CSS</div>
<div class="barContainer">
<div class="per css">80%</div>
</div>
<div class="topic">JavaScript</div>
<div class="barContainer">
<div class="per js">50%</div>
</div>
<div class="topic">Java</div>
<div class="barContainer">
<div class="per java">50%</div>
</div>
<div class="topic">PHP and MySQL</div>
<div class="barContainer">
<div class="per php">50%</div>
</div>
</div>
Add overflow: hidden to the .barContainer rule :
.bar{
padding: 20px;
}
.barContainer{
width: 50%;
background-color: #cccccc;
border: 1px solid #111;
border-radius: 20px;
overflow: hidden;
}
.per {
text-align: right;
padding: 10px 0;
color: #111;
}
.html {width: 90%; background-color: #f44336;}
.css {width: 80%; background-color: #2196F3;}
.js {width: 65%; background-color: #FEF70F;}
.java {width: 60%; background-color: #808080;}
.php {width: 60%; background-color: #008631;}
<div class="bar">
<div class="topic">HTML</div>
<div class="barContainer">
<div class="per html">90%</div>
</div>
<div class="topic">CSS</div>
<div class="barContainer">
<div class="per css">80%</div>
</div>
<div class="topic">JavaScript</div>
<div class="barContainer">
<div class="per js">50%</div>
</div>
<div class="topic">Java</div>
<div class="barContainer">
<div class="per java">50%</div>
</div>
<div class="topic">PHP and MySQL</div>
<div class="barContainer">
<div class="per php">50%</div>
</div>
</div>
Try add in overflow: hidden in barContainer:
.barContainer{
width: 50%;
background-color: #cccccc;
border: 1px solid #111;
border-radius: 20px;
overflow: hidden;
}
I managed to make a mockup of a timeline with blocks. It has a look that is ok. You can run the snippet to take a look or see this image:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
But I'm not satisfied with the result. I would like to align my timeline like this. The idea would be that the info bubble on the right starts in the vertical middle of the bubble on the left.
I don't see how to do it with flex.
Why not just give .right a margin-top that is equal to half the height of .left (11px)?
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
}
.right {
flex: 1;
margin-left: 10px;
margin-top: 11px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
Alteratively, if you don't want the increased gap, you can just give .left a margin-top of -11px:
.list {
display: flex;
flex-direction: column;
}
.item {
display: flex;
}
.item:not(:last-child) {
margin-bottom: 10px;
}
.left {
display: flex;
flex-direction: column;
margin-top: -11px;
}
.right {
flex: 1;
margin-left: 10px;
}
.border {
width: 1px;
border-radius: 10px;
background: black;
height: 100%;
margin: 2px auto;
}
.bubble,
.big-bubble {
padding: 10px 20px;
border: 1px solid black;
border-radius: 5px;
}
.big-bubble {
padding: 30px 0;
border: 1px solid black;
border-radius: 5px;
}
<div class="list">
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
<div class="item">
<div class="left">
<div class="bubble"></div>
<div class="border"></div>
</div>
<div class="right">
<div class="big-bubble"></div>
</div>
</div>
</div>
I have been writing some code for a website, and I'm not able to vertically center text. I have read multiple answers on StackOverflow and other sites about how to vertically center html (mainly using the display:table and display:table-cell methods and the top:50%, transformY method), however, I am not able to implement either of these methods successfully. I have attached my code here, hoping that someone will be able to spot an error of my mine which is causing the code to not work. (In this code, I have used the top:50%, transformY method of vertically centering text). Any help would be greatly appreciated.
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
<title>Game Timer and Scorekeeper</title>
</head>
<body>
<div class="container-fluid">
<div class="row" id="heading">
<div class="col-xs-12">
<div class="positioner">
<h1>Game Timer and Scorekeeper</h1>
</div>
</div>
</div>
<div class="row" id="top-labels">
<div class="col-xs-3 labels teamlabel" id="a-label">
<div class="positioner">
<h2>Team A</h2>
</div>
</div>
<div class="col-xs-6 labels" id="gameclock-label">
<div class="positioner">
<h2>Game Clock</h2>
</div>
</div>
<div class="col-xs-3 labels teamlabel" id="b-label">
<div class="positioner">
<h2>Team B</h2>
</div>
</div>
</div>
<div class="row" id="thirdrow">
<div class="col-xs-3 pointsclock teampoints" id="pointsA">
<div class="positioner">
<h1>POINTS A</h1>
</div>
</div>
<div class="col-xs-6 pointsclock" id="gameclock">
<div class="positioner">
<h1>GAME CLOCK</h1>
</div>
</div>
<div class="col-xs-3 pointsclock teampoints" id="pointsB">
<div class="positioner">
<h1>POINTS B</h1>
</div>
</div>
</div>
<div class="row" id="fourthrow">
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
<div class="positioner">
<h2>CONTROL A</h2>
</div>
</div>
<div class="col-xs-6 ptcontclock" id="questionclock">
<div class="positioner">
<h2>QUESTION CLOCK</h2>
</div>
</div>
<div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
<div class="positioner">
<h2>CONTROL B</h2>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.container-fluid {
width: 100vw;
height: 100vh;
}
#heading {
height: 15vh;
border: 2px solid;
}
#top-labels {
height: 10vh;
border: 2px solid;
width: 100vw;
}
#top-labels .labels {
border-right: 2px solid;
border-left: 2px solid;
}
#thirdrow {
height: 40vh;
border: 2px solid;
width: 100vw;
}
#thirdrow .pointsclock {
height: 40vh;
border-right: 2px solid;
border-left: 2px solid;
}
#fourthrow {
height: 35vh;
width: 100vw;
}
#fourthrow .ptcontclock {
border-right: 2px solid;
border-left: 2px solid;
height: 35vh;
}
.positioner{
height:100%;
width:100%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
You can try this.
HTML
<main>
<div>
I'm a block-level element with an unknown height, centered vertically
within my parent.
</div>
</main>
CSS
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
<main>
<div>
I'm a block-level element with an unknown height, centered vertically within my parent.
</div>
</main>
check this link for reference https://css-tricks.com/centering-css-complete-guide/
How to put banners side by side using HTML/CSS? Ideally with different sizes as shown below?
One simple way would be to display the banners inline-block, and assign them the required width.
.banner {
display: inline-block;
}
.banner-sm {
width: 32%;
}
.banner-lg {
width: 65%;
}
.banner {
height: 100px;
background: #DDD;
padding: 0; margin: 0;
}
<div class="row">
<div class="banner banner-lg"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
<div class="banner banner-sm"> </div>
</div>
<div class="row">
<div class="banner banner-sm"> </div>
<div class="banner banner-lg"> </div>
</div>
Either use some grid system, or the bare CSS float property, pseudo example shown below:
.banner1 {
float: left;
width: 100px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner2 {
float: left;
width: 200px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.banner3 {
float: left;
width: 50px;
height: 20px;
margin: 4px;
border: 1px solid #777;
}
.clearfix {
clear: both;
}
<div class="banner1">banner</div>
<div class="banner1">banner</div>
<div class="clearfix"></div>
<div class="banner2">banner</div>
<div class="clearfix"></div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="banner3">banner</div>
<div class="clearfix"></div>
Good luck
You can use Twitter Bootstrap to get grid system and other useful layout functionality:
.row div {
height: 30px;
background: #aaa;
border: 1px solid #ddd;
}
* {
box-sizing: border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='row'>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
<div class='col-xs-4'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
</div>
<div class='row'>
<div class='col-xs-4'></div>
<div class='col-xs-8'></div>
<div class='col-xs-8'></div>
<div class='col-xs-4'></div>
</div>
If you are familiar with twitter-bootstrap then use its Grid system otherwise using inline-block will help you.
div {
border: 1px solid #ddd;
height: 200px;
margin: 5px;
display: inline-block;
box-sizing:border-box;
}
<section style="width:650px">
<div style="width:415px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:200px;"></div>
<div style="width:415px;"></div>
</section>
you can use CSS3 flex-box concept
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
flex-direction:column;
}
.flex-item {
background-color: cornflowerblue;
width: calc(100% - 20px);
height: 100px;
margin: 10px;
display:flex;
justify-content:space-between;
}
.sub{
height:100%;
background:white;
box-sizing:border-box;
}
.one{
width:75%;
border:1px solid green;
}
.two{
width:25%;
border:1px solid red;
}
.subb{
width:33%;
background:white;
height:100%;
}
<div class="flex-container">
<div class="flex-item">
<div class="sub one">sub 1 </div>
<div class="sub two">sub 2 </div>
</div>
<div class="flex-item">
<div class="subb s3">sub 3 </div>
<div class="subb s4">sub 4 </div>
<div class="subb s5">sub 5 </div>
</div>
</div>
You can use Bootstrap to do this.
Bootstarp is a Powerful css framework which enables web developer's
to do stuff like these(dividing screens etc).
Bootstrap is very easy to learn and implement.
You can start Learning Bootstrap here
I have a HTML structure with given CSS.
Both caption and progress elements should be rendered in same line. caption elements should not have fixed width and progress elements should fill up the rest of the space next to caption based on their inline-set width, which means that every progress element will have a different total pixel-width but should fill up only the given percentage of available space.
HTML structure and CSS rules can be changed in any way.
Is it possible to solve this problem with CSS only?
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.caption {
float: left;
}
.progress {
height: 14px;
border: 1px solid white;
border-radius: 4px;
background-color: green;
overflow: hidden;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text: </div>
<div class="progress" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text: </div>
<div class="progress" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
Have you considered using Flexbox?
Just add this rule:
.row {
display: flex;
}
If your are concerned about browser support, an alternative would be using display:table. You should change your markup and CSS, like this:
.table {
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
padding: 15px;
width: 280px;
}
.inner-table {
display: table;
}
.row {
display: table-row;
}
.caption {
display: table-cell;
white-space: nowrap;
width: 1%;
}
.progress {
background-color: green;
border: 1px solid white;
border-radius: 4px;
display: table-cell;
height: 14px;
}
.value {
margin-left: 5px;
display:block;
width:0;
overflow: visible;
}
<div class="table">
<div class="inner-table">
<div class="row">
<div class="caption">Short text: </div>
<div style="width:1.65%" class="progress">
<span class="value">1.65</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">A bit longer text: </div>
<div style="width:100%" class="progress">
<span class="value">100.00</span>
</div>
<div class="remainder"></div>
</div>
</div>
<div class="inner-table">
<div class="row">
<div class="caption">X: </div>
<div class="progress" style="width:45.50%">
<span class="value">45.50</span>
</div>
<div class="remainder"></div>
</div>
</div>
</div>
Please try this - padding-right: 5px; display:inline; add these properties in progress class and also remove width in progress.
Well, just for the future reference, I was playing a bit with the flexbox thingie and came up with this:
.table {
padding: 15px;
width: 280px;
border: 1px solid black;
font-family: sans-serif;
font-size: 12px;
}
.row {
display: flex;
}
.caption {
margin: 1px 5px 1px 0;
}
.progress {
flex-grow: 1;
margin: auto;
}
.progress-content {
height: 14px;
border-radius: 4px;
background-color: green;
}
.value {
margin-left: 5px;
}
<div class="table">
<div class="row">
<div class="caption">Short text:</div>
<div class="progress">
<div class="progress-content" style="width:11.65%">
<span class="value">11.65</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">A bit longer text:</div>
<div class="progress">
<div class="progress-content" style="width:100%">
<span class="value">100.00</span>
</div>
</div>
</div>
<div class="row">
<div class="caption">X:</div>
<div class="progress">
<div class="progress-content" style="width:45.50%">
<span class="value">45.50</span>
</div>
</div>
</div>
</div>
If I get a solution without flexbox, will accept it as an answer :)