|
CSS - How Can I Make A Good-looking Form?
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? Similar Tutorialshi, I have a problem with my website. On one of my computer my website proportions look right, but on my other computer it looks proportioned different. On my Computer everything is ok,but on my friends computer the web pages are not good. the css styles are ok but some images are bigger and some are small.how to solve this problem thanks mrjameer Does anyone have any idea what could be happening to my main menu - it dissappears in Safari! Hobo 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!! I would like to learn how to make an Image Opt in Box / Form. Similar to a search box, but with a nice image I design in Photoshop. I would like to edit the text fields in the image. Name Telephone Can someone help? Hello, This one looks good on IE7/FF but not with IE6 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#picture {
position:relative;
float:left;
left:6px;
color:#ff0000;
top:15px;
}
.name_txt {
position:relative;
margin-bottom:4px;
float:left;
font-size:10px;
width:235px
}
</style>
</head>
<body>
<div id="picture">
<p class="name_txt" style="float:left; width:100%"><img src="Blue hills.jpg" alt="" width="112" height="85"/></p>
<p class="name_txt" style="float:left; width:100%"><img src="Sunset.jpg" alt="" width="112" height="85"/></p>
</div>
</body>
</html>
I've mucked up my css a bit. Works great in IE but not in FireFox. Submenus are not under their main menu item. and I can't seem to get it centered. Here is the site. Causeway Lighitng And here is the css (it the nav2 portion that controls the top menu) Code: #nav, #nav ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 100%;
}
#nav2, #nav2 ul {
margin: auto; /* centres the nav */
padding: 0;
list-style: none; /* removes the bullets */
width: 135px;
}
#nav li, #nav {
margin:0;
padding:0;
}
#nav2 li, #nav2 {
margin:auto;
padding:0;
}
#nav ul li {
position: relative;
width:130px;
line-height:14px;
padding:0;
margin:0;
}
#nav li ul {
position: absolute;
margin-left:134px;
margin-top:-24px;
display: none;
}
#nav li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
#nav li a {
display: block;
text-decoration: none; /* removes the underline */
color: #777;
background: #fff; /* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
}
#nav2 li a {
display: block;
text-decoration: none;
/* removes the underline */
color: #777;
background: #FFCC00;
/* necessary to fix an IE6 Bug */
padding: 0px;
border: 1px solid #ccc;
text-align : center;
}
/* Fix IE. Hide from IE Mac \*/
* html #nav li, * html #nav2 li { float: left; height: 1%; }
* html #nav li a, * html #nav2 li a {
height: 1%;
margin-left : auto;
}
/* End */
#nav li a:hover, #nav2 li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
#nav li ul li a, #nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul, #nav li.sfhover ul,
#nav2 li:hover ul, #nav2 li.sfhover ul { display: block; } /* The magic */
#nav2, #nav2 ul {
width: 100%;
}
#nav2 li {
float:left; /* makes the main nav horizontal */
width:80px; /* Width of Menu Items */
margin:0;
}
#nav2 li ul {
position: absolute; /* positions and sets width of submenus */
display: none;
float:left;
margin:0;
}
#nav2 li ul li {
position:relative;
float:none; /* stops the submenus from being horizontal */
}
/* Styles for Menu Items */
Hello, This one doesn't look good on FF 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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
font-size:10px;
top:3px;
width:100%;
}
#layer ul {
float:left;
list-style-type:none;
height:12px
}
#layer li {
display:inline;
height:12px
}
#layer a {
text-decoration:none;
border:1px 1px solid #990000;
color:#990000;
background-color:#CCCCCC;
padding:20px;
height:12px
}
</style>
</head>
<body>
<div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>
I need to link to differnt style sheets to a page and i need it so it will use one if the user has IE and a differnt one if the user is using anything else that works properly. Is this posable and if it is please tell me how? and if theres a way of doing it that uses php i would like to use that method. thanks Viewing this page in Firefox: http://moneyextra.thehelpgroup.co.uk/compare/creditcards/ProductDetails.php?index=79 - it looks fine, but when you view it in IE 6, it is really messed up Does anyone know whats causing that to happen and how I would fix it Thanks alot I have been reading alot about how much trouble we get into with IE when trying to center a div. I had a lot of trouble with it and mainly just wanted to have a fixed width site (760px or so) with a thin border all the way around it. Is the following code a good way to accomplish this? Code: <head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
div {
border: 1px solid #666666;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table width="770" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div></div></td>
</tr>
</table>
</body>
I am planning on having this as my index page and just using an "include" for the different header/body/footer elements. Would love some advice/opinions. Hey, Myspace allows users to customize their profiles with CSS, and what i've done is cover my profile with a blank DIV overlay. How can I include a flash component in my DIV? I'm trying to include this little flipbook device onto my profile sothink.com/tutorials/viewtopic.php?t=61 The flipbook you'll see is obviously not hosted by the forums (...I think,) it is hosted elsewhere and the user just included it in her bulletin post. What code allows you to do that? And would it be possible to include such a code onn my DIV overlay? Thanks, I'm having a lot of trouble getting a couple of final things to work on this CSS template design I'm doing for one of our stores. http://www.thescriptstation.com/catalog/index.php?tplDir=CSS-fluid-1 (the ?tplDir=CSS-fluid-1 is necessary to see the developing template instead of the live one) It's all looking pretty much how I want it, with a couple of exceptions, and I'd love some help with what I'm doing wrong here. Issue 1 Links in the top green bar and bottom green bar on the page - earlier I had them looking fine in FF (using margins, positions, and padding), but looked in IE and it was a big mess. So I backed up and worked on it in IE, and now its looking OK there, but in FF, I'm losing the links after the first one - it seems like they are displaying underneath one another, which is below the size of the containing style. Issue 2 In the same areas, For the life of me I can't find a way to vertically align those links inside those areas. They just go to the top no matter what I've tried. If anyone could look over the styles and see what I've done I'd be forever grateful: http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/stylesheet.css http://www.thescriptstation.com/catalog/templates/CSS-fluid-1/main_layout.css Many Thanks Hi, Here is the site I am working on: http://www.pizzaz-lingerie.com/launch.php It looks perfect in IE 7 and FF, but in IE 6 its a mess and I don't know what the problem is. I'm pulling my hair out over this one. -CJ Ok, firstly, here is the link: www.mstrgaming.com/stars Now, if you look at the website in FF, then in IE, you'll notice that the absolutely poistioned #topbar (the horizontal bar right at the top) goes over the top of the floated logo & menu (whereas it doesn't in FF, which is the desired look). I'd welcome any suggestions as to why it does this, and more importantly how to prevent it. Also, the floated logo & menu is spaced away from the left side of the page, whereas in firefox, it isn't. I welcome any suggestions! The website is reletively simple so I don't think you should have any concerns with the code, but if you do by all means let me know . Thanks! Edit - how odd, I edited the title of this thread because I missed a word, and it won't change, oh well hey i am new in developing sites with css codes so i started coding my home page with all the css code that was required and when half the page was done i checked it in the browser. so it looks good in firefox but it looks messed up in IE. So please suggest me something to fix my problems. I am using Dreamweaver to develop my site. As per the subject I'm looking for examples of attractive yet sensibly coded forms where the layout uses only CSS. I guess bad things would be where the layout is done using absolute positioning. I'm looking for something that is easy to reuse and straightforward to code a stylesheet for. Thanks, Geoff None of the browsers are looking correctly except Firefox actually. The worst is the rendering in IE. In Mac (5.x) it's the worst but in the Windows version my global navigation bar goes off the right side (XP Pro). In Mac/Safari the drop down items don't show only the divider | does though the links are hot. I haven't even tried Opera or Netscape. Anyone have a clue at all? I should have stuck to tables! Ugh. http://www.blaynecooper.com Steph Hi Can anyone recommend a good book/course on CSS that they enjoyed/found very useful? I would rather read one awesome book, then 4 so-so books/courses. Thanks Drew EDIT: Just noticed the CSS resources above. But if someone does have a link to a good ebook (free or not) or hard copy, I would be happy to check it out. Hello, I have this layout in CSS for my website www.websitemeester.nl , in Firefox it looks perfect, but IE ****s the whole thing up. Who knows why that is? How can I make it a lil better for IE? Thx, Jules #top { margin: 0px 0px 0px 0px; padding: 10px; border-bottom: 0px solid black; background: #efefef; height: 100px; voice-family: "\"}\""; voice-family:inherit; height: 40px; } html>body #top { height: 40px; } #left { position: absolute; top: 60px; left: 0px; margin: 0px; padding: 10px; border-right: 0px dotted black; border-bottom: 5px solid yellow; background-color: orange; width: 170px; voice-family: "\"}\""; voice-family:inherit; width: 150px; } html>body #left { width: 150px; } #middle { padding: 10px; border-top: 5px solid orange; background: white; margin: 0px 150px 0px 170px; } #right { position: absolute; top: 60px; right: 0px; margin: 0px; padding: 10px; border-left: 5px solid orange; border-bottom: 15px solid orange; background: #efefef; width: 150px; voice-family: "\"}\""; voice-family:inherit; width: 130px; } html>body #right { width: 130px; } Anyone know of any web developer tool bars for IE7? The things I'm looking for are in browser notification of valid markup (like the HTML Tidy plugin on firefox) and being able to edit css live (like Chris Prodericks web developer toolbar). Sorry not quite css related but sorta ... TIA, Mark |
|||||||