I have a textbox I want at the very bottom of the screen at all times. Using the following markup and css, I was able to get it close but there's a weird gap under it and it sits on top of other content.
Markup:
<div class="content">
... stuff here
</div>
<div class="message-text">
<input type="text" placeholder="Start typing to share a message">
</div>
CSS:
.message-text {
position:fixed;
bottom:0px;
width:100%;
}
And here's a visual:
Any help would be awesome.
Just add this property, it'll work.
.message-text {
margin:0px;
}
Related
I am facing very annoying problem.
I have 2 div's like bellow, first div is product image, and second one is overlay that should be shown when user hovers over product image.
It does work, but when image is hovered, overlay doesnt stop flickering.
I tried few "hacks" by setting opacity and nothing works.
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
URL is http://jsfiddle.net/MZ3eE/
I know JS could be used, but in this case i need pure CSS solution.
After looking at the new fiddle
you need to do this
.product-container:hover .overlay-box {
display: block;
}
instead of
.product-img-box:hover + .overlay-box {
display: block;
}
http://jsfiddle.net/avxLA/1/
Apply the :hover to the .product-image div instead of the img like so:
.product-image:hover .overlay {
display:block;
}
updated fiddle
For starters, there is an unclosed <div> there, so not quite sure how you want it. Anyway if you want it like this:
<div class="product-container">
<div class="product-image">
<img src="http://placehold.it/200x200">
<div class="overlay">PRICE</div>
</div>
</div>
then like others said :
.product-image:hover .overlay {display:block;}
will do fine. Otherwise if you want it like that(which makes more sense tbh):
<div class="product-container">
<div class="product-image"><img src="http://placehold.it/200x200"></div>
<div class="overlay">PRICE</div>
</div>
you should put it on the containers :hover like that :
.product-container:hover .overlay {display:block;}
I have a problem with fixed image width only in Internet Explorer (I have IE8)
First the image is not appear at all when padding is not defined
Second when i specify padding:5px; for the img it appears like this
Note that I can't set a special width for image container div because
below is my code
HTML:
<div class="block_div">
<div>
<div class="img_about">
<img src="test_img.jpg" alt="test_img" width="150" />
</div>
<div class="img_about">
about: "Adapted from Betty Crocker".
</div>
</div>
<div class="clear"></div>
</div>
CSS:
.img_about{float:left; }
.img_about img{padding:5px; }
and if i delete the float from .img_and_text dev it looks normal width:150
try this:
.img_about img { width:150px; height:150px; }
Using inline width tags is only helpfull for e-mail clients these days afaik...
I would like to make the login and password field in thesame order. when i try to change order in css file with margin command, it moves both field.
Try something like this. There are many way to do it, but this is the most straighforward.
http://jsfiddle.net/QutGz/1/
dunno want is going on width the fiddle. You can accomplish evening out the "columns" like this:
label
{
float:left;
width: 100px;
}
input
{
float:left;
}
Set the width to something that will be larger than the largest label text.
You can use CSS float to fix the inputs position in relation to each other and their parents elements:
See this working Fiddle example!
Assuming a structure like:
<form method="post" action="#">
<div class="clear">
<label>KULLANICI ADI</label>
<input type="text" value="" name="foo">
</div>
<div class="clear">
<label>SIFRE</label>
<input type="text" value="" name="bar">
</div>
</form>
The CSS solution would be:
input[type="text"] {
float: right;
}
.clear {
clear:both;
}
I found that button inside a div cannot be clicked, if the div is set as "float". In my html, the two buttons "a" and "b" cannot be clicked. Do you have any idea?
<div id="titlepanel" style="height:65px; position:absolute; top:0px; left:0px; width:70%; overflow:auto; background-color:#b0e0e6;" >
wait
</div>
<div id="subtitlepanel" style="height:65px; position:absolute; top:0px; left:0px; width:70%; visibility:hidden; background-color:#aaaaaa; " >
subtitle
</div>
<div id="buttonpanel" style="height:65px; width:12%; float:right; background-color:#bbbbbb;">
<input type="button" value="a" id="a" />
<input type="button" value="b" id="b" />
</div>
Your code example is working for me too..
however at a guess I'd say there is an absolutely positioned div (not in the code above) "over the top" of your buttons
try adding position: relative; to <div id="buttonpanel"> it may work on it's own if not try adding a z-index too
By the looks of it #subtitlepanel is being overlaid on top of the buttons. Add a z-index to #subtitlepanel as suggested. This is also a common issue in IE.
I would like to see if anyone can direct me in the right direction to achieve the follow:
When the user clicks on SUBMIT the DIV WRAP containing the form will slide off horizontally the page (ie, the 100% width container) showing a NEW DIV underneath (acknowledging confirmation). Of course everything is z-index'd and layered.
Anyone with CSS3 suggestions?
Many thanks as always.
Cheers,
Erik
You could do something like this: (demo)
//HTML
<div id="container">
<div id="wrap">
<form id="myform">
...
</form>
</div>
<div id="new">
Thanking you!! :)
</div>
</div>
//CSS
#container {
height:100px;
width:200px;
position:relative; /* set position so #wrap can position correctly */
}
#new {
width:100%; /* optional, fills up the container once the #wrap has gone */
height:100%; /* same here */
}
#wrap {
background:#FFF; /* set background so you dont see the overlapping */
position:absolute; /* position it to the relative block */
width:100%; /* make it just as big */
height:100%;
z-index:10; /* set it on top */
overflow:hidden; /* prevent awkward animation when sliding horizontal */
}
// JS
$(function(){
$('form').submit(function(){
$('#wrap').animate({width:0},400); // add fading by adding opacity:0
return false;
});
});
I have created this demo for you using jQuery :)
Here is the code being used:
$('#myform :submit').click(function(){
// your code - use ajax to submit the form
$(this).parent('#frm').slideUp('slow', function(){
$('#success').slideDown('slow');
});
return false;
});
And sample html code:
<form id="myform">
<div id="frm">
<input type="text" /><br />
<textarea cols="50" rows="10"></textarea><br />
<input type="submit">
</div>
</form>
<div id="success">Thanks form submitted !!</div>