I'd like to have my span with number "30" with the same height of the vertical line of the div that contains it.
#divDay {
font-family: Arial;
font-size: 44px;
border-right: 2px solid #000;
margin-bottom: 6px;
margin-top: 10px;
height: 100%
}
#divDate {
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
https://jsfiddle.net/h1m80Lv8/
Big thanks for any help.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#divDay {
font-family: Arial;
height: 100%
}
#divDate {
border-left: 2px solid #000;
font-family: Arial;
font-size: 18px;
margin-bottom: 6px;
margin-top: 10px;
}
#divDay span { position:absolute;font-size: 72px;margin-top:-15px;}
#divHeader{
border-bottom: 2px solid #000;
}
<div class="row">
<div id="divHeader" class="col-xs-12">
<div id="divDay" class="col-xs-2">
<span>30</span>
</div>
<div id="divDate" class="col-xs-10">
<div class="row">
<span style="margin-left: 8px">Monday</span>
</div>
<div class="row">
<span style="margin-left: 8px">April 2016</span>
</div>
</div>
</div>
</div>
Then you need to give the span "display: block;"
#divDay>span {
display: block;
}
Check Fiddle here
More options:
<span style="padding: 6px;">30</span>
Or:
<span style="display:inline-block;">30</span>
Related
I'm trying to center some divs within another div for a webapp I'm making. I'm using the bootstrap 3 framework, but cannot get the divs to center vertically.
HTML:
<body>
<div id="container-main" class="container" align="center" style="min-height:100%">
<div class="row">
<div id="player-page-top" class="container">
<div id="player-page-summoner" class="container-fluid">
<h1>
<img src="http://i.imgur.com/eDeFxAe.png"> Name
</h1>
<div id="player-page-ranks">
<ul class="ul-ranks">
<li class="ranks">S3 Silver</li>
<li class="ranks">S4 Gold</li>
<li class="ranks">S5 Diamond</li>
<li class="ranks">S6 Master</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div id="player-page-left" class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
Leagues
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Champion Stats
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div id="player-page-right" class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Recent Matches
</div>
<div class="panel-body">
<div class="player-match container-fluid" align="left">
<div class="championdetails col-md-4">
<div class="champimage">
<img src="http://i.imgur.com/CWlqNvT.png">
</div>
<div class="summonerspells">
<div class="player-match-spell">
<img src="http://i.imgur.com/rTpkXlb.png">
</div>
<div class="player-match-spell">
<img src="http://i.imgur.com/nXFjz2w.png">
</div>
</div>
<div class="keymastery">
<img src="http://i.imgur.com/b5lszzu.png">
</div>
</div>
<div class="score col-md-2">
<div class="kda .text-center">
10 / 7 / 12
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS:
h1,
h2,
h3,
h4,
h5 {
font-family: "source sans pro", "proxima-nova", sans-serif;
color: #4b4b4b;
}
#media (min-width: 1200px) {
.container {
max-width: 960px;
}
}
.holder {
height: 100%;
width: 100%;
display: block;
}
.match-middle {
display: inline-block;
vertical-align: middle;
float: none;
}
.player-match {
border: solid 1px #ddd;
padding-top: 7px;
padding-bottom: 7px;
}
.championdetails,
.score {
padding-left: 0px;
padding-right: 0px;
text-align: center;
height: 100%;
}
.summonerspells,
.champimage,
.keymastery {
display: inline-block;
vertical-align: middle;
text-align: center;
}
.player-match-spell {
display: block;
margin-bottom: 2px;
}
.summonerspells img,
.keymastery img {
height: 30px;
width: 30px
}
.champimage img {
height: 60px;
width: 60px;
border-radius: 40px;
}
#player-page-left,
#player-page-right {
/*border: 1px solid grey; */
}
#gameplay-baseball-field {
padding-right: 10px;
padding-left: 10px;
}
#player-page-top {
margin: 20px 0 20px 0;
}
#player-page-top img {
width: 60px;
height: 60px;
border-radius: 8px;
}
.ul-ranks>.ranks {
display: inline-block;
color: #4b4b4b;
background: #e0e3e3;
padding: 0 4px 0 4px;
margin: 3px 2px 0px 2px;
border-radius: 4px;
}
.ul-ranks {
-webkit-padding-start: 0px;
}
JSFiddle
I'm trying to center the "score" and "championdetails" divs vertically inside the "player-match" div. I can't get it to center without it skewing the other divs.
I'm trying to create CSS styles that LOOK like a flip counter but don't actually function as one. I've got the general look and feel figured out, but I can't seem to get my box-shadow to overlap the display number.
This is what I have so far:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>
Like I said, my biggest issue is that I can't get my .shadow div to show up on top of the number.
Add "position: relative" to .shadow for the z-index to kick in:
.numberwrapper {
width: 50px;
height: 90px;
background-color: black;
border-radius: 5px;
position: relative;
display: inline-block;
}
.shadow {
width: 100%;
height: 50%;
z-index: 100;
box-shadow: 0px 5px 4px -2px #888888;
position: relative;
}
.number {
font-family: 'Tahoma', sans-serif;
top: -90;
color: #ffffff;
font-size: 85px;
line-height: 0px;
text-align: center;
}
.bigcomma {
font-family: 'Tahoma', sans-serif;
font-size: 85px;
color: black;
}
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
1
</div>
</div>
<span class="bigcomma">,</span>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
2
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
3
</div>
</div>
<div class="numberwrapper">
<div class="shadow">
</div>
<div class="number">
4
</div>
</div>
I have these text which I added hover to them, But I want the border (border: 2px solid grey) to be limited around the text and not the entire box, how is it possible?
jsFiddle
.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
}
.eachTitle:hover {
border: 2px solid grey;
cursor: pointer;
}
<div class="eachTitle" id="menu">Our Menu</div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;">Gallery</div>
<div class="eachTitle" id="map" style="margin-left: 160px;">Where are we?</div>
<div class="eachTitle" id="about" style="margin-left: 240px;">About us</div>
.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
}
.hoverspan:hover {
border: 2px solid grey;
cursor: pointer;
}
<div class="eachTitle" id="menu"><span class="hoverspan">Our Menu</span></div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span class="hoverspan">Gallery</span></div>
<div class="eachTitle" id="map" style="margin-left: 160px;"><span class="hoverspan">Where are we?</span></div>
<div class="eachTitle" id="about" style="margin-left: 240px;"><span class="hoverspan">About us</span></div>
Wrap each element in span and apply border to that element.
.eachTitle {
text-align: left;
font-size: 50px;
font-family: "riesling";
color: #80FF00;
cursor: pointer;
}
.eachTitle span {
border: 2px solid transparent;
}
.eachTitle:hover span {
border-color: grey;
}
<div class="eachTitle" id="menu"><span>Our Menu</span>
</div>
<div class="eachTitle" id="gallery" style="margin-left: 80px;"><span>Gallery</span>
</div>
<div class="eachTitle" id="map" style="margin-left: 160px;"><span>Where are we?</span>
</div>
<div class="eachTitle" id="about" style="margin-left: 240px;"><span>About us</span>
</div>
<div id="menu"><span class="eachTitle">Our Menu</span></div>
See jsfiddle
My title box is too wide. It should only be as wide as the title-text inside it called "WEBSITE TITLE".
Is it possible to get my padding-right to be the same as my current padding-left which would be around 5px?
FIDDLE HERE... FIDDLE
HTML:
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1</p>
<p>text2</p>
</div>
</div>
</div>
</div>
</footer>
CSS:
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
}
.text-center-footer-text h4 span {
color: red;
}
Set display: inline-block or display: table to h4
.text-center-footer-text h4 {
font-size: 20px;
padding: 5px;
color: green;
font-family: Agency FB;
font-weight: normal;
background-color: black;
border: 5px solid blue;
display: inline-block;
}
.text-center-footer-text h4 span {
color: red;
}
<footer class="main_footer">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-fluid">
<div class="text-center-footer-text">
<a href="#">
<h4>WEBSITE<span> TITLE</span></h4>
</a>
</div>
<p>Cool website.</p>
<p>text1
</p>
<p>text2
</p>
</div>
</div>
</div>
</div>
</footer>
try with
display:inline-block.
http://jsfiddle.net/sunp5usj/2/
hope this helps.
Regards!
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 :)