I am using placehold.it to produce a square (When on the site I need it for the colors).
See:
http://jsfiddle.net/3s3Zb/2/
I would also like to have some text on each box. When I use the provided text input it becomes small and unreadable. So I attempted to put my own text on this image.
I tried following:
How to position text over an image in css
Its CSS:
#container
{
height:400px;
width:400px;
position:relative;
}
#image
{
position:absolute;
left:0;
top:0;
}
#text
{
z-index:100;
position:absolute;
color:white;
font-size:24px;
font-weight:bold;
left:150px;
top:350px;
}
But If I put the checkbox in the container it stops working properly (it turns back into a normal checkbox).
If you could show me how to put text on each square/or what I am missing it would be great.
You would just need to position the text absolutely. try this;
HTML
<td>
<label class="fb" for="11">
<div>Some text here</div>
<input id="11" type="checkbox" name="fb" value="11" />
<img src="http://placehold.it/150/0.8&text=asdasdasddasdaasd">
</label>
</td>
CSS
.fb {
position:relative;
}
.fb div {
position:absolute;
}
the fiddle
Related
I'm trying to align a text area and a button on the same line. I've successfully managed to do so, the code is in the fiddle below (though for some reason the fiddle won't align them).
Problem: Whenever I insert a value in the button, the button will go something like 30px downwards, still on the same line but just lower than the text area. This will only happen when a value is inserted within the button.
All the code is in the fiddle: https://jsfiddle.net/13qy0acp
Code:
HTML
<div id="messagebox">
<p id="headings"><textarea name="msg" style="height:40px;text-align:center" id="message" placeholder="Insert message"></textarea></p>
<p id="button"><input type="button" value="Send" onclick="submitChat()" id="innerbutton"></p>
</div>
CSS
#headings {
text-align:center;
display:inline-block;
width:70% !important;
margin-top:20px;
}
#message {
width:100%;
}
#button {
text-align:center;
display:inline-block;
width:8%;
margin-top:-30px !important;
border:solid black;
height:50px;
}
#innerbutton {
width:100%;
height:20px;
text-decoration:none;
}
If you want to horizontally align two elements, use the float property and set a width that adds to no more than 100% of the width of the parent element.
example:
textarea {
width:90%;
float: left;
}
button {
width:10%;
float: left;
}
I've styled a <p> tag which behaves as a cart button.
Now I want to make a pop up box which will appear on hover of the <p> tag containing cart details in it.
HTML
<div id="product_list">
<p class="poverlay" style="display:none;">Cart Details</p>
test elements test elements test elements test elements test elements
</div>
CSS
<style>
#product_list{
display:block;
z-index:1;
width:100px;
height:100px;
border:1px solid #ccc;
padding:10px;
}
#product_list:hover > p.poverlay {
display:block !important;
top:0px;
left:0px;
position:absolute;
padding:10px;
color:#f00;
font-weight:bold;
z-index:2;
}
</style>
You can use something like this in your CSS:
Your pop up starts hidden:
#popupId{
display: none;
}
You make it appear when you hover your p element
p:hover #popupId{
display: block;
}
And you fill it with the information you want to show.
yeh I did it !!!! in the way I want.
Thanks all Josh ,Ankit, thriqon , punitha
I have created a image with some text as shown in figure.
<span class="productname ">Excusite Beauty</span>
<img src="xy.jpg" data-attr="productimg" class="productimg " />
My css is
.productimg
{
float:right;
margin-top:15px;
height:120px;
margin-right:2%;
border:2px double #0ff;
width:150px;
right:0px;
position:absolute;
}
.productname
{
font-size:1.2em;
display:block;
float:left;
}
How can i protect the overlapping of text and put the text in next line if it is long.
How to do it using css...plz help
after removing position and right=0
You are absolutely positioning the product image. This takes it out of the normal "flow" of the document, and will cause this overlap.
Remove position: absolute from .productimg (you can go ahead and remove right:0px; as well) , and the text should wrap around the image properly. To allow the text to float around the image, you can either move it before .productname or float .productname and give it a width.
codepen
HTML
<div class="product">
<img src="xy.jpg" data-attr="productimg" class="productimg " />
<span class="productname ">Excusite Beauty</span>
</div>
CSS
.productimg {
float:right;
/* margin-top:15px; */
height:120px;
border:2px double #0ff;
width:150px;
}
.productname {
font-size:1.2em;
display:block;
width:150px
}
.product {
width:300px;
}
Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:
<body>
<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>
</body>
#header-search{overflow:auto;}
#header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:1px solid #8e8e8e;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
}
#header-search input.button{
border:0px dashed red;
padding:0;
margin:0 0 0 -185px;
width:24px;
height:24px;
background:transparent url(../images/SearchImage.png) center center no-repeat;
float:left;
}
UPDATE
I am not using em rather px
I have tried different css reset.
please see image for details difference.
I have done this code in new css/ html file where there is no other line of code.
Using position:absolute seems to be a more reliable approach for this kind of thing.
HTML
<form id="header-search">
<div class='relative'>
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</div>
</form>
CSS
.relative {
position:relative;
}
.relative .button {
position:absolute;
left: 20px;
z-index:1;
}
You may want to make this css more specific to this search input rather than all .button's etc
Its because you are not specifying a width of your search input box.
If you do that, you method will work.
Else, of course, the better way is to use position:absolute to position your button.
This will ensure the layout across all browsers.
If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/
If you need the button for click then you can try this
http://jsfiddle.net/HmKZQ/3/
I have this code :
<div class="richiedi_info_item">
<label>Message</label>
<span style="color:Red;"> *</span>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
.richiedi_info_item_nota
{
float:right;
width:252px;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
float:left;
height:16px;
line-height:20px;
}
and (on every browser expect IE7) the text Message and the link Click is aligned on the same line. Seems that span (with the red *) create a new line.
Why? And how can I fix this problem?
You can remove the floats (left and right) and set the div to display:inline, like this:
.richiedi_info_item_nota
{
display:inline;
width:252px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
EDIT:
IE7 Does not handle floats very well, especially with inline elements (span and label) so I added another div around both of the items and floated it.
HTML
<div class="richiedi_info_item">
<div id="floating">
<label>Message</label>
<span style="color:Red;"> *</span>
</div>
<div class="richiedi_info_item_nota">
<a id="notaInfo" href="javascript:void(0);">Click</a>
</div>
</div>
CSS
.richiedi_info_item_nota
{
width:21px;
clear:both;
float:right;
}
.richiedi_info_item
{
margin-top:15px;
width:400px;
}
.richiedi_info_item label
{
height:16px;
line-height:20px;
}
#floating {
float:left;
}
WORKING EXAMPLE
JsFiddle Demo