|
CSS - Using Css To Format Forms Instead Of Tables
Lately, I see articles everywhere telling us to ditch tables and use CSS to position forms. I don't necessarily have a problem with using CSS although I'm admitedly a bit new to using it for anything more than basics like sizing, color, borders and backgrounds. But my basic question is why ditch the tables?
Tables have been around since the inception of html. They work with any browser you care to name and the provide a valid function allowing developers to position things on the screen in a pleasing manner. The flow of data in tables is simple, so the developer and usually the user can predict where the cursor will go when the user hits the tab key. There are certainly problems with tables, such as text wrapping or being truncated when the screen resolution is lower than the developer designed for and the positioning is not as clean as absolute positioning with CSS. Absolute positioning with CSS can lead to its own problems though. If the user has fonts set to a different size or odd video settings the size of the object positioned may not be large enough to display the text. This can cause object to overlap making the page unreadable. It may sound as if I'm just trying to hang on to the old way of doing things, and there may be a bit of truth in that, but more I'm asking for valid reasons to change the way I do things. I actually like finding new ways of doing things but there has to be a benefit to it. How will swithing to CSS layout instead of tables make my pages better for my users or easier to develop and maintain for me? I look forward to your responses. Similar TutorialsSuppose I have a few tables I want to format vertically. If they are quite wide, chances are simply doing <table id="a">...</table> this will probably happen automatically. Ever, with a wide enough screen they might format horizontally. To fix this, I could to the following: <table id="a">...</table><br><table id="b">...</table><br><table id="c">...</table> but unfortunately, <br> also adds extra unwanted spacing. Is there a was to CSS the <br> tag to avoid this, or is there a CSS method to indicate that each successive table should be below the last, not to the right? Skolem my layout is a left border, main content, then right border, all vertical columns. here is their code: Code:
.left {
background-image: url('images/obj_left.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
.maintable {
width: 100%;
background-color:#FFFFFF;
border-left:3px solid black;
border-right:3px solid black;
}
.right {
background-image: url('images/obj_right.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
i also float them left, so imagine that is there. so i have code like this <div class='left floatleft'></div> <div class='maintable floatleft'></div> <div class='right floatleft'></div> but why cant i see the images in right and left? ok...This is driving me slightly bonkers. I'm trying to do forms without tables. The issue is, I need a description sometimes, and I'd like to have multiple descriptions line up properly, as if they were in a table. Here's the stylesheet: Code:
/*
CSS Style sheet for BES OOP Forms
*/
.Form fieldset
{
background-color: #FFFFFF;
border: 0px;
margin: 0;
padding: .5em;
}
.Form > fieldset
{
border: 1px solid #009;
}
.Form legend
{
background: #BBB;
border: #009 solid 1px;
padding: 2px 10px;
font-weight: bolder;
margin:0;
}
.Form .Form_Row
{
border-bottom: 1px dotted #009;
margin: 0;
padding: .25em;
clear: left;
}
.Form .Form_Footer
{
text-align: center;
border: 1px solid #009;
margin: -1px 0 0;
background-color: #EEE;
clear: left;
}
.Form label
{
width: 13em;
display: block;
float: left;
}
.Form .Form_Input
{
display: block;
float: left;
width: 20em;
}
.Form .Form_Desc
{
display: block;
float: left;
}
The issue is one of flexibility: as you can see in the attached images, it works fine as long as the .Form_Input is narrower than the 20em allotted. However, when the .Form_Input is wider than that, the description is placed over the end of the input itself, which stinks. IE does it "right", sorta, and just bumps the description over further than it really should. Any ideas? display:table, etc are out, because that doesn't work at all in IE. min-width solves the problem for Mozilla and company, but is ignored completely by IE. I really want to do this without tables...but damn. MPEDrummer I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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=utf-8" />
<title></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
could anyone tell me if there is something out of order here;? css Code: Original - css Code .heav {color: #333333; font-weight: bold; } .mast {color: #333333; font-size: x-small; font-family: Arial, Helvetica, sans-serif; } hr.center {color: #dddddd} .header {background: #CCCCCC; border-top: 2px solid #BB2F00; margin: 3px 0 0 0; padding: 3px; } .footer {background: #BB2F00; color: #FFFFFF; border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; margin: 8px 0 0 0; padding: 2px; font-size: x-small; font-weight: normal; font-style: normal; } .carL {color: #999999; font-size: x-small; font-weight: normal; font-style: normal; clip: rect(auto auto auto auto); font-family: Arial, Helvetica, sans-serif;} .pvc {color: #BB2F00; font-weight: bold;} .talign {text-align: center;} .clip {color: #FFFFFF; font-size: small; background-color: #333333; clip: rect(auto auto auto auto); } .margin {margin: 5px;}
hi all, i have a simple form with 5 fields username,email id,password,retype password and phone no.they all to be displayed in correct format as one after other.my am getting error for last field i.e.,phone no is is not displayed properly how to display the 5th field in correct format...below is the code i have written in css.. if there are more than 4 fields tell me how to display all in correct format. .form label { float:left; width:100px; padding:10px 10px 0 10px 0; font-weight:bold; } I'm new to CSS but have read more in the past two days than I care to tell you about. I'm stuck on how to reference a deeply nested element that is automatically generated by a drupal view. The problem lies with the fact that I can select it directly and style it but other views (pages) are rendered with the exact same attributes (Name, Class, and ID). The Class of the page or view is different but is nested about seven tags back. My question is: How can I select the Element to be styled when the only differentiator is so far back in the hierarchy of the page without using a local or inline CSS? The following are snippets of the two pages that share the same Element attributes (<select name="filter0" class="form-select" id="edit-filter0" >) Thanks for any suggestions you might have. Mike ********* First page ******************* Code: <div class='view view-firstview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
******** Second Page ******************** Code: <div class='view view-secondview'>
<form action="URL" method="get" id="views-filters">
<div>
<table>
<thead>
</thead>
<tbody>
<tr class="odd">
<td>
<div class="form-item">
<select name="filter0" class="form-select" id="edit-filter0" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<div class="form-item">
<select name="filter1" class="form-select" id="edit-filter1" >
<option value="**ALL**"><All></option>
</select>
</div>
</td>
<td>
<input type="submit" id="edit-submit" value="Submit" class="form-submit" />
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
I have been scouring this forum trying to find the correct answer. I have a list of links in an unordered list. I am using css to style the list. The one thing I can't seem to figure out is, if I have the wrong doctypes or my css is wrong. I have replaced the bullet for the li tags with background images. One is just a line the other is a line with an arrow. I am trying to push the type over a little past my arrow. In the css I have put a padding-left: 1 em; on the li tag. It works in IE but not firefox, so I added padding-left: 10; This seemed to push the li tag over in firefox. The next problem was when I went to put the doc types in. I put <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> above the <html> tag. Once again it worked in IE but not Firefox. I took out the doctype tag and inserted <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> inside the <head> tags. This seems to work in both IE and Firefox. Is this an incorrect way to put a doc type in? Below please see the css I am using and my header info Code: /*right hand nav bar*/
#nav ul{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 13px;
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li{
background: url(../images/divider_rht_nav.gif) repeat-x bottom;
padding-top: 0.3em;
padding-bottom: 0.6em;
padding-left: 1 em; /*this is for IE*/
padding-left: 10; /*this is for FireFox*/
}
#nav a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 13px;
color: #325087;
}
#nav a:hover {
color: #CC0000;
line-height: 13px;
}
#nav li.selected {
color: #174A4A;
font-weight: bold;
background-image: url(../images/divider_rht_nav_arrow.gif);
}
.heading {
font-weight: bold;
color: #174A4A;
font-size:10px;
}
.headingspace {
font-weight: bold;
color: #174A4A;
font-size:10px;
margin-top: 1.5em;
}
/*end style*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin Area - Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../css/master.css" rel="stylesheet" type="text/css" media="screen">
<link href="../css/master_print.css" rel="stylesheet" type="text/css" media="print">
<script language="javascript" type="text/javascript" src="scripts/validate_admin_login.js"></script>
</head>
Dear Friends, I have been trying to make a stupid title bar, that i did with tables, now using css. This is what the code for a titlebar looks like in table form: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <TR> <TD width="10"> <img src="img_inside_article_title-bar_left.gif" width="10" height="30"></TD> <TD colspan=2 height="30" background="tile_inside_article_titlebar_bak.gif"> <p class="left"> <span class="strong_white"> Title</span></p></TD> <TD width="14"> <img src="img_inside_article_title-bar_right.gif" width="10" height="30"></TD> </TR> </table> and would like to convert it into css. All my attempts have been very wrong, and i need help. I'd give my css code, but it is sooo wrong.......that it would be better to start from scratch. basically this is the idea: (Left Corner Image)(Title area that streaches across width of web page)(Right Corner Image) HELP Fz105 Hwo can a drop menu display individual colors as actual labels? ex #' to be used as css: value Label 1 #FFFFCC 2 #9999FF 3 #E2D9FF The #'s can be stored as table column values in the 'Color' table, but I can figure that out later. Right now I'm working on the initial insert into this Color table so its manual. (but can css be called on the page from dynamic values?) I've noticed some characters at the beginning and end of CSS files: Quote: /* <!-- */ /* CSS content here */ /* --> */ What is the purpose? Hi. How do I know the shorthand property value format? For example: p { margin: 1em 2em 2em 1em; } How do I know which one is top, bottom, left, right? Can u do this as well? p { margin: 1em 2em; } What about other property do they always follow the same format and order? Any help will be great. Thanks. I need to know how to format a selection list, what I want to do is change the color of the arrow how do I do this? Tim I am trying to define 5 different types of links in one style sheet. I have three questions. 1. How would I declare it in the style sheet? I have tried the following, which does not work: a.typea { font-weight: bold; color: #E8C960; text-decoration: underline; } 2. How would I refer to the class in the HTML? I have tried the following which does not work: <a href="link.htm" class="typea">Some Link</a> and <span class="typea"><a href="link.htm">Some Link</a> 3. Can you assign a rollover class to link classes? I tried the following which does not work: a.typea:hover { font-weight: bold; color: #06FF00; text-decoration: none; } Any help on this is appreciated. I can't be limited to only one type of link throughout an entire dynamic website. D Hi All, I am trying to echo a table that I have given the following css style: PHP Code: table.paginationtable { cell-spacing: 1px; border: 1px solid #000; } table.paginationtable td.location { background-color: #6699FF; color: #FFF; font-family: arial, verdana; font-size: 11px; padding: 5px; font-weight: normal; line-height: 130%; text-align:left; } In the html I have: PHP Code: echo "<table class=\"paginationtable\"><tr>"; echo "<td class=\"location\">$location</td>"; echo "</tr></table>"; For some reason the 1 px border that I styled for the table is not showing up around my paginationtable. Can anyone see anything wrong with my code? Do the echo's look ok? Or is my CSS logic the problem? Brad. When a div gets smaller due to window resizing or screen resolution whats the attribute to make the text reformat with it. A div thats not as wide means that the lines of text need to not be as wide..you get the idea..and im not talking about using overflow:auto. This is due on wednesday Heres my main divs Code: #wrap {
width:75%;
margin-left: auto;
margin-right: auto;
min-width:700px;
}
#header {background:url(images/black.png);
height:60px;
margin-bottom:0px;
}
/*For Site Title Image*/
.title {float:left;
}
/*Contains the menu*/
#menu {background:#000000;
height:30px;
margin:0px;
padding-bottom:5px;
padding-right:10px;
}
/*Fix margins/padding*/
.link {float:right;
margin-top:0px;
background:url(images/gradient.png);
height:auto;
width:auto;
border-right:1px solid #000000;
text-align:center;
padding:5px;
}
#floatright {float:right;
width:300px;
margin:auto;
padding-left:10px;
border-left:2px double grey;
height:350px;
background:#000000;
}
#content {
background:url(images/back.png);
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
padding-right:20px;
height:auto;
font-family:Verdana;
}
Hiya, im trying to place a blog inside a table and also have a picture above the table and some links. In Mac Firefox and Camino it works perfectly. but in IE or Safari it just doesn't want to work. Please help Thanks guys i have the following css: Code: .table1 {
border-collapse: collapse;
width: 50%;
margin: 24px;
font-size: 1.1em;
}
.table1 th {
background: #3e83c9;
color: #fff;
font-weight: bold;
padding: 2px 11px;
text-align: left;
border-right: 1px solid #fff;
line-height: 1.2;
}
.table1 td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
}
.table1 td * {
padding: 6px 11px;
}
.table1 tr.alt td {
background: #ecf6fc;
}
.table1 tr.over td, tr:hover td {
background: #bcd4ec;
}
However all tr and td's now getting a hover effect. i tried several methods but I'm to unpracticed with css. Grtzz whitehat I tried this to change the background color of a select tag by using color code and nothing happens. It works only in NS6+ and not in IE. IE only accepts color names but not color codes. Code: <select name="sele1" onfocus="this.style.background='#ffffcc'"> If I put a color name eg. 'red' then the background color changes. Is there a way for it to accept color codes too. Thanks Im using this to make an onscroll effect Code:
table.left {border-collapse:collapse;
float:left;
margin-left:10px;
margin-right:10px;
background:#8f8f8f;
padding:5px;
color:#000000;
font-family:Verdana;
text-decoration:none;
}
td {padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;}
td.bg:hover {
background:url(images/yellow.png);
padding-right:10px;
padding-left:10px;
padding-top:8px;
padding-bottom:8px;
}
And the links don't format with the typical css markup Code:
a:active {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:link {color:#000000;
font-family:Verdana;
text-decoration:none;}
a:hover {color:#000000;
font-family:Verdana;
text-decoration:none;}
Ive tried a couple different things like making td.bg:link, td.bg:active with the specifications->no luck Note:this is in IE Nevermind...I just figured it out..used a link class and set the visited attribute |
|||||||