I am trying to get my searchbox to look like that of facebook, where the button looks like it's inside the textbox. Please see the facebook home page.
I am using jquery ui and the graphics with it, for the button, problem is I think it adds borders to the button is creates, hence there is this separation between the text input and the button, anyway to get around this?
Here is my search form
<div class="div-search-form" style="display: inline; float: right;"><form method="get" id="search_form" class="" action="/searches">
<input type="text" value="Search" name="q" id="q" class="search-term" style="border: medium none;">
<span class="small-button"><a id="search_button" href="#" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Search"><span class="ui-button-icon-primary ui-icon ui-icon-search"></span><span class="ui-button-text">Search</span></a></span>
</form>
</div>
UPDATE
I think I am getting there.
Here is my css
.search-button {
background-position: -160px -112px;
display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat;
background-image: url(images/ui-icons_ff0084_256x240.png);
float:left;
border-left: 0 !important;
background-color: white;
width:16px;
}
.search-term {
padding:1px 5px 1px 20px;
border: 0 !important;
float:left;
background-image: url(images/ui-bg_flat_0_eeeeee_40x100.png);
}
.search-term:focus{
background-image: none;
}
.div-search-form {
margin-right: 0;
float:right;
margin-top:5px;
}
AND THE markup
<div class="div-search-form"><form method="get" id="search_form" class="" action="/searches">
<input type="text" value="Search" name="q" id="q" class="search-term">
<a class="search-button" id="search-button" href="#"> </a>
</form>
</div>
Notice that unless I put a &nbps; the background image of the anchor tag doesn't show up. wonder why?
Also, Not sure how to make them both the same size and bigger in height. Right now they are both 16px in height, but If I play with the padding the alignment goes out of whack.
Essentially what you need to do is create an image that mirrors the style of the input field on the left.
You will float the input field next to the button.
For the input field on the left control the CSS so there is not a right border, also make sure you add some padding, so that the text doesn't run into the button.
input.search-term { float:left; border:1px solid #CCCCCC; border-right:none; padding:5px; }
On your image do not have a left border
.smallbutton a { float:left; border:1px solid #CCCCCC; border-left:none; background:url(../imagepath); disiplay:block; height:XXpx; width:XXpx; }
The trick isn't as much about a technical way to do it, rather being creative with the images and CSS you use to accomplish the goal.
Related
I have a picture that, when clicked, opens up a css js modal box of another picture. Right now the box is too small. How do I edit the width of the graphic that appears?
http://www.awastudios.net (click one of the comic book covers)
I tried to edit the css code (app.css) but nothing changes.
.creator-modal {
background:#20212a;
border:1px solid #3f4150;
padding:0;
max-width:700px;
}
#media screen and (max-width:63.99875em) {
.creator-modal{
max-width:95%;
min-height:inherit;
height:auto;
margin:auto;
}
}
.reveal-overlay{
background-color:rgba(0,0,0,.45);
}
.regular-modal{
padding:15px;
font-size:14px;
background:#20212a;
border:1px solid #3f4150;
}
I changed max-width from 700px to 1500px and 80%, but nothing changes.
I've done a hard refresh on the browser (ctrlF5) but that doesn't help.
Any help would be appreciated! Thank you.
If i understood u , u want make modal more large thats right , add in ur HTMl div class="reveal creator-modal" width:100%
.creator-modal {
background: #20212a;
border: 1px solid #3f4150;
padding: 0;
max-width: 750px; /* up to 750px */
}
<div class="reveal creator-modal" id="fightgirls" data-reveal="" role="dialog" aria-hidden="false" data-yeti-box="fightgirls" data-resize="fightgirls" data-n="xyhm2h-n" style="display: block; top: 37px; width: 100%;" tabindex="-1">
<img src="assets/img/creators/fightgirls.jpg" alt="Frank Cho">
<button class="close-button" data-close="" aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
On my blog page, I recently added
#sidebar{ position: fixed;}
which then causes (1) my facebook icon to move up where the "subscribe" text is and (2) it makes the "sidebar width change as seen in the second photo and (3) creates an odd margin on the right side. I want the sidebar to look as though it did before adding position fixed.
#sidebar {
position: fixed;
font-family:"HelveticaNeue-Regular","Helvetica Neue Regular","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif; font-weight:700;
text-align:center;
margin-bottom:60px;
background:#F8F9FC;
border:2px solid #E2E7F5;
padding:30px;}
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Blog-JeffreyDowellPhotography', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Subscribe via Email:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="Blog-JeffreyDowellPhotography" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" style=" margin-bottom: 40px;"/></form>
<p style="display:inline-block; vertical-align:middle; margin-top: 0; margin-bottom:37px; padding-top:20px; padding-bottom:20px; border-bottom: 2px solid #E2E7F5; border-top: 2px solid #E2E7F5;" href="http://feeds.feedburner.com/Blog-JeffreyDowellPhotography" rel="alternate" type="application/rss+xml"><img src="//feedburner.google.com/fb/images/pub/feed-icon16x16.png" alt="" style="vertical-align:middle;border:0"/></a> Subscribe via RSS</p>
<!-- Facebook Badge START -->
<a href="https://www.facebook.com/JeffreyDowellPhotography" target="_TOP" title="Jeffrey Dowell Photography">
<img src="https://badge.facebook.com/badge/696174530397916.3512.386387771.png" style="border: 0px;" />
</a>
<!-- Facebook Badge END -->
List item
It's the inline-block style on your "Subscribe" section.
Changing that to display: block fixes the problem for me.
See: http://codepen.io/paulroub/pen/cjLim
I have a web page im designing as a responsive web design.in there i have a div which contains the sign up button of a email sign up form.in IE this and the content after that doesnt show up. following is the problematic html code..
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">
</div>
and when i remove this code the site works fine
the css for the class is like this
.Social_Base .Social_Part .Detail_Box .Sign_Up .bt {
background: url("http://media.expedia.com/media/content/expaus/images/socialbar/Social_main_bg.png") no-repeat scroll -374px -43px transparent;
border: 0 none;
cursor: pointer;
display: block;
height: 33px;
margin-left: 18px;
text-indent: -9999px;
width: 122px;
}
please help me..its ie9..it should be okay..i have used a complete image and positioned it to get the image for the sign up button..if any1 could help..thanks
Try adding a close button tag.
</button>
you must complete this tag :
<div class="Sign_Up">
<button id="submit" class="bt btn btn-alt" type="submit">your text</button>
</div>
I'm trying to get a garish red border around some radio buttons, but it is not showing up in Firefox latest or Chrome latest. Work fine in IE9/IE8.
Each of the input element on my form that are required has a data-val-required attribute put in by MVC3. All browsers puts in the red borders just dandy when we have a text or textarea inputs, but am struggling with the radio button. For IE, it works, but other browsers won't put the red border around it.
css:
input[data-val-required], select[data-val-required], textarea[data-val-required]
{
background-color: #F0FFFF;
border: 1px solid red;
}
view-source:
<label for="WaiveSelect">Do you waive confidentiality?</label><br />
<input data-val="true" data-val-number="The field WaiveSelect must be a number." data-val-required="Please select waive." id="WaiveSelect" name="WaiveSelect" type="radio" value="0" /> No, I do not waive confidentiality<br />
<input id="WaiveSelect_2" name="WaiveSelect" type="radio" value="2" /> Yes, I waive confidentiality<br />
<input id="WaiveSelect_3" name="WaiveSelect" type="radio" value="3" /> Yes, I waive confidentiality except to the client<br />
<span class="field-validation-valid" data-valmsg-for="WaiveSelect" data-valmsg-replace="true"></span>
What it looks like in IE (Firefox and Chrome shows no borders):
input[type=radio]{
outline: 1px solid red
}
I know this is four years old, but I came up with a nice solution using CSS Pseudo elements.
My requirement was to highlight an unchecked checkbox, or radio button in validation.
<input type="radio" class="required" name="radio1"/>
/* Radio button and Checkbox .required needs an after to show */
input[type=radio].required::after, input[type=checkbox].required::after {
display: block;
width: 100%;
height: 100%;
background: transparent;
content: '';
border: 2px solid red !important;
box-sizing: border-box;
}
/* Radio buttons are round, so add 100% border radius. */
input[type=radio].required::after {
border-radius:100%;
}
You could accomplish by wrapping each input element with div tag and give it a border and a float left... like this:
<div style="border:1px solid red;float:left">
<input type="radio".. />
</div>
No, I do not waive confidentiality
Not all browsers support borders around radio buttons and checkboxes. I voted for a bug years ago to have this included in Gecko but so far they haven't implemented it.
This may help you:
.style {
border: 1px solid red;
width: 20px;
height: 20px;
text-align: center;
margin-top: 2px;
background-color: #f0ffff;
}
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
<div class="style">
<input type="radio" />
</div>
View on JSFiddle
Complete code using jquery
https://jsfiddle.net/xcb26Lzx/
$(function(){
$('.layer').css('border',0);
$('input:radio').change(
function(){
if ($(this).is(':checked')) {
$('.layer').css('border','1px solid red');
}
});
});
Try this...
Put a div around the input and assign a class to the div like so:
<div class="custom"><input type="radio"></div>
Then open your custom css file and add this CSS
.custom {border: 1px solid red; border-radius: 30px; padding: 3px 3px 0 3px; background: red;}
This should create a nice red border around the radio button. If you're using a check box you would simply remove the border-radius: 30px from the css. Depending you may need to play with the padding a bit to center the button, but this worked for me.
Edit: You will also want to assign the following CSS to the div so it lines up correctly.
.custom {display: inline;}
fiddle link
i have a layout problem.
i have this sample code:
<div class="frame"><div class="holder"><form class="newform">...<div class="button"><input type="submit"></div></form></div></div>
And this stylesheet:
form.newform{border:1px solid orange}
div.button{border:1px solid red;width:100%;position:relative;overflow:hidden;}
Now the submit button (red-box) will be displayed at the bottom of the form (orange-box). But i like to display it AFTER (eg. 10px after bottom line) the orange-box.
Maybe someone can help me to solve this problem.
Best regards
Tim
Edit:
This is the complete css part of form.newform
overflow:hidden;
height:1%;
background:url(../images/contentform.gif) repeat-y;
padding:0 0 2px;
border:1px solid orange;
i tried to add bottom:-10px; to the div.bottom but the submit button will be cut at the bottom line of the form. Adding a z-index:200 wont help.
One option would be to use CSS to specifically shift the position of the submit button. I've made up the below so it will probably look completely wrong, but play around with it.
HTML:
<input type="submit" id="submitbutton">
CSS:
#submitbutton {
position: relative;
bottom: -50px;
}
You cannot have a submit button outside the form element, it needs to be inside.
If you want two boxes, one orange and one red, with the orange one containing the form input fields and the red one containing the submit button, you should do something like this:
<div class="frame">
<form class="newform">
<div class="holder">
...
</div>
<div class="button">
<input type="submit">
</div>
</form>
</div>
And in your css
.holder { border:1px solid orange; }
.button { border:1px solid red; margin-top:10px; }