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
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/
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>
I am trying to put three h4 elements on the same line, I tried using display:inline-block; on all of them, but that only put two of the elements on the same line, the third one is under them.
Here is my HTML
<h4 id="vbottomcreator"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
The third element is under the rest
CSS
#vbottomdates
{
color:black;
display:inline-block;
margin-left:362px;
}
#vbottomcreator
{
color:black;
margin-left:30px;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
margin-left:1100px;
display:inline-block;
clear:none;
}
QUESTION SOLVED
Try like this: Updated Demo
HTML:
<div class="center">
<h4>...</h4>
<h4>...</h4>
<h4>...</h4>
</div>
CSS:
#vbottomdates {
color:black;
display:block;
float:left;
}
#vbottomcreator {
color:black;
display:inline-block;
}
#vbottomdevelopment {
color:black;
display:block;
float:right;
display:inline-block;
}
.center {
width:100%;
margin:0 auto;
display:inline-block;
text-align:center;
}
Margin value is more for the last id.. Try to reduce the value like this.. all the 3 elements were placed properly
I am wondering why are you using margin-left to place all elements horizontally. You will seriously have to change it in future, as it will enable horizontal scroll if window size is reduced. In other words, your page will never be responsive.
remove all margin-left property and give some width in percentage such that total width of all blocks remains less than 100% width of window.
This will ensure that even if user reduces window size, your elements will be in correct position.
Check DEMO here
HTML
<h4 id="vbottomcreator" class="vbottom"><a style="color:orange;">></a> Created by <a style="color:orange;"><</a></h4>
<h4 id="vbottomdates" align="center" class="vbottom"><a style="color:orange;">></a> tasdf <a style="color:orange;"><</a></h4>
<h4 id="vbottomdevelopment" class="vbottom"><a style="color:orange;">></a> Website still in Development <a style="color:orange;"><</a></h4>
CSS
#vbottomdates
{
color:black;
display:inline-block;
}
#vbottomcreator
{
color:black;
display:inline-block;
}
#vbottomdevelopment
{
color:black;
display:inline-block;
clear:none;
}
.vbottom {
width : 30%;
}
Reduce the margin left value:
#vbottomdevelopment
{
color:black;
margin-left:500px;
display:inline-block;
clear:none;
}
Please check the image:
Check the black circle.
This black circle contains the chart that was locates in the Service Level Per Campaing, but when I added the red area, the charts drop down as you see.
can you help me please?
I want to keep the chart in its correct location and put this red area above it.
This is the code:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" >
<ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
The red area is the div with id campaignDiv I fill it dynamically.
The css of campaignDiv is:
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
The whole code
http://jsfiddle.net/jdhMs/
If the red box has to be above then the most easy way to do this is to change the position:relative to absolute. (The parent div, chartHeaderClass, should have a position: relative).
#campaignDiv {
background-color:red;
width:200px;
height:200px;
position:absolute;
top: 0;
right: 0;
}
In IE7, my order sample button "#itmSampl" isn't vertically aligned with the ".add-to-cart" button to the left of it, although in FF3.6 and Chrome 5 it is. I need it to be aligned correctly in IE6-8. Does anyone see what I'm missing?
<style type="text/css">
#buttonbox { position:relative; width:326px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#accounting #box-accounting .image-item .content-account
#ordrWizrd { float:left; height:24px; width:111px; }
#accounting #box-accounting .image-item .content-account .add-to-cart { clear:both; margin:0 0 10px; }
#itmSampl { bottom:0; cursor:pointer; display:block; height:24px; margin:0 3px 2px; position:absolute; right:0; width:120px; } .clearfix { clear:both; height:0; } </style>
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><%=getCurrentAttribute('item','addtocarthtml')%></table>
</div>
<div id="ordrWizrd" class="add-to-cart"><img src="/images/img/add-to-cart.gif" alt="configure item"></div>
<div id="itmSampl"></div>
</div> <div class="clearfix"></div> </div>
Also, here's the test page if a visual helps (you have to login to see the buttons instead of the bulleted list): http://www.avaline.com/85W_test_2
Login:test2#gmail.com
Pass:test03
Solution 1: Since you are already using a lot of tables in your page, another one won't hurt - just change your HTML from what you have above to something like this (may require a few tweaks):
<div id="buttonbox">
<div id="addtocart2" class="add-to-cart">
<table><tr>
<td><table><%=getCurrentAttribute('item','addtocarthtml')%></table></td>
<td valign="bottom"><div id="itmSampl"></div></td>
</tr></table>
</div>
<div class="clearfix"></div>
</div>
<!-- And also put #ordrWizrd in there somewhere -->
Solution 2: Take away all the "position: absolute" stuff with #itmSampl (remove the CSS bottom, position, right, and maybe margin and height/width properties). Then, add CSS float: right; margin-top: -36px; to #itmSampl to make it float on the right and move upward 36 pixels.