Is it possible to do something like a background-color without any text in stylus.
span {
width: 5px;
height: 5px;
}
span.red {
background-color: #f00;
}
<span class="red"></span>
You need display: inline-block; also:
span {
display: inline-block;
width: 5px;
height: 5px;
}
DEMO
Related
I have the following HTML/CSS code:
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
image
https://jsfiddle.net/e82gzayt/2/
How to get the inline-block having the same height as its parent?
or
How to get the font to be centered vertically with the span block?
You should add that text inside span to be inline. Also, in second case you are restricting the height of p element to be 1 em.
p {
background: lightgray;
}
p#h {
height: 1em;
}
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
}
<p><span>Ay</span></p>
<p id="h"><span>Ay</span></p>
Check the first element. It is aligned fine now.
Fiddle - https://jsfiddle.net/e82gzayt/3/
EDIT: Removing the height and width restriction of span the text fits well inside the p block.
Demo : https://jsfiddle.net/e82gzayt/4/
You could do this with display: table-cell; and vertical-align: middle; and then wrap the two <p> tags in a <div> like this:
p#h { height: 2em; }
span {
display: inline-block;
margin-left: .5em;
height: 1em;
width: 1em;
background: red;
}
.vertical-center {
text-align: center;
display: table-cell;
vertical-align: middle;
height: 2em;
background-color: #dddddd;
width: 400px;
}
<div class="vertical-center">
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
</div>
You can use flex value to center vertically. Advanced css class.
Try this
p { display:flex;align-items:center;background: lightgray; height: 2em;}
p#h { display:flex;align-items:center;height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
<p>Ay<span></span></p>
<p id="h">Ay<span></span></p>
Or you can try with flex box
p { background: lightgray;
display:flex;
align-items: center;
}
p#h { height: 1em; }
span { display: inline-block; margin-left: .5em; height: 1em; width: 1em; background: red; }
https://jsfiddle.net/e82gzayt/5/
I have an "empty" div that I'd like to fill with text when I hover over an element. The text should be different for each element we hover over.
Here's the code
.text-info{
height: 50px;
width: 200px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
}
.economics{
height: 100px;
width: 100px;
border: 2px solid black;
}
.economics:hover{
background-color: grey
}
.workforce{
height: 100px;
width: 100px;
border: 2px solid black;
}
.workforce:hover{
background-color: grey
}
#economics, #workforce{
display: none;
}
<div class="text-info">
<p id="economics">blabla</p>
<p id="workforce">blablabla</p>
</div>
<div class="economics"></div>
<div class="workforce"></div>
I've tried with css only, to set p's to display: block when hovering over .economics or .workforce, with no result.
Any help will be much appreciated, thanks!
With css you can only show elements on hover their parent element, like this:
.economics:hover #economics{
display: block;
}
This will work if #economics is inside .economics.
In this case you can add absolute position to #economics, to be in the .text-info holder visually.
<pre>
p {
margin: 0px;
}
.economics {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.economics p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
.workforce {
height: 100px;
width: 100px;
border: 2px solid black;
display: table;
vertical-align: middle;
}
.workforce p:hover {
background-color: grey;
display: table;
height: calc(100% - 0em);
width: 100%;
vertical-align: middle;
}
</pre>
Just to cover other bases, you can use some simply jQuery to solve this using the .hover() method.
<script type="text/javascript">
$(".workforce").hover(function() {
$(".text-info").html("The workforce is amazing.");
}, function() {
$(".text-info").html("");
});
$(".economics").hover(function() {
$(".text-info").html("I love the economy.");
}, function() {
$(".text-info").html("");
});
</script>
Put this at the bottom of your <body> and it should work.
Check: https://jsfiddle.net/tww259xe/
If you really need a pure CSS solution, the only real option with the given markup would be the ~ general sibling selector. The caveat with that is the the sibling must follow the main selector, so you would have to reorder your divs. The CSS would look like so:
.workforce:hover ~ .text-info #workforce {
display: block;
}
.economics:hover ~ .text-info #economics {
display
}
See the fiddle
Here is my code, I try to make both of my p and before element vertical-aligin in the middle but all failed.
Here is my sass code:
p {
/*whatever*/
&.subtitle {
vertical-align: middle;
color: $theme-blue;
font-size: 1.4rem;
&:before {
display: inline-block;
transform: translateX(-$p-padding);
content: '';
height: 50px;
width: 5px;
background-color: $theme-blue;
}
}
}
can someone help me to do them? Thanks.
btw, is that only block can makes the before sudeo-element show?
For vertical alignment you can try display:table and display:table-cell property as,
Check this fiddle here
Your Sample HTML will be,
<div class="subtitle">
<div class="text">
<p>Abstract</p>
</div>
</div>
Your Sample CSS will be,
.subtitle {
width:100%;
height: 50px;
display: table;
background:#FFF
}
.text {
display: table-cell;
vertical-align: middle;
}
p {
display: block;
text-align:left;
color: #111111;
margin: 0px;
position:relative;
padding-left:20px;
}
.subtitle:before {
content: '';
display:block;
position:absolute;
height: 50px;
width: 5px;
background-color: blue;
}
I have a button link which I want to align center, horizontally. Here is the code of button-
HTML:
<button class="downloadButton">Download</button>
Now, I want to align this in center, please suggest a possible CSS for the same, you can find this fiddle at JS Fiddle
P.S. :- I don't want to use <center> tag
Working FIDDLE Demo
Why use button inside an a. You can use just a. And make text-align of parent to center.
<div class="center">
Download
</div>
And the CSS of parent:
.center { text-align: center; }
And set a padding for the link:
.downloadButton { padding: 7px 20px 8px 20px; }
Try this:
body{ /* or parent element */
text-align: center;
}
a{
/* wraps this element according to width of the child element.(here) */
display: inline-block;
}
Working Fiddle
Here you are:
http://jsfiddle.net/594DY/1/
a {
display: block;
margin: 0 auto;
width: 150px;
}
Use this if you want to align center the whole button along with a tag
a {
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
Or use this if you want align button center inside a tag
a {
width: 100%;
display: block;
text-align: center;
}
Simple way to make a button center:
HTML TAG:
<button class="button" style="vertical-align:middle"><span>Login</span></button>
And use this CSS, adding some optional style:
.button {
display: inline-block;
border-radius: 4px;
background-color: #E80C11;
border: 5px;
border-radius: 15px;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below