|
CSS - Mixing Css And Tables...
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 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;
}
--edit 2 SORRY FOR CONFUSING YOU ALL ---- it works but everytime i click on the link i get extra space underneath the <tr with id>??? http://plumstead-mosque.co.uk/test/admin/outofStock.php here is the revised code: PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ //if echo "<tr style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; echo "<td>$ro2[1]</td><td>$ro2[2]</td><td>$ro2[3]</td></tr>"; } } echo "</table>"; ?> ----edit 2 is it possible to do this: <table> <div><tr><td></td></tr></table ?? because i have a link that hides/unhides this div. and it doesnt seem to be working? but if i remove all the tables then it works? basically i do know the solution (i think) currently i have id and style on div that says "display:none" and change it using JS. so i THINK i can move them to the tr? the only problem with this would be if there are more than one tr as i cant have two tr with same id.. --edit never mind got this to work, each tr will have "unique" id so there is no point using class. HOWEVER when i used class as var m = document.getElementByClass("name") it didnt work --- PHP Code: $res = mysql_query($q);?> <table> <tr> <td>Product Id</td> <td>Name</td> <td>Stock Left</td> <td></td> </tr><?php while($ro = mysql_fetch_array($res)){ echo "<tr><td><a href=\"javascript:toggle('$ro[0]');\">$ro[0]</a></td><td>$ro[1]</td><td>$ro[2]</td></tr>"; echo "<div style=\"display:none; font-size:smaller; color:grey;\" id=\"$ro[0]\">"; $q2 = "select * from productsizes where productid = '{$ro[0]}'"; $res2 = mysql_query($q2); while($ro2 = mysql_fetch_array($res2)){ echo "$ro2[1] $ro2[2] $ro2[3]"; } echo "</div>"; } echo "</table>"; I'm using a PHP script from A List Apart to generate a random image for my header whenever it is called. While the script is great, my image sizes need drastic reduction. These header images are composed of two parts - 1)The title text 2)A background photograph. I can increase the compression of the background photograph to get it down from 120kb to about 20kb with little notice in quality - a great improvement! However, when I do this, the text suffers a great loss of quality. Since I can save the text as a .gif which would only register about 6kb, I was wondering if there was a way I could combine the script to get the random photograph and have the text lay on top. Ive tried putting both img codes in the same div and giving the text a higher z-index, but that does not work. I know that the best-case scenario would be to just use actual styled text in the div to go on top of the photograph. But I can't get the stroked look I'd want by doing this. Any suggestions? I have 2 columns. I have a very tall, narrow column on the left that needs to be exactly 22em wide. I also have a short, fat column on the right that I want to take up the rest of the screen's width. The problem is that I have to contian my code so that after all of the formatting syntax is done, I can put in a whole ton of text and the text will stay in the right column, and then when the text gets past bttom of the left column it will take the entire width of the screen. The way I'm doing it right now is by floating to the left both columns and using 29% width for the thin left column and 70% width for the fat right column. This adds up to less than 100% so the browser places them paralell. But if I were to absolutely size the left column (as I want to), 22em + 100% is definately more than 100%. I can't constrain it so it thinks 100% is 100% of the space available to the right column because the text has to be in that "corner" between the right side of the left column and the bottom of the right column. Any ideas on how I could solve this? If you can do it without floats, that would be even better- it might solve another of my problems. The page in question is here by the way. All of the formatting code is transcluded in, you probably won't be able to see it unless you're familiar with wikipeida. Please don't edit the page directly Thanks, froth Hello I'm kinda new to css. (PHP programmer by day) and would like some help making something like this. stevenbarre dot com / sample.jpg I want the whole thing to stay in the browser (100% width and height) so you never get scroll bars. The top orange part should have a height in px as well as the bottom purple part. The green should have a width in px and the blue should be whatever is left over. I've done some googleing but haven't been able to find much on 100% height designs. Your help is much appreciated as well as links. Hello, I am trying to absolute position two elements within a relatively positioned DIV. My relatively positioned DIV is necessary to center my content on the page. The elements within this DIV must be placed in the upper left corner of the DIV. The reason why is because I want them to be placed on top of one another. Here is the code I have thus far: <div> <div id="elem1Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem1" src="image1.png" /> </div> <div id="elem2Container" style="height:400px; width:400px; position:relative; top:0px; left:0px;"> <img id="myItem2" src="image2.png" /> </div> </div> Can anyone help me accomplish my goal? For some reason, the second image is always below the first image. In reality I need it right on top of the first image. At the same time, these two images centered in relation to my page. That is why I placed them in a general div element. Thank you! Crystal Common scenario: A floated div that is set to have width:100% to fill up the entire horizontal space. Here's the problem: I want to bump the div 45px from the left (i.e. adding a 45px left margin). Having both the width: 100% and margin-left: 45px declaration in the CSS expands the div way too far (100% of the screen + 45px for the margin). Because of the design, I cannot use a 45px left padding instead. A constraint: I don't want to touch the HTML. I know an easy way would be to add a div within the floated div and use a 45px left padding on the floated div. Almost makes me pine for the IE5.0 broken box model... p.s. any one have any general advice when mixing 100% widths with absolute values for padding/margins for both floated and non-floated elements? I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class .. I'm trying to create a header bar with some navigational links. The basic idea is that I have a little banner image about 400 pixels wide on the left. To the right of it, I have 5 navigational links listed horizontally. I want them to be evenly spaced across the rest of the page, regardless of its width. I could do this with percentages if I had them in a parent element equal to the width of the page minus the width of the image to the left. So basically, I know this isn't actual CSS syntax, but I'm looking for the functional equivalent of saying: #linkContainer{width:100%-400px;} Anybody know a good way to do something like this? This would be easy with a table, but I'm trying to stick to CSS for layout and tables only for tabular data. 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? 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 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 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? **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. 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! 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. 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 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.. 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 |
|||||||