I can't seem to understand why certain span properties (in particular, the width and text-align of "controller-row-number" and "controller-row-name"):
#controller {
width: 250px;
float: left;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.controller-row {
background-color: blue;
}
.controller-row-number {
background-color: yellow;
width: 60px;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
text-align: left;
padding: 0 0 0 0;
}
Are being ignored in the following code:
<div id="controller">
<div class="controller-row">
<span class="controller-row-number">1</span>
<span class="controller-row-name">First Name</span>
</div>
<div class="controller-row">
<span class="controller-row-number">2</span>
<span class="controller-row-name">Second Name</span>
</div>
</div>
I have a JSFiddle located here:
http://jsfiddle.net/WZFJD
Can anyone point me to the correct edits to make, so that the styles are adhered?
Thanks!
display: inline-block; to the rescue !
Fiddle
.controller-row-number {
background-color: yellow;
width: 60px;
display: inline-block;
text-align: right;
padding: 0 15px 0 0;
}
.controller-row-name {
background-color: orange;
width: 150px;
display: inline-block;
text-align: left;
padding: 0 0 0 0;
}
span elements are by default inline, so you have to make them block, or inline-block if you want your width rule to be applied, otherwise they just take up enough width to fit. The width and height of display: inline; elems cannot be set as you tried to do. Tho you can fake the height using line-height.
Spans are displayed as inline by default, if you want to specify a width you'll have to set display: inline-block.
width cannot be applied to an inline element like a <span>. You will have to also style your spans of class controller-row-number and controller-row-name to be display: inline-block
Related
I have the div block as shown below:
<div className={'row ge-container'}>
<div className={'a-span3 ge-container-navigation'}>
hello
</div>
<div className={'a-span9 ge-container-content'}>
Okay
</div>
</div>
And the css as
.ge-container {
min-height: 300px;
}
.ge-container-navigation {
background-color: $light-gray-background;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}
The child is not inheriting the height of parent. I tried the solution by setting min-height of child to inherit by seeing some answers. But, that fails when the height goes above 300px.
Can anyone help with this
Please use display: flex; CSS in .ge-container parent.
This code makes a child flex-box of height 100% using CSS only.
.ge-container {
min-height: 300px;
display: flex;
}
Updated snippet :-
.ge-container {
min-height: 300px;
display: flex;
}
.ge-container-navigation {
background-color:red;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}
<div class="row ge-container">
<div class="a-span3 ge-container-navigation">
hello
</div>
<div className="a-span9 ge-container-content">
Okay
</div>
</div>
You can also try it with javascript/jquery
$('.ge-container-navigation').height($('.ge-container'));
and, if you want it to update itself in rotation mode:
setInterval(function(){
$('.ge-container-navigation').height($('.ge-container'));
}, 10);
Thanks
I am dealing with text blocks (background blocks over text) and face some issues with paddings on new line. The problem occurs when the browser(e.g. mobile) cuts the text into to two lines due to lack of width. text then looks like this:
I don't really know how to set a padding css on the end of the new lines, since it could break up anywhere of the sentence. You could say put a span on it with padding, but it is not fixed where the line will break down. It depends on the width. Any recommendations?
You could apply display: inline-block but that will turn the background color into an ugly box which doesn't look as nice as having an exact width background for each line. Unfortunately CSS doesn't let us target individual lines except for the first one.
If you don't mind getting a little "creative" (or hacky) you could wrap each word in its own element in the backend or using JavaScript and apply the background color to those elements. Adjust the parent's word-spacing accordingly to eliminate gaps.
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 500px;
display: inline-block;
word-spacing: -15px;
position: relative;
padding-left: 20px;
overflow: hidden;
}
.text-container::before {
content: '';
background-color: black;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
z-index: 1;
}
span {
font-size: 36px;
line-height: 1.5em;
color: white;
background-color: black;
padding: 0.25em 0.5em 0.25em 0;
max-width: 360px;
}
<div class="main">
<div class="text-container">
<span>A</span> <span>Movie</span> <span>in</span> <span>the</span> <span>park:</span> <span>Kung</span> <span>Fu</span> <span>Panda</span>
</div>
</div>
You can use box-shadow for this issue and display inline:
<div class="text">
<span class="text-container">A Movie in the park: Kung Fu Panda</span>
</div>
And css:
.text > span {
display: inline;
box-shadow: 25px 0 0 black, -10px 0 0 black;
background-color: black;
color: white;
}
Try to add after "Park:" and before "Kung"
padding workded!!!
change width by console browser and see result:
h1{
background-color: #ff6a6a;
padding: 33px;
display: inline-block;
word-wrap: break-word;
width:300px
}
<h1>rert ert erttttttttttttttt 00000000000000000000 dfgdfgd dfgdfgdft ertert </h1>
Use <p> tag to wrap up the text and it apparently works demo
<div class="main">
<div class="text-container">
<p id="test">A Movie in the park: Kung Fu Panda</p>
</div>
</div>
css
.main {
font-family: sans-serif;
font-weight: bold;
background-color: #99c;
display: flex;
height: 400px;
flex-direction: row;
align-items: center;
}
.text-container {
max-width: 400px;
}
p {
font-size: 36px;
line-height: 2em;
color: white;
background-color: black;
padding: 0.5em;
max-width: 360px;
}
The blocks are being laid out vertically (one on top of the other), I'm trying to use inline blocks to place 2 blocks side by side. I wanted to use inline-block instead of floats which do work. The steps div class is the container for both inline blocks. Am I missing something?
img.down_image {
display: inline-block;
vertical-align: middle;
width: 465px;
}
div.steps {
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
display: inline-block;
vertical-align: middle;
width: 400px;
height: auto;
padding: 0 0 0 40px;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
the html:
<div class="steps">
<div class="down_image">
<img src="pic1.png" class="down_image" />
</div>
<ol>
<li>sdsdgsdgsdgsdgsdgsdg</li>
<li>sdgsdgsdgsdgsdg install Java.
</li>
<li>sdgsdgsdgsdgsdg</li>
</ol>
</div>
Add the following in your style
div.down_image {
display: inline-block;
}
You made the image inline, but the container div is not inline!
If you still have same issue, check the widths! Total width of 400 (ol) + 465 (img) = 865px might be more than the area you are using.
This code works fine, when widths are fixed. jsfiddle
Add white-space: nowrap; to div.steps and change html:
div.down_image {
width: 60%;
display: inline-block;
background-color: #ded;
}
div.steps {
white-space: nowrap;
width: 100%;
display: block;
position: absolute;
height: 500px;
top: 50%;
text-align: center;
}
ol {
background-color: #dde;
display: inline-block;
vertical-align: middle;
width: 30%;
height: auto;
padding: 0 0 0 5%;
list-style: none;
overflow: hidden;
counter-reset: numList;
font: 16px sans-serif;
color: #fff;
}
<div class="steps">
<div class="down_image">
</div><ol>
<li> sdsdgsdgsdgsdgsdgsdg</li>
<li> sdgsdgsdgsdgsdg install Java.</li>
<li> sdgsdgsdgsdgsdg</li>
</ol>
</div>
Notice glued </div><ol>
Note: make sure to add div.down_image { display: inline-block; }
Also, you can try to give position: absolute; to image's div and ol.
I am trying to work with markup that someone else has created. My problem is that I have set the width of a parent container for use on other elements, but want to over-ride this on one specific child container that I can target using .ticket13 .text b and set it to 400px. However this doesn't work.
If you check out this jsfiddle you can see the problem. How can I get .ticket13 .text bto be 400px wide without changing the markup?
<div class="left-container">
<div class="ticket13">
<p class="text">
<b> I want this container to be 400px wide </b>
</p>
</div>
</div>
.ticket13 .text b { width: 400px !important; }
p.text {
display: inline;
margin: 5px;
padding: 0;
}
P.text {
font-size: 1em;
font-style: normal;
margin: 0;
padding: 0.3em 0.3em 0;
text-align: left;
text-indent: 0;
width: auto;
}
.ticket13 {
display: inline;
float: left;
width: 186px;
}
.ticket13 {
border: medium none;
float: left;
margin: 0;
padding: 0;
}
.left-container {
background-color: red;
float: left;
text-align: left;
width: 60%;
}
You'd have to make the b a block level element, by either setting it's display to block or inline-block.
Put the markup for the child BELOW the markup for the parent. You shouldn't even need to use !important
Try use that:
.ticket13 .text b {
width: 400px !important;
display: inline-block;
}
To do that you have 2 solutions:
.ticket13 .text b {
width: 400px!important;
display: block;
}
or
.ticket13 .text b {
width: 400px!important;
float: left;
}
Given the following html:
<div class="body">
<div class="banner">
<div class="name">
<h2>
<a href="http://www.example.com">
<span class="bold">Test Link</span><br/>
</a>
</h2>
</div>
<div class="title">
<h3>A Connections Learning Partner Program</h3>
<p>Quality online learning for high school students in Oakland County and surrounding counties.
</p>
</div>
<div class="link">
Learn More
</div>
</div>
</div>
How can I vertically align .link a (the button) within .link without giving a height or width? Like this...
Here's my fiddle
Here is one way that you can do it. Your HTML is good, no need to change anything.
For the CSS:
.body { width: 920px; }
.banner {
background-color: #454545;
border-bottom: 3px solid #F9F9F9;
height: 100px;
margin: 0 0 5px;
padding: 0;
display: table;
}
.banner > div {
outline: 1px dotted yellow; /* optional to show cell edges... */
display: table-cell;
}
.banner .name {
width: 25%;
vertical-align: top;
padding-top: 25px; /* control top white space */
text-align: center;
}
.banner .name h2 {
color: #F9F9F9;
max-height: 55px;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.banner .title {
width: 50%;
vertical-align: top;
padding-top: 25px;
}
.banner .title h3 {
font-size: 15px;
font-weight: bold;
line-height: 15px;
margin: 0px 0 0 0;
padding: 0;
}
.banner .title p {
font-size: 12px;
max-height: 35px;
overflow: hidden;
margin: 0;
padding: 0;
}
.banner .link {
width: 25%;
vertical-align: middle;
text-align: left; /* set to left, center or right as needed */
}
.banner .link a {
margin-left: 25px; /* controls left offset */
background-color: #FA9800;
border-radius: 5px 5px 5px 5px;
cursor: pointer;
display: inline-block; /* use inline-block if you want to center element */
font-size: 12px;
font-weight: bold;
height: 23px;
line-height: 23px;
text-align: center;
text-decoration: none;
width: 100px;
}
See the fiddle at: http://jsfiddle.net/audetwebdesign/jsG8F/
How This Works
The trick is to use display: table on your .banner container and then display: table-cell on your child div elements, and set the % widths to 25%, 50%, 25% respectively for .name, .title, .link.
You can then use vertical-align and text-align to control vertical and horizontal placement of the various text blocks.
I added comments related to using padding-top to control white space from the top of the banner.
For the .link a element, you can adjust the left margin (or right) as needed.
These CSS rules offer you a lot of fine control over the placement of the various elements within the banner.
Backwards Compatibility
The display: table-cell property is backwards compatible back to IE8.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display
If the size of the element and banner are fixed, use margin-top to offset the element.
Marc Audet was very close but I ended up going a slightly different route.
I gave .link a a fixed top margin and made margin-left: auto; and margin-right: auto; and that did the trick.
Here is the fiddle for reference.