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>
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 can't understand why it renders different two lines vertically separated with a br tag from two lines separated vertically making the first line a block level tag.
Here's an example:
https://jsfiddle.net/qzgeassf/
span.block {
display: block;
}
div {
text-align: center;
}
.border {
border: 1px solid black;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<nav class="bottom-nav">
<span class="border">
<span>PORTFOLIO</span>
<br>
<span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
</span>
</nav>
</div>
<div>
<span class="border">
<span class="block">PORTFOLIO</span>
<span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
</span>
</div>
With Chrome dev tools I can't see what's taking that space at the end of the first line.
What you're seeing is white space in the non-block span. Remove the white space between the inline elements, and the widths are the same.
span.block {
display: block;
}
div {
text-align: center;
}
.border {
border: 1px solid black;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<nav class="bottom-nav"><span class="border"><span>PORTFOLIO</span><br><span><i class="glyphicon glyphicon-circle-arrow-down"></i></span></span></nav>
</div>
<div>
<span class="border">
<span class="block">PORTFOLIO</span>
<span><i class="glyphicon glyphicon-circle-arrow-down"></i></span>
</span>
</div>
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.
I got a problem for do some style with CSS.
I need to make a page like this:
Text-------------------------------------- $ 10
BiggerText------------------------------$ 20
BiiiiigeeerText--------------------------$ 20
A------------------------------------------ $ 10
OtherText------------------------------ $ 200
Of course, the line isn't like the example, but like HR tag line on HTML.
I have tried many styles, but i didn't found one that really works as i need.
Someone know how i can make some CSS style that allow me to put a Left text, line, then other text in same line?
Image Example:lines-example
Thanks, and Sorry for bad english!
A pseudo element is ideal for this.
.pricelist {
margin: auto;
width: 80%;
border: 1px solid black;
padding: 1em;
}
.list {
min-width: 15em;
}
.first {
float: left;
margin-right: 0.5em;
color: #2B91AF
}
.price {
float: right;
margin-left: 0.5em;
text-align: right;
min-width:3em;
}
.list:after {
content: '';
border-bottom: solid 1px tomato;
display: block;
overflow: hidden;
height: 0.8em;
}
<div class="pricelist">
<p class="list">
<i class='first'>Co-Pay:</i>
<i class="price">$150.00</i>
</p>
<p class="list">
<i class='first'>Pay:</i>
<i class="price"> $5.00</i>
</p>
<p class="list">
<i class='first'>Co-Pay: item</i>
<i class="price"> $15.00</i>
</p>
<p class="list">
<i class='first'>Co-Pay: great deal</i>
<i class="price"> $1.00</i>
</p>
</div>
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;
}