Position fixed padding - html

I'm trying to get two divs to stick together at the bottom of the page using position:fixed. The problem is when I put padding on the #feedbackTab, it repeats the #feedbackTab from the bottom of the page to the place where I want it. How can I have #feedbackTab on top of #feedbackBody with both of them fixed to the bottom of the page?
#feedbackTab {
background-image:url(../img/feedback_12.png);
position:fixed;
bottom:0px;
padding-bottom:300px;
margin:0;
width:960px;
height:34px;
}
#feedbackBody {
background-image:url(../img/Feedback_bkg_14.png);
position:fixed;
bottom:0px;
width:960px;
height:292px;
margin:0;
}
<div id="feedback">
<div id="feedbackTab"></div>
<div id="feedbackBody">
<div id="comments">
<h2>Comments/Suggestions</h2>
<input class="commentsTxt" type="text" name="Comments"><br \>
<input id="commentsSubmit" type="submit" value="Submit">
</div><!-- end comments -->
<div id="problems">
<h2>Problems?</h2><br \>
<label id="email">Email:</label><input class="emailBox" type="text" name="Email"><br \>
<label id="problem">Problem: </label><input class="problemBox" type="text" name="Comments"><br \>
<input id="problemsSubmit" type="submit" value="Submit">
</div><!-- end problems -->
</div><!-- end feedbackBody -->
</div><!-- end feedback -->

I would put them in a container div to hold everything together like so:
CSS:
#tabContainer{
width:700px;
}
.tab{
width:100px;
text-align:center;
float:left;
margin-right:2px;
}
#feedbackTab{
background-color:red;
}
#tab2{
background-color:green;
}
#tab3{
background-color:yellow;
}
#feedbackBody{
clear:both;
width:100%;
height:500px;
background-color:blue;
}
HTML:
<div id="tabContainer">
<div id="feedbackTab" class="tab">FeedBack</div>
<div id="tab2" class="tab">Tab2</div>
<div id="tab3" class="tab">Tab3</div>
<div id="feedbackBody">
This is the feedback body
<br/>lorem ipsum
<br/>
<input type="button" value="button">
</div>
</div>
</body>
Unfortunately JSFiddle seems to be down right now so I can't mock it up or test it for you. I hope this helps though!
EDIT: I found a replacement test bed: http://cssdesk.com/y7Hb2

Related

Two side-by-side divs within div, but one div is lower than the other

I have two smaller divs within a larger div: one is on the left side and one is on the right. However, the two divs are not vertically aligned as seen in the link below.
divs as seen on webpage
I've seen many solutions saying to use display:inline-block and vertical-align:top but nothing seems to work for me.
HTML and CSS code:
.first-two {
display:inline-block;
width:100%;
}
.curr-val {
float:right;
width:50%;
}
.neigh {
float:left;
width:50%;
}
<div class="first-two">
<div class="neigh">
<h4><b>Select your neighbourhood</b></h4>
<div class="custom-select">
<select id="location" class="dropdown">
...
</select>
</div>
</div>
<br />
<div class="curr-val">
<h4><b>What's the current value of your house?</b></h4>
<h4 id="current_value_text" style="color:#333">$200,000</h4>
<div class="slider-box">
<input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
</div>
<br />
</div>
</div>
Delete the br between the two divs:
.first-two {
display:inline-block;
width:100%;
}
.curr-val {
float:right;
width:50%;
}
.neigh {
float:left;
width:50%;
}
<div class="first-two">
<div class="neigh">
<h4><b>Select your neighbourhood</b></h4>
<div class="custom-select">
<select id="location" class="dropdown">
...
</select>
</div>
</div>
<div class="curr-val">
<h4><b>What's the current value of your house?</b></h4>
<h4 id="current_value_text" style="color:#333">$200,000</h4>
<div class="slider-box">
<input type="range" id="value_slider" min="200000" max="1000000" value="200000" step="50000" onchange="update_slider_current(this.value)">
</div>
<br />
</div>
</div>

<form> HTML tag breaks navigation bar on Google Chrome ONLY

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.

css modal box not working

i am trying to create a modal box, here is my html
<div id="sign_up_box"> // this should be transparent
<div id="signup_form"> // this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label></br>
<input type="text" name="username"/></br>
<label>Email</label></br>
<input type="email" name="email"/></br>
<label>Password</label></br>
<input type="password" name="password"/></br>
<input type="submit" value="Create Account"/>
</form>
</div>
</div>
here is my css
#sign_up_box {
position:absolute;;
top:0%;
left:0%;
bottom:0%;
right:0%;
width:100%;
height:100%;
background-color: crimson;
opacity:0.5;
display:none;
transition: opacity 400ms ease-in;
}
#signup_form {
position:absolute;
top:30%;
left:40%;
z-index:9999;
opacity:1 !important;
background-color:white;
width:30%;
min-width:100px;
padding:2px;
}
#signup_form form{
margin:5% auto;
width:80%;
opacity:1;
}
I have div inside another div, i want outer div to be transparent but inner div to be totally opaque.
but here i am unable to override the the parents opacity property as a result the inner div is transparent as well. can anyone suggest a solution? jsfiddle - http://jsfiddle.net/manu2784/z5qrwfgv/
try taking the form out of the backdrop. As in:
<div id="sign_up_box">// this should be transparent</div>
<div id="signup_form">// this should be opaque
<button type="button">X Close</button>
<form method="POST" action="signup_pro.php">
<label>Name</label>
</br>
<input type="text" name="username" />
</br>
<label>Email</label>
</br>
<input type="email" name="email" />
</br>
<label>Password</label>
</br>
<input type="password" name="password" />
</br>
<input type="submit" value="Create Account" />
</form>
</div>
Fiddle: http://jsfiddle.net/oxfuc4et/1/
(I took out display:none from the css only for demo purposes, I believe you will be doing that on button click yourself, right?)
Take this out display:nonefiddle
I think the problem is
display:none
Are you trying something like this

Centering a division within a div element

I have a checkbox within a container and need to center it within the main container.
Right now its being displayed on the left hand side.
html
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
css code
.maincontainer{
height:100px;
width:90px;
background-color:black;
}
this looks to be what you want: http://jsfiddle.net/pHUcC/
<div class="maincontainer">
<div class="inner container">
<input id="id" type="checkbox" name="name1" value="name1">
</input>
</div>
</div>
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
}
I think this is what your looking for Fiddle
.maincontainer{
height:100px;
width:90px;
background-color:black;
text-align:center;
color:white;
line-height: 100px;
}

html/css positioning text/DIV problem

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