|
CSS - Vertical Position Of Form Elements
Hi guys, I've tried for days but can't solve the problem.
I wanna position a text field and button in the middle of a div or table. FF displays well, IE of course not (always on top). Vertical alignment etc doesn't work! Any suggestions? Similar TutorialsHow do I reduce the vertical space between form elements that I put inside a div? I have text "username" with the textbox below it but there is like 25 pixels of vertical space between them. Brad Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE. I have 2 div tags at the top of my page that are built sorta like this: Code: <div>
<ul>
<li>
some thing (images in my case, and a search bar)
</li>
</ul>
</div>
My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH. I have a post with a screen shot from firefox and IE at this link: http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates. Thanks everyone! Hi, The following example is positioned as I want. Code: <div><label id="day">Day:</label><span> <input type="checkbox" name="day" value="1" />Sat <input type="checkbox" name="day" value="2" />Sun </span> </div> How do I make in next example <table> vertically aligned with <label> element? Right now <table> element is positioned next to it but way below <label> element. Code: <div><label id="lang_lbl">What languages do you speak?:</label> <span> <table><tr><td><input type="checkbox" name="lang" value="1" />English </td> <td><input type="checkbox" name="langs" value="2" />Spanish</td> </tr> </table> </span> </div> Thank you. I have an image 425px x 260px which is floated left of an unordered list. The unordered list, of course, is at the same height as the top edge of the image. Any way to vertically position the ul so it is vertically centered to the image? I have a vertical menu on the left-hand side of my website, everything appears correctly when the page is first loaded but when I click on a menu item the entire div appears to shift to the left (10px). If I refresh the page it also appears correctly, so it is only when I have clicked on a menu item. I do know that there are plenty of problems with IE, but the menu does appear and function correctly in both IE and Opera. I am only having the problem with Mozilla. I am thinking that it may be something to do with the link visited properties but am not sure what. I have validated the css via the W3C website but there were no errors reported. The css segment is as follows: #subnavcontainer { position: absolute; left: 10px; top: 0px; margin-top:0px; padding-top: 0px; height: 700px; width: 160px; background: url("../images/bg_vert.gif") no-repeat; } #subnavcontainer ul { list-style-type: none; color: #000; margin-top: 0px; margin-left: 0px; padding-left: 0px; padding-top: 0px; font-family: Arial, Helvetica, sans-serif; display: block; width: 200px; background-color: #D7D7D7; } #subnavcontainer li { padding-left: 0px; margin-top: 1px; } #subnavcontainer ul li { margin: 0 0 1px 0; padding-left: 0px; } #subnavcontainer ul a { display: block; padding: 0px 2px 2px 5px; width: 160px; color: #000; background-color: #F0EFEE; text-decoration: none; border-left: 4px solid #B09292; } #subnavcontainer ul a:hover { color: #000; background-color: #fff; text-decoration: none; border-left: 4px solid #FF0000; } The html segment is as follows: <div id="subnavcontainer"> <ul> <li> <a href="../content/company/se_company_overview.htm" target="mainFrame">Overview</a> </li> <li> <a href="../content/company/se_company_location.htm" target="mainFrame">Location</a> </li> <li> <a href="../content/company/se_company_contact.htm" target="mainFrame">Contact</a> </li> </ul> </div> Hello everyone! I'm creating this thread to make a question about something that is happening with my website... Actually I'm not a professional in CSS Coding... I only know some basics and with the help of some friends I've created it (which sadly they doesn't know how to help in this problem as well). I know more HTML than CSS, but to center the website horizontally and vertically I had to change it to CSS Coding. At first, since I use Firefox as the principal browser, I thought it was going right and well centered, but when I opened it in another browsers as Internet Explorer and Opera, the various parts of texts I have included are not well positioned like in Firefox, Google Chrome and Safari, by which looks pretty decent and in the same position in all of them. Unfortunately, since I'm a new member, I can't post links, so I placed some spaces in between at the beginning to be possible: Website: ht tp://w ww.freewebs.com/innocentia/Doc1.htm Errors Preview: ht tp://img651.imageshack.us/img651/1601/errorspreview.jpg Horizontally looks great in any browser and the Menu Bar as well, but not the right text parts...by which vertically looks different to me in IE and Opera only and in the other browsers as well if the monitor sizes are bigger or smaller than mine, which has the size of 1440x990. The CSS Code of the texts parts that can't get vertically fixed is: Code: #header {
height : 60px;
left : 300px;
overflow : auto;
padding : 10px;
position : relative;
top : -100px;
width : 700px;
}
#header p {
margin : 0;
}
#header_wrapper {
width : 700px;
margin-left : auto;
margin-right : auto;
margin-top : 25px;
}
#h3 {
height : 130px;
left : 290px;
overflow : auto;
padding : 20px 10px;
position : relative;
top : -25px;
width : 710px;
}
#h3 ul {
margin : 0;
}
#h3 ul li {
margin : 0 0 3px 0;
}
#h4 {
height : 255px;
left : 250px;
overflow : auto;
padding : 0 10px;
position : relative;
top : -85px;
width : 748px;
}
#h4 ul {
margin : 0;
}
#site_wrapper {
width : 1100px;
margin-left : auto;
margin-right : auto;
background : #eaf0f2 url(link) no-repeat top center;
}
The HTML Code is: Code: <body>
<div id="site_wrapper">
<div id="header">Text</div>
<div id="h3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">Avatar Picture</td>
<td valign="top">
<ul><li><b><font color="#0166AC">Text</ul></td></tr>
</table></div>
<div id="h4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="top">
<ul><p><font color="#000000"><b>Text</font></b></a></center></ul></td></tr>
</table></div>
I really don't understand what's happening or what I'm missing due to the fact that the menu has the same type of coding like the headers and works completely fine...so I'm somehow lost... My intention was to make it look correct horizontally and vertically like it's shown in Firefox, Google Chrome and Safari in the preview picture, in the other browsers and any different monitor sizes. Also, I already validated my CSS coding! I also searched for many threads to see if I could find solutions but hadn't found any that could actually help... Thank you for the attention and for reading! ^^ Hi, I'm trying to do something that is simple with table cells but which I'm finding difficult using CSS. Basically I have a container div that is 400px height. I want to position 3 divs in a row (float: left) at the bottom of that div and put an image in each of them. So, in short... <div id="outer"> <div id="inner1"><img src="x.jpg" /></div> <div id="inner2"><img src="y.jpg" /></div> <div id="inner3"><img src="z.jpg" /></div> </div> ...where the three images are bottom aligned. I want to have the images in their own div containers so that I can give each of their boxes 33% of the screen width and set apdding if required. No doubt I'm approaching this the wrong way. Can anyone help? Thanks, Pat I picked up the unitpngfix.js that was released recently because it's smaller, less complicated, and fit my needs better than the Twin Helix fix. (Twin Helix released an updated Alpha version 2 days ago that supports background-repeat and background-position!) Anyway, when the unitpngfix.js is fired upon site load, most of my content disappears. The general layout remains basically intact, but everything inside does not show. The IE developer toolbar outlines the divs in the upper-left hand of the page. I was shooting back and forth a few emails with the creator of the script, and he said that it happens when the Javascript is fired. The script goes through and changes most position:static elements to position:relative. He was not sure why it was effecting my page that way, because he said that how elements display should not change based on position:relative or position:static (default). I'm working on getting a test site up shortly and will edit the post accordingly. But does this sound familiar to anyone? I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this? One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed. Thanks for any insight. I am simply trying to align a form (text field and submit button) to the bottom of its containing div. My method works with text, but not the form... it just stays up at the very top. The CSS: Code:
#search {
padding: 0 25px 0 0;
float: right;
}
#srchbox {
height: 118px;
position: relative;
}
#srchbox .form {
bottom: 0;
position: absolute;
}
The HTML: Code:
<div id="search">
<div id="srchbox">
<p class="form">
<form>
<input type="text"><input type="submit" value="Go">
</form>
</p>
</div>
</div>
I know that a form shouldn't be expected to act like text... but I don't know how to go about getting to align at the bottom. Thanks! hello everyone, 'tis my frist post... Just had'a quick question I'm working on a page, and l'm trying to create a text input with a background image, that has NO border, so that it nests inside of a table cell with no excess fluff. However the input has a 1 pixel high "line" that spans across the top of the element, and a 1 pixel high "line" across the bottom as well. I can't seem to get rid of it, is it possible? here's the code, l was trying to get to work with this: Code:
<HTML>
<HEAD>
<style>
/*Left searchBar Cap*/
td.leftCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x1.gif');
background-position: 0px 0px;
width: 28;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*right searchBar Cap*/
td.rightCap{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x3.gif');
background-position: 0px 0px;
width: 34;
height: 50;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Top bar*/
td.searchTop{
background-color: #c0c0c0;
background-image: url('images/searchBar_1x2.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
width: 425;
height: 16;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
/*searchBar Bottom*/
td.searchBottom{
background-color: #c0c0c0;
background-image: url('images/searchBar_3x1.gif');
background-repeat: repeat-x;
background-position: 0px 0px;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
width: 425;
height: 15;
}
/*center of searchBar*/
td.searchCen{
background-color: limegreen;
background-position: 0px 0px;
width: 425;
height: 19;
padding-top: 0;
padding-bottom: 0;
padding-right: 0;
padding-left: 0;
}
BODY {
background-color: #c0c0c0;
background-attachment: scroll;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
/*input*/
.input {
background-image: url('images/searchBar_2x1.gif');
color: #191919
border-width: 0px;
padding: 0px;
border-style: hidden;
border: 0;
border-top-width: 0px;
border-bottom-width: 0px;
font-family: Comic Sans MS (cursive);
font-weight: extra-bold;
font-size: 10pt;
width: 425;
height: 19;
}
</style>
</HEAD>
<BODY>
<center>
<form>
<table cellpadding="0" cellspacing="0">
<tr><td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="leftCap">
</table>
<td>
<table bgcolor="#c0c0c0" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="searchTop">
<tr>
<td class="searchCen">
<input type="text" size="40" class="input" value="search google ... ">
<tr><td class="searchBottom">
</table>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="rightCap">
</table>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#c0c0c0" align="center">
<a onClick="javascript:searchGoogle();" href="#">
<img border="0" src="images/searchBar_1x4.gif" width="113" height="50"></a>
</table></table>
</form>
<script>
query = document.forms[0].elements[0].value;
function searchGoogle(){
if(query){
url = "http://www.google.com/search?hl=en&lr=&q="+query+"&btnG=Search";
window.open(url);
}}
</script>
</BODY>
</HTML>
Thanks for your help! Samantha G. I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code: Code: <div id="nav">
<div id="nav_left">
<a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
<div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
Title
<select name="var" size="1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="0">0</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
<option value="1950">1950s</option>
<option value="1960">1960s</option>
<option value="1970">1970s</option>
<option value="1980">1980s</option>
<option value="1990">1990s</option>
<option value="2000">2000s</option>
</select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
</tr>
</table>
</div>
</div>
And here are the applicable styles: Code: #nav {
background-image: url(../img/navback.jpg);
background-repeat: no-repeat;
background-position: left top;
border: thin solid #7a8251;
height: 25px;
width: 771px;
}
#nav_left {
width: 400px;
float: left;
text-align: left;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 7px;
padding-left: 5px;
}
#bookmark {
width: 300px;
float: right;
text-align: right;
display: inline;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
}
.inputbutton {
margin-right: 3px;
margin-left: 3px;
}
select {
display: inline-table;
font-size: 75%;
padding: 0px;
}
But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high. They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower. I don't know what to do! Any ideas? Jeremy Hello all. I'm trying to get the form layout to mimic a table like structure so that all the input elements line up. I have the following: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Home</title>
<style type="text/css">
.csc-mailform-field label { width: 10em; }
#mailformformtype_mail { margin-top: 1em; }
</style>
</head>
<body>
<form action="contact/contact-form/" id="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','First_Name,First%20Name,Last_Name,Last%20Name,Email,Email,Email_Message,Ema il%20Message','','','')">
<fieldset class="csc-mailform">
<div class="csc-mailform-field">
<label for="mailformFirst_Name">First Name</label>
<input type="text" name="First_Name" id="mailformFirst_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformLast_Name">Last Name</label>
<input type="text" name="Last_Name" id="mailformLast_Name" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformSuffix">Suffix (e.g. Ph.D., M.D.)</label>
<input type="text" name="Suffix" id="mailformSuffix" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail">Email</label>
<input type="text" name="Email" id="mailformEmail" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformPhone_Number">Phone Number</label>
<input type="text" name="Phone_Number" id="mailformPhone_Number" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformCompany">Company/Institution</label>
<input type="text" name="Company" id="mailformCompany" size="14" value="" />
</div>
<div class="csc-mailform-field">
<label for="mailformEmail_Message">Email Message</label>
<textarea name="Email_Message" id="mailformEmail_Message" cols="14" rows="5"></textarea>
</div>
<div class="csc-mailform-field">
<input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send Message" class="csc-mailform-submit" />
</div>
</fieldset>
</form>
</body>
</html>
I thought that by setting the width of the labels, it would force the inputs to all line up but apparently this does nothing. Also I did not place the size attributes on the input, this is a form generated by a CMS. Anyone able to guide me to find where to edit form elements? I want to change the 'check box' and 'drop down menu's' Suppose I have: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//**********************************************************
// This function adds another field to the form based on
// what field name is passed in.
//**********************************************************
function add_item(field) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(field + '_field');
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
// Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} // end if(document.createElement)
else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
} // end else
} // end function add_item(field)
//**********************************************************
</script>
</head>
<body>
<form>
<table>
<tr>
<td><label for="images">Images (for banner and sidebar)</label></td>
<td>
<ul id="images_field">
<li><input type="text" id="images_0" name="images_0" /></li>
</ul>
</td>
<td><input type="button" id="button" value="Add another image" onclick="add_item('images');" /></td>
</tr>
<tr>
<td colspan="3">
<label for="misc">Misc. (anything that falls outside of the above categories)</label><br />
<textarea rows="3" cols="3" id="misc" name="misc"></textarea>
</td>
</tr>
<tr>
<td colspan="3"><input type="submit" id="submit" value="Submit project" /></td>
</tr>
</table>
</form>
</body>
</html>
When I click the add another image button, it will create a new form field for another image. But it keeps stacking them on top of the elements below it. I would like for everything below it to be shifted down when a new element is inserted. I tried the clearfix method but couldn't get it to work. Thoughts? Edited to say that this behavior only appears in FireFox. Hi, If I place an input field or select box in a div and set the display to none - will that variable still be sent when the form is submitted? Thanks, Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS? I'm thinking of something similar to this (but without the JS): http://ryanfait.com/resources/custo...-radio-buttons/ If you have a CSS menu that has drop down menu items and form elements near the top of the page, the menu disappears behind the form elements in IE 6. For an example of what I'm talking about, go he http://www.swingleandassociates.com/catalog/tindex.php?section=c.training.php Hover your mouse over CONDITIONS and you'll see that the menu disappears behind the drop down box. Does anyone know how to fix this? I tried messing with z-index but it didn't seem to work. I may not have done it right thought. Anyone got an answer for that problem? Hi, I'm having a problem and was wondering if CSS can help me do what I need to. I have to build a form based on dynamic fields taken from a database. The form front end has to look nice and conform to spacing that is laid out in the paper version of it. An example of this would be: Name: ____________________ Address: __________________ That's the first line of one particular form. The problem lies in the fact that these fields are all dynamic, so I have no idea how long the field label will be. In one case it could be "Name" but in another it could be "First Name". I'd like to know if it's possible to set the text fields to automatically size to fill in the empty space left between each label. Otherwise I guess I'm going to have to setup a table that has a fixed width for the labels based on what I think could be the longest label name. |
|||||||