I have a submit button inside a form-tag. This form tag has some css-propertys:
On Desktop it has a fixed with
On mobile devices it has a percentage-width
The problem is, that the submit button inside the form has width:auto; and margin:0 auto; so that it´s centered inside the form-tag. But webkit (mobile safari and safari) doesn´t understand that. In those browser the submit button is not centered but on the left side. So I wrote a jquery script which calculates the width and sets it to the submit button (instead of width:auto). That was the fix.
I made a research and now I know, that I could use display:table-cell; in the form tag, which will center the content (the submit button) BUT: that means that I can not center the form itself.
So my question is, how to modify the code below so that the form is centered inside the wrapper and the submit button inside the form?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap{
width:1000px;
background:red;
}
form {
height:100px;
width:500px;
margin:0 auto;
display:table-cell;
border:1px solid black;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
width:auto;
min-width:40%;
height:32px;
margin:20px auto;
line-height:14px;
padding:9px 15px;
background-color:#617798;
border:0;
font-size:14px;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
/* Border-Radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
display:inline;
/* iPad-Button-Reset:*/
-webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
<form>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
Just remove display:table-cell; inside form {} it should work.
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'm writing a CSS for a store. I need a div that sets the buy button to the left, and a Prev and View Next images to the right, which is working.
My real problem is that sometimes the "buy" button will be not present, because of the PHP.
When the buy button is not present images must be centered, because if they are not, it will be empty space to the left side (where the buy button was)
At first i think on margin:0px auto, but this will need a constant width set, right?
I really thought at the beginning this will be very simple. But i got stuck/
fiddle
Simplified to get the idea
I think im just missing something basic that i cant see know.
HTML:
<div id="comprarbtn">
<div id="wrappcomprarbtn">
<input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
<div id="naviminicc"> <img src="images/navmini_01.png" class="navmini1">
<img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <img src="images/navmini_03.png" class="navmini3">
</div>
</div>
</div>
CSS:
.comprarbtn { width:175px;
line-height:51px;
background-image:url(image.jpg);
border:0px;
font-size:12px;
padding-left:10px;
cursor:pointer;
overflow:hidden;
text-indent:0px;
z-index:10;
}
#comprarbtn {
float:left;
position:absolute;
width:321px;
text-align:center;
height:51px;
z-index:1000;
display:table-cell;
background-color:#f4f4f4;
}
#wrappcomprarbtn { margin:0px auto;}
#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 { cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }
#navmini { width:135px; max-width:135px;}
I'm not sure what's going on with the CSS and HTML you posted, but to achieve what you want to do in theory:
Give the wrapping div a fixed width large enough to contain both the button and the images
Give it margin: 0 auto to center it and text-align: center.
Make the inner contents display: inline
css:
.wrapper {
width: 200px; /* Large enough to contain everything */
text-align: center;
margin: 0 auto;
}
.wrapper .buttons {
display: inline;
}
I am working for this company that has hired me to turn a new home page design of theirs into html and css. In the design they gave me there is a search box in the header that they would like to be same as the one on their current webpage (http://shop.manorfinewares.com/intro.html). I am unsure how to navigate their current page's source code in order to successfully transfer the search box to the new page I am designing for them. Here is the header code that I have so far...
CSS:
#header{
position:absolute;
width:100%;
top:0;
height:107px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
#headerContainer{
position:relative;
width:100%;
margin:0 auto;
top:0;
height:107px;
max-width:1280px;
min-width:600px;
border-bottom: 1px dotted #86beca;
}
.headerUtilityContainer{
float:left;
padding-top:4px;
margin-left:8%;
width:22%;
height:103px;
}
.headerUtilityContainer img{
float:left;
margin-top:2px;
width:40%;
height:9px;
}
.headerLogoContainer{
float:left;
margin:0px;
width:40%;
height:107px;
}
.headerLogoContainer img {
display:block;
margin-top:30px;
margin-left:auto;
margin-right:auto;
width: 55%;
max-width:250px;
height: 57%;
}
.searchContainer{
float:left;
text-align:right;
font-size:70%;
padding-top:4px;
margin-right:8%;
width:22%;
height:103px;
}
.headerBorderDiv{
float:left;
width:100%;
margin:0 auto;
padding:0px;
height:2px;
border-bottom: 1px dotted #86beca;
HTML:
<div id="header">
<div id="headerContainer">
<div class="headerUtilityContainer">
<img src="images/manorSocialButtons.png" />
</div>
<div class="headerLogoContainer">
<img src="images/homePageLogo.png"/>
</div>
<div class="searchContainer">
LOGIN / REGISTER CART (0)
</div>
</div>
</div>
ANY advice will be very helpful as I am not sure where to start. I have never worked with XLS search bars in the past
It's still unclear as to what exactly you want, a right floated search bar with clear icon on input? I have created this fiddle for you, it replicates the behaviour of site you mentioned.
http://jsfiddle.net/DP22Y/
HTML
<div id="container">
<div id="utility">Utility</div><!--
--><div id="logo">Logo</div><!--
--><div id="search">LOGIN / REGISTER | CART (0)
<span class="clearable">
<input class="data_field" type="text" name="search" placeholder="Search..."/>
<span class="icon_clear">x</span>
</span>
</div>
</div>
CSS
#container{
margin:0 auto;
height:100px;
width:80%;
}
#utility, #logo, #search{
box-sizing: border-box;
color:#000;
height:100%;
float:left;
}
#utility{
background:#f1f1f1;
width:33.3%;
padding:10px;
}
#logo{
background:#e0e0e0;
width:33.3%;
padding:10px;
}
#search{
background:#e9e9e9;
width:33.3%;
padding:10px;
text-align:right
}
#search > #data_field{
margin:10px 0 10px;
padding:5px;
width:100px;
float:right;
}
span.icon_clear{
position:absolute;
right:10px;
top:0px;
display:none;
cursor:pointer;
font: bold 1em sans-serif;
color:#38468F;
}
span.icon_clear:hover{
color:#f52;
}
.clearable{
position:relative;
}
.data_field{
padding-right:17px; /* add space for the 'x' icon*/
width:100px;
}
jQuery
$(document).on('propertychange keyup input paste', 'input.data_field', function(){
var io = $(this).val().length ? 1 : 0 ;
$(this).next('.icon_clear').stop().fadeTo(300,io);
}).on('click', '.icon_clear', function() {
$(this).delay(300).fadeTo(300,0).prev('input').val('');
});
As far as the functionality is concerned, that is a different question altogether. That depends on what language you are using, do you want to make the results appear on page reload or without that using ajax, whats the db scheme etc. But the basic search would be something like this
Wrap search field with a form
Set an action and method for the form
Action will be the page the search results will be shown on
I am working on a responsive website and I ran into a problem with the form. I have a outer container that hold the form and the submit button. When the user's browser reaches 524px or smaller the submit button will move below the outer container. Everything works fine in Firefox but when I'm using Safari/Chrome the submit button will not move back into the outer container.
I have an example of the problem here: yourl.co
Here is my HTML:
<div id="content">
<div id="formContent">
<form id="forms">
<input id="email" type="email" class="text" placeholder="You#example.com" name="user[email]"/>
<input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/>
</form>
</div>
</div>
And here is my CSS:
#content{
width:100%;
max-width:573px;
height:auto;
margin:45px auto 0 auto;
}
#formContent{
width:99%;
height:56px;
margin:40px auto 0 auto;
background-color:#f6f5f5;
}
#forms{
border:none;
height:51px;
}
#forms #email{
width:75.1%;
height:51px;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #email[type="email"]{
font-family:ubuntu-light;
font-weight:100;
font-size:1.875em;
color:#7baec6;
}
#forms #email[type="email"]:focus{
color:#498cab;
outline:none;
}
#forms #submit{
width:21.5%;
height:47px;
float:right;
margin-right:6px;
margin-top:5px;
border:1px solid #0e5779;
cursor:pointer;
}
#media only screen and (max-width: 524px){
#formContent{
width:95%;
max-width:524px;
margin:40px auto 73px auto;
}
#forms #email{
width:95%;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #submit{
width:125px;
margin:12px auto 0 auto;
float:none;
display:block;
}
}
If you need anymore information I will be glad to provide it. Thanks for your help!
If you'll add css float: left; to #forms #email everything will be fine.
You can test it here: http://jsfiddle.net/witchfinderx/qwnXT/1/
i have a form element- text input and a submit button- Im trying to get them to render inline with each, the submit button renders slightly above the input button- i tried wrapping the two in a div and making the maximum height the same still didnt work. Here's my code/css- the button has a height of 29px- they are both in line
<div class="submit_form">
<input type="text" name="unique_code" class="unique_code"/>
<input type="image" name="submit_btn" src="/imgs/submitbg.png"/>
</div>
.submit_form{
height:30px;
}
.unique_code{
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Change your CSS to this:
.submit_form *
{
height: 30px;
display: inline;
vertical-align: middle;
}
It should work now. Have tested it in IE and Chrome.
Simply add vertical-align to the textbox:
.unique_code{
vertical-align: top;
background-color:#000;
border: 1px solid #e31e25;
width:250px;
height:25px;
color:#fff;
}
Try this.
// css
.img_fix {
vertical-align: text-top
}
// html
<input type="image" name="submit_btn" class='img_fix' src="http://www.google.com/images/nav_logo29.png"/>