I have the next code here:
<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" />
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span>
What I want is to have every span on his own line, more exactly to have span under span. I've tried with <br> or with
style="display:block"
but put my text under image.
This will be the complete HTML code
<div style="float:left;width:50%">
<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" />
</div>
<div style="float:left;width:50%">
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span><br/>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span><br/>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span>
</div>
Please adjust the width according to your requirement.
The simple solution is wrap all spans in one .wrapper like so
.wrapper {
display: inline-block;
vertical-align: middle;
}
.wrapper > span {
display: block;
}
<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" />
<div class="wrapper">
<span class="username no-margin-bottom">AXXX</span>
<span class="secondary-text no-margin-bottom">Tsad </span>
<span class="secondary-text no-margin-bottom">zxzxxz </span>
</div>
Wrap your spans in a container...
jsfiddle
.span-container {
display: inline-block;
}
.span-container span {
display: block;
}
<img class="circular-portrait-user" style='vertical-align:middle;width:25%;' src="http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg" />
<div class="span-container">
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span>
</div>
I put your 3 spans inside a div and then gave the div a background-image:;.
div.circular-portrait-user {
color:#fff;
height:100px;
width:100px;
background:url(http://ichef.bbci.co.uk/news/624/cpsprodpb/C18B/production/_87974594_32be803c-efcf-47ef-9a17-197106074016.jpg);
background-size:cover;
box-sizing:border-box;
text-align:center;
padding:1em;
}
<div class="circular-portrait-user">
<span style="vertical-align: middle" class="username no-margin-bottom">AXXX</span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">Tsad </span>
<span style="vertical-align:middle" class="secondary-text no-margin-bottom">zxzxxz </span>
</div>
Related
I would like my button to display as a block but the button sways to the right at times and I am not sure why
I have tried various styling edits but none seem to work
What is the problem with my code?
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
This is what I get at times:
What I want
To adjust the code you provided, I would add these styles to the <a> tag where the button you want to style is:
display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none
This is the final result:
<div style="position:relative; overflow:visible">
<div id="googleMap" ng-bind-html="maps" style=" white-space: nowrap;border:none"></div>
<div style="display:block;margin: 0 auto;">
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto; margin-bottom:10px;margin-top:8px;height:70px;border: none">
<a ng-href="https://maps.google.com/?q={{StoreModel.StoreAddress}}" target="_blank">
<i class="fa fa-map-marker" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span ng-bind-html="StoreModel.StoreAddress"></span>
</a>
</button>
<button disabled style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 0 auto;margin-bottom:10px;height:70px;border: none">
<i class="fa fa-phone" style="font-size:50px;float:left;transform: translate(0, 0);"></i>
<span style="position:center;">
Phone
<span ng-if="isMobile == true">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
<span ng-if="isMobile == false">
{{StoreModel.StoreMainPhone | uppercase}}
</span>
</span>
<br />
<span style="position:center">Fax {{StoreModel.StoreMainFax}}</span>
</button>
<a href="~/Appointment/Index/{{DiamondDetail.DiamondID}}" style="display:block; font-size:15px;width:250px;background-color: lightgrey; margin: 10px auto 20px; height:70px;border: none">
<md-button style="display:block;
background-color: dodgerblue;
margin: 0 auto;
margin-bottom:10px;
height:80px;"
onclick="window.location.href='~/Appointment/Index.cshtml'"
class="button">
<span ng-bind-html="Appointment Request"
style="word-wrap: break-word;white-space: normal;">
Appointment Request
</span>
</md-button>
</a>
<button disabled style="display:block; font-size:15px;width:250px;min-height:80px; background-color: lightgrey; margin: 10px auto;height:auto;white-space: normal;word-wrap: break-word;border: none">
<span style="float:left;font-size-adjust:inherit;">Store Hours:</span>
<br />
<div ng-bind-html="StoreModel.StoreHours" style="word-wrap: break-word;white-space: normal;"></div>
</button>
</div>
</div>
Hope that this is what you were asking for.
I have the following html-code:
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
My problem is that sometimes the text is wrapped before €, so I get:
My really super product 19,99
€
I would prefer:
My really super product
19,99 €
The problem is: I only could add an additional tag arround this code but couldn't change the code itself (because it's generated by a 3rd-party-tool). Okay, it would be possible somehow replaceing the output, but the real code is more complicated than this example.
So is it possible to prevent the wrap between price and currency only by CSS?
Added: Sorry, I forgot to mention. It should be possible to get
My really super product 19,99 €
in one line as well if there is enough space in width.
Maybe something like this will suit
Variant 1
.wrapper {
position: relative;
}
.wrapper .price {
padding-right: 20px;
}
.wrapper .currency {
position: absolute;
margin-left: -15px;
}
<div class="wrapper">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 200px; background-color: yellow;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 155px; background-color: #0f0;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 140px; background-color: #99f;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
Here .wrapper is not really necessary. In most cases you may add the style just for .price and .currency. Try to inject the solution into you layout and review.
Variant 2
.price {
padding-right: 1em;
}
.currency {
margin-left: -1em;
}
<div>
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div style="width: 200px; background-color: yellow;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div style="width: 155px; background-color: #0f0;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
<br>
<div class="wrapper" style="width: 140px; background-color: #99f;">
<span class="product">
My really super product
</span>
<span class="price">19,99</span><span class="currency"> €</span>
</div>
U have to use <br/> may this will help you to add the data like that
<span=class="">
My really super product</Span><br/>
<spa="">19,99</span><span="">$</span>
I've tried col-centered class, margin:0 auto, but I need to see the width of the containing div to a set pixel width...I don't want that....has to be responsive also.
The pen is here:
http://codepen.io/Satearn/pen/WpzJYy
.center-portfolio
{
margin:0 auto;
padding-left:20px;
width:800px;
}
In this case you could add text-align: center; to .center-portfolio and add .center-portfolio > p { display: inline-block;}. But you would have to add additional margin-top to .center-portfolio
View on Codepen
You can check https://css-tricks.com/centering-css-complete-guide/ for more info on centering things in CSS, very cool article.
P.S. You might want to change the width to max-width
APPLY THE CSS
.glyphicon.glyphicon-print ,
.glyphicon.glyphicon-globe ,
.glyphicon.glyphicon-tag ,
.glyphicon.glyphicon-plus-sign ,
.glyphicon.glyphicon-tint
{
font-size: 5vw;
color:#88BA00;
}
.center-portfolio
{
margin:0 auto;
display:block;
padding-left:20px;
text-align:center;
}
p
{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="center-portfolio">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>
Try This HTML5 markup for Bootstrap based coding
.glyphicon.glyphicon-print,
.glyphicon.glyphicon-globe,
.glyphicon.glyphicon-tag,
.glyphicon.glyphicon-plus-sign,
.glyphicon.glyphicon-tint {
font-size: 5vw;
float: left;
color: #88BA00;
}
.center-portfolio {
margin: 0 auto;
padding-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="center-portfolio">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>
</div>
</div>
</div>
I am trying to get the horizontal scroll for the div slots. Below is my code.
Slots is the container with 200 px width, which will display 2 slots,
Each slot of width 100 px.
I want to display horizontal scroll when number of slots is more than 2.
Please help me out.
<div class="slots">
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
<div class="slot">
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
<span class="slot-busy"> </span>
</div>
<div class="slot">
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
<span class="slot-free"> </span>
</div>
</div>
.slots{
width: 200px;
overflow-y: hidden;
display: inline-table;
height: 25px;
overflow: auto;
}
.slot{
width:100px;
height:25px;
display: inline-block;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
Here you go mate...
Fiddle : http://jsfiddle.net/logintomyk/6K6f8/1/
CSS
.slots{
width: 200px;
height: 50px;
overflow-x:scroll;
white-space: nowrap;
}
.slot{
height:25px;
width:100px;
display: inline-block;
cursor:pointer;
margin-left:20px;
}
.slot-free, .slot-busy {
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
padding: 0;
}
HTML
<div class="slots">
<div class="slot">
<span class="slot-free"> span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> ggvg</span>
</div>
<div class="slot">
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">span </span>
<span class="slot-busy">dfffff </span>
</div>
<div class="slot">
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free">span </span>
<span class="slot-free"> sdfdfds</span>
</div>
</div>
I would like to know if its possible to move that bar a bit under, the bar is wrapped with a <p> tag.
<div class="span9 well">
<div class="row-fluid">
<div class="row-fluid">
<div class="span2">
<img src="dummy_image.jpg" class="img-polaroid">
</div>
<div class="span7">
<h2>Title</h2>
<p>Texttttttttttttttttt.</p>
<p >
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
</div>
</div>
</div>
screen shot of the actual block i wanna change:
You can always name your <p> tag like so:
<p class="bar">
<span class="label label-info">Genre</span>
<span class="label label-warning">
<i class="icon-star"></i>
...<!-- stars -->
</span>
<span class="label label-success">Yes</span> / <span class="label label-important">No</span>
</p>
then use .bar {margin-top: 20px;} in your css code, it's not bad behaviour
Use position:absolute
.row-fluid{position:relative; width:450px; background:red; overflow:auto}
.span2{display:inline; float:left}
.span7{display:inline; }
.row-fluid > p{position:absolute; bottom:0; left:170px}
DEMO