|
CSS - Css Form Layout
I'm having trouble positioning my form elements how I want them. The following code shows correctly in Mozilla but in IE, there are spaces around the form elements. How can I get rid of all the spacing?
PHP Code: <form> <div style="border:1px solid;width:200px;height:20px;"></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <div style="float:left;border:1px solid;width:100px;height:20px;"></div> <div><input style="border:1px solid;width:100px;height:20px;" /></div> <input type="submit" style="font-size:12px;border:1px solid;width:200px;height:20px;" /> </form> Take a look at this comparision image: Thank you! By the way, I've also tried using a table and was still unable to get rid of all the spacing. Similar TutorialsI need css relative positioning for a web form interface on a browser page, so it is located (Center/middle) despite browser size. Then I need each of the elements inside of the form table absolutely positioned in relation to the box. The are eight graphics that surround the table. I would actually like to get rid of the table completely if it was possible. I believe the is a cleaner and more efficient way of doing this in css, but I haven't got a clue as to where to start? I have just read that I can apply the styles to this page in the header instead of being pulled from a universal style sheet, I would like to do this as this is a login page and is page is unique from the rest of the site. Any and all help greatly appreciated. Hello, I have been working for a few days on this form layout and it works pretty much the way I want it to in FF but everything goes to hell when I open it in IE. If you look at the code the three <td class="td_spacer"> elements are floated to the right but I dont know why the in IE they extend vertically off the page instead of reaching the predefined width of the form, where they should then be forced down to the row below. I hope someone can help me make sense of this. Code: form{
display:block;
width:566px;
margin:0px;
padding:0px;
}
#form_table{
border-style:solid;
border-color:black;
border-width:thin;
border-spacing:0px;
border-collapse: collapse;
float:right;
width:564px;
margin:0px 0px 50px 0px;
padding:0px;
}
#form_table thead tr{
color:white;
text-align:left;
background-color:#1B1B1B;
border:solid black thin;
}
#form_table tbody tr td{
float:right;
display:block;
}
#country_list{
list-style-type:none;
margin:0px;
padding:5px 0px 0px 0px;
}
.td_spacer{
display:block;
margin:0px;
padding:10px 0px 0px 0px;
}
.input{
width:300px;
}
#message_box{
width:558px;
height:286px;
}
Code: <form name="jobs" action="php/rtProcessor.php" method="post">
<table id="form_table" summary="post form">
<thead>
<tr>
<th><span class="">Post</span></th>
</tr>
</thead>
<tbody>
<tr>
<td style="float:left;">
<ul id="country_list">
<li id="china"><input type="radio" name="color" value="red" />red</li>
<li id="japan"><input type="radio" name="color" value="green" />green</li>
<li id="korea"><input type="radio" name="color" value="blue" />blue</li>
<li id="thailand"><input type="radio" name="color" value="orange" />orange</li>
<li id="other"><input type="radio" name="color" value="Other" />Other</li>
</ul>
</td>
<td class="td_spacer">
<label for="companyname">Company Name:</label>
<input type="text" id="companyname" name="companyname" class="input" />
</td>
<td class="td_spacer">
<label for="email">E-Mail Address:</label>
<input type="text" id="email" name="email" class="input" />
</td>
<td class="td_spacer">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" class="input" />
</td>
</tr>
<tr>
<td>
<label for="message">Listing:</label>
<textarea id="message_box" name="message" rows="16" cols="67"></textarea>
</td>
</tr>
<tr>
<td>
<label for="hii">1+1 is?</label>
<input type="text" id="hii" name="hii" class="input" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit" name="submit" />
</td>
</tr>
</tbody>
</table>
</form>
Hello, I've got a problem which kind of puzzles me. I've made a website build up trough <DIV> tags and CSS. Now all went well till I wanted to insert a <FORM> tag. The moment I inserted that my wholy CSS goes haywire. Here is an example: http://ni.guildscentral.net/without_form.html http://ni.guildscentral.net/with_form.html Now the only difference between those two pages is the following: Code: <!-- Styles start -->
<form method="POST" action="">
<div id="styles">
<select size="1" name="style">
<option value="1">Hunter 1</option>
<option value="2">Hunter 2</option>
<option value="3">Mage</option>
<option value="4">Fight</option>
<option value="5">Illidan</option>
<option value="6">Arthas</option>
<option value="7">Lich King</option>
<option value="8">Soldier</option>
<option value="9">Oversight</option>
<option value="10">Infernal</option>
</select><input type="submit" value=">" name="Go" width="8px">
</div>
</form>
<!-- Styles end -->
Now I haven't got a clue why all my frames move to the left the moment I put that FORM tag in. Do you have any ideas/suggestions ? I need some people to bounce ideas off of. I am having a real hard time coming up with a layout that is accessible and fits my layout. The form is very simple with two radio buttons and a text field. What I want is for the two radio buttons to display as a block but fit in a tight spot and the text field to float to the right and center if the two radio buttons. Here is a quick photochop of what I am going for. gary.webb.waptug.org/projects/epls/ Here is a link to the code I am building. gary.webb.waptug.org/projects/epls/images/search.gif Notice in the image that I have modified the banner a bit to fit the search form into the bottom dark blue bar. Thanks in advance. Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom I am working on the new home page which is based on a template. The left sideColumn is working fine, however I am having a few problems with the mainColumn layout. Here is a static image to show what I want it to look like Here are the problems I am having: 1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden. There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want. 2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css: #home img { margin: 5px auto 5px auto; } which I thought would do the trick, but it's not. 3) I want the p text to have a 40px margin on the right and left side like the .large does. Here is what I have for the css: #home p, .large { margin: auto 40px auto 40px; } It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why. Here is the xhtml starting at the 2 column part (wrapper): Code: <!--begin wrapper-->
<div id="wrapper">
<!--begin side column -->
<div id="sideColumn">
<span class="category">Products</span>
<ul>
<li><a href="/products/spirometers.html">Spirometers</a></li>
<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
</ul>
<span class="category">Resources</span>
<ul>
<li><a href="/resources/contact_us.html">Customer Support</a></li>
<li><a href="/resources/training_services.html">Training & Services</a></li>
<li><a href="/resources/exhibitions.html">Exhibitions</a></li>
<li><a href="/resources/newsletters.html">Newsletters</a></li>
<li><a href="/resources/downloads.html">Downloads</a></li>
<li><a href="/resources/useful_links.html">Useful Links</a></li>
<li><a href="/resources/industry_information.html">Industry Information</a></li>
<li><a href="/resources/industry_information.html">Sitemap</a></li>
</ul>
</div>
<!--end of side column -->
<!--begin main column -->
<div id="mainColumn">
<!-- InstanceBeginEditable name="Main_Section" -->
<div id="home">
<div id="scroll"><span>scrolling news will go hear and stop</span></div>
<img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
<span class="large">Welcome to Vitalograph</span>
<p>Vitalgraph offers a wide range of spirometers along with other asthma
management equipment with over 40 years experience. From simple hand-held
units to sophisticated Windows based spirometry systems, we have it
all. Check out our full line of respiratory equipment under the product
category.</p>
<p><a href="/about_us/about_us.html">more about us...</a></p>
</div>
<!-- InstanceEndEditable -->
</div>
<!--end of main column -->
</div>
<!--end of wrapper-->
Here is the vitalograph_master.css: Code: body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background-color: #ffffff;
color: #515151;
margin:0px;
padding:10px;
}
/*page container settings*/
#page {
width: 750px;
height: 600px;
border: 1px solid #5094F9;
background-color: #FFFFFF;
overflow: hidden;
margin: auto;
padding: 10px 10px 10px 10px;
text-align: left;
}
/*logo header and tag settings*/
#header {
margin: 0;
padding-bottom: 5px;
width: 450px;
height: 36px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
text-align: left;
}
#header img {
vertical-align: -7px;
}
.tagline {
color: #5094F9;
font-size: 16;
font-style: italic;
font-weight: bold;
display: inline;
clear: both;
line-height: 20px;
margin-left: 10px;
}
/*top bar settings*/
#topbar {
float: top;
height: 20px;
background-color: #5094f9;
clear: both;
padding-left: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:link, #topbar a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#topbar a:hover, #topbar a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#topbar ul {
list-style: none;
margin: 0;
padding-top: 2px;
}
#topbar li {
display: inline;
margin-right: 160px;
}
/*Main Section two columns under top section*/
#wrapper{
padding: 10px 10px 10px 0px;
width: 100%;
height: 100%;
}
#sideColumn {
float:left;
width:155px;
height: 78%;
background-color: #5094F9;
padding-top: 50px;
padding-left:10px;
padding-bottom:10px;
pading-right: 10px;
margin-right: 10px;
text-align: left;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-weight: bold;
line-height: 20px;
}
.category {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
letter-spacing: 5px;
}
#sideColumn a:link, #sideColumn a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
}
#sideColumn a:hover, #sideColumn a:active {
background-color: #FFFFFF;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#sideColumn ul {
list-style: none;
padding: 15px 0px 15px 10px;
margin: 0px;
}
#mainColumn {
padding: 0px;
}
/*footer*/
.footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #999999;
}
/*text*/
.large {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #5094F9;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
Here is the home.css: Code: /*home page*/
#home {
margin: auto;
}
#home img {
margin: 5px auto 5px auto;
}
#home p, .large {
margin: auto 40px auto 40px;
}
#home a:link, #home a:visited {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #5094F9;
font-size: 12px;
font-weight: bold;
}
#home a:hover, #home a:active {
background-color: inherit;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #990099;
font-size: 12px;
font-weight: bold;
}
#scroll {
width: 560px;
padding: 5px;
background-color: inherit;
border: 1px solid #5094F9;
margin-bottom: 5px;
}
Any help or suggestions are greatly appreciated. Hi there and thanks for reading & helping! I am new to this site, but here is my question: I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible? Attached is my html page and my css file. The css is a template i got off ssi-developer. I'm changing it around a bit to fit my needs. The way I have the page now is fine I'm just curious to know if I can do this one thing. What I'm wondering is if I have to make different classes for the multiple rows that I have. Is there a way I can make the same layout without making all the rows. Once you see my files you will get a better understading of what I'm trying to accomplish. The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work? Thanks Hi I have a problem where my design does not look the same in 2 browsers for MACS. Netscape 7 MAC OSX 10.3 and Opera 6 MAC OSX 10.3. If you take a look at http://dmumford.bizhat.com/calibre/ you will see what it is supposed to look like. The links below are the MAC screenshots taken from browser cam http://www.bullsigns.com/netscape7-mac-osx-10.3.jpg http://www.bullsigns.com/opera6-mac-osx-10.3.jpg If anyone could help, i would be eternally grateful, as I have never needed to worry about MACS before. Thank you Hi, The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox. Can anyone suggest how I can fix this? Daniel I'm working on converting a website from tables to div's and running into one little issue. The site is a basic header on top, navigation on left, content on right and a footer on the bottom. I would like the navigation div to grow in height to match the height of the content div so that the background fills the left side of the page. I have placed the nav and content divs in a container div and set a min-height on the container. I was hoping that that would let me place height: 100% on the navigation div but it isn't growing ever. Is there a way to get something like this done? FYI, the site is currently at http://users.adelphia.net/~mmorasch/ So I'm trying to get a semi-liquid layout that has the side benefit of allowing the HTML page content to be organized in a way that losing the stylesheet won't kill it. Ideally, the HTML page would be: LOGO BREADCRUMBS CONTENT MENU RIGHTSIDE CONTENT FOOTER Unfortunately, I've had to move the rightside content up in the page order since I can't seem to configure my CSS in a way that makes it work the other way. This is as far as I've gotten, and I can't get the footer to properly begin at the end of the longest element. I know it's a side effect of the absolute positioning of the Logo and Menu, but I can't think of a way to layer this stuff any better. Help! If you can help me get this up and running, I'll be sure to thank you and hit you back with a link on my site when it's done. Since I can't link directly to anything yet, here's the image of what the layout should look like. I want the footer to fall under the scroll bar if there is one, I don't want a ever-present footer. Code: www.ctechsinc.com/temp3/mockupb.gif Code:
* {
padding-left: 0px;
margin:0px;
}
table {
border-collapse:collapse;
}
img {
border:none;
}
#container
{
width:100%;
}
.logo {
float: left;
height: 260px;
width: 200px;
background-color: #0099CC;
}
.menu {
background-color: #996699;
width: 200px;
height: 150px;
float: left;
position: absolute;
top: 260px;
left: 0px;
}
.greenwrap {
background-color: #006633;
margin-left: 230px;
margin-top: 10px; /* this can be deleted once implemented; it's only here to help align things */
}
.breadcrumb {
background-color: #99CCCC;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.content {
min-width:220px;
height:100px;
background-color: #00CCCC;
float: left;
}
.contentwrap {
background-color: #00FF99;
float: left;
}
.sidebar {
width: 200px;
background-color: #3399FF;
float: none;
right: 0px;
position: absolute;
}
.box1 {
background-color: #00FFFF;
min-width:220px;
margin-top: 20px;
margin-right: 220px;
margin-bottom: 20px;
margin-left: 20px;
}
.qlink {
margin: 20px;
}
.footer {
margin:0px;
width: 100%;
float: left;
clear: none;
}
Code: <html>
<head>
<link href="screen2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<div class="logo">
Logo
</div>
</div>
<!-- content, RH -->
<div>
<div class="greenwrap">
<div class="breadcrumb">
<h1>BREADCRUMBS</h1><br>
</div>
<!-- <div class="content"> -->
<div class="contentwrap">
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
<div class="box1">
<h2>heading!</h2>
<p>Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks. Lorem Ipsum buttsecks.
</p>
</div>
</div>
<div class="sidebar">
<div class="qlink">
<p>boring content boring contentboring content boring contentboring content boring contentboring content boring contentboring content boring content
</p>
</div>
</div>
<!-- </div> -->
</div>
<div class="menu">
<p>Menu</p><p>Menu</p><p>Menu</p>
</div>
<div class="footer">
<p>Fooooooooooooooooooooooooooooooooooooooterrrrr!</p>
</div>
</div>
<!-- menu -->
</body>
</html>
I'm using a similar template to the one located he http://www.linux.co.uk In Internet Explorer you'll notice a space to the right of the "sponsored links" text in the right hand portlets area. Also a space at the bottom of this same porlet on the left hand side. It seems to be aggravated at different font sizes. These spaces don't show up on Mozilla, it works perfectly. Any ideas for fixing this behaviour? Thanks.. -j. tiny pic .com/nqb f9i.png Hey, I'm super sorry for the url but that's the ONLY way you guys will know what I'm talking about. Obviously I'll be doing the more advanced graphics later. Please answer the following questions: I would like the white and the yellow to go on for the rest of the page (no matter how big your monitor is). How would I do this? I also want the green and the dark blue to stretch if I were typing more and more. (I know I would have to save the bottom of the sections of those images and the middle if I were to do this.) And I need this to be completely centered on the webpage. Overall, I can handle the rest. So what attributes/properties do I have to study to get this to work? If you're feeling super nice you can code it for me. ;D The site I'm working on is located at the following address: http://www.solinari.net/div.php On the left, the navigation is in two pieces - a left and a right piece. I need to have both pieces extend to the bottom of however long the page is. The bottom div's of both pieces of the navigation each have an image repeating vertically, my question is how to get the div to extend to the bottom of the page. Any help would be greatly appreciated. Regards, Solinari I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so. Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas. I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about. I'm anxious to hear whether this can be acheived or not. Thanks! -B Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie. my code is index.html 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- container -->
<div id="container">
<!-- start wrapper -->
<div id = "wrapper">
<!-- start header -->
<div id = "header">
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<h5> BANNER GOES HERE</h5>
<!-- start nav -->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<!-- end nav -->
</div>
<!--end header -->
</div>
<!-- end wrapper -->
</div>
<h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
<!-- end container -->
</div>
</body>
</html>
css file Code:
/* general html element formatting */
html, body, table {
font-family: verdana, arial, sans-serif;
font-size: 7pt;
color: #000000;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px 10px 0px;
text-align: center;
}
h1 {
font-size: 150%;
margin-top: 0px;
}
h2 {
font-size: 130%;
}
h3 {
font-size: 110%;
}
h4 {
font-size: 100%;
}
h5 {
font-size: 100%;
color: #FFFFFF;
}
#container {
background-image: url(images/background_gradient2.jpg);
border: 1px solid #000000;
}
#wrapper {
width: 760px;
height: 600px;
background-color:#FFFFFF;
margin:10px auto;
border: 1px solid #000000;
text-align: left;
}
#header {
width: 760px;
background: #242424;
}
#nav {
border-bottom: 1px solid #000000;
}
#nav ul {
padding: 0;
margin: 0;
background-color:#242424;
}
#nav ul li {
display: inline;
padding: 0;
margin: 0;
}
#nav ul li a {
font-size: 120%;
color: #FFFFFF;
background-color:#778899;
text-decoration: none;
padding: 0px 25px 0px 25px;
border-right: 0px solid #000000;
text-align: center;
width: 9em;
}
#nav ul li a:hover, #nav ul li a:focus {
background-color: #990000;
}
please find attached a screenshot in firefox. Any help is appreciated. thanks! Hi, Can someone help me with why the content inside of this layout extends past the inner yellow box in IE7? It looks fine in both Firefox and IE6. I just can't figure out what to do to make it work in IE7. http://www.factoryshoe.ca/locations.php |
|||||||