|
CSS - Table -> Div Conversion?
Hi guys, I'm new to the boards, but I have done a search before posting.
I've got a page based completely on tables that I want to convert to tableless.. URL is my original site, I tried to transport it to URL And I lost my navigation icons.. Not a huge deal, but I'd still like to have them. Anyway, Heres the code... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title>Guttermonkey</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
margin: 2px;
line-height: 14px;
padding-left: 20px;
color: #000000;
}
h3 {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 16px;
margin: 10px;
line-height: 18px;
padding-left: 5px;
color: #e9f2fc;
}
.smallheader
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 10px;
padding-right: 5px;
line-height: 14px;
color: #e9f2fc;
}
.small {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
font-weight: normal;
padding-left: 5px;
line-height: 14px;
color: #e9f2fc;
}
a:link {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:active {
color: #707770;
font-weight: normal;
text-decoration: none;
}
a:hover {
color:#707770;
font-weight: normal;
text-decoration: none;
}
.info
{
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 13px;
padding-left: 5px;
color: #e9f2fc;
}
.infohead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 10px;
line-height: 12px;
padding-left: 20px;
color: #e9f2fc;
}
.newshead {
font-family: verdana, arial, "ms sans serif", sans-serif;
font-size: 12px;
line-height: 13px;
padding-left: 5px;
color: #333333;
}
input, textarea, select {
background-color: #CCCCCC;
border-style: solid;
border-width: 1px;
font-family: verdana, arial, sans-serif;
font-size: 10px;
color: #333333;
padding: 0px;
}
-->
</style></head>
<body bgcolor="#808080">
<br>
<center>
<!-- Main Table -->
<table bgcolor="#808080" border="0" cellpadding="1" cellspacing="0" width="670"><tbody><tr><td colspan="2">
<!-- Header -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#808080" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td class="smallheader" align="right" bgcolor="#354463">Last update: 28/06/2002, v4.0</td>
</tr>
<tr>
<td bgcolor="#354463"><h3>// Guttermonkey</h3></td>
</tr>
<tr>
<td class="smallheader" align="right" bgcolor="#354463">"I never think of the future, it comes soon enough." - A. Einstein</td>
</tr>
</tbody></table>
</td></tr></tbody></table>
<!-- End Header -->
</td></tr>
<tr><td>
</td></tr>
<tr><td colspan="2">
<!-- Main Field -->
<table bgcolor="#000000" border="0" cellpadding="1" cellspacing="0" width="100%"><tbody><tr><td>
<table bgcolor="#dcdcdc" border="0" cellpadding="0" cellspacing="10" width="100%"><tbody><tr><td align="center" valign="top" width="160">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td>
<table border=0 width=100% height="100%">
<td width="495" height=100% valign="top">
Ewwwwww!<td width="175" height="100%" valign="top">
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#bfc4cb" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#2d3851" border="0" cellpadding="1" cellspacing="0"><tbody><tr><td>
<table bgcolor="#354463" border="0" cellpadding="2" cellspacing="2" width="175">
<tbody><tr>
<td class="infohead" bgcolor="#354463"><b>:: Navigation</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<link rel="StyleSheet" href="navbar_files/dtree.css" type="text/css">
<script type="text/javascript" src="navbar_files/dtree.js"></script></head>
<body>
<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'Guttermonkey.com');
d.add(1,0,'Home','index.php');
d.add(2,0,'Calendar','index.php?page=calendar');
d.add(3,0,'Poetry','index.php?page=poetry');
d.add(4,0,'Blog','index.php?page=blog');
d.add(5,0,'Download','index.php?page=download');
d.add(6,0,'Photo Gallery','javascript:void','RC\'s Picture Folder!','','','img/imgfolder.gif');
d.add(7,6,'RC Naked','index.php?page=naked','You sick ****!','','','img/jpg.gif');
document.write(d);
//-->
</script>
</body></html> </tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: VITAL STATS</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Name</b>: RC</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Nick</b>: The Freaky Penguin</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Location</b>: New Perth</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Born</b>: Begotten before time</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>Mood</b>: Wonky</td>
</tr>
<tr>
<td class="infohead" bgcolor="#354463"><b>:: SYSTEM</b></td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MB</b>: TF-486 with 256K cache</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>CPU</b>: AMD 486-66MHz</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>MEM</b>: 4MB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>HD</b>: Quantum Fireball 2 GB </td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>VGA</b>: Number Nine GXE 2MB ISA video card</td>
</tr>
<tr>
<td class="info" bgcolor="#5f7797"><b>OS</b>: MS-DOS 5.7 </td>
</tr>
</tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</table>
</body></html>
I havent done serious web design in a couple years, and to tell you the truth its over my head now. Oh, and when I moved the site, I FTP transfered the entire public_http folder, so I know the images are there for the nav bar. But thats not important, getting table-less is... Any help on where/how to begin? Much thanks in advance, rcmaples. Similar TutorialsHi, I'm having a little problem getting a layout to work with divs. I can hack it fairly easily with tables, but I am realying on undefined behavior to make it work, so I would rather do it right with css. Here is the code, if you can make the page, you can see the result I would like, and as close as I could get with css. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
padding-top: 5px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Center Test</title>
<style type="text/css">
.navCell {
width: 14%;
text-align: center;
background-color: teal;
float: left;
}
</style>
</head>
<body>
<div style="width: 100%; height: 20px; background-color: red;">
<div style="width: 196px; text-align: center; background-color: green; position: absolute; left: 0px;"><p>Stay Home</p></div>
<div id="restOfNav" class="restOfNav" style=" padding-left: 196px; ">
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
<div class="navCell"><p>Center Me</p></div>
</div>
</div>
<p>Desired result</p>
<table cellpadding="0" cellspacing="0" style="height: 20px;">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr align="center" >
<td class="headerCell" ><div style="width: 196px; background-color: green;"><span>Stay Home</span></div></td>
<!-- <td class="dividerCell"></td> -->
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;">CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
<td class="mainLinkTd" style="width: 340px; background-color: teal;" >CenterMe</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks for any help you all can give me. I am so determined to get my entire site table-less but i ma having some more trouble on a "complicated" table layout This is the current table Code:
<table>
<tr>
<td width="50px"></td>
<td></td>
<td width="200px"></td>
<td width="50px"></td>
<td width="50px"></td>
</tr>
</table>
Now what i have done so far to convert this to CSS is the following Code: <div class="forums"> <span class="image"></span> <span class="name"><span> <span class="lastpost"></span> <span class="topics"></span> <span class="posts"></span> </div> however i do not know the CSS code to make it look like the table layout above. I have messed around with width and float but i am not getting it how it should be. some CSS code i wrote Code:
div.forums
{
width: 90%;
clear: both;
height: 50px;
margin: 0 auto;
}
span.image
{
float: left;
width: 10%;
}
span.name
{
float: left;
}
span.lastpost
{
float: left;
width: 20%;
}
span.topics
{
float: left;
width: 10%;
}
span.posts
{
float: left;
width: 10%;
}
how would i convert: <table border="1" cellspacing="0" style="border-collapse: collapse; text-align: left; border-style: ridge; margin: 0; padding: 0" bordercolor="#111111" width="779" id="table3"> <tr> <td width="649"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner1.jpg" width="649" height="92"></font></td> <td width="174"><font face="Small Fonts" color="#666666" style="font-size: 20pt"> <img border="0" src="Banner2.jpg" width="167" height="92"></font></td> </tr> </table> to simple CSS code? I tried doing that all in one style and nothing worked! Hi everyone, I am in the midst of converting my fathers website from an old frames based version into a CSS version, and I have had some trouble getting it working properly in both firefox and ie explorer. I would really appreciate if anyone could give me some advice! The original page is he http://www.qualspec.com.au I have started by just trying to replicate the frames look with css, and have come up with this single page: http://www.qualspec.com.au/test/testid.html It seems to work well in internet explorer, but as soon as I load up firefox, it looks ugly as hell (I was using topstyle which uses IE as the internal css and html preview). Can anyone help me out here? Thanks in advance! Regards, Thomas. I had to redo my page because none of it was validating through w3c so I'm trying it again and attempting to get my css right however the widths of my divs correct to match my psd. Any thoughts on what I'm doing wrong? PSD jpg kansasoutlawwrestling.com/wrestling2.jpg Site kansasoutlawwrestling.com I am working on converting my site (http://www.thejokejukebox.com ) from html to css/xhtml . I am working on the header image. I've used Photoshop's image slicing routine to cut the photoshop image into smaller pieces and have outputted the css code for the images. While this is mostly fine, Photoshop outputs css using absolute positioning. My goal is to have the header graphic displayed centered regardless of the screen resolution of the user. This is how the site appears now using html. On either side of the centered image is a filler graphic (bg.gif) that is repeated in x only. What approach should I take to accomplish this look in css? I've read a bit on using floating divs . Is this the route I should be looking at? If so, can someone give me a rough idea on how I can position the individual images to make the continous graphic within the floating div? As you can tell, I am very green when it comes to CSS, so your patience and time is appreciated. I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! Hi all, what i want is to customise the borders of a table... i know that <div>'s can have custom borders but, for the way that the page works i used table tags <table>. (very little experience of using <div>) is there a way that css can manipulate the borders of a table? i tried using this css: .nmhead { border-color:#cccccc; border-top:border-top-style:none; border-left:border-left-style:none; border-right:border-right-style:double; border-bottom:border-bottom-width:5px; } and then in the table doing this: <td class='nmhead'> but it didnt work (attached is what i want it to look like) any ideas? hi all ! Im having a little bit of problem to make a header and the table body match in a correct way. My header is declared as <table align="center" class="style36" id="header"> and the CSS controlling it is Code: table.style36 {
width: 1000px;
vertical-align:middle;
}
.style36 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align:middle;
}
And the table wich is declared as Code: <div class="scrollingDiv">
<table border="1" bordercolor="#000000" align="center" bgcolor="#FFFFFF" class="style13" id="tableBody" >
And the CSS controlling it Code:
div.scrollingDiv {
height:420px;
overflow:scroll;
vertical-align:middle;
width:1024px;
}
table.style13 {
width: 1000px;
vertical-align:middle;
}
/* Since the table has a class of style13, all td elements under that style can be
selected as below... no need for more style definitions...
*/
.style13 td {
vertical-align:middle;
}
.style13 th {
vertical-align:middle;
}
My first idea was to declare a width for each td, something like: Code: <td width="30" bgcolor="#${color2}"><div align="center">${fila.sHoraent_Citas}</div></td>
<td width="120" bgcolor="#${color2}"><div align="center"><a href="SvMedPro?boton=Info&idPaciente=${fila.idPaciente_Citas}">${fila.nom_Paciente}</a></div></td>
AND match the header too, dosent seem to work, Im pretty new to web programing so any help is appreciated. Thanks! Hi, CSS whizz needed! I'm currently formatting a pre-determined HTML website using CSS. The website has been formatted with ID's for all tables and cells so I can specify which colour I'd like the background of the cells. The HTML is like this: Code: <table id="Description">
<tr><th class="title">Text</th></tr>
<tr><td class="data"><div class="ggcode">Text</div></td></tr>
</table>
So I've been formatting it like this: Code: div#Main
table#Description
.title {
border-color:#F0E68C;
background-color:#F0E68C; }
div#Main
table#Description
td.data {
border-color:#F0E68C;
background-color:#F0E68C; }
However the last table is like this: Code: <table id="recentPosts">
<tr>
<th class="title">
Recent Forum Posts
</th>
</tr>
<tr>
<td>
<table class="data">
<tr>
<th>Topic</th>
<th>User</th>
<th>Posted At</th>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text></td>
<td class="username">Text</td>
<td class="date">Text12/04/2009 03:25 PM</td>
</tr>
<tr>
<td class="clickable forumTitle"><a href="link">Text</a></td>
<td class="username">Text</td>
<td class="date">Text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm able to format the cells within the <table id="recentPosts">, but I can't alter the cells within <table class="data"> - the table within the table. Any ideas how I would go about doing this? Thanks in advance I have a table with a specified background color (specified in CSS). The content part of the table (a cell) uses information from a downloaded script (wordpress.com) to load information. I want the table background to shine through everything. How can I accomplish this (I suspect it is in the script CSS, but I don't know what). URL The 'home' page is how I want it (basically that background effect). But the other pages come out funny with no background. Could someone solve this, or alternatively reccommend another way. If I want to apply a certain style to all cells of a given table, what is the easiest way tot do that ? Wrap the table within a <div> and then assign a class to the div ? something like this ? Code: .main-table table td {height:3.0em; padding:2px 7px 2px 7px; border-left:solid 2px rgb(255,255,255); border-right:solid 2px rgb(255,255,255); border-top:solid 2px rgb(255,255,255); border-bottom:solid 2px rgb(255,255,255); background-color:rgb(225,225,225); text-align:left; font-weight:normal; color:rgb(80,80,80); font-size:110%;}
I have a pretty newbish question about CSS but I dont know if it is possible or not. Ok so in CSS you can change the colors of all the td's just by putting td{}, but now I wanted to know if it is posible to change the color of one td when the td has a id name? I am helping my firiend out with his myspace page and there are a bunch td's, table's and tr's, that conain id names but not class names. Nick |
|||||||