There is some layout:
.block {
background: #aaa;
width: 300px;
height: 150px;
position: relative;
}
.contents {
position: absolute;
bottom: 0;
left: 10px;
line-height: 1;
font-size: 30px;
}
.contens > * {
vertical-align: baseline;
}
.content1 {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
}
.content2 {
font-size: 45px;
}
<div class="block">
<div class="contents">
<span class="content1"></span>
<span class="content2">Foo</span>
<span class="content3">Bar</span>
</div>
</div>
How to make text baseline of .contents be pushed to the bottom of the .block regardless of the font face?
Expected result:
Shifting down the .contents block by bottom: -0.1em; is not suitable because font faces have different baseline level.
Changed line-height to 0, added overflow:hidden
.block {
background: #aaa;
width: 300px;
height: 150px;
position: relative;
overflow:hidden;
}
.contents {
position: absolute;
bottom: 0;
left: 10px;
line-height:0;
font-size: 30px;
}
.contents > * {
vertical-align: baseline;
}
.content1 {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
}
.content2 {
font-size: 45px;
}
<div class="block">
<div class="contents">
<span class="content1"></span>
<span class="content2">Foo</span>
<span class="content3">Bar</span>
</div>
</div>
Just set css line-height: 0;
See : http://codepen.io/ivoglent/pen/KzaWNG
Related
Does anyone know why the image breaks onto a new line when the bubbles sides are constrained?
If I change the bubbles max-width to calc(100% - 70px) the image doesn't break although I get the last word on a new line, which also breaks the style.
body {
background: #f0f3f6;
}
.messages {
width: 100%;
margin-top: 65px;
margin-bottom: 70px;
padding-bottom: 15px;
}
.scrolling {
display: inline-flex;
flex: auto;
overflow-y: auto;
overflow-x: hidden;
}
.scrolled {
flex: 0 1 auto;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
width: 100%;
height: 100%;
margin: 0 15px;
}
.message {
line-height: 1em;
display: block;
margin: 18px 0;
position: relative;
}
.message .image {
position: relative;
display: inline-block;
width: 25px;
}
.message img {
display: block;
width: 100%;
border-radius: 150px;
}
.message .bubble {
font-weight: 300;
position: relative;
vertical-align: text-top;
display: inline-block;
font-size: 0.9em;
padding: 12px 14px;
margin-top: -16px;
margin-left: 20px;
margin-right: 20px;
border-radius: 4px;
max-width: 100%;
}
.message .bubble::after {
content: '';
position: absolute;
top: 12px;
width: 0;
height: 0;
}
.message .time {
color: #838689;
font-weight: 500;
font-size: 0.7em;
position: absolute;
bottom: -1.9em;
width: 100%;
}
.message-left {
flex: 1;
align-self: flex-start;
}
.message-left .time {
left: 50px;
}
.message-left .bubble {
color: #343434;
background-color: #fff;
margin-left: 20px;
}
.message-left .bubble::after {
position: absolute;
left: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #fff;
}
.message-right {
flex: 0;
align-self: flex-end;
float: right;
}
.message-right .time {
text-align: right;
right: 50px;
}
.message-right .bubble {
color: #fff;
margin-right: 20px;
background-color: #0084ff;
}
.message-right .bubble::after {
position: absolute;
right: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #0084ff;
}
<div ref="messages" class="messages scrolling">
<div class="scrolled">
<div class="message message-left">
<span class="time">1 min ago</span>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
<div class="bubble">
This message has the same problem.
</div>
</div>
<div class="message message-right">
<span class="time">1 min ago</span>
<div class="bubble">
A small comment.
</div>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
</div>
<div class="message message-right">
<span class="time">1 min ago</span>
<div class="bubble">
A really long message, designed to be big enough to create a multi-line comment.
</div>
<div class="image">
<img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" />
</div>
</div>
</div>
</div>
Original JSFiddle
The message element is display: block.
If you use display: flex instead, the image and text are forced to remain on a single line (because a default setting of a flex container is flex-wrap: nowrap).
revised demo 1
If you don't want the images to shrink, add flex-shrink: 0 to the items. (By default, flex items are set to flex-shrink: 1, allowing them to shrink so they don't overflow the container).
revised demo 2
In my first div container, I added a heading 1 tag, gave a border bottom a color of my desire, and added font awesome icon in the middle.
As you can see I had to give a background color on the font awesome to make it appear transparent. but now I have a background image on the second box so I am struggling to achieve the same thing.
How can I do the same on my other div box without affecting the background image
visibility as well as the border bottom from the heading 1?
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
h1.widget_title_1:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
</div>
I suggest you to use font-awesome icons along-with tag as here I have used i tag, it get's easy to align icon i.e. at center of that div tag, just by using text-align:center. Then you can use pseudo selector :before and :after on h1 tag and add that border. Scale to and fro on this jsFiddle and see border doesn't get's attached at certain screen resolution.
.container-1 {
height: 100px;
display: inline-block;
overflow: hidden;
}
.container-1 > .widget_title_1 {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container-1 > .fa {
font-size: 24px;
display: block;
height: 30px;
text-align: center;
}
.container-1 > .widget_title_1:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container-1 > .widget_title_1:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
.container {
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
height: 100px;
overflow: hidden;
}
.container > .widget_title {
font-size: 25pt;
margin: 0;
display: inline-block;
position: relative;
}
.container > .fa {
font-size: 24px;
display: block;
height: 30px;
width: 138px;
text-align: center;
}
.container > .widget_title:before {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
left: 0;
margin-left: -10px;
}
.container > .widget_title:after {
content: "";
position: absolute;
width: 50%;
height: 2px;
background: #111;
bottom: -38%;
margin-right: -10px;
right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<i class="fa fa-angle-down"></i>
</div>
Use :before :after for div for the line.
Create a span tag with the font awesome as shown below.
div.container{
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-position: 50%;
}
div{
position: relative;
height: 100px;
}
h1.widget_title_1{
font-size: 25pt;
display: inline-block;
margin: 0;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #898989;
position: relative;
}
span:after {
position: absolute;
font-family: fontawesome;
display: block;
margin-left: 58px;
margin-top: -7px;
top:40px;
padding: 0 5px;
font-size: 24pt;
color: black;
content: '\f107';
font-weight: 300;
background-color: transparent;
}
div.container:after{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
width: 60px;
}
div.container:before{
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 45px;
left:90px;
width: 60px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container-1">
<h1 class="widget_title_1">
heading 1
</h1>
</div>
<div class="container">
<h1 class="widget_title">
heading 1
</h1>
<span></span>
</div>
I'm trying to create a badge, containing a hexagon with a number in it. The badge/list-item itself would contain some info/name.
this is what I have so far:
.item {
display: block;
background-color: blue;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
position: relative;
width: 65px;
height: 65px;
line-height: 65px;
text-align: center;
color: white;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
left: 30;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 65px;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
This is what I'm trying to achieve:
As you can see, the "blue" background should only start at the tip of the hexagon. Width and height of it, aren't going to change. So now I'm wondering whether it would be easier to use an image or if someone could help me recreate the image, would be fine too :)
Thanks in advance!
Try the flexbox way, it's made for your case since you have three items (medal, title, description) that you want to have vertically aligned in the middle next to each other.
Below is a starting point, you can probably extend that to your needs by yourself.
Please note that I also changed the way the hexagon is created, it's not using an UTF8 character now but simply colored borders. This gives you more control about the size of the actual hexagon shaped medal.
Standing on one of its tips, the height of this hexagon is equivalent with its diameter (d) which in turn is twice as long as one of the six lines (s) forming the hexagon. The width (w) of this hexagon is then: s * sqrt(3) or .5 * d * sqrt(3).
.badge {
height: 64px;
margin-left: 35px;
color: white;
font-family: sans-serif;
background: blue;
border: 1px solid transparent;
display: flex;
align-item: middle;
}
.medal {
position: relative;
margin-left: -30px;
min-width: 75px;
}
.count {
position: absolute;
width: 58px;
text-align: center;
line-height: 64px;
font-size: 30px;
top: -16.74px;
}
h3 {
max-width: 40%;
margin-right: 30px;
font-size: 14px;
}
p {
font-size: .875em;
}
.hexagon {
position: relative;
width: 58px;
height: 33.49px;
background-color: #ff2600;
margin: 14.74px 0 16.74px 0;
}
.hexagon:before,
.hexagon:after {
content: "";
position: absolute;
width: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
}
.hexagon:before {
bottom: 100%;
border-bottom: 16.74px solid #ff2600;
}
.hexagon:after {
top: 100%;
width: 0;
border-top: 16.74px solid #ff2600;
}
<div class="badge">
<div class="medal">
<div class="hexagon">
<div class="count">1</div>
</div>
</div>
<h3>The HEXAGON Badge Quest</h3>
<p>You successfully posted a valid question on Stack Overflow and received an answer.</p>
</div>
Try the following. I haven't tested on mobile. Just chrome at this point, but it should get you close. You'll need to play around with the text somewhat to handle the wrapping and sizing inside the blue bar, but your question was in regards to the badge. The corner effects are clipping the shape by about 10px. So setting a fixed height on the bar and a 10px taller height on the hexagon did the trick. Then just some positioning and margin to move things into position. Good luck.
.item {
display: block;
background-color: blue;
height: 66px;
position: relative;
left: 35px;
width: 100%;
}
.item > span {
color: white;
display: inline-block;
}
.hexagon {
display: inline-block;
position: relative;
width: 66px;
height: 66px;
line-height: 66px;
text-align: center;
color: white;
top: 0;
left: -35px;
}
.hexagon span {
position: absolute;
color: white;
z-index: 2;
width: 66px;
height: 66px;
line-height: 66px;
text-align:center;
left: -0;
}
.hexagon:before {
color: #ef473a;
position: absolute;
content: "\2B22";
font-size: 76px;
z-index: 1;
width: 66px;
height: 66px;
left: 0;
top: -5px;
}
.title {
position: absolute;
font-size: 1.75rem;
top: 12px;
left: 33px;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 20%;
line-height: 18px;
}
.info {
position: absolute;
top: 0px;
left: 20%;
margin: 0;
text-align:center;
display:block;
height: 66px;
width: 70%;
line-height: 66px;
vertical-align: center;
}
<div class="item">
<div class="hexagon"><span>1</span></div>
<span class="title">TEST test</span> <!-- maximum width? > new line -->
<span class="info">something darkside</span>
</div>
I'm trying to make a website, with my basic knowledge, for my mother. But I've tried many things, but I can't get it to work the way I want it to
This is how it now looks:
And this is how I want it to be:
But somehow I can't get it to work. The div isn't positioning where I want it to position.
This is my source code:
JsFiddle
It's about this part that doesn't position properly:
<div class="wrapper_3">
<div class="main_3">
3
</div>
</div>
Thanks in advance for the help! I really can't get it to work.
Add float:left; to wrapper_1 and wrapper_2
after that, use position:relative; to position wrapper_2.
visit this link if you need more information about syntax.
CSS Position Property
Here is your new CSS.
.wrapper_1 { width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
float:left;}
.wrapper_2 {
width: 25%;
display: inline-block;
position: absolute;
margin-left: 16px;
margin-top: 5%;
float:left;
position: relative;
top: 50%;
}
it will be easier if you use bootstrap for your website.
html:
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="logo text-center">logo</div>
</div>
<div class="col-xs-offset-4 col-xs-3 box">2</div>
<div class="col-xs-offset-4 col-xs-3 box">1</div>
</div>
</div>
css:
.logo {
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 15px;
}
.box {
padding: 60px;
background-color: red;
margin-top: 30px;
}
http://jsfiddle.net/souraj/sxuqqqgd/
here you can see the code.
you have to link the bootstrap.css file to work. just visit to getbootstrap.com and see how to link bootstrap.css in your code.add this code to your head section of the code.
enter link description here
Here you go :) I edited your fiddle, Why are you using position:absolute; everywhere? There is no need of absolute positioning in your design.
* {
padding: 0;
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
.main {
position: relative;
width: 100%;
height: 100%;
}
.wrapper_logo {
margin-top: 10px;
margin-left: 10px;
width:20%;
display: inline-block;
position: absolute;
}
.wrapper_logo:after {
padding-top: 45%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_logo {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 10px;
padding-left: 20px;
font-size: 30px;
border-top: 1px solid black;
border-bottom: 1px solid black;
color: black;
vertical-align: middle;
}
.wrapper_1 {
width: 25%;
display: inline-block;
position: relative;
margin-left: 21%;
margin-top: 14%;
clear: both;
}
.wrapper_1:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
clear: both;
}
.main_1 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_2 {
width: 25%;
margin-left:200px;
}
.wrapper_2:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_2 {
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.wrapper_3 {
width: 15%;
float: left;
display: inline-block;
position: absolute;
}
.wrapper_3:after {
padding-top: 56.10%;
/* 16:9 ratio */
display: block;
content: '';
}
.main_3 {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 20px;
font-size: 30px;
background-color: deepskyblue;
color: white;
}
.three {
position: absolute;
background: green;
width: 400px;
top: 10px;
left: 50px;
}
<!DOCTYPE html>
<div class="main">
<div class="wrapper_logo">
<div class="main_logo">
LOGO
</div>
</div>
<div class="wrapper_1">
<div class="main_1">
1
</div>
</div>
<div class="wrapper_2">
<div class="main_2">
2
</div>
</div>
<!-- <div class="wrapper_3">
<div class="main_3">
3
</div>
</div> -->
</div>
The following is my markup:
.play-controls {
.fa-play, .fa-pause {
font-size: 25px;
}
}
.volume-controls {
display: inline-block;
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 100px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
.player {
#album-artwork {
width: 80px;
height: 80px;
vertical-align: middle;
display:inline-block;
margin-right: 10px;
}
.wrapper {
display:inline-block;
.information {
margin-bottom: 5px;
#song-title {
font-size: 22px;
font-weight:bold;
margin-right: 5px;
}
#artist-album {
font-size: 18px;
}
}
.progress-bar {
position: relative;
.overlay {
background-color: $highlight;
height: 10px;
border-radius: 5px;
width: 0px;
position: absolute;
z-index: 15;
}
.background {
background-color: $text-color;
width: 600px;
height: 10px;
border-radius: 5px;
position: absolute;
z-index: 10;
}
.circle {
border-radius: 100%;
position:absolute;
background-color: #fff;
border: 1px solid;
height: 15px;
width: 15px;
z-index: 20;
top: -3px;
}
}
}
}
<div class="play-controls">
<i class="fa fa-play" id="playpause"></i>
</div>
<div class="volume-controls">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
<div class="player">
<img id="album-artwork" src="build/images/guero.jpg">
<div class="wrapper">
<div class="information">
<span id="song-title">Go It Alone</span>
<span id="artist-album">Beck - Guero</span>
</div>
<div class="progress-bar">
<div class="background"></div>
<div class="circle"></div>
<div class="overlay"></div>
</div>
</div>
</div>
The divs with classes background, circle, and overlay in volume-controls are all position: absolute; with volume-controls as position: relative;.
Upon making play-controls, volume-controls, and player inline, play-controls is inline with volume-controls, but volume-controls is overlapping the player.
How would I be able to set everything in one line, without any overlapping?
EDIT: JSFiddle
You could float:left; the 3 main parts or display:inline-block; them the issue the player is over the volume-controls is because of the absolute positioned elements in the volume-controls. You could add a width to volume-controls.
.volume-controls {
display: inline-block;
position: relative;
width:150px;
}
Here is the fiddle