|
CSS - Dynamic Css Result Rows
Hi all,
I need my data to display like the states on this page: http://www.designfirms.org/directory/Internet_Design/Web_Design How do I achieve this using css and no tables? Can anyone help? I am using php/mysl to generate the data and this is the current code to pull the info: <table border="0" cellpadding="3" cellspacing="0" width="100%" id="table1"> <tr valign="top"> <td> PHP Code: <? $sql = "SELECT * FROM db"; $execute = MYSQL_QUERY($sql); $numrows = MYSQL_NUMROWS($execute); $counter = 0; $increment = 1; // Loop throuch all the categories with parent id = 0 for ($i=0; $i <$numrows; $i++) { $rs = MYSQL_FETCH_ARRAY($execute); $counter = $counter + $increment; $category_name = $rs["cname"]; $category_url2 = str_replace(' ', '-', $category_name); $category_url = strtolower($category_url2); //echo $counter; if ($counter == 4) { // close the last row and start a new row $counter = 1; echo "</td><td>"; ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? } else { ?> <span class="med">> <a href="/directory/<?=$category_url?>.html"><?=$category_name?></a><br></span> <? // end of the if counter statement } ?> <? // end of the for loop } ?> </tr> </table> The NEW results would need to display in the <div id="center"></div> area. Any help would be much appreciated. Similar TutorialsI have a page where I would like to have boxes floating to the left. I have a constant width on the containing div, so that I get three boxes per row. Now, I would like these boxes to have the same height per row so that if one box have more content than the others on that row, they will stretch so that they all have the same height. I would like it to look like the products on www.netonnet.se, but using divs instead of tables. As I've done it now the boxes get different height. Anyone got a fix? here's my content and the css for the boxes: #contentProducts{ position:absolute; width:600px; margin-top:1em; } .box { float:left; text-align:center; width: 190px; background: #ffffff; border-right: 1px solid rgb(151,149,150); margin-left:0.4em; margin-bottom:0.5em; height:100%; } .box a{ font-weight: bold; text-decoration: none; color: #0c2c56; } .box a:hover{ text-decoration: underline; } .box h1 { margin:0; font: bold 1em Verdana, Arial; text-align: center; } .box h2 { margin: 0.5em 0.5em 0.9em 1em; font: .8em Verdana, Arial; text-align: left; } .box h3 { margin:0; font: 1em Verdana, Arial; text-align: center; color: #ce3929; font-weight: bold; } .box .contentProductButtons { position:relative; cursor:hand; background: url('../../Images/fill.gif'); background-color:#fff; border-right:1px solid #999; border-bottom:1px solid #999; Z-INDEX: 3; bottom: 0px; left:0px; margin-top:10px; WIDTH: 190px; height:20px } Greetings, I don't know how is this possible. Please, take a look at these 2 pages: Correct: http://83.208.191.102/bio/Sources/M...t.modified.html Screwed: http://83.208.191.102/bio/Sources/M...modified02.html It's no browser-specific problem, it does the same in both IE and FF .I must be missing something really basic, but I can't see any difference hi everybody i made that topic in green bcz i love real betis im kind of new here it is a good forum really i have a problem that makes me crazy at fact 2 problems but i dont want to be rude lol so i will post 1 problem and sometime else i will post another one my problem is that i make a css page that i call style.css but even if i put the right code like that => PHP Code: <html dir = "rtl"> <head> <title>programming forums</title> <link rel = "stylesheet" type = "text/css" href = "style.css" /> </head> <body> <p id="center">programming3 the best forums ever</p> </body> </html> but when i try this code i dont get what i want im i wrong in something guys ok im waiting for ur gifts :d i mean suggestions cyo lateeeeeer[/color] Hello; Could anyone tell me how to addjust my result to the top(10% away from the top)? please. I try to use margin-top:10%, but it does not work. Please go to my website http://www.businessfind101.com/ and type the sentence with "MySql YourSql" into search function, you will see the result in the button, i have not idea to move them up. and my code as following; Code:
php
session_start();
$aString=$_REQUEST["SText"];
$_SESSION["aString"]=$aString;
?>
<!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" xml:lang="en" lang="en">
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table.display{margin-top:10%}
</style>
<body>
<?php
$con = mysql_connect("localhost", "#*$!","1#*$!");
if (! $con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("#*$!x", $con);
$result = mysql_query("select * from Customer2");
// was it a success
if (!$result)
die ("Error processing request - check your query");
// process results
$nrecs = mysql_num_rows($result);
/* Use tab and newline as tokenizing characters as well */
$tok = strtok($aString, " ");
while ($tok!== false) {
$len=strlen($tok);
$len=$len/2+1;
$tok=substr($tok,0,$len);
$b="tu";
$myresult=mysql_query("SELECT * FROM Customer2 WHERE MATCH (Topic,Des)
AGAINST ('$tok*' IN BOOLEAN MODE);");
while($row=mysql_fetch_array($myresult)){
echo "<br>";
echo "<br>";
echo " ";
$Cid=$row['Cid'];
echo " ";
$row['Count']=$row['Count']+1;
$Count=$row['Count'];
mysql_query("update Customer2 set Count='$Count' where Cid='$Cid'");
}
$tok = strtok(" ");
}
$result = mysql_query("select * from Customer2");
echo "<table border=0 width=50% class='display' bgcolor='ccffff'>";
//i will display result on the screen
while ($row=mysql_fetch_array($result)){
if($row['Count'] >0){
echo "<tr><td>";
echo $row['Des'];
echo "</td><td>";
echo $row['Count'];
echo "</td> </tr>";
}
}
$f=0;
mysql_query("update Customer2 set Count='$f'");
echo "</table>";
mysql_close($con);
?>
</body>
</html>
1st off, how much do I have to worry about NN4 being used by web surfers? Wondering if I need to always be aware and adapt my pages to it. 2ndly, and most important, can someone help me with HOW to fix the below code. Have added the hack for IE mac/IE 5.x windows. But it screws up in IE6 by making the div extend to the right browser edge. How do I get it back in IE6? (Do I need to mention works fine in Firefox? ) **I have had to question my possible rudeness of posting the exact code in the book I am using for some CSS learning, along with mentioning the book by name. Thus, have stripped the code down to what's really important and deleted references to before said book. ** Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Dude</title>
<style type="text/css" media="all">
body {background: rgb(75%,66%,66%);
margin: 0; padding: 0;
font: 12px/1.5 Verdana, Arial, sans-serif;}
div#wrap {border: 2px solid black;
background: white;
position: absolute;
margin: 0 80px 0 0; padding: 0 0 2em 0;
left: 80px; right: 80px; top: 40px;
voice-family: "\"}\"";
voice-family:inherit;
right: 0;}
div#wrap img.curve {float: left; clear: left;
margin: 0 15px 0 0; padding: 0;
height: 20px;}
</style>
</head>
<body>
<div id="wrap">
<p>This div should be 80px from the right. After using hack for IE mac & IE 5.x win, <strong>IE6</strong> now stretches div all the way to the right. How do I make the hacks work and IE6 render correctly? I know I will run into this exact problem one day and best get it figured out now, huh?<p>
<div id="menu">
<a href="link1.html">link</a><b> | </b>
<a href="link2.html">link</a><b> | </b>
<a href="link3.html">link</a><b> | </b>
<a href="link4.html">link</a><b> | </b>
<a href="link5.html">link</a><b> | </b>
</div>
</div>
</body>
</html>
Thanks! James Hey guys is t possible to hhave my query echo in rows intead of one afther the other? like regualr echo will show(depending on how many values are in the DB) ggggggg llllllllllllllllll ddddddd i would like ggggggg iiiiiiiiiiiiii ddddddd ffffffff sssssssss llllllllllllllllll kkkkkk kkkkkkkk kkkkkk kkkkkkkkk i got it going with this echo { display:inline; } echo "<span class='echo'>".$row['Nom']."</span>"; it shows it in line .now is there a way to limit it ?like 10 in each row I have too many items for one row of tabs, how do I get a second row? Save this as tab.png URL Here's my working fine one row code: design.css Code: ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
h1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 row</title>
<link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>1 row</h1>
<ol id="toc">
<li class="current"><a href="h1.html"><span>H1</span></a></li>
<li><a href="h2.html"><span>H2</span></a></li>
<li><a href="h3.html"><span>H3</span></a></li>
</ol>
<div class="content">
<h2>H1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
And here's my bad attempt at 2 rows! design2rows.css Code: ol#toc {
height: 2em;list-style: none;
margin: 0;
padding: 0;
}
ol#toc li.first {
float: left;
margin: 0 1px 0 0;
}
ol#toc li.drop {
clear: left;
margin: 0 1px 0 0;
padding:0 0 0 6px;
}
ol#toc a {
background: #bdf url(tab.png);
color: #008;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: url(tab.png) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
div.content {
border: #48f solid 3px;
clear: left;
padding: 1em;
}
q1.html Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab 2 row</title>
<link href="design2row.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tab 2 row</h1>
<ol id="toc">
<li class="first">
<li class="current"><a href="q1.html"><span>1</span></a></li>
<li><a href="q2.html"><span>2</span></a></li>
<li><a href="q3.html"><span>3</span></a></li>
<li><a href="q4.html"><span>4</span></a></li>
<li><a href="q5.html"><span>5</span></a></li>
<li><a href="q6.html"><span>6</span></a></li>
<li><a href="q7.html"><span>7</span></a></li>
<li><a href="q8.html"><span>8</span></a></li>
<li><a href="q9.html"><span>9</span></a></li>
<li><a href="q10.html"><span>10</span></a></li>
<li><a href="q11.html"><span>11</span></a></li>
<li><a href="q12.html"><span>12</span></a></li>
<li><a href="q13.html"><span>13</span></a></li>
<li><a href="q14.html"><span>14</span></a></li>
<li><a href="q15.html"><span>15</span></a></li>
<li><a href="q16.html"><span>16</span></a></li>
<li><a href="q17.html"><span>17</span></a></li>
<li><a href="q18.html"><span>18</span></a></li>
</li>
<li class="drop">
<li><a href="q19.html"><span>19</span></a></li>
<li><a href="q20.html"><span>20</span></a></li>
<li><a href="q21.html"><span>21</span></a></li>
</li>
</ol>
<div class="content">
<h2>1</h2>
<p>Pic and text...</p>
</div>
</body>
</html>
I have table in html with 3 col and 15 rows. I want to set the color of the even rows 'red' and odd 'blue'. How it is possible. please help? Adil Example: three rows of four pictures each. Code: <center> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <p> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> <img src="foo.jpg"> </center> But what if I want to put text below each image? Code: <center> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <p> <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah <img src="foo.jpg"> <br> blah blah </center> We lose our rows and tidy appearance. So, put them all in divs, right? Code: <center> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <p> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> <div> <img src="foo.jpg"> <br> blah blah </div> </center> Great, text below image but the rows are completely gone. If I try to use float then the positioning gets scrambled from the other text and headings on the page. Is there a way to handle this? I want multiple rows of four pictures each, with text below each image. Thanks. Hi, I made an intranet webpage using PHP, MySQL, some JavaScript (collapsible 'windows') and CSS. In IE8 it looks like the image on the left. In Firefox 3.6 it looks like the image on the right. The rows are actually separate div elements, with tables inside them; this seemed to be the only way I could get the collapsible animation script to work without error. Without subjecting myself to the humiliating scrutiny of my appalling coding, is there any obvious tip towards making the table on the left appear a little more like the table on the right? The reason why I want to use IE8 to view this page is, in part, to take advantage of its ability to link to folders on the file system - something that Firefox cannot do (at least not without some customizing). I hope that makes sense and, as always, any help appreciated. I'm trying to cleanup my html code by using more css. What would be correct way to replace spacing between table rows like this one: Code: <tr><td> </td></tr> to something "css" Thanks! Hey guys, This seems like a really simple thing to accomplish, but I'm just having trouble locking on to what exactly to put in the code. Basically, I want to have two rows of four horizontal boxes, with the two rows of boxes and the contents of each box centered. How do I go about doing this? Should I use <span> for each box and then just use absolute positioning? Or should I put them in a container <div> or something? If anybody has any code samples, that would be a big help. I just want it to end up looking like this: [ ] [ ] [ ] [ ] [ ] [ ] [ ] [ ] ...with all the boxes centered on the page. Thanks for the help! - Luke Hi, I own WNV2 (offline atm click here to see preview) and I am trying to remove all tds trs and tables from my site. To do this need to change my mysql database row printout to css rather than the trs. I want to have the same efffect as Spoono (look at "fresh Meat" on their main page). Anyhelp would be appreciated. Thanks I am trying to layout some content into rows using DIVs. It works fine until I get to the row of 'cells'. If I don't set the height of the container div ("transaction"), it doesn't show the white background. If I make the background of the inner DIVs white, it looks blocky (not solid white bg). I tried float options but that didn't seem to help. Any thoughts? Code:
<style type="text/css">
<!--
@charset "utf-8";
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#contents {
position:relative;
margin:0 auto;
width:700px;
text-align:left;
}
#contents .payPeriod {
padding: 8px;
background-color:#E8EAFF;
margin: 8px;
}
#contents .dateBlock {
font-size: 70%;
background-color:#E0E0E0;
margin-right: -8px;
margin-left: -8px;
padding-top: 0;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#contents .transaction {
font-size: 160%;
background-color:#FFFFFF;
margin-right: -8px;
margin-left: -8px;
padding-top: 0;
padding-right: 8px;
padding-bottom: 0;
padding-left: 8px;
float: none;
clear: both;
height: 80px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #84C0FD;
border-right-color: #84C0FD;
border-bottom-color: #84C0FD;
border-left-color: #84C0FD;
}
#contents .details {
width: 70%;
float: left;
}
#contents .amount {
font-size: 120%;
float: left;
width: 20%;
display: inline;
text-align: right;
}
#contents .posted {
float: right;
width: 7%;
display: inline;
text-align: right;
}
#contents .group {
font-size: 150%;
float: left;
display: inline;
}
#contents .description {
font-size: 70%;
float: left;
display: inline;
clear: both;
}
#contents .dateTotal {
font-size: 130%;
text-align: right;
}
#contents .credittxt {
color:#339900;
}
#contents .dateTotalAmntCredit {
font-size: 130%;
color:#339900;
}
#contents .dateTotalAmntDebit {
font-size: 130%;
color:#990000;
}
-->
</style>
<div id="contents">
<div class="payPeriod">pay period: 2008-06-14
<div class="dateBlock">2008-06-14
<div class="transaction">
<div class="details">
<span class="group">merchant </span>
<span class="description">merchant </span>
</div>
<div class="amount">
<span class="credittxt">2424.42</span>
</div>
<div class="posted">1</div>
</div>
<div class="transaction">
<div class="details">
<span class="group">test bill </span>
<span class="description">test bill </span>
</div>
<div class="amount">
-20.00
</div>
<div class="posted">1</div>
</div>
<div class="dateTotal">balance <span class="dateTotalAmntCredit">2404.42</span></div>
</div>
</div>
</div>
I'm having display issues trying to draw a dynamic image gallery. There may be 0-12 images displayed at any time, and each one is displayed on a background image ("holder"), and has a caption. Each image is in a div with the "holder" image set as the background and a caption displayed as a span following a linebreak. At first I thought I should have the divs display:inline, but couldn't format them properly. Finally I floated them all left and wrote code to dynamically introduce a break with the class clearing every four images to create the rows. This is working fine, so I think. But once again IE/Win comes to bite me in the rear. Link: http://www.spearsphotography.com/monochrome.php CSS: (look for #gallery and it's children) http://www.spearsphotography.com/css/style.css If anyone have any ideas how I can fix this? You can see the desired result in Firefox/Safari/Opera/NN7+. You can see it break in IE. Still learning Thanks -- Aiden i have tried margins and padding but its not working! Code: .contenttable {
font-family: Verdana;
font-size: 12px;
color: #606060;
}
.contenttable tr {
margin-top:10px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
}
the table is here. any ideas how i can improve it otherwise, after the <tr> margins are fixed? I'm mostly a PHP developer, & use CSS only intermittently, so forgive this hopefully simple problem: I want to put a series of boxes(with fixed width, but not fixed height) inside a bigger box. The inner boxes should proceed from left to right, from the top left of the containing box. When the width of the containing/outer box is reached, the next inner box should start the next row at the left inner border of the containing box, below the tallest of the boxes in the first row, and begin the second row. No different from ordinary text, where letters are like the inner boxes. If I set float: left; for the inner boxes, this works fine if all the boxes are the same height. However, if the last inner box in the row is shorter than the previous box, the next box that should start the next row at the far left will be placed immediately under the last box in the first row, then the second row will be started after that, under that. One point: these inner blocks will be generated by php, and only the data will be different between them; otherwise, they should all have the same style attributes. I can easily get around this using a table layout, but I'd rather not. I'm sure the solution is quite simple; much more simple than my explanation. To illustrate the problem, I attach some code below -- you can just copy it & paste it into an empty tst.html file and go. Thanks for any help on this seemingly simple problem. Regards, Paul vvvvvvvvvvvvvvvvvvvvvvvv Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.outerblock {
width: 300px;
border: 3px solid blue;
}
.innerblock {
width: 90px;
border: 2px solid green;
color: red;
float: left;
}
</style>
<title>TestFloatingBlocks</title>
</head>
<body>
<h1> Testing Blocks </h1>
<div class="outerblock">
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
<div class="innerblock">
<p> Hi. This is some text. This is a lot of text</p> <p>This is additional text. And some more.</p>
</div>
</div>
</body>
</html>
Hi, I am using nested tables in order to create a recursive tree-like effect. I got it to look how I want on IE 8, and it looks almost identical in Firefox. However, Chrome is not distributing table rows evenly. It seems to make the first row in a table a minimum size, and then the second row a maximum size. I'm looking for some css property that will help this to work across all three browsers, and I'm also open to another way of doing this - (instead of nested tables) - but I did spend weeks getting it to look this way before I decided I wanted to try tackling Chrome, and have been unable to figure it out. Here is a simple example that clearly demonstrates what I'm trying to get working on Chrome. (as a new user I can't post a url to the working page I have up on the internet) 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>
<title>Firefox Vs Chrome - table rows - found @ http://jacob.jrobertsons.com/FirefoxVsChromeRows.html</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
table {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px blue;
}
td {
border-collapse: collapse;
margin: 0px;
padding: 0px;
border: solid 0px black;
}
.l {
border-left: 1px solid #c82;
}
.b {
border-bottom: 1px solid #c82;
width: 15px;
}
.t {
border-top: 1px solid #c82;
}
.n {
padding-bottom: 4px;
border: 1px solid #c82;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">AAA<br />
AAA<br />
AAA<br />
AAA<br />
AAA<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="4">
<table>
<tr>
<td class="n" rowspan="2">BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
BBB<br />
</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">CCC</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">DDD<br />
DDD<br />
DDD<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="l"> </td>
</tr>
<tr>
<td class="b l"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="2">
<table>
<tr>
<td class="n" rowspan="2">EEE</td>
<td class="b"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<td class="b"> </td>
<td rowspan="2">
<table>
<tr>
<td rowspan="0">
<table>
<tr>
<td class="n" rowspan="2">FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
FFF<br />
</td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Thanks for any help you can provide! UPDATED! - please see my post below Hi all, A bit of a newbie to CSS. I understand the syntax, and some basics. I've run into an issue where I need to render tabular data (from coldfusion) as columns rather than rows. That is to say - the data coming from CF is sorted to be written out one column at a time, rather than one row at a time, and still be lnied up correctly. Is there an easy way to set this up using CSS? I even have rowspan info, just not sure how to implement this. I'm trying to use suckerfish style drop downs, based on CSS with javascript only for an Internet Explorer hack. It's working fine for a single horizontal row of menus, however I wanted to setup a few rows of other menus underneath the first row. The problem is that the dropdown goes underneath the menus under it and I can't figure out how to fix it. This is an example of the problem. Any suggestions? |
|||||||