I have a header and section where elements in header are overlapping. Specifically, two divs inside header are overlapping (one's floated left, the other floated right)
HTML:
<div id="main-contianer">
<header id="main">
<div id="logo">
<h1>Ladder</h1>
</div>
<div id="sign-in">
<form id="log-in" action="login.jsp"><!--not complete-->
<div id="username">
<label>Username</label>
<input type="text" name="username">
</div>
<div id="password">
<label>Password</label>
<input type="password" name="password">
</div>
<div id="log-in">
<input type="submit" value="Log In">
</div>
</form>
</div>
</header>
<section>
<!--code here not included-->
</section>
CSS:
header#main div#logo{
float: left;
}
header#main div#sign-in{
float: right;
}
Here is the JSFiddle to see what it looks like: http://jsfiddle.net/FLwUA/106/
How do I ensure that header and section don't overlap?
try using position: relative instead of float.
then give display: inline-block;
Add a new class in CSS as:
CSS
.clearfix {
clear: both;
}
After </header> but before <section> add the following in HTML
HTML
<div class="clearfix"></div>
Refer here.
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>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
On my site I want a <form> to center. I've tried everything but still doesn't work. Does it maybe has something to do with that my site is in WordPress?
<section id="jobify_widget_search_hero-2" class="widget widget--home widget--home--no-margin widget--home-hero-search">
<div class="hero-search hero-search--has-overlay hero-search--height-large" style="background-image:url(http://jobboard.jobsbe.be/wp-content/uploads/2017/03/widget-home-feature-callout-1-2.jpg); ?>; background-position: center center">
<div class="container">
<div class="hero-search__content" style="color:#ffffff"><h1 class="hero-search__title" style="color:#ffffff">Vacatures</h1></div>
<form class="job_search_form job_search_form--flat" action="http://jobboard.jobsbe.be/find-a-job/" method="GET" style="text-align:center" >
<div class="search_jobs">
<div class="search_keywords">
<label for="search_keywords">Keywords</label>
<input type="text" name="search_keywords" id="search_keywords" placeholder="Keywords">
</div>
<div class="search_location">
<label for="search_location">Location</label>
<input type="text" name="search_location" id="search_location" placeholder="Location">
</div>
<div class="search_submit">
<input type="submit" name="submit" value="Search">
</div>
</form>
</div>
</div>
</section>
The webpage to few the site is http://jobboard.jobsbe.be/test/
The input boxes and the search boxes need to be centered.
There is this rule in your style.css file:
.search_jobs > div, .search_resumes > div {
float: left;
}
Change that to
.search_jobs > div, .search_resumes > div {
display: inline-block;
}
Then the centering in the parent container will work.
We need to achieve that the search form with search button fill the entire column area.
UPDATE:
I have a simplified version of code which can be viewed here: http://jsfiddle.net/persianturtle/Trgr6/10/
Another, previous jsFiddle version is here:
Here is the live example http://jsfiddle.net/Trgr6/3/
You will see black area as an example of the entire area to fill in the old version.
In the new version, I tried to set the width of the search form to the width of the:
.row-fluid .span9 { }
Class width, which is:
width: 74.46808510638297%;
And the code:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div id ="test" class="span9">
<form class="form-search">
<div class="input-append span12">
<input type="text" class= "search-query" placeholder="Enter Search">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>
Im not sure if I updated your Fiddle or not, but yeh. This will work.
http://jsfiddle.net/xWTuF/2/
Override the input append from inline-block to block and give it a padding-right equal to that of the overall button width and the padding on the input.
Give the input a width of 100%;
.container .form-search .input-append {
display:block;
padding-right:99px
}
.input-append input.search-query {
width:100%
}
Oh I also removed the span12, you dont need it. Reorganised the html to:
<div class="searchbar">
<div class="container">
<div class="row-fluid">
<div class="span9">
<form class="form-search">
<div class="input-append">
<input type="text" class="search-query">
<button type="submit" class="btn">Search</button>
</div>
</form>
</div>
<div class="span3 info">
.span3 column
</div>
</div>
</div>
</div>
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>