I have tried a lot things but not able to get desired format.
HTML:
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
CSS:
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
}
Output:
What I want:
Decrease the vertical distance between spans with class type-description. I tried using line-height and padding-bottom but could not move it. May be some parent div has display:block.
All type description aligned to left which are now center. If I use it float: left, it ruins the format completely.
Please help.
<div class="usertype">
<div class="type1">
<span class="type-heading">type1 is here</span>
<span class="type-description">10 types have joined</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type2">
<span class="type-heading">type2 is here</span>
<span class="type-description">10 types are there</span>
<span class="type-description">35 type will.</span>
</div>
<div class="type1">
<span class="type-heading">type23 is good</span>
<span class="type-description">50 types are there</span>
<span class="type-description">50 types are there</span>
<span class="type-description">for 2 months</span>
</div>
<div class="type2">
<span class="type-heading">Type4 at last</span>
<span class="type-description">50 types are there</span>
<span class="type-description">makes their first $20</span>
<span class="type-description">50 types are there</span>
<span class="type-description">35 type will.</span>
</div>
</div>
<style>
div.usertype {
margin-top: 1em;
}
div.type1 {
float: left;
margin-left: 2em;
}
div.type2 {
float: left;
margin-left: 2em;
}
span.type-heading {
font-size: 14px;
color: #f7f7f7;
}
span.type-description {
font-size: 14px;
color:#959595;
display: block;
line-height:15px;
}
</style>
Related
For a website I have to display a div with multiple spans inside. Each one contains one character (with a specific colour class). When I use wraps of any kind, they don't recognize the text as whole and wrap on whitespace but rather on single characters (since it is for the computer only one input, that just fits this place)
See image:
It should wrap at "Dieses Maß wird in [WRAP] Zoll angegeben.
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
<span class="green"> </span>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
<span class="green"> </span>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span>
<span class="green"> </span>
<span class="green">i</span>
<span class="yellow-green">n</span>
<span class="green"> </span>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span>
<span class="green"> </span>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
<span class="green">.</span>
</div>
Try wrapping each word in a div:
.colouredAnswer {
display: flex;
flex-wrap: wrap;
}
.green {
color: #008000;
white-space: pre-wrap;
font-size: 1.5em;
line-height: 1em;
}
<div class="colouredAnswer">
<div>
<span class="yellow-green">D</span>
<span class="green">i</span>
<span class="green">e</span>
<span class="yellow">s</span>
<span class="yellow-green">e</span>
<span class="yellow-green">s</span>
</div>
<span class="green"> </span>
<div>
<span class="green">M</span>
<span class="green">a</span>
<span class="green">ß</span>
</div>
<span class="green"> </span>
<div>
<span class="green">w</span>
<span class="green">i</span>
<span class="green">r</span>
<span class="yellow-green">d</span></div>
<span class="green"> </span>
<div>
<span class="green">i</span>
<span class="yellow-green">n</span>
</div>
<span class="green"> </span>
<div>
<span class="green">Z</span>
<span class="yellow-green">o</span>
<span class="green">l</span>
<span class="green">l</span></div>
<span class="green"> </span>
<div>
<span class="green">a</span>
<span class="green">n</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">g</span>
<span class="green">e</span>
<span class="green">b</span>
<span class="green">e</span>
<span class="green">n</span>
</div>
<span class="green">.</span>
</div>
Let's say I have a text and every letter is a span with display: inline-block;:
<div>
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
<span class="item">A</span>
<span class="item">B</span>
</div>
.item {
display: inline-block;
font-size: 70px;
}
By default, if the screen is viewport is smaller it will break on any letter. I would like to break on spaces, but without removing the inline-block as I need it for something else
Here is a solution with the text inside div elements and the following CSS added:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
Demo:
#wrapper {
display: flex;
flex-wrap: wrap;
}
.text-wrapper {
display: flex;
}
.item {
display: inline-block;
font-size: 70px;
}
<div id="wrapper">
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">A</span>
<span class="item">A</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
<span class="item">C</span>
<span class="item">D</span>
<span class="item">E</span>
<span class="item">F</span>
<span class="item"> </span>
</div>
<div class="text-wrapper">
<span class="item">A</span>
<span class="item">B</span>
</div>
</div>
I'm trying to achieve the following:
I'm using float:left to have a span containing the user name floating to the right of the big numbers to the left.
This is what I have so far: https://jsfiddle.net/d00ck/twcmfzo8/2/
body {
font-family: arial;
}
.container {
background-color: white;
padding-bottom: 15px width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-tier {
display: block;
}
.ranking-score {
clear: both;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
I'm obviously missing something important since I can't seem to make the span containing the "1000pts" legend to float to the right of the big number. Any help would be greatly appreciated.
You just need to change
.ranking-tier {
display: block;
}
to this:
.ranking-name {
display: block;
}
Something like this:
HTML:
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
CSS:
body {
font-family: arial;
}
.container{
background-color: white;
padding-bottom: 15px
width: 360px;
}
.position {
clear: both;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
width: 100%;
}
.ranking-position {
font-size: 25px;
float: left;
}
.ranking-score {
clear: both;
}
.ranking-name {
display:block;
}
https://jsfiddle.net/twcmfzo8/5/
First of all add a semicolon in the .container definition in CSS, after the padding-bottom. and add float:right; margin-top:-20px; in .ranking_score
Try this One:
<div class="position">
<div style="display:inline-block; float:left;">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
</div>
<div style="float:right; display:inline-block;">
<span class="ranking-score" style="position:relative; top:20px;">1000pts</span>
</div>
</div>
That's because the float is not tall enough to affect the three spans. You can try forcing some height
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
span {
display: block;
font-size: 16px;
line-height: 1.25em;
height: 1.25em;
}
.ranking-position {
font-size: 25px;
height: 60px; /* 16px * 1.25 * 3 */
float: left;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
<div class="position">
<span class="ranking-position">1</span>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
Or wrap them inside a flock formatting context root:
.container {
font-family: arial;
}
.position {
overflow: hidden;
margin: 10px 0 10px 0;
padding: 0 10px 0 10px;
}
.ranking-position {
font-size: 25px;
float: left;
}
.position > div {
overflow: hidden;
}
span {
display: block;
}
<div class="container">
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">Dorothy Bradley</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
<div class="position">
<span class="ranking-position">1</span>
<div>
<span class="ranking-name">User Name</span>
<span class="ranking-tier">1rs Team All...</span>
<span class="ranking-score">1000pts</span>
</div>
</div>
</div>
How to align others elements with bootstrap btn-group?
<div class="btn-toolbar text-center">
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="font-size:1.5em;"></span>
<label>Title</label>
</div>
<div class="btn-group btn-group-sm pull-right">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
This how looks like, I want to text and icon would be inline.
EDIT:
Now text are inline with buttons but icon aren't.
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
<label style="line-height:30px;">Title</label>
</div>
Please try this:
.glyphicon {
position: relative;
top: -1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: middle;
}
Try this.Adding a span to your label solves most of the problem by aligning label and glyphicon. I guess this is what you wanted.
<div class="btn-toolbar text-center">
<div class="pull-left">
<span class="glyphicon glyphicon-envelope " style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"></span>
<span style="line-height: 30px; font-size: 1.5em; vertical-align: middle;"><label>Title</label></span>
</div>
<div class="btn-group btn-group-sm pull-right">
<span class="glyphicon glyphicon-open"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-edit"></span>
</div>
</div>
I have also created a jsfiddle.
I suspect knowing why it is happening but I need expert knowledge on this issue to fix it because I need to keep the background-image...
I have this first parent div with his children:
<div id="wtf" style="margin-top:5%; display:block; float:left; width:auto; height:auto; background:whitesmoke;">
<div style="width:33%;">
<div class="block">
some content
</div>
</div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
</div>
Right after there is this div that is supposed to be transposed but instead this div goes hiding behind the first one. I suspect it is because the div does not contain any solid object since it only has a background as image instead of img:
<div id="banner_index" class="animated fadeIn">
<br><br>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<fmt:message key='SOMEKEY'/>
</div>
The CSS:
#banner_index{
border-bottom:2px solid whitesmoke;
width:100%;
min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
color:whitesmoke;
}
.banner_message{
font-size:x-large;
padding:1%;
font-family:print clearly;
text-transform: uppercase;
display:block;
}
Add margin-left: -159px;margin-top: 16px; to the div Here is the Updated fiddle
Hi now define your #banner_index clear both; and #wtf{width:100%;}
#banner_index{clear:both;}
#wtf{width:100%;}
#banner_index{
border-bottom:2px solid whitesmoke;
width:100%;
clear:both;
min-height:700px;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-image: url("../images/category/478969.jpg");
background-color:black;
color:whitesmoke;
}
.banner_message{
font-size:x-large;
padding:1%;
font-family:print clearly;
text-transform: uppercase;
display:block;
}
<div id="wtf" style="margin-top:5%; display:block; float:left; height:auto; background:whitesmoke;">
<div style="width:33%;">
<div class="block">
some content
</div>
</div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
<div style="float:left; width:33%;">
<div class="block">
some content
</div></div>
</div>
<div id="banner_index" class="animated fadeIn">
<br><br>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<span class="banner_message">
some msg
</span>
<fmt:message key='SOMEKEY'/>
</div>