Wrap a contact form around background image - css

How do I wrap a contact form around a backgroud image (eg. a desktop screen). For further clarification, please visit this link. Scroll down to the bottom of the page and you'll see a mac screen background wraped inside of a login page.
<div id="new_div_3">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
This is what i currently have in my new_div_3.
#new_div_3 {
margin:0 auto;
width: 500px;
background:#ECF0F1 url('img/email-screen.png') 0 0 no-repeat;
background-size: 1040px 878px;
padding: 38px 38px 267px;
}
Is there a way of making the background appear correctly, in the center of the div with the addition of the contact form appearing in the center too?

I think you're looking for something like:
background:#ECF0F1 url('img/email-screen.png') no-repeat center center;
If you are using firefox or chrome, you can use inspect element to see how it has been setup in the example you provided.

Related

How can I align my search button to the right?

I'm not well versed in front end web design or CSS. Using a pre-made template from Foundation, however my code for a search button is not aligning like the example button.
Using this template: http://foundation.zurb.com/templates/workspace.html
Can someone tell me how I can move the search button to the right as in pic where the blue button is located?
This is what I am using now:
<input type="submit" value="Search" style="float: right;">
Fiddle: Search button code
<ul class="right">
<li class="search">
<li class="has-button">
/* Original template form */
{#<form>#}
{#<input type="search">#}
{#</form>#}
/* My form with code */
<form action="{{ path('sym_corp_search') }}" method="GET">
<label><input type="search" name="q" value={{ app.request.query.get('q') }}></label>
<input type="submit" value="Search" style="float: right;">
</form>
</li>
</li>
/* Original form button in blue */
<li class="has-button">
<a class="small button" href="#">Search</a>
</li>
Using the foundation classes, you can manage to perform this layout with your own inputs, your code will look like this:
<ul class="right">
<form action="{{ path('acme_demo_search') }}" method="GET">
<li class="search">
<label><input type="search" name="q" value="{{ app.request.query.get('q') }}" /></label>
</li>
<li class="has-button">
<input type="submit" value="Search" class="small button" />
</li>
</form>
</ul>
You have to use margin property like margin-left:50%; or more and you can also use ... tag but it will make button position to center. float:right is can be used in div, Not in button.
Move your button in a div :<div id="mybtn"><input type="submit" value="Search"></div> add CSS : #mybtn {float : right;display : inline-block;}

changing the default list colour of jquery mobile using css

I have an html page given below
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<div class="content-primary">
<form id="frm1">
<ul data-role="listview">
<li data-role="fieldcontain">
<label for="Name">name:</label>
<input type="text" Name="Name" id="Name" value="" />
</li>
<li data-role="fieldcontain">
<label for="No">no:</label>
<input type="text" No="No" id="No" value="" />
</li>
<li data-role="fieldcontain">
<label for="countryName">Country name:</label>
<input type="text" countryName="countryName" id="countryName" value="" />
</li>
<li data-role="fieldcontain">
<label for="stateName">State name:</label>
<input type="text" stateName="stateName" id="stateName" value="" />
</li>
<li data-role="fieldcontain">
<label for="cityName">City name:</label>
<input type="text" cityName="cityName" id="cityName" value="" />
</li>
</form>
</div>
</div>
</body>
and i am using the following jquery 1.3.2 links displayed in the link given
http://jquerymobile.com/download/
and i have css file given below
.ui-body-c { background:#FFFFFF !important; }
.ui-page .ui-header {
background:#0B0B3B !important;
}
.ui-page .ui-footer {
background:#0B0B3B !important;
}
When i am using the above code the list which is displayed contains grey color.
how will i get white color instead grey to the list displayed.
Thanks in advance
I can't actually test this but I have noticed oddities like this before when a css rule is defined as background-color: and you try to override with just background:
Try changing your rule to say background-color: instead. Also, if you can help it, stay clear of !important unless you're sure it's what you need. It can be a real pain when your css gets more complicated.
All you need is to set background-color rule to .ul-body
.ui-body{
background-color:#FFF;
}
Don't use !improtant, Keep it as a last resource.
Note: In case some other list might contain a class named ui-body, but you can give parent ID or class as selector to your custom class .ui-body
#Parent .ui-body{
}
.Parent .ui-body{
}
fiddle

jQuery Mobile: Blue focus halo gets clipped when placing controls inside ui-grid

Im trying to group text fields together on the same line using "ui-grid-a".
But the blue halo gets clipped on the left and right side of the fields.
<ul data-role="listview" data-inset="true">
<li>
<label>Label A</label>
<input data-id="name" type="text" value="" placeholder="" title="">
</li>
<li>
<div class="ui-grid-a">
<div class="ui-block-a">
<label>Label B</label>
<input data-id="email" type="text" value="" placeholder="" title="">
</div>
<div class="ui-block-b">
<label>Label C</label>
<input data-id="phone" type="text" value="" placeholder="" title="">
</div>
</div>
</li>
</ul>
Sample here: http://jsfiddle.net/N8ZUt/1/
Set focus to "label a" and then "label b" and you should see the difference.
You just need to add a little padding:
li .ui-block-a, li .ui-block-b {
padding-right: 4px;
padding-left: 4px;
}
Also, to keep things aligned, I have put your first list item in a ui-grid-solo with the same padding.
Here is your updated fiddle: http://jsfiddle.net/ezanker/N8ZUt/4/

Center a div that contains a contact form

How do I center a contact form which is inside a div. I have tried margin:0 auto; and it didn't work.
<div id="new_div_3">
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>Contact Us</h2>
<span class="required_notification">* Denotes Required Field</span>
</li>
<li>
<label for="name">Name:</label>
<input type="text" placeholder="John Doe" required />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe#example.com" required />
<span class="form_hint">Proper format "name#something.com"</span>
</li>
<li>
<label for="website">Website:</label>
<input type="url" name="website" placeholder="http://johndoe.com" required pattern="(http|https)://.+"/>
<span class="form_hint">Proper format "http://someaddress.com"</span>
</li>
<li>
<label for="message">Message:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</form>
</div>
I have tried using various methods and none of them seem to work to center the div. I even tried centering the contact form itself and it just moved the input fields to the center of the contact form, rather than the div.
In order to get margin: 0 auto; work you need to set width.
#new_div_3 {
width: 500px;
margin: 0 auto;
}
Check the fiddle:
http://jsfiddle.net/9cMAC/
#new_div_3 {
width:100%;
display:block;
margin:auto;
}
Should be all you need.
Here you go:
#new_div_3 {
margin: 0 auto;
position: relative;
width: 60%;
}
check fiddle

Aligning Divs in a sign up form

I wanted to write HTML for a signup form that looks like the one at the following link:
https://www.hipchat.com/sign_up
The issue is, I want to use div tags, ul and li elements to create the form instead of HTML tables. I am having a hard time figuring out how to align the field instructions and the text box inputs using css classes.
you can try something like this:
<ul>
<li>
<label>Name:</label><input class="textbox" type="text" size="30" />
</li>
</ul>
and go on trying some css style, margin float .......
Why do you need to use DIVS and LI's?
Use labels and form elements.... Www.w3c.org will help
Here's something to get you started.
You would basically do something like this.. strip style from list and float them left.
You can also take out the margin:0 auto; if you don't want it centered.
.container {margin: 0 auto; width: 300px;}
.container ul {margin: 0; padding: 0; list-style: none; float: left; width: 50%;}
<div class="container">
<ul>
<li>name</li>
<li>email</li>
</ul>
<ul>
<li><input type="text" name="email" /></li>
<li><input type="text" name="email" /></li>
</ul>
</div>
<form method="post">
<div class="field">
<label for="name">name</label>
<input id="name" name="name" type="text" />
</div> <div class="field">
<label for="email">email</label>
<input id="email" name="email" type="text" />
</div> <div class="field">
<label for="job title">job title</label>
<input id="job title" name="job title" type="text" />
</div>
</form>
This is much better option use this , don't go for Ul-li use DIV
here is link http://jsfiddle.net/sahil20grover1988/JLbbw/

Resources