|
HTML - Input Field Alignment
Hi Everyone,
I am trying to arrange 2 text input fields and one textarea so that 2 input fields are positioned vertically (one above the other) and textarea is positioned to the right of these 2 input fields. I looked on the web on how to construct rows and tables and scooped up this code where I show how I position these elements: HTML Code: <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>INPUT FIELD</td> <td>TEXTAREA</td> </tr> <tr> <td>INPUT FIELD</td> <td>blank</td> </tr> </table> But the problem is that text area creates a huge vertical space between 2 input fields that is equal to the height of textarea. I need textarea and input fields to be independent of eachother and for textarea height not to affect the vertical space between the 2 input fields. Could somebody, please, tell me how this can be done? I tried to insert additional tables and tried to also create it in DreamWeaver but I am not that knowledgeable with these tools. Please help, Thanks, Victor. Similar TutorialsOk so here is my issue, i am new to web site design and i have a simple project i would like to work on. I am looking to have an entry box with a simple submit button, then i would like the submissions to be displayed below in the order they are submitted. I would also like to limit the number of submissions that show on the page at a given time by creating multiple pages that can be viewed. This seems like a very simple issue but im having trouble finding solutions on the web. Would inserting a java app or some other secondary tool be better? Any help is appreciated -Matt i would like the following to be the same size in every browser. i currently have it fitted for firefox. it's almost perfect in internet explorer, but about a pixel too long. as for opera, it is actually a bit too short. any ideas? http://bombfubk.bravehost.com/test.html html: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="css/test.css" rel="stylesheet" type="text/css" /> </head> <body> <form action="" method="get"> <label for=""> <input name="test" type="text" id="test" value="bfgbfbfbf" size="69" /> </label> </form> </body> </html> css: form { margin: 0px; padding: 0px; } label { background-color: #009933; display: block; padding: 5px; width: 440px; } So I'm really new to html and I apologize if I'm asking a really obvious/ stupid question. Is there any way that I could make an input button/ form and retrieve the input field value in a specific place? I mean like, is it possible to have the input value sent as a comment in a specific livejournal post? Hi I want to do two things: 1) pre populate the input field (the following isn't pre populating in FF) <input type='text' name='txt' id='txt' onFocus='this.select()' VALUE='GIGS' class="formInput" /> CSS: form input {padding-top:5px; font-size:large; background-color:#fff; border:none; height:31px;} 2) make the pre populated text have a different format to the text people write in it. Is it possible? Will it be html, or involve JS? Thanks for your time and help. Shaun Hi, What I have is a search field that searchs from say 200 - 400 and displays anything in between that figure. What I would like it to do is also show results from 400 - 499. Is there away of adding 99 to any value entered so rather than searching for 100 it is searching for 199. But when it gets to 1000's it would need to be 999. Is this possible? If so is it possible cn you do it without displaying the 99 so it shows the figure they entered but in the background its doing the work? Thanks alot Joe Hi, i'm new here and fairly new to html and use a point and click interface for making websites. Can someone help me with an html code that can do the following?: -Its an large input field for visitors to post text and pictures which will then be sent to my email-, to be reviewed for content by me. I will then edit the website with the visitor's content. Sorry if it wasn't clear enough. Thank You, Frostysnow Hi Guys I have a text input field in a form that has data in it from a previous entries. Is there something i can do that ensures the field is empty when the form is pulled up? Thanks everyone How do I prefill an input field in a form? I don't mean "value=hello" I mean have a light gray text inside that says "enter your first name" and then when the user starts typing that text disappears. I thought there was an html tag that did this (or a form tag like type=""). I hope it doesn't require CSS... thanks! Hi all, I have a text input field, and I would like it to autocomplete from a list. For example the input field is for cities, and when the user types 'lon' I want it to automatically show a list of cities that have lon in the beginning of it's name, or if there are no others for it to autocomplete for the user. It doesn't necessarily have to be a text input element, it can be something else I just don't know what to use or how to go about it. Anyone got any ideas? The page can be found he http://www.trinityacademy.org/alumni/addressBook. You can tab from field to field but can't click on the fields. IF Google toolbar is enabled then you can click on the fields that Google recognizes for autofil but not on the fields it does not. I am baffled by this one. Any ideas??? I have some fields and a Select option, I want to add a new field if I select "Add" option, and remove field when I select "Remove" option, can I do it in very simple JavaScript? This should be so simple task but no. How can I pass input field value to the function? What I read from the input field, as soon as I press the "Save results" the value of the input field should be passed within the function. All I can do is puit 'stuffhere' and it works but simply can not manage to retriveve the input data! <form name="inputData"> <input type="text" name="userName" size="32"/><br /> <a href="#" OnClick="SetText('resultHandler','Username',' stuffhere ');SendMessageToTheObject('resultHandler','saveResult');return true;"><font color="red">[Save result]</font></a> </form> Hey, I'm jst starting to learn html and I was someone could give me an example of how to create a a simple form with 2 input fields which are set to a value say "hello" in first field and "World" in second field when the button is clicked. Thanks Hi What is wrong with this, it can't post text only post checkbox <html> <head> </head> <body> <FORM action="http://localhost:8182/items" method="post"> <P> <LABEL for="firstname">First name: </LABEL> <input type="text" value = "Hamada" id="firstname"><BR> <LABEL for="lastname">Last name: </LABEL> <input type="text" value = "I hate my life" id="lastname"><BR> <LABEL for="email">email: </LABEL> <input type="text" id="email" value = "I hate you"><BR> <INPUT type="radio" name="sex" value="Male"> Male<BR> <INPUT type="radio" name="sex" value="Female"> Female<BR> <input type="submit" value="Submit"> <INPUT type="reset"> </P> </FORM> </body> </html> Thanks Hi All, I am pulling some data from MySQL and i need to display on screen with Left / Right Alignment. For The example <table width="85%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td> Now here i am looking if database-loc = left the data will go left side else it will go right side.\ pulling data from DB is okay with me. Now i am looking some idea how to format div so it shuld set accordingly. Currenly i tried the below but all go to the left. <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="left">Left Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> <div align="right">Right Line</div> It is going in right side but it is down of left <div> it must go to the top with right direction some thing like valign="top" </td> </tr> </table> I hope i explain it well, i am sorry for my language. I don't understand! On my end when I upload it to the server and open an html file in the browser, everything looks fine. But when other people look at the site, it looks totally different. Text boxes are disgusting, I use CSS positioning and it puts everything totally off of the layout. Hope someone can suggest something. I am working with a programme that uses three templates to structure the web site, feeds articles, author page and site map on a daily basis to my web site. I attempted to insert Adsense ad units to templates and unfortunately everything is out of line now. this can be viewed at http://daviddutch.com/currency/articles/index.html Question is how do I bring everything else back in line please as when I look at coding there is no clear place to put the adsense HTML code to get things lined up correctly. Hope someone can offer wisdom and guidance. cheers I have a div which contains a line of text as a url. When clicked, a div is displayed directly below, and the content is different depending on the user. Currently, the div opens and two left hand sides align. I would like to cause the right hand sides to align instead, with the divs growing to the left if the text is larger. Is this possible? This is the first site I've done. I want to add some screenshots to the center of the page but can't figure out how to keep the links in place at the left. When I add the pics the links move down to make room for the pics. How do I get the links to stay in place at the left of the screenshots? Thank you for any help. Krytin http://ghostfleet.bravehost.com/ghostfleet.htm It's not that huge of a deal because its only an under construction page... but I'd like to know how to get this page looking the same in both IE and Firefox. The only real issues with IE right now is that the image isn't centered and the yellow tape bg is 1px off from where it should be... thanks for any help! http://www.pzfantasyfootball.com Code: <html>
<head>
<title>PZ Fantasy Football » Under Construction</title>
<style type="text/css">
* {margin: 0; padding:0;}
p {margin-top: 15px;}
h2 {font-size: 25px; border-bottom: 1px solid #fff; margin-bottom: 10px;}
body {
background-image: url(images/Metal_Texture-PhotoshopTower.jpg);
background-color: #000;
color: #fff;
font-family: calibri, arial, verdana;
}
a, a:visited, a:active {color: #09f;}
a:hover {color: #06c;}
#wrap {
width: 800px;
margin: 0 auto;
}
.yellowtape {
position: absolute;
bottom: 0;
width: 100%;
height: 524px;
background-image: url(images/yellowtapebg.gif);
background-repeat: repeat-x;
}
.construction {
position: absolute;
bottom:0;
background-image: url(images/pzfantasyfootballunderconstruction.jpg);
width: 800px;
height: 600px;
}
.text {
position: relative;
left: 300px;
top: 225px;
width: 500px;
font-size: 18px;
text-align: left;
}
</style>
</head>
<body>
<div class="yellowtape"></div>
<div id="wrap">
<div class="construction">
<div class="text"><h2>11/1/07 » Site Under Construction Again</h2>Well once again we enter construction mode. I just wasn't feeling the league site, no one really used it much, it didn't have much content that Yahoo! couldn't already offer, and it just really ended up being a waste of time. So now I'm going to give it a shot with a fantasy help site. I know I've done this before, but my future may hold something in the sports industry, so now I look to try and establish a well read site in order to help achieve my goals. I'm not 100% sure if the new site will be done before the end of this season, however it should be done in time for the 2008 NFL Draft. Hope to see you all soon!
<p />Oh, and feel free to contact me via the forums <a href="http://www.pzfantasyfootball.com/forums">here</a>.
</div>
</div></body>
</html>
|
|||||||