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>
Related
i need help to get the text to stand by the right side of the image on the same level i have this
<a class="following-row" href="index-2.html?pid=2306">
<img alt="Girls logo" src="photos/users/35257/resized/9fd79de3589edff68db18bb6141025c3.jpg">
<span class="following-row-text">Girls<span class="item-details"> · 78 followers</span></span>
</a>
i cant get to have a correct set of css styling that give me what i want, please i need help.
thanks
<div>
<img style="vertical-align:middle" src="http://cdn.jssor.com/demos/img/icons/icon_chrome.png">
<span style="">Girls · 78 followers</span>
</div>
Check this snippet
Updated the answer based on comments.
a.wrapper img {
cursor: pointer;
width: 100px;
height: 100px;
vertical-align: middle;
text-decoration: none;
}
a.wrapper span {
padding-left: 10px;
cursor: pointer;
}
a.wrapper:hover img {
margin: -1px;
border: 1px solid red;
}
a.wrapper:hover span {
color: red;
}
<a hre="#" class="wrapper">
<img src="http://pipsum.com/100x100.jpg" alt="Image">
<span>Girls · 78 followers</span>
</a>
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>
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.
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 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>