|
CSS - Css Tables
I am looking for advice on replacing a table layout (for form layout) with a CSS design. The purpose is to put together a PHP class that auto-generates forms so that the structure of the forms, is under control of an admin interface though an API. The problem is, that many of the clients that I do work for are very particular about the layout. In other words city, state and zip code must all be on one line, but phone number must have a row to itself, etc., etc.. The form must look exactly like the paper version.
Generating a good looking form through an API using a table layout where i have to worry about column spans and so forth, is not something I am looking forward to. I would like to use a CSS layout instead. What is the best way to coax divs to work in the same way table cells and rows do and still deal with any goofy IE CSS quirks? Similar TutorialsI'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;
}
Hello all, I have a site which I am working on right now and there is going to be text on the right side, and 3 rows on the right which on the top there will be a page banner, on bottom, just a picture, and i want to repeat the background colors on the other side. Kind of confusing to explain but he brandyn.garlic.com/headstart/aboutus.html Thats a page on the site, as you can see, there is a blank spot where I want a background to repeat but the size will obviously vary by the size of the content on the right. If someone could assist me with that, I would greatly appreciate it. Thank you, Brandyn Hi everyone, Dont actually know if this is possible (my css knowledge is way not what it should be!) Can I define a whole set of attriblutes for a table (fonts, links, hover links etc etc) and than just use it with <table class = "whatever"> etc and then that table will have all the properties I defined (for only that table, not for the rest of the page) if so how could I go about doing that. Any help is very appreciated! cheers Hello everybody, I am new to the forum and also a newbie to webdesign! I am hoping that somebody wants to help me out as I am trying to put the design of a table and the font used in CSS. I am trying to create a new table class out of: <table cellspacing="0" cellpadding="0" width="100%" class="tekst6" bgcolor="#E6373D"> (tekst6 = FONT-WEIGHT: bold; FONT-SIZE: 13px; COLOR: #ffffff; ) How do I do this? Many many thanks in advance for your help! Regards Buzzman Hi I would like to replace the tables that make up my page with CSS. I have a header, footer, left column and the main body. Do you know of a link to a tutorial that can help. Or perhaps you know the CSS code. Any pointers gratefully received.. I am curious how important it is to use CSS for tables these days? I am a more of a PHP developer but have been using HTML tables for my applications since I don't do anything fancy on the front-end. I am asking because I am planning to start work on an open source project. While the project itself is intended to be used inhouse for companies and not on the Internet, it would still be nice to know if CSS or HTML tables could affect it in positive or negative ways. Thanks. After discovering Css and finally understand it...(still need to get better) I have to ask, when is it good to use a table? what are their main function ? is there things you can do with a table that cannot be done with css? thanks. Hello. I'm currently tweaking the layout of one of the websites I run. Every page on the site consists of a series of side boxes on the left and main content on the right and currently this divide is created though tables. I'm trying to replace the old tablular layout with a series of divs which are positioned with CSS. Below the header of my page is a content div, which contains two other divs, left and right. The rest of the site content resides in seperate divs in either the left or right div. I've managed to position the left div on the left hand side of the page and the right div on the right. However, the text in the right div is longer than the content in the left div and I'm finding that once the content on the left has finished, the content on the right is filling the whole of the page beneath it, when I actually want it to stay on the right and just leave the remainder of the left hand side blank. I've been trying to fix this for a while now and haven't managed to do so yet so I'm hoping someone here might be able to offer some suggestions. I've put up a sample page of the layout at http://www.mybb-emods.com/new/index.htm. Similarly, the CSS code I'm using is located at http://www.mybb-emods.com/new/stylesheet.css. If anyone could help me, I would really appreciate some advice. I've a feeling there's a really simple solution here, but I certainly haven't managed to find it yet. I grew up doing web programming knowing that tables were bad. It didn't take long before I read all the documents on why not to use tables for design. And I know firsthand... What still mystifies me to this day is why whenever I check another newer "professional" site, it's all in tables... sometimes with no CSS at all... sometimes with a little. I rarely see a site that has no tables. Why is this? Is it to minimize problem with IE? For some reason the following HTML & CSS code do not render the same result as the code listed below it: CSS - Attached Style sheet Code:
td.style1{
background-color: #FFFFFF;
border-top: 1px solid #AAAAAA;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #AAAAAA;
}
HTML Code Code:
<table>
<tr>
<td class="style1">Some content to display</td>
</tr>
</table>
HTML (Intended display) Code:
<table>
<tr>
<td bgcolor="#FFFFFF" style="border-top: 1px solid #AAAAAA; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #AAAAAA;">Some content to display</td>
</tr>
</table>
Why wouldn't any browser follow the CSS in the stylesheet? **FIXED** Ok moving my site from tables to CSS in my spare time at work but im having some difficulty with height attr. Click me The Left and right bars - I would like them to go all the way to the bottom of the page. If anyone can help - please let me know! Thanks! Edit: Got it to work in Firefox just fine - but IE6 is still giving me problems. Edit #2: *sigh* needed to set body to 100% - man IE is bass-ackwards. Hey Guys, Hope you are all OK! I've been away abroad for a bit and now its back the the manic life here Has anyone got any good examples of creating pretty tables using CSS? I am ideally looking to to something that maybe has alternate colors on Columns and rows and changing colors where they cross?>!? or something equally as good for looking at data! Any links to examples would be great! Charlie Hi, I always used tables for my layout but want to change that to CSS. Problem is, I don't know how to get started thinking of the layout in css. I mostly make my pages centered with tables, can I do this with CSS? Does CSS use absolute position ? I was making a site with tables, but want to change that to CSS Know of any good tutorials (for people who used tables before) greets Does anyone know of some good tutorials on how to use CSS rather than tables? If so, could you providea link. Thanks a lot. andrew Hi, how can I draw these borders to a table using css? Thank you! Hi guys, thanks for reading my thread (once again!) I have the code below that is my first ever "play" with CSS. The site is nothing serious yet but I am learning how to lay things out in a clear fashion and get used to CSS syntax. Code:
<HTML>
<TITLE>My Page</TITLE>
<HEAD>
<STYLE type="text/css">
body {background-color:#ffffff; font: 13px;}
div {border: 0px}
#main {margin: 0px auto; width=800px; position: absolute; left: 0%;}
#headerlogo {float: left; width: 200px; height: 55px; background-color: #7EC0EE; text-align: center;}
#headertext {float: left; width: 350px; height: 55px; background-color: #7EC0EE; text-align: left; font: 13px;}
#blankspace {float: left; width: 25px; height: 55px; background-color: #F5F5F5;}
#headerlogin {float: left; width: 225px; height: 55px; background-color: #7EC0EE;}
</STYLE>
</HEAD>
<BODY>
<div id="main">
<div id="headerlogo">
<h3>Site Logo</H3>
</div>
<div id="headertext">
Site text goes here. This sentence is a test to see how much text I can fit in this div before things start to go out of line. It appears that there can be quite a lot
</div>
<div id="blankspace">
</div>
<div id="headerlogin">
<table width="220" border="0"><FORM NAME="login" ACTION="dologin.asp">
<tr><td width="70" STYLE="font: 13px">Login:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="text" NAME="loginname" SIZE="4"></td><td width="70" rowspan="2"><INPUT STYLE="width: 70px; height: 20px; font: 12px;" TYPE="submit" NAME="submit" VALUE="Login"></td></tr>
<tr><td width="70" STYLE="font: 13px">Password:</td><td width="80"><INPUT STYLE="width:70px; height:20px; font: 12px;" TYPE="password" NAME="Password" SIZE="4"></td></tr>
</FORM>
</table>
</div>
</div>
</BODY>
</HTML>
The result can be seen by pasting the above into a notepad file. I have got a mock "login form" on the right panel, and the only way that I could get the fields to display how I wanted was to put them in a small table. I get the impression (from reading other peoples threads) that mixing tables with CSS is bad practice as it is mixing style and structure. Other posts have said that a small amount of tables is ok. Should the tables above be replaced with CSS? I tried to set it up myself, but all I could do was get the elements to line up under each other! : Login: <text field> Password: <pass field> <submit button> Also, is there any way to get the two text fields (as in, rows of the table) closer together when using CSS? In a table sense I guess it is the opposite of "cell top and bottom padding?" Thanks for any help anyone can offer me. Regards, Porky Hello all! Should'nt this class center justify the table. It's left aligning all class='sql' tables and I can't figure why?? TABLE.sql { border: 0 solid #9999FF; align: center; font-color: black; text-align:left; font-weight: bold; } Hey, all, forgive my request for hand-holding, but I can't seem to make a css file that makes the following code will display as if it were all in a single table row. I'd like all the header_section divs to be the same width, if possible. My main problem is getting the divs to line up from left to right and not from top to bottom. I know that I must use relative positioning, but nothing is makng them line up the way I want. As I want the layout to be fluid, I'd like to avoid absolute positioning. Code:
<div class="header">
<div class="header_section">Linux</div>
<div class="header_section">Apache</div>
<div class="header_title"><h1>Linux Apache MySQL PHP</h1></div>
<div class="header_section">MySQL</div>
<div class="header_section">PHP</div>
</div>
Thanks in advance. Hello, I'd like to create a table to a <ul><li> format: it would look life this, Code: <ul> <li>Name</li> <ul> <li>Name 1</li> <li>Name 2</li> <li>Name 3</li> </ul> <li>Phone Number</li> <ul> <li>Phone number 1</li> <li>Phone number 2</li> <li>Phone number 3</li> </ul> </ul> the first level <li> would have a border and would be a header to the table and the second level <li> would be the table items. Then when you get back to the first level, the item goes back to the top (2 collums). ----------------------------- | Name | Phone number| ----------------------------- | name 1 |Phone number 1| you get the idea.. I can't figure out the corresponding CSS. Can anyone help me out.. thanks Hey, I know that I use some CSS code, but I have a feeling that my site is not fully CSS. Here it is: learn-how-to-weld . com Peter |
|||||||