I want the search icon to be inside of the search box but it is showing below it.
Here is the code,
<section class="example">
<section class="search-container">
<input type="search" id="sampleSearchInput" ><i class="material-icons">search</i>
</section>
</section>
CSS code-
input[type="search"] {
padding-right:32px;
}
.search-container {
position:relative;
width:20%;
margin-left:55%;
}
.search-container > input[type="search"] + span {
position:absolute;
top:12px;
right:10px;
}
What could possibly be wrong?
Add this you your css
.material-icons{
position: absolute;
top:0;
}
Related
I've got the following markup. It's being delivered dynamically, I'm limited in what changes can be made to it.
Markup:
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
<span class="icon">|</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
<span class="icon">|</span>
</div>
</div>
CSS (not quite doing as required/described)
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.icon {
width:3px;
margin-left:auto;
margin-right:auto;
}
I need to position the <span class="icon">|</span>'s midway between the end of the <span class="stageText">'s and the right boundary of the parent element. Here's a jsfiddle demonstrating the situation: http://jsfiddle.net/jralston/vc6pzawk/
Any help or pointers very much appreciated.
Thank You
John
I create this solution using pseudo-element :after:
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:table-cell;
width:33.33333%;
}
.stage:after {
content: "|";
position: relative;
left: 25%;
}
<div id="container">
<div class="stage">
<span class="stageText">Hello World</span>
</div>
<div class="stage">
<span class="stageText">Hello</span>
</div>
<div class="stage">
<span class="stageText">Hi There</span>
</div>
</div>
Read the comments for changes. Advantage of this technique is that you do not need to use javascript or change the html, just css.
JSFiddle
#container {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
display:table;
width:445px;
}
.stage {
display:inline-block;/*instead of table-cell*/
text-align: center;/*centers text*/
float: left;/*float */
width:33.33333%;
}
.icon {
float: right;/*put icons left or right from text*/
width:3px;
}
I'm not sure if there's an easy to do this in CSS but you can do it relatively easy through JS & jQuery:
$('.icon').each(function () {
var $el = $(this),
containerWidth = $el.parent().width(),
contentWidth = $el.prev().width();
$el.css('left', (contentWidth) + ((containerWidth - contentWidth) / 2));
});
http://jsfiddle.net/vc6pzawk/3/
I need it to look like this:
Here is the markup:
<div class="hni_vaBreadcrumbContainer">
<progress class="hni_vaBreadcrumbProgress" value="0" max="100"></progress>
<span class="hni_vaBreadcrumbContent">0%</span>
</div>
Here are a couple jfiddles I tried but couldn't get working:
http://jsfiddle.net/x4wLf/, http://jsfiddle.net/cogent/6A5Lb/
I could just use a background image for the percentage text but prefer all CSS.
thanks!
I think I actually figured it out with very little markup/css.
http://jsfiddle.net/o22b4uyz/2/
Markup
<div class='wrapper'>
<div class='concave'><span class="percent">20%</span></div>
</div>
CSS
div.wrapper {
background:blue;
width:80px;
height:20px;
position:relative;
border-radius: 50px;
}
div.concave {
position:absolute;
background:white;
width:20px;
height:20px;
border-radius:50px;
left:-3px;
}
span.percent {
padding-left: 40px;
color: #fff;
}
i am struggling to place input check-box in same line x-horizontal as in label. My check-box is placing in 2nd line. I have a div with background to image then label and then check-box. The margin between image and label div and margin between label and check need to be same. Many thanks in advance.
<div id="map_Marker_Check_Block">
<div class="markerDiv" id="maker_school"><div class="marker_label">School</div> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <div class="marker_label">Gym</div> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
</div>
css
#map_Marker_Check_Block {
background-color:yellow;
display:block;
position:absolute;
width:20em;
height:400px;
top:0;
right:0;
z-index:10;
overflow-y:auto;
}
.marker_label {
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
float:right;
}
.markerDiv {
width:19em;
height:48px;
margin-left:5px;
}
#maker_school { background: url("img1.png") no-repeat; }
#maker_gym{ background: url("img2.png") no-repeat; }
http://jsfiddle.net/XUErp/
.marker_label {
float:left;
margin-left:50px;
line-height:48px;
width:130px;
background-color:green;
}
.marker_ckeckbox {
margin-top:15px;
float:right;
}
Use TOP and POSITION styles for checkbox:
.marker_ckeckbox {
float: right;
position: relative;
top: -35px;
}
But, I think the elements must be structured in a different way.
Or as Musa said use label instead of div:
Sample: http://jsfiddle.net/qaprB/1/
try this
<div class="markerDiv" id="maker_school"><label class="marker_label">School</label> <input class="marker_ckeckbox" name="markerType" value="school" type="checkbox" /> </div> <br />
<div class="markerDiv" id="maker_gym"> <label class="marker_label">Gym</label> <input class="marker_ckeckbox" name="markerType" value="gym" type="checkbox" /> </div><br />
css
.marker_ckeckbox {
float:right;
position: relative;
top: -35px;
}
.marker_label {
display:block;
}
Here i am implementing an Image slider
My problem is when i hover my image slider i want to stop my css transition property.
I tried using addclass and removeclass but failed
Here is my code
HTML
<div id="container">
<img src="http://worksheetgenius.com/Next_button.jpg" width="106px;" id="right"/>
<img src="http://worksheetgenius.com/Previous_button.jpg" width="106px;" id="left"/>
<div id="slider">
<div id="slide1" class="slide transition">
<img src="http://s.cghub.com/files/Image/030001-031000/30883/37_max.jpg"/>
</div>
<div id="slide2" class="slide transition">
<img src="http://www.f-16.net/attachments/83_1093_207.jpg" />
</div>
<div id="slide3" class="slide transition">
<img src="http://www.sportbikes.net/forums/attachments/fz6/37654d1111746148-all-fz6-riders-show-us-your-bike-imag0005-edited-downscaled.jpg" />
</div>
<div id="slide4" class="slide transition">
<img src="http://3.bp.blogspot.com/-fpTz_1UegJM/TZ6eQWXTueI/AAAAAAAAASY/TsYJ5xZyixQ/s1600/banner_239.jpg" />
</div>
</div>
</div>
CSS
#slider
{
overflow:hidden;
height:363px;
position:absolute;
left:180px;
top:159px;
padding:0px;
margin:0px;
background: url("header_bg.jpg") repeat-x scroll 0 0 #FFFFFF;
width:1000px;
}
#slide1
{
position:absolute;
left:0px;
z-index:1;
}
.slide
{
position:absolute;
left:1000px;
}
.transition
{
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.notransition
{
-webkit-transition: none;
transition: none;
}
#right
{
position:absolute;
top: 287.5px;
right: 127px;
z-index: 99;
}
#left
{
position:absolute;
top: 287.5px;
left: 127px;
z-index: 99;
}
Script
var t=setInterval(function(){$("#right").click()},5000);
$(document).ready(function()
{
var present=1;
var next=2;
var total_slide=document.getElementById("slider").childElementCount;
$("#right").click(function()
{
present_slide="#slide"+present;
next_slide="#slide"+next;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present++;
next++;
if(present==(total_slide+1))
{
present=1;
next=2;
for(i=1;i<=total_slide;i++)
{
$("#slide"+i).css("left","1000px");
}
$("#slide1").css("left","0px");
}
});
$("#left").click(function()
{
if(present==1)
{
next_slide="#slide"+total_slide;
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present=total_slide;
next=1;
}else
{
next_slide="#slide"+(present-1);
present_slide="#slide"+present;
$(present_slide).css("left","1000px");
$(next_slide).css("left","0px");
present--;
next--;
}
if(next==0)
{
present=(total_slide-1);
next=total_slide;
}
});
$(".slide").on('mouseenter',function()
{ $(this).removeClass('transition').addClass('notransition');});
$(".slide").on('mouseleave',function()
{$(this).removeClass('notransition').addClass('transition');});
});
In the above provided code i used to classes transition and no transition.
I also tried with CSS as follows
.slide:hover
{
-webkit-transition: none;
transition: none;
}
I was doing a similar idea and I ended up using this cycle plugin for jquery Malsup Cycle. I then used this piece of code but you can find all of the options at the link above.
$(document).ready(function(){
$('#slider').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 5000,
pause: 1
});
});
Setting the pause flag to one gets your desired functionality where it will stop animating on hover. I hope this helps!
HTML
<div id = "slider">
<div>
Slide 1
</div>
<div>
Slide 2
</div>
<div>
Slide 3
</div>
<div>
Slide 4
</div>
</div>
You just need to link to the plugin in the html and this should provide the desired functionality as I see it. You can put whatever content you want in the divs. I used a picture of our clients' logos with a short description as a banner on our company's page.
EDIT: I changed the selector to match the id that you used. HTML added.
I am trying to align a text Email and textbox for it on top of an image at a specific location. I want the position to be fixed, no matter what size the screen is. Here is my html code:
<html>
<head>
<style type="text/css">
#container {
background-color:blue;
}
#content {
background: url('images/orange.jpg') no-repeat center top;
}
#c_main {
color: yellow;
}
#c_email {
position:absolute;
top:200px;
left:410px;
color: #FFFFFF;
font-size: 15px;
}
#c_emailbox1 {
position:absolute;
top:200px;
left:480px;
}
#c_emailbox2 {
position:absolute;
top:200px;
left:620px;
color: white;
font-size: 12px;
}
input {
border:0;
}
.email_textbox1 {
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
.email_textbox2 {
color: #FFFFFF;
font-size: 11px;
width:130px;
background-image:url('images/text_bg.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="container">
<div id="content" style="height:1000px;left:0px;border:1px solid red;position:relative" >
<div style="height:100px;width:200px;border:1px solid red;position:absolute;top:250px;left:0px">
<h4> CREATE A USERNAME AND PASSWORD </h4>
</div>
<div id="c_email">
Email
</div>
<div id="c_emailbox1">
<input type="textbox" id="email1" border="0" class="email_textbox1">
</div>
<div id="c_emailbox2">
<input type="text" id ="email" value="Confirm Email Address" class="email_textbox2" onfocus="if
(this.value==this.defaultValue) this.value='';">
</div>
</div>
</div>
</body>
</html>
I cannot get it to align relative to the image. The text and textbox are misplaced when seen in a larger screen or if zoomed in and out. Suggestion please.
See my sample code. This is working. Change the height of parent div, the child always stays at bottom:
<div style="height:300px;border:1px solid red;position:relative">
<div style="height:100px;width:20px;border:1px solid red;position:absolute;bottom:0px">
</div>
</div>
If you want them always to the top of the text box. Make the parent control as relative.
The box or anything which you want to maintain constant distance make it absolute position
.Container {
position:relative
}
.child{
position:absolute
bottom:0px; // how much u wants to maintain..from the element
}