I am trying to add text next to the circle.
HTML
<div class="row">
<div class="col-sm-2">
<span><div class="circle"></div></span><p>available</p>
</div>
</div>
CSS
.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;
}
Right now, the circle is on top <p> tag.
I am trying to add two circle: available and a red one saying not available. Also, if you know a better way to do this, please let me know.
Thanks,
The div takes up 100% of the width by default, which is why your p tag wraps to the next line. You can set e.g. display:inline-block on the div to change this behaviour.
See this fiddle for your two circles.
Just add the following code :
.col-sm-2 > span, .col-sm-2 > p {
display: inline-block;
}
What this does is it causes the two elements span and paragraph <p> tags to become inline-block and hence align on the same line.
See this below :
.circle {
width:10px;
height:10px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
background: green;
}
.col-sm-2 > span, .col-sm-2 > p {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-2"> <span><div class="circle"></div></span>
<p>available</p>
</div>
</div>
You could use a icon instead. I like the font awesome icon set http://fortawesome.github.io/Font-Awesome/icon/circle/:
You just add the fontawesome Css files and in your html add:
<i class="fa fa-circle">available</i>
Related
I want to put checkbox inside a div tag. I want to create like
but the result that I get was like
the checkbox position should be at the right.
Create a containing div, then add three floating divs, one per element; Media element, text element, then check box. clear your float within the containing div. Place the check box in the far left div. Adjust CSS as needed.
Here is a working fiddle Check out the fiddle
#media_cont {
height:200px;
box-shadow:0px 0px 5px #000;
border-radius:10px;
padding:5px;
}
.media_content {
float:left;
width:33%;
text-align:center;
}
#checkbox {
margin-top:15%;
}
.clear {
clear:both;
}
.container {
padding-top:10px;
}
<div id="media_cont">
<div class="media_content"><img src="#" width="200" height="200"></div>
<div class="media_content">
<div>
<h2 class="header">
John Doe
</h2>
<h4 class="header">
User Profile 1
</h4>
</div>
</div>
<div id="checkbox" class="media_content"><input type="checkbox" checked></div>
<div class="clear"></div>
<div class="container">
<p>
New section
</p>
</div>
</div>
UPDATE: If you wish to have the check box clicked, simply add some JQuery such as the following:
$(document).ready(function() {
$("#profile").click(function() {
$('input[type="checkbox"]').attr("checked", "checked");
});
});
Then add the call id profile to your containing divs class.
<div id="profile" class="profile">
Here is an updated fiddle:
Click inside div and append checked into input field
Try the following:
.myDiv{
position: relative;
}
.myCheckbox {
position: absolute:
top: 50px; /* you compute this properly */
right: 15px; /* you compute this properly */
}
use awesome bootstrap checkbox
http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
this is my code:
HTML:
<div id="hello">
Hello
</div>
CSS:
#hello {
font-size:30px;
background-color:red;
}
As you can see in the fiddle (https://jsfiddle.net/en27xg3b/), the background color is on all the div. I want it to be only where the "Hello" is.
I'm pretty sure it's a simple code, but I forget how to do it.
Use inline-block or inline: https://jsfiddle.net/en27xg3b/1/
#hello {
font-size:30px;
background-color:red;
display: inline-block;
}
<div id="hello">Hello</div>
Or wrap the text in a span: https://jsfiddle.net/en27xg3b/2/
#hello span {
font-size:30px;
background-color:red;
}
<div id="hello"><span>Hello</span></div>
Wrap your text inside a span. Like this
#hello span{
font-size:30px;
background-color:red;
}
<div id="hello">
<span>Hello</span>
</div>
<div> tag is display block so it fill background full.
In this case, You only set display : inline; for <div> tag
Like this https://jsfiddle.net/en27xg3b/4/
I would take a look at http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_background
but what you can do is have a style
<style>
span.highlight {
background-color:red;
}
</style>
now in your html you can do
<div id="hello">
<span class="highlight">
Hello
</span>
More Text
</div>
I'm working on a tiny css action which based on A element hover, will display another element. The code is pretty basic:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">LOREM IPSUM</div>
</a>
.portfolio-reaction {
width:250px;
height:250px;
display:block;
}
.headline-overlay {
background:none;
height:100%;
width:100%;
display:none;
position:absolute;
top:10%;
z-index:999;
text-align:left;
padding-left:0.5em;
font-weight:bold;
font-size:1.3em;
color:#000;
}
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
and jsfiddle: https://jsfiddle.net/yL231zsk/1/
This solution works in 99%. The missing percent is the effect - while moving mouse arrow through the button, text is blinking. I have no idea why. Secondly - what if I want to extend number of appearing elements from 1 to 3. So to have:
<a title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<p class="element-1">abc</p>
<p class="element-2">111</p>
<div class="element-3">X</div>
</div>
</a>
Thank you for any tips and advices.
You wrote the following in your css file :
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
It won't work since .attachment-grid-feat isn't the parent of .headline-overlay. So it won't select the state when the parent is selected because there are no element .healine-overlay inside .attachment-grid-feat. Also no need to add ~ between the two. The right selector is the following :
.portfolio-reaction:hover .headline-overlay {
display: block;
}
This way you are targeting the child div .healine-overlay when parent div .portfolio-reaction (you might want to make the <a> tag a <div> tag) is hovered.
.portfolio-reaction {
width: 250px;
height: 250px;
display: block;
}
.headline-overlay {
background: none;
display: none;
position: absolute;
top: 10%;
z-index: 999;
text-align: left;
padding-left: 0.5em;
font-weight: bold;
font-size: 1.3em;
color: #000;
}
.portfolio-reaction:hover .headline-overlay {
display: block;
}
<div title="#" class="portfolio-reaction" href="#">
<img src="http://i.imgur.com/OZb7SI8.png" class="attachment-grid-feat" />
<div class="headline-overlay">
<div id="element-1">Hello 1</div>
<div id="element-2">Hello 2</div>
<div id="element-3">Hello 3</div>
</div>
</div>
In this code snippet, three elements are contained inside .headline-overlay. On hover, all three elements are displayed.
First, change the last CSS line from this:
.attachment-grid-feat:hover ~ .headline-overlay {
display:block;
}
into this:
.attachment-grid-feat:hover .headline-overlay {
display:block;
}
And will "half" work. You need after to change the width and height of your <div class="headline-overlay"> from a smaller percentage to match your square width and height(leaving it to 100% covers the entire screen, and as a result, the text wont dissapear, no matter where you will move the cursor). Or, If you want your <div> element to match automaticaly the square size, then you leave the width and height unchanged and change only his position:absolute into position:relative and of course, a little adjusting his position from top.
Here is a working fiddle: https://jsfiddle.net/yL231zsk/9/
I made a list with divs, that is displayed fine in Opera, but not in IE.
This is what is happening, in first scene, a line break for some rows, at last span from divs - that contains the class shortcut: http://i.imgur.com/D5wZEdb.png
These are the span and .shortcut styles:
.ui-context-menu .row span{
font-size:16px;
font-family:'Segoe Ui',Arial,sans-serif;
font-weight:400
}
.ui-context-menu .row .shortcut{
float:right;
margin-left:40px;
margin-right:15px
}
In the class row, I did:
.ui-context-menu .row{
display:table;
width:100%;
height:25px;
cursor:default;
padding-right:18px
}
And the class ui-context-menu is a bit normal, but I add a property on to make overflow hidden.
The HTML may turn something so:
<div class="ui-context-menu" data-which="none" oncontextmenu="..." id="context-menu" style="display:none;left:8px;top:50px">
<div class="row able" onmousedown="..." onclick="...">
<div class="base">
<div class="context">
<span>
Load
</span>
<span class="shortcut">
CTRL+O
</span>
</div>
</div>
</div>
</div>
This is an quick fiddle for tests: http://jsfiddle.net/erpngfwv/2/
How can I fix this?
Add this class ".ui-context-menu .row span" float
.ui-context-menu .row span{
float: left;
font-family: "Segoe Ui",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
}
My site: www.pkgeek.com
Just scroll down to the footer and you will see Powered by and on the next line you will see two icons (Blogger icon and namecheap icon). I want these icons to be displayed next to Powered by: (Not on the next line).
My HTML Code for these icons and the footer Powered by links:
Powered By: <div class="div123">
</div></div>
CSS CODE:
.div123 {
}
.blogger {
background:url('http://2.bp.blogspot.com/-EcPHtL7JRak/Uz8VLVBfGCI/AAAAAAAAAoc/WOHpaJy7hxg/s1600/blogger.png');
background-position:0 0;
width:25px;
height:25px;
display:inline-block;
}
.blogger:hover {
background-position:0 25px;
}
.namecheap {
background:url('http://1.bp.blogspot.com/-GOvEY9lWKkU/Uz8VNmQMq5I/AAAAAAAAAok/RRLbRx_EDYc/s1600/Namecheap.png');
background-position:0 0;
width:35px;
height:20px;
display:inline-block;
}
.namecheap:hover {
background-position:0 20px;
}
I think you need to give the following css property float:left to the **two pictures and the text. Edit the html to this and it works:
<div style="float:left;"> Powered By:</div> <div class="div123">
</div></div>
remove the width for the div poweredbylinks and add the properties: .poweredbylinks{ vertical-align:top; line-height:25px; } and for the div .div123 remove the width, float and the height, and set his styles to: .div123{ display:inline-block; }
Replace div by this:
<div class="poweredbylinks">
<div style="float:left">Powered By:</div> <div class="div123">
<i class="blogger"></i>
<i class="namecheap"></i>
</div>
</div>
You can just add style=" display: inline; " to your divs like this: jsfiddle