bob i {font-size: 10px} shows a neat horizontal block, and the name titles are aligned. When I increase the font-size for bob i to 30px, then the two spans are not neatly horizontally aligned anymore. The icon is not that big so why does it make the bob span block blow up? Is it possible to have bob i {font-size: 40px} and keep everything neatly horizontally aligned?
.joe span
{
display: block;
padding: 20px;
text-align: left;
}
.pete
{
width: 30%;
float: left;
background-color: green;
}
.bob
{
width: 10%;
float: left;
background-color: blue;
}
.bob i {
font-size: 30px;
padding-left: 10%;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span>
<span class="bob">Bob<i class="icon">#</i></span>
</div></div>
Just change these class property
.joe span {
display: flex;
align-items: center;
padding: 20px;
}
.bob i {
font-size: 40px;
padding-left: 10%;
line-height: 0;
}
.joe span {
display: flex;
align-items: center;
padding: 20px;
}
.pete
{
width: 30%;
float: left;
background-color: green;
}
.bob
{
width: 10%;
float: left;
background-color: blue;
}
.bob i {
font-size: 40px;
padding-left: 10%;
line-height: 0;
}
<div class="wrapper"><div class="joe"><span class="pete">Pete</span>
<span class="bob">Bob<i class="icon">#</i></span>
</div></div>
Related
I have a div within a div that I am trying to vertically align center. I have tried vertical-align, position: relative; top: 50%, and margin: auto; to no avail. Here is the code:
.main {
font-family: "adobe-garamond-pro";
padding: 40px 0px;
color: rgba(26,26,26,0.7)
}
.intro-title {
width: 90%;
padding: 40px;
color: rgba(26,26,26,0.9);
}
.center {
margin: 0px auto;
}
.three-quarter-width {
width: 75%;
text-align: center;
}
.two-third-width {
width: 66%;
}
.half-width {
width: 50%;
}
.whitespace {
height: 7em;
}
.about {
overflow: hidden;
background-color: red;
}
.about-image {
height: auto;
float: left;
}
.about-text {
height: 100%;
float: right;
background-color: blue;
}
.inline {
display: inline;
}
.helvetica {
font-family: helvetica;
}
<div class="about three-quarter-width center">
<img src="rainbow.jpg" class="about-image half-width inline">
<div class="about-text half-width inline">
<p class="helvetica gray-spaced center">ABOUT</p>
<p class="image-text center three-quarter-width">Find out about our organization,
mission, our methods, and the results of our decades of advocacy.</p>
<p class="learn-more-button center">LEARN MORE</p>
</div>
</div>
I would like the div about-text to be vertically aligned within the div about but haven't been able to with the above methods. I'm using chrome so that might have something to do with it.
Just use css flexbox to vertical align elements.
.vertical-align {
display: flex;
align-items: center;
justify-content: center;
/* Just for the demo */
background: red;
height: 100px;
}
.i-am-centered {
background: yellow;
}
<div class="vertical-align">
<div class="i-am-centered">
I am vertical aligned to th center
</div>
</div>
So it looks like this:
this is the example code of a message:
.allMsg {
width: 100%;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
</div>
How can i make the border as big as the text inside ... I thought the padding was going to work but unfortunately it didn't so please help me.
It's possible if you wrap your messages inside another element. So let's say all messages have a full-width element, but friends messages will aligned to the left and have a blue background, while yours will aligned to the right and have a green background. If you don't want to change your markup so much, the easiest is to wrap your messages inside a span, than you doesn't need to change anything else in your html.
.allMsg {
width: 100%;
}
.self span, .friend span {
border-radius: 1rem;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.self span {
background-color: #28a745;
}
.friend span {
background-color: #2845a7;
}
.self {
text-align: right;
}
.friend {
text-align: left;
}
<div class='allMsg'>
<p class='chatMsg friend'>
<span>hello</span>
</p>
<p class='chatMsg self'>
<span>hy</span>
</p>
<p class='chatMsg friend'>
<span>how are you friend?</span>
</p>
<p class='chatMsg self'>
<span>i'm fine thanks</span>
</p>
</div>
You could use flexbox on the container:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
Example:
.allMsg {
width: 100%;
display: flex;
flex-flow: column nowrap;
align-items: flex-end;
}
.self {
border-radius: 1rem;
background-color: #28a745;
text-align: right;
padding-left: 5px;
padding-right: 5px;
margin-left: 5px;
margin-right: 5px;
}
.friend {
text-align: left;
}
#chatWith {
text-align: center;
font-family: sans-serif;
font-size: 40px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
<div class='allMsg'>
<p class='self chatMsg'>Hello</p>
<p class='self chatMsg'>This is a test</p>
</div>
I'm trying to make a simple game, and I've run into few problems I can't seem to solve:
I can't center vertically floated elements (.stat and .clickable).
Total height of all elements should fit exactly into screen height, however it goes beyond it.
Images differ a bit in their width depending on value I give them (at my screen they look the same at 32% or 29%, but on 30% upper one has slightly wider (and a bit blurry) right border).
Height property of img elements has no effect.
Here's my code (Images are 450px wide squares):
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
I don't know what you mean with your first question. However I can help you with the second. I made some small changes to your code, but I don't have the image. Look at the code bellow. The game container now is set to max-height: 100%; and height: 100vh; that should help. (100vh means the hole page. I also made body overflow: hidden;, because I think scrolling isn't necessary. I made the buttons container to the bottom of the page.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
overflow:hidden;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
}
.buttons {
bottom: 0;
clear:both;
}
#score {
float: left;
margin-left: 5%;
}
#hp {
float: right;
margin-right: 5%;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
max-height: 100%;
height: 100vh;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
height: 50%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
For the third question, we don't have the images...
For the height property try display: block; and no width then. Check your classed normally it should work.
I hope I helped you !!!
You can take advantage of flexbox in this case (note the scroll is generated by the snippet's viewport height, ideally it wouldn't even overflow, but if it did, overflow: auto is set just to handle it, you can comment it though based on your benefit):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}
.hands {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
/* comment if content will never overflow */
overflow-x: auto;
}
.buttons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.clickable {
float: left;
width: 29.33%;
margin: 1%;
padding: 1%;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
/*text-align: center;*/
margin: auto;
background-color: #999999;
display: flex;
flex-flow: column wrap;
justify-content: center;
}
img {
width: 32%;
display: block;
margin: auto;
}
/*#score {
float: left;
margin-left: 5%;
}*/
/*#hp {
float: right;
margin-right: 5%;
}*/
/*.stats:after {
content: "";
display: block;
clear: both;
}*/
/*#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}*/
/*#playerHand {
margin-bottom: 5%;
}*/
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="paper.png">
<img id="playerHand" src="scissors.png">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
Please check this code. I solve your question 1 and 2. I don't understand about your image issue.
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: #e6e6e6;
}
.statsBar,
.buttons {
display: table;
color: #333333;
font-family: Impact, Charcoal, sans-serif;
text-transform: uppercase;
background-color: #bfbfbf;
height: 13%;
width: 100%;
}
#score,
#hp{
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#score {
/*float: left;
margin-left: 5%;*/
text-align: left;
}
#hp {
/*float: right;
margin-right: 5%;*/
text-align: right;
}
.stats:after {
content: "";
display: block;
clear: both;
}
.clickable {
/*float: left;*/ /*Float sould not use here */
display: table-cell;
width: 29.33%;
/*margin: 1%;
padding: 1%;*/
border: 5px solid #bfbfbf;
vertical-align: middle;
background: #f2f2f2;
}
.game {
width: 50%;
height: 100%;
text-align: center;
margin: auto;
background-color: #999999;
}
img {
width: 32%;
display: block;
margin: auto;
}
#enemyHand {
transform: rotate(180deg);
margin-top: 5%;
}
#playerHand {
margin-bottom: 5%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='game.js'></script>
</head>
<body>
<div class="game">
<div class="statsBar">
<p id="score" class="stat">score: 0</p>
<p id="hp" class="stat">hp: 3</p>
</div>
<div class="hands">
<img id="enemyHand" src="http://placehold.it/450x450">
<img id="playerHand" src="http://placehold.it/450x450">
</div>
<div class="buttons">
<a id="paper" class="clickable" onclick="document.getElementById('playerHand').src='paper.png'">Paper</a>
<a id="rock" class="clickable" onclick="document.getElementById('playerHand').src='rock.png'">Rock</a>
<a id="scissors" class="clickable" onclick="document.getElementById('playerHand').src='scissors.png'">Scissors</a>
</div>
</div>
</body>
</html>
What I'm trying to achieve:
I'm trying to position three elements alongside each other. Two content boxes with a dividing div in between. I am getting overflow problems with the right content box. It always appears below the two other divs.
It may be a problem with how the centre divider is positioned but I can't think of a better method of positioning it.
Codepen of what I currently have:
http://codepen.io/anon/pen/vNNKpB?editors=110
Here's my CSS:
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
margin-left: 49.95%;
margin-right: 49.95%;
height: 300px;
background-color: darkgray;
}
.left-contact {
width: 500px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-contact {
float: right;
width: 500px;
height: 300px;
background-color: lightgrey;
}
If you use width in % for .container you should use width in % for the child elements. Otherwise, you always will have errors on the different screen size.
The new way of the positioning you want is to use flexbox without floats:
.container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
/* ... another styles here */
}
Demo: http://codepen.io/anon/pen/RWWROr
But if you use flexbox don't forget about browser prefixes, you can get them here http://autoprefixer.github.io/
You can add another div inside the .centre-divider div which will be the vertical line, then just set a display: inline-block; on .centre-divider:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 50%;
display: inline-block;
height: 300px;
}
.centre-divider > div {
width: 1px;
height: inherit;
background: gray;
margin: 0 auto;
}
.left-box {
width: 25%;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: right;
width: 25%;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider">
<div></div>
</div>
<div class="right-box">
</div>
</div>
</div>
</body>
You will have to adjust the widths but you get the idea.
Just Add this CSS:
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
width: 70%;
float:left;
margin-left: 15%;
margin-right: 15%;
}
.centre-divider {
width: 0.1%;
float:left;
margin-left: 5%;
margin-right: 4%;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 400px;
float: left;
height: 300px;
background-color: lightgray;
}
.right-box {
float: left;
width: 400px;
height: 300px;
background-color: lightgrey;
}
you can use display: inline-block; instead of floating the elements. when you text-align: center on the .contact div, then the .left-box, .right-box, and .centre-divider are automatically centered in spacing (so you dont have to calculate it yourself, and it still is responsive to the width of the screen.
body {
font-family: Garamond, serif;
}
h1 {
font-family: Minion Pro, serif;
text-align: center;
font-size: 80px;
}
.contact {
height: 300px;
}
.container {
text-align: center;
}
.centre-divider {
width: 2px;;
display: inline-block;
margin-left: 50px;
margin-right: 50px;
height: 300px;
background-color: darkgray;
}
.left-box {
width: 200px;
display: inline-block;
height: 300px;
background-color: lightgray;
}
.right-box {
display: inline-block;
width: 200px;
height: 300px;
background-color: lightgrey;
}
<body>
<header>
<h1>Heading</h1>
</header>
<div class="contact">
<div class="container">
<div class="left-box">
</div>
<div class="centre-divider"></div>
<div class="right-box">
</div>
</div>
</div>
</body>
When I view the following code I see three 25% width divs but they're all aligned left. I'm trying to center the three without setting static px sizes of the divs. The .icon-container div is rendering as width: 75% and height: 17px. Am I missing something simple?
.greybox {
width: 100%;
background-color: #a99e93;
padding: 0 5%;
margin: 0 auto 1rem auto;
}
.icon-container {
margin: 0 auto;
text-align: center;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
}
.feature-icon img {
margin: 0 auto;
}
.feature-icon p {
font-size: 1.2rem;
color: white;
padding-top: .8em;
}
<div class="greybox">
<div class="icon-container">
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/commercial.png" style="height:128px;width:128px">
<p>Commercial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/industrial.png" style="height:128px;width:128px">
<p>Industrial</p>
</div>
<div class="feature-icon">
<img src="http://www.pickeringusa.com/wp-content/uploads/2015/01/information.png" style="height:128px;width:128px">
<p>More Information</p>
</div>
</div>
</div>
Try making these changes:
.icon-container {
margin: 0;
text-align: center;
width: 100%;
}
.feature-icon {
width: 25%;
height: 100%;
display: inline-block;
padding-top: 2em;
padding-bottom: 2em;
text-align: left;
}
Edit: The text-align: left is only required if you dont want the text center aligned
You can try this:
.icon-container {
display:table;
width:100%;
}
.feature-icon {
display:table-cell;
}