|
CSS - Positioning Random Form Elements So They Look Good - Any Design Rules Or Suggestions?
I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page.
My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row. Does anyone have some good form organization rules that could help me? Thanks!! Similar TutorialsHello 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. 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 I have a design that I need to slice out. I had done this previously making the logo (the cocktail glass/flag/name/ball and green) in a sep div using a .png background and z-index layer for positioning. The problem is, in IE it came up with the ActiveX prompt to present, and in FF, It didn't show up. What I'm trying to do is, keep the dropshadow on the logo over the rest of the imagery. Am I over thinking this??? http://www.rustbug.com/the19thhole/index.html I don't really have a designers eye, so stuff I make tends to look like crap, but I try and make sure it's fuctional. I have a quick thing I made for an internal project at work, but need some suggestions on the design. It's mostly CSS based, but right now I see at least one problem with it: The side bar is positioned using fixed positioning, so if I fill up the bar, the stuff that falls off the end won't be available anymore. I don't want to use overflow: auto/scroll because it would make a nasty scrollbar in the middle of the page rather than on an edge. My server isn't working right now so I can't upload the copy of the page/css I made to it, so I will attach a zip file of the files. Any suggestions for improving this so that the problem I see is elimated, but a decently looking page still exists would be appricated. I was just wondering if any knew any good books on CSS (especially how it pertains to webdesign). One good example is Eric Meyer on CSS. Thanks so much! http://www.mihomeanddesign.com/test/ I was hoping someone would have a suggestion as to how to lay this site out without using absolute positioning for the #mainimage div. I know that I could float it right within the main wrapper, but I also want the top nav and the footer to extend 100%. I want to do this to avoid having to put "style="padding-bottom: 423px; " in every <p> at the bottom of the page if there is not a lot of text on it... like on the home page and the contact page. Any suggestions would be greatly appreciated. Hi guys, could you help me out with following issue: See this Picture for better understanding: http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink WHat i have is a div container (mainContent) In which i have some text in a Paragraph <P> and in the middle of this <P> i am trying to make a box which will contain a list of links. Have no clue how to achieve this. My idea would be: <div id: mainContent> //text//<div style="???"> //Link//<div style="float:right; DONT Know how to lower vertically??"> Good ideas for where i can find a solution? Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own. Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning. Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/ Before I make the full site I want to work out layout troubles I've been having. I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice. So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers? Here is the code that I think is relevant: Code: p {font-size: .75em; font-weight: bold; margin-left: 12em;
margin-top: 8em;}
#content {margin-top: 10px; margin-bottom: 10px;
margin-right: auto; margin-left: 3em;
width: 800px; padding: 20px;
background: transparent;}
#overlayback {position: absolute; top: 8em;
left: 15em; width: 250px; height: 250px;
z-index: 0;
filter: alpha(opacity=80); opacity: .80;
background: #FFF;}
#overlaytext {position: absolute; top: 3em;
left: 15em; z-index: 1;}
h1 {font-size: 6em; margin-left: .1em;
margin-top: .75em;}
h2 {font-size: 1em; font-weight: normal;
margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
<div id="overlayback"></div>
<div id="overlaytext"><h1>fasu</h1>
<h2>2006-2007</h2>
<p>coming soon</p></div>
</div>
I hope I've been clear and thanks in advance for any advice. It's very much appreciated. I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div. I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo. the (pertinent) css is: Code: #main {
width: 875px;
background-color: #FFCC77;
border-style: inset;
border: 2px solid #008080;
margin-left: auto;
margin-right: auto;
}
#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;
}
#logo {
width:300px;
height:155px;
float: left;
}
#contact_info {
color: #800080;
font-variant: small-caps;
font-family: sans-serif;
font-weight: 500;
font-size: 14px;
padding-top:0px;
padding-right:10px;
float: right;
}
#picture {
width: 160px;
height: 139;
margin: 10 10 10 10px;
}
The html is: Code: <body>
<div id="header">
<img src="Styles/redonelogo.jpg">
<img src="Styles/picture.jpg">
<div id="contact_info">
<p>Casa Grande Acclaim Realty<br/>
11283 N. Henness Road<br />
Casa Grande, Arizona 85194 <br />
Phone: (520) 560-8366 <br />
Fax: (520) 421-1444
</p>
</div>
<div id="slogan">
Serving All of Pinal County
</div>
<ul id="nav">
<li><a href="About" target="_self">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="index">Home</a></li>
</ul>
</div>
<div id="main">
<div id="border"></div>
<div id="innerloop">
<div id="equal"></div>
<div id="mls"></div>
<div id="secondinnerloop">
<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
<div id="PicBackground">
<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
</div>
<script type="text/javascript">
RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
</script>
</div>
</div>
</div>
</body>
</html>
Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains. i need it to just be in the bottom right hand corner. how can I do this? here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried. http://www.doublethinkdesigns.com/main.php Ok, I have a really weird problem (don't you love it when people start like that?). I have four elements absolutely positioned inside of a relatively positioned div. As you probably already guessed, everything renders correctly in FF/Moz, but screws up in IE. In the following code, please ignore any validation mistakes, as the real page does validate xhtml 1.0 strict. Code: <div id="outside">
<div id="inside">
<img id="logo" src="logo.png" />
<img id="banner" src="banner.png" />
<img id="topRightCorner" src="topRightCorner.png" />
<img id="bottomLeftCorner" src="bottomLeftCorner.png" />
</div>
</div>
Code: #outside #inside{
position: relative;
top: 0;
left: 0;
/* positioned parent */
}
#outside #inside #logo{
position: absolute;
top: 50px;
left: 50px;
/* logo */
}
#outside #inside #banner{
position: absolute;
top: 60px;
left: 75px;
}
#outside #inside #topRightCorner{
position: absolute;
top: 0;
right: 0;
}
#outside #inside #bottomLeftCorner{
position: absolute;
bottom: 0;
left: 0;
}
The first three position corectly. "bottomLeftCorner" seems to follow its own path, and aligns its self to the bottom of the "outside" div. If I remember correctly, absolute positioning of an element will position it absolutely (duh) in relation to its nearest positioned parent, which in this case is my "inside" div. Here's where it gets quirky (no pun intended) though. When I change the position attribute from "bottom" to "top", the element will gladly position its self wherever I want it, within the "inside" div. Is the "bottom" attribute causing a problem within IE? Am I trying to reference too many child ID's for IE to handle? Am I missing a rule that says the parent has to have the EXACT same atributes as the child? I assume the answer to all three is no, but I thought I'd give it a shot here anyways. Any ideas? Thanks, all! How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected. i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div. The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div. Code: <div id="adult"> <?php echo "<ul><li>test1</li></ul>"; ?> </div> <div id="qanda"> <?php echo " <div id='questions'> <ul id='questionsul'> <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li> </ul> </div> <div id='answers'> <ul id='answersul'> <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li> </ul> </div> "; ?> </div> <div id="amount""> <?php echo "<ul><li>test3</li></ul>";; ?> </div> <div id="results"> <?php echo "<ul><li>test4</li></ul>"; ?> </div> <div id="contributing"> <?php echo "<ul><li>test5</li></ul>"; ?> </div> <div id="advert"> <?php echo "<ul><li>test6</li></ul>"; ?> </div> </div></div> CSS Code:
#questions{
position:relative;
top:0px;
text-align:left;
}
#answers{
position:relative;
top:0px;
text-align:right;
}
#adult{
width:700px;
margin:0 auto;
}
#qanda {
width:700px;
margin:0 auto;
}
#amount {
width:700px;
margin:0 auto;
}
#results {
width:700px;
margin:0 auto;
}
#contributing {
width:700px;
margin:0 auto;
}
#advert {
width:700px;
margin:0 auto;
}
hey, I have 4 block elements like this: Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> <div id="banner"> </div> <div id="logo"> <img src="images/logosmall.png"> </div> <div id="registercontent"> </div> <div id="footer"> </div> </body> </html> and the following CSS: #banner { height: 75px; width: 100%; background-image: url(images/bg1.gif); } #logo { position: absolute; top: 30px; left: 34px; z-index: 10; } #registercontent { position: static; width: 600px; margin-left: 50px; margin-top: 50px; margin-bottom: 50px; padding-top: 20px; padding-left: 25px; font-family: verdana; font-size: 12px; border: 1px solid #39ce96; color: #39ce96; background-color: #efefef; } #footer { height: 75px; width: 100%; background-image: url(images/bg1.gif); } now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated. I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy! this is my html:<body> <div id="container"> <div class="box"> <h1>Silver City Food Co-op</h1> <p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div> <div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div> <div class="box2"><div class="box3"><p2>Food News</p2></div></div> </div> </body> </html> this is my CSS body{background-color: #69916D} h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px} p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px} p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px} div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501} div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2} div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1} div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px} body { text-align: center; } #container {margin: 0 auto; width: 750px; text-align: left } Thanks for the help!! Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page: http://www.zeroonedesign.com/aboutus.html Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit. Take a look at my version he http://obelix.ca/zeroone/aboutus.html I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures? In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done? You can see the code in action HERE. Code:
<html>
<head>
<title>Test</title>
<style type="text/css">
.input-box
{
color: #26a;
background: #feb;
border: #26a solid 1px
}
#div1, #div2, #div3, #div4
{
padding: 10px;
margin: 0 auto;
overflow: auto;
display: none;
border 1px;
}
fieldset
{
position: absolute;
left: 50%;
margin-left: -100px;
width: 200px;
padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById('div4').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
//]]>
</script>
</head>
<body onload="change('div1');">
<h1>Switch Divs</h1>
<form method="post" action="">
<fieldset>
<legend>This is my form</legend>
<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
<div id="div1">
<input class="input-box" type="text" name="search_name">
</div>
<div id="div2">
<input class="input-box" type="text" name="search_city">
</div>
<div id="div3">
<select name="search_state" size="1">
</select>
</div>
<div id="div4">
<input class="input-box" type="text" name="search_zip">
</div>
<div><input type="submit"></div>
</fieldset>
</form>
<p>Some Content</p>
<table border="1" width="100%">
<tr>
<td>Some other Content</td>
</tr>
</table>
</body>
</html>
Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it. To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties. In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well. Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design? Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo |
|||||||