I have several blocks with two spans inside of each block
<span class='block black'>
<span class='line1 blue'>Text</span>
<span class='line2 red'>text-text-texttt</span>
</span>
....
<span class='block black'>
<span class='line1 blue'>text-text-text-text-text</span>
<span class='line2 red'>Texe</span>
</span>
and I would like to format them using CSS in the following way
You can try this
span.block.black {
display: inline-block;
}
span.block.blue, span.block.red {
display: block;
}
inline-block : This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box
Source (w3.org) : http://www.w3.org/TR/CSS21/visuren.html
Just add display property value of inline-block to .block-black to have them aligned side by side, then add display property value of block to the inner spans to have them take up the full width of .block-black while stacking on each other.
.block-black {
display: block;
width: auto;
display: inline-block;
border: solid 5px black;
padding: 10px;
}
.block-black:last-of-type {
margin-top: 15px;
}
.block-black span {
width: 100%;
display: inline-block;
margin-bottom: 5px;
}
.block-black span:first-of-type {
border: solid 5px blue;
}
.block-black span:last-of-type {
border: solid 5px red;
}
<span class='block-black'>
<span class='line1 blue'>Text</span>
<span class='line2 red'>text-text-texttt</span>
</span>
<span class='block-black'>
<span class='line1 blue'>Text</span>
<span class='line2 red'>text-text-texttt</span>
</span>
<br>
<span class='block-black'>
<span class='line1 blue'>text-text-text-text-text</span>
<span class='line2 red'>Texe</span>
</span>
Note: Adjust the CSS property values to achieve desired results.
Related
I want to place a square beside Yes and beside No text as:
I try:
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
}
<div>
<span class="yesNoSquare" /> YES
<span class="yesNoSquare" /> NO
</div>
But it is adding the label inside square, how can I do my expected result?
Try this. Hope it helps.
.yesNoSquare {
width: 10px;
height: 10px;
border: 1px solid;
display: inline-block;
}
<div>
<span class="yesNoSquare"></span>
<span> YES</span>
<span class="yesNoSquare"></span>
<span> NO</span>
</div>
I got the following problem.
I am trying to create 2 columns using span with multiple rows inside a div.
I am able to get the 2 columns but not not multiple rows.
The HTML code can't be changed.
span{
display: inline-block;
}
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after {
content: '\A';
white-space: pre;
}
.totalAmount, .oldTotal, .totalDue{
float: left;
}
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{
float: right;
}
<div class="payment-breakdown">
<span class="totalAmount">Total:</span>
<span class="totalAmount-dd">100USD</span>
<span class="oldTotal">Previously paid:</span>
<span class="oldTotal-dd">50USD</span>
<span class="totalDue">Amount Due:</span>
<span class="totalDue-dd">50USD</span>
</div>
Can someone guide me what I am doing wrong please?
You could remove the whole css of your own and solve it using this simple css snippet:
.payment-breakdown span{
display: block;
width: 50%;
float: left;
}
JSFIDDLE DEMO
You can style each column using the pseudo selectors nth-child(odd) and nth-child(even).
JSFIDDLE DEMO WITH STYLED COLUMNS
You can achieve this by using float: left; on all elements and give them a width of 50 percent. And use a clearfix to not get your page messed up afterwards.
span{
display: inline-block;
}
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after {
content: '\A';
white-space: pre;
}
.totalAmount, .oldTotal, .totalDue, .totalAmount-dd, .oldTotal-dd, .totalDue-dd {
float: left;
width: 50%;
}
<div class="payment-breakdown">
<span class="totalAmount">Total:</span>
<span class="totalAmount-dd">100USD</span>
<span class="oldTotal">Previously paid:</span>
<span class="oldTotal-dd">50USD</span>
<span class="totalDue">Amount Due:</span>
<span class="totalDue-dd">50USD</span>
</div>
Flexbox can do that.
.payment-breakdown {
display: flex;
flex-wrap: wrap;
width: 50%;
margin: 1em auto;
border: 1px solid grey;
}
span {
flex: 0 0 50%;
}
.totalAmount,
.oldTotal,
.totalDue {
text-align: left;
}
.totalAmount::after,
.oldTotal::after,
.totalDue::after {
text-align: left;
display: flex;
}
.totalAmount-dd,
.oldTotal-dd,
.totalDue-dd {
text-align: right;
}
<div class="payment-breakdown">
<span class="totalAmount">Total:</span>
<span class="totalAmount-dd">100USD</span>
<span class="oldTotal">Previously paid:</span>
<span class="oldTotal-dd">50USD</span>
<span class="totalDue">Amount Due:</span>
<span class="totalDue-dd">50USD</span>
</div>
You can add some javascript to add a br tag after every element.
'use strict';
var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].outerHTML += "<br/>";
}
span{
display: inline-block;
}
.totalAmount-dd:after, .oldTotal-dd:after, .totalDue-dd:after {
content: '\A';
white-space: pre;
}
.totalAmount, .oldTotal, .totalDue{
float: left;
}
.totalAmount-dd, .oldTotal-dd, .totalDue-dd{
float: right;
}
<div class="payment-breakdown">
<span class="totalAmount">Total:</span>
<span class="totalAmount-dd">100USD</span>
<span class="oldTotal">Previously paid:</span>
<span class="oldTotal-dd">50USD</span>
<span class="totalDue">Amount Due:</span>
<span class="totalDue-dd">50USD</span>
</div>
Interesting that you can't change the html as it seems a little peculiar to build the table from spans!
I think you'll want to clear your floats because of a height-issue associated with floats. Use something like clearfix or this.
Try that and then let me know if this doesn't help.
Try this code spinet
.payment-breakdown {
overflow: auto;
display: table;
table-layout: fixed;
width: 100%;
}
.payment-breakdown span {
display: inline-block;
float: left;
display: table-cell;
width: 25%;
}
Hi everyone Im new to HTML/CSS and was wondering how I can make something like
N_git_commit: 122e1 DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141
into
N_git_commit: 122e1 DC_git_commit: 1231
N_uptime:2190384987128421 DC_uptime: 2193821042141enter code here
I currently have it set up so that each line is under one div
such as
<div>
<span> N_git_commit:201213 </span>
<span> DC_git_commit:1231 </span>
</div>
etc...
Any help would be greatly appreciated!
You can try CSS Tables
.random-table {
display: table;
border: 1px solid black;
}
.random-row {
display: table-row;
}
.random-row span {
display: table-cell;
padding: 5px;
}
.random-row > span:first-child {
background: #EEEEEE;
}
<div class="random-table">
<div class="random-row">
<span> N_git_commit:201213 </span>
<span> DC_git_commit:1231 </span>
</div>
<div class="random-row">
<span> N_uptime:2190384987128421 </span>
<span> DC_uptime: 2193821042141enter </span>
</div>
</div>
Why are the <span> tags overlapping each other, and how to prevent that? I need them to wrap around the screen nicely so they don't obstruct the views of the others.
HTML:
<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
etc...
CSS:
.alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
}
See the demo - http://jsfiddle.net/uyg0zdLf/
<span> tag is inline level by default, width and height values will not apply. You could set it as inline block, read this post to learn more of the differences between them.
UPDATED DEMO
.alphas {
display: inline-block;
}
One more thing - browser also renders white space on inline* level elements, follow this post for more info.
span elements are inline by default. In order to make them generate boxes, you must use inline-block:
.alphas {
display: inline-block;
}
.alphas {
border-radius: 5px;
border: 12px solid #8AC007;
padding: 20px;
background-color: #006677;
width: 200px;
height: 150px;
display: inline-block;
}
<span class="alphas">#</span>
<span class="alphas">A</span>
<span class="alphas">B</span>
<span class="alphas">C</span>
<span class="alphas">D</span>
<span class="alphas">E</span>
<span class="alphas">F</span>
<span class="alphas">G</span>
<span class="alphas">H</span>
<span class="alphas">I</span>
<span class="alphas">J</span>
<span class="alphas">K</span>
<span class="alphas">L</span>
<span class="alphas">M</span>
<span class="alphas">N</span>
<span class="alphas">O</span>
<span class="alphas">P</span>
<span class="alphas">Q</span>
<span class="alphas">R</span>
<span class="alphas">S</span>
<span class="alphas">T</span>
<span class="alphas">U</span>
<span class="alphas">V</span>
<span class="alphas">W</span>
<span class="alphas">X</span>
<span class="alphas">Y</span>
<span class="alphas">Z</span>
span tags are defaulted to an inline display property. You sound like what you want is more along the lines of inline-block. Set it like this:
.alphas { display: inline-block; }
See here: http://jsfiddle.net/uyg0zdLf/1/
I'm trying to make text appear below an image when it is being hovered upon, but can't get the syntax right. I'm beginning to learn CSS, so I may not be following the best practices, please point out how I can solve my problem better!
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A"></span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B"></span>
</a>
<span class="B-element">B</span>
</span>
</div>
My CSS looks like this:
.X {
font-size: 5em;
}
.Y {
margin-left: 0.5em;
margin-right: 0.5em;
}
.A-element {
display: none;
}
.B-element {
display: none;
}
.A {
color: #fff;
}
.B {
color: #fff;
}
.A:hover .A-element {
color: #ccc;
display: block;
}
.B:hover .B-element {
color: #ccc;
display: block;
}
Hovering over .A to change the style of .A-element isn't possible with CSS because to do this we'd have to first select the parent of .A, and CSS has no parent selector.
What is possible, however, is to instead place the hover on the a element within your .Y element, and use the + adjacent sibling combinator to select the element next to it:
.Y a:hover + span + span {
color: #ccc;
display: block;
}
As you can see, I haven't had to use the .A-element or .B-element classes at all as this will apply to both your .A-element and .B-element elements.
Simplified Code Snippet
.Y a:hover + span {
background: tomato;
color: #fff;
padding: 0 20px;
}
<div class="X">
<span class="Y">
<a href="XYZ">
<span class="A">Hover here</span>
</a>
<span class="A-element">A</span>
</span>
<span class="Y">
<a href="XYZ">
<span class="B">Hover here</span>
</a>
<span class="B-element">B</span>
</span>
</div>
you can use hover on parent element. for example
.Y:hover .A-element {
color: #ccc;
display: block;
}