I have some text in a link "title" and also a form box and I want the text on the left and the form on the right. However, whenever I try to do this what comes out is the line of text and then the form appears BELOW the text. I want them on the same horizontal line.
So I want with the dots: TEXT ................................. SIGN IN BOX
here is the code:
<div id="container">
<a href="index.php"><font size="6">Title</font><a>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a> </div>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset>
</div>
Here is the CSS for the container:
#container {
margin:0 auto;
position:relative;
width:780px;
}
and topnav
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
}
How do I accomplish the task? Thanks
DIV is a block element so will always do that. You need to make it a non-block element by setting float and display.
Besides the solution below you could use a table but that is frowned upon.
<div id="container">
<div class="titleDiv"><a href="index.php"><font size="6">Title</font><a></div>
<div id="topnav" class="topnav"> Have an account? <a href="login" class="signin">
<span>Sign in</span></a>
<fieldset id="signin_menu">
<form method="post" id="signin">
<p>
<label for="username">Username or email</label>
<input id="username" name="username" value="" title="username" tabindex="4" type="text">
</p>
</form>
</fieldset></div>
</div>
Then set your CSS to this:
#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
float:left; display:inline;
}
.titleDiv
{
float:left; display:inline;
}
so you want div.topnav appear on the left of the a ? Easiest would be to replace div with a non-block element such as span... otherwise see float css style
Related
I need to right align a hyperlink in a <div>, however the only way I can get it to move right is to use the <p> tag. This puts the hyperlink on a new line rather than the same line.
How can I get it on the same line, and also give some spacing? Right now it looks like a run on sentence
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button >New</button>
<button >Edit</button>
<p style="text-align:right; display:block; margin:auto"><a href="https://www.w3schools.com" >Open New Form</a>
Display Detail</p>
</div>
You can use flexbox for this. Wrap the content in two parts - one for the left side, and another for the right. Then use margin to position the right side as you want.
.flex {
display: flex;
}
.right {
margin-left: auto;
}
/* your second question */
.right a {
margin-left: 1em;
}
<div class="flex">
<div class="left">
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
</div>
<div class="right">
Open New Form
Display Detail
</div>
</div>
Why not just float the elements to the right? but you need to change the order of the elements.
.float-right{
float:right;
}
.right-space{
padding-right:10px;
}
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
<a class="float-right" href="https://www.w3schools.com">Display Detail</a>
<a class="float-right right-space" href="https://www.w3schools.com">Open New Form</a>
</div>
As per the title, I used the HTML tag to create a contact form for my website. When I use the form tag, my navigation bar loses it's position on Google Chrome ONLY.
I have a photo of the Firefox v Chrome layout on the contact page.
Top one is Chrome. Bottom is FF.
As you can see the navigation bar is moved on Chrome, although the code IS THE SAME!!
Here is part of the HTML/CSS code for this page.
<header class="header">
<div class="container">
<a href="index.html">
<div id="logo">
<h1 id="l1">l1</h1>
<h1 id="l2">l2</h1>
<h2 id="l3">l3</h2>
<h3 id="l4">l4</h3>
</div>
</a>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Personal Projects</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
</div>
</div>
</header>
<div class="subheader">
<h2>
Contact
</h2>
</div>
<div class="middle">
<div class="main-text">
<p id ="required">
* Denotes required field.
</p>
<form id="con-form" method="post" action="contactsheet.php">
<label>Name*</label>
<input type="text" name="name" placeholder="">
<label>Email*</label>
<input type="text" name="email" placeholder="">
<label>Subject</label>
<input type="text" name="subject" placeholder="">
<label>Message</label>
<textarea name="message" cols="40" rows="5" placeholder="" id="last-box"></textarea>
<label>What is 2+2? (Anti-spam)*</label>
<input type="text" name="human" placeholder="">
<input id="submit" name="submit" type="submit" value="Submit">
</form>
</div>
CSS:
.header {
background-color: #283F51;
height:176px;
width:100%;
min-width: 1229px;
margin: 0 0 0 0;
border-style:none;
}
.header .container {
margin-left:auto;
margin-right:auto;
width:1214px;
position:relative;
padding-top:50px;
padding-left:15px;
}
.header .container #menu {
display: inline;
float:right;
text-transform: uppercase;
padding:0;
margin-top:70px;
}
/*Further down*/
.middle {
display:block;
margin:0 auto 0 auto;
width:1214px;
overflow:auto;
padding-left:15px;
padding-bottom:35px;
background-color:white;
}
.middle .main-text {
width:750px;
float:left;
margin: 15px 0 0 20px;
font-family:Lato, Arial, sans-serif;
font-size:16px;
color:#424242;
}
The code should be right, since it works on FF but not Chrome. I tried to remove the float on the nav bar and move it using position, but it won't align well on FF then :( If anybody can help we I would apreciate it a lot.
I tried to give my form with one email input field and a button which is an image. My button and an input are aligned side by side. I want to center my form in the middle of the bootstrap container class, but nothing that I have tried has worked. I gave my form a width and margin:0 auto, but it didn't help at all.
HTML:
<div class="container">
<div class="text-box-two">
<span id="notification">BE NOTIFIED WHEN WE LAUNCH:</span>
</div>
<form class="well email-form form-inline" id="emailForm" name="sendEmail" novalidate="" method="post">
<div class="col-sm-6">
<div class="form-group">
<input class="form-control" name="email" id="email-address" type="email" placeholder="ENTER EMAIL ADDRESS" required="" data-validation-required-message=" "/>
</div>
<div class="form-group button">
<input type="image" src="images/tree.png" name="submitEmail" class="button"/>
</div>
</div>
</form>
</div>
</div>
CSS:
.well.email-form{
background-color: #FFFFFF !important;
border: none !important;
border-radius: 1px !important;
}
#emailForm{
width:1115px;
margin:0 auto;
}
.form-group{
float:left;
}
#emailForm{
margin:0 auto;
}
.form-control{
height:102px;
border-radius:1px;
font-size:30px;
}
Use the Bootstrap framework to do this. Have a look at offsetting columns in the docs.
Try this in your container above.
<div class="container col-sm-8 col-sm-offset-2">
Here's a Fiddle with it working.
I have a login form on the JSP page.
It is almost perfect except that the text field is not align up correctly. I want my text field to look like Facebook's login page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</p>
</form>
</div>
</body>
</html>
The above is my JSP script and I appreciate someone could help me.
Start by taking the input tag out of the label. This will align the label on the left of the input field. To make the label appear above the input field give it a style of display: block;
Not sure if this is what you mean, but you can give the form elements id's and then control them with css like any other element. For example:
<style>
div.ex
{
width:300px;
padding:10px;
border:5px solid gray;
margin:0px;
}
#idBox {
margin-left: 45px;
}
#lastRow {
margin-left: 65px;
}
</Style>
<div class="ex">
<h1>Login Page</h1>
<hr>
<form>
<p>
<label>
ID
<input type="text" name="id" id="idBox"/>
</label>
</p>
<p>
<label>
password
<input type="password" name="password"/>
</label>
</p>
<p>
<div id="lastRow">
<label><input type="checkbox" name="rememberMe">Keep me logged in</label>
<input type="submit" value="login"/>
</div>
</p>
</form>
</div>
jsFiddle
do this in HTML:
<p>
<label for="id">
ID
</label>
<input type="text" name="id"/>
</p>
<p>
<label for="password">
password
</label>
<input type="password" name="password"/>
</p>
and this in CSS:
label{
display:block;
}
My css isn't the greatest but i adapted this from the visual quickstart html5 and css book
latest edition. All you do is change text-align to left or right to align the label down the right hand side or the left. If that makes sense. Hope this helps.
<form>
<ul id="about_me">
<li><label>My Height</label>
<select class="about" name="height">
option value="">Choose from list</option>
</select>
</li>
</ul>
</form>
ul#about_me label
{
display:inline-block;
padding:3px 6px;
text-align:left;
width:170px;
vertical-align:top;
}
I have 1 form and I would like to place it in 2 divs, so that the following:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>
<div position:relative">
<form id="testForm2">
</form>
</div>
would be turned into something like this:
<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>
<div position:relative">
</form>
</div>
See the fiddle. Any ideas?
Thanks!
What you want, is to put the form around both divs like so:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div style="position:relative">
</div>
</form>
Here's an updated version of your jsFiddle.
Edit
Also, your second div's style is incorrect. It's fixed now in my example.
The markup in your jsFiddle file required some tidying up. This is what i would go with, trying to minimize your code somewhat:
<div class="post_edit_modeling">
<div class="tab_trash">
<div id="prof_picture">
<form id="testForm2">
<fieldset id="left">
<legend>Sex:</legend>
<div>
<label>
<input type="radio" name="sex" id="genderMale" value="male" />
Male
</label>
</div>
<div>
<label>
<input type="radio" name="sex" id="genderFemale" value="female" />
Female
</label>
</div>
<div>
<label>Weight</label>
<input id="weightpounds" type="text" name="weightpounds"/>
</div>
<div>
<label>Bust</label>
<input id="bust" type="text" name="bust"/>
</div>
</fieldset>
<fieldset id="right">
<div>
<label>Cup</label>
<input id="cup" type="text" name="cup"/>
</div>
<div>
<label>Waist</label>
<input id="waist" type="text" name="waist"/>
</div>
<div>
<label>Hips</label>
<input id="hips" type="text" name="hips"/>
</div>
<div>
<label>Hair Color</label>
<select name="haircolor">
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Yellow</option>
<option value="4">Blue</option>
</select>
</div>
<div>
<label>Dress Size</label>
<input id="dress" type="text" name="dress"/>
</div>
</fieldset>
<fieldset>
<div>
<input type="button" name="btnUpdate" id="btnUpdate" value="Update" />
</div>
</fieldset>
</form>
</div>
</div>
</div>
CSS:
form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}
Ive updated your jsFiddle file. Here.
Can you not just make the two divs live inside the form? Like this:
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
Form Content Here
</div>
<div position:relative">
Form Content Here
</div>
</form>
If the form is affecting your page layout, make sure that you set the form style to display:inline;!
As Drackir and joe_coolish said, you don't need to nest your form tags that way.
Typically I always open the entire content block with the form tag, totally isolated from the other content. There's absolutely no harm in doing things this way. ANything including <h1> and entire layouts can be nested in a form, as long as you know that every input within it will belong to that form.
<form>
<!-- tons of content here including layout -->
</form>
Can't you just put the 2 DIV's inside the FORM tags? Something like:
<form>
<div id="one">
...
</div>
<div id="two">
</div>
</form>
edit: Seems I'm a little too late :)
Just move your <div> tags within the <form>...
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
... left side ...
</div>
<div position:relative">
... right side ...
</div>
</form>
what about
<form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
</div>
<div position:relative">
</div>
</form>