I'm building a menu that scrolls down with the page for example Facebook's menu but i'm having trouble, the form seems to go under the div and i tried making it float left and it still doesn't work, i want to make it so their all lined up in a line.. what am i doing wrong?
here is my code
<div id="topnav">
<div id="nav">
<img src="/img/putlockermedia_logo.png" />
<input type="button" name="button" id="button" value="Shows" />
<input type="button" name="button" id="button" value="movies" />
<form action='/search.php' method='GET'>
<input id='searchbar' type='text' size='65' name='search' placeholder="search for movies & tv shows">
<input id='submit' type='submit' name='submit' value='Search' >
</form>
</div>
</div>
and here is the full css for it :)
<style>
#topnav{
background-color: #999;
height: 45px;
width: 100%;
position: fixed;
left:0px;
top: 0px;
}
#nav{
margin-left: 10px;
}
</style>
Add a wrapper div to the form and float it right
<div id="topnav">
<div id="nav">
<img src="/img/putlockermedia_logo.png" />
<input type="button" name="button" id="button" value="Shows" />
<input type="button" name="button" id="button" value="movies" />
<div id="right">
<form action='/search.php' method='GET'>
<input id='searchbar' type='text' size='65' name='search' placeholder="search for movies & tv shows">
<input id='submit' type='submit' name='submit' value='Search' >
</form>
</div>
</div>
</div>
CSS
<style>
#topnav{
background-color: #999;
height: 45px;
width: 100%;
position: fixed;
left:0px;
top: 0px;
}
#nav{
margin-left: 10px;
}
#right {
float:right
}
</style>
yes you have to use the float:left; width:50%; for form inside the div
check the fiddle link sample
Related
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
I made a small window for a tools menu but because I had to use an iframe to solve a specific issue it now scrolls left and right. I still neet it to scroll up and down but disabled the left and right.
<div id="map-tools">
<form autocomplete="off" id=vis-select style="height:100%">
<ul id="tools-list" data-role="listview" style="height:100%">
<li id="tools-4">
<fieldset data-role="controlgroup">
<g:if test="${site.javaScriptModules.find{it.fileName=='google-map.js'} }">
<input name="radio-choice-v-2" id="google-map-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-map.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#google-map" >
<label for="google-map-module">Google Map</label>
</g:if>
<g:if test="${site.javaScriptModules.find{it.fileName=='google-earth.js'} }">
<input name="radio-choice-v-2" id="google-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'google-earth.js'}">checked="checked"</g:if> type="radio" data-active="false" data-messages="switch-vis" data-switch-vis="#google-earth" >
<label for="google-earth-module">Google Earth</label>
</g:if>
<g:if test="${site.javaScriptModules.find{it.fileName=='cesium.js'} }">
<input name="radio-choice-v-2" id="cesium-earth-module" value="" <g:if test="${site.defaultVisualization?.fileName == 'cesium.js'}">checked="checked"</g:if> type="radio" data-messages="switch-vis" data-switch-vis="#cesium-earth" >
<label for="cesium-earth-module">Cesium Earth</label>
</g:if>
</fieldset>
</li>
</ul>
</form>
<iframe id="tools-cover-earth" class="cover" frameborder="0"></iframe>
</div>
this is the css
#map-tools{
position:absolute;
bottom: 44px;
background:#ffffff;
z-index: 10;
width: 320px;
height: 0px;
}
.cover{
background:#ffffff;
z-index: -1;
width: 100%;
height: 100%;
position:absolute;
top:0px;
overflow-x:hidden;
overflow-y:hidden;
}
You may need to play with overflow in css but for better answers you need to include your whole problematic code with context. <div><ui></ui></div> tells us nothing.
This is the HTML
<div id="header">
</div> <!-- end header -->
<div id="main">
<div id="stylized" class="myform">
<form id="form" name="form">
<label>Name
<span class="small">of company, business, etc...</span>
</label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span>
</label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu
</label>
<input type="text" name="url" id="url"/>
<button type="submit">Submit</button>
<div class="spacer">
</div>
</form><!-- end form -->
<div id="stylized1" class="myform1">
<form id="form1" name="form">
<label>Street Address
</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City
</label>
<input type="text" name="city" id="city"/>
<label>State
</label>
<input type="text" name="state" id="state"/>
<label>ZIP
</label>
<input type="text" name="zip" id="zip"/>
<div class="spacer">
</div>
</form><!-- end form1-->
</div><!-- end stylized -->
</div><!-- end main -->
</div><!-- end container -->
</body>
</head>
This is the CSS
#container {
margin: auto;
width: 800px;
}
#header {
position: relative;
height: 147px;
background: url(images/header.png) no-repeat;
}
#main {
position: relative;
height: 653px;
background: url(images/main.png) no-repeat;
}
#form {
color: #c4c1c1;
margin: 100px 20px 0px 10px;
}
.spacer{
clear:both;
height:1px;
}
#stylized{
border:solid 2px #c4c1c1;
}
#stylized label{
display:block;
font-family: arial;
font-weight:bold;
width:140px;
margin: 2px 0 0px 10px;
}
#stylized .small{
color:#c4c1c1;
display:block;
font-size:12px;
font-weight:normal;
width:140px;
}
#stylized input{
float:left;
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin:133px 0 0px 100px;
width:125px;
height:31px;
text-align:center;
line-height:3px;
color:4b4b4b;
font-size:15px;
font-weight:bold;
}
#stylized1{
position: relative;
margin: -1600px 0px 10px 450px;
}
The top margin, no matter how many times I change it, never has the correct coordinates. Every time I change the margin, it just goes back to the same place visually. How come? Is it because of the #container width? Or do I need some code? I'm fairly new to this. Thanks for your help.
#stylized1 label{
display:block;
float:left;
font-family: arial;
font-weight:bold;
width:140px;
color:#c4c1c1;
margin: 2px 0px 0px 10px;
}
#stylized1 input{
font-size:15px;
padding:5px 25px;
border:solid 1px #c4c1c1;
width:200px;
margin:0px 0px 20px 10px;
}
Cut and paste are your enemy. I doubt you want duplicate forms, one or each half of the form entry. Also, you are using position relative all over the place. If you are doing that then you are probably doing something wrong. In this solution I floated the two entry divs to the left. You can adjust the top-margin on stylized1 to position it. I also cleaned up a lot of your html structure.
I was kind of assuming you were editing top margin on the element with -1600px, but if I am wrong please let me know which one you were editing margins on.
http://jsfiddle.net/fVh23/
<div id="container">
<div id="header"></div> <!-- end header -->
<div id="main">
<form id="form" name="form">
<div id="stylized">
<label>Name
<span class="small">of company, business, etc...</span></label>
<input type="text" name="name" id="name"/>
<label>Status Message
<span class="small">Max 40 Characters</span></label>
<input type="text" name="statusmessage" id="statusmessage">
<label>URL to Menu</label>
<input type="text" name="url" id="url"/>
</div> <!-- end stylized -->
<div id="stylized1">
<label>Street Address</label>
<input type="text" name="stretaddress" id="streetaddress"/>
<label>City</label>
<input type="text" name="city" id="city"/>
<label>State</label>
<input type="text" name="state" id="state"/>
<label>ZIP</label>
<input type="text" name="zip" id="zip"/>
</div><!-- end stylized1 -->
<br style="clear: both;" />
<button type="submit">Submit</button>
<div class="spacer">
</form><!-- end form1-->
</div><!-- end main -->
</div><!-- end container -->
I've got the following form where everything formats properly with the exception of the submit buttons at the bottom of the form: they should be centered.
I've tried a variety of different combinations of nesting divs in combination with setting widths, margins, and text-aligns, but I can't seem to figure out what I am doing wrong.
http://jsfiddle.net/vM5fp/
Here is what I have so far...
HTML
<form id="myForm" action="#" method="post">
<div>
<label for="pickone" id="ruleTypeLabel">Pick One: </label>
<select id="pickone" name="pickone">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</div>
<div>
<label for="field1" id="field1label">Field 1: <span class="helpercomment">xx123</span></label>
<input type="text" id="field1" name="field1" />
</div>
<div>
<label for="field2" id="field2label">field 2: </label>
<input type="text" id="field2" name="field2" />
</div>
<div>
<label for="field3" id="field2">field 3: <span class="helpercomment">Separate by commas</span></label>
<textarea id="field 3" name="field 3"></textarea>
</div>
<div>
<label for="field4" id="field4label">field 4: </label>
<input type="text" id="field4" name="field4" />
</div>
<div>
<label for="startDate" id="startDateLabel">Start Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="startDate" name="startDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<label for="endDate" id="endDateLabel">End Date: <span class="helpercomment">MM/DD/YYYY</span></label>
<input type="text" id="endDate" name="endDate" class="date"/>
<a href="#" class="calendaricon">
<img src="Calendar.png" />
</a>
</div>
<div>
<div class="buttonrow">
<input type="submit" id="submitButton" value="Submit" />
<input type="submit" id="cancelButton" value="Cancel" />
</div>
</div>
</form>
And the css:
form {
width:300px;
margin:10px auto;
}
form div {
clear:both;
width:100%;
}
form div label {
display:block;
text-align:right;
width:140px;
float:left;
}
form div label .helpercomment{
display:block;
font-size:.8em;
font-style:italic;
color:#C1C2D7;
background-color:#FFF;
text-align:right;
}
form div input, form select, form textarea {
float:left;
width:140px;
margin:2px 0 20px 10px;
}
form div input.date {
width:113px;
}
form div a.calendaricon {
}
form div a.calendaricon img {
display:inline;
border:none;
margin-top:2px;
margin-left:4px;
}
form div div.buttonrow {
text-align:center;
width:auto;
margin:auto;
}
.buttonrow #submitButton, .buttonrow #cancelButton {
width:auto;
}
The buttons are floating (because they're inputs too). Either change them to <button> or modify the CSS:
.buttonrow #submitButton, .buttonrow #cancelButton {
float: none;
width:auto;
}
http://jsfiddle.net/UcPD2/
You're far better off using a styled unordered list than DIVs to format forms.
form ul, form li {
margin:0;
padding:0
}
<ul>
<li><label>....</label> <input ... /></li>
...
</ul>