|
CSS - Mysql Display Data In Formatted Table :: Css
Hi all,
I dnt want to retype my situation, i put my 1st thread in the wrong forums. U can read up on what my query is in this link http://forums.devshed.com/t188904/s.html Thanks all Jim Similar TutorialsHi, I'm a CSS newbie trying to convert my previous table-based website layout into something less kludgy but I'm encountering problems. Specifically, there's a section of the site in which addresses were shown. Currently, I have this formatted with a table using code similar to the following:
Code: <table> <tr> <td>Name:</td><td>Test Entry</td> </tr><tr> <td>Address:</td><td>123 Roadstreet Drive</td> </tr><tr> <td> </td><td>Unit 42</td> </tr><tr> <td> </td><td>Toronto, Ontario</td> </tr><tr> <td>Phone #:</td><td>416-555-1138</td> </tr><tr> <td>E-Mail Address:</td><td><a href="mailto:someuser@domain.com">someuser@domain.com</a></td> </tr><tr> <td>Website URL:</td><td><a href="<address goes here>"><address goes here></a></td> </tr> </table> Unfortunately I can't directly show the screenshot of what this looks like due to the newness of my account here but if you go to the address s5.photobucket.com/albums/y200/DIguana/?action=view¤t=cssproblem.png you should be able to see it. My problem when I try to convert this to CSS is that many of the address lines don't have identifiers on the left but still need to be lined up with the rest. Everything I've tried causes the second and third lines of the to be shifted to the left compared to the rest of the address. Does anyone have any ideas as to the best way to format this section? Hi all, I have a table that contains regular numeric data. When the user clicks/hovers over each entry of the right most column, I would like to display a hidden div with some sort of description of that data. I would like this information to display to the immediate right of the last column of data, but not in the table itself. Any ideas? Thanks Hi! Is is vicious to display a table as "display: block" to force margin-collapsing? Otherwise there's no margin collapsing with other elements. Thanks I am quite new (please forgive). I work at a university and one of the departments wants to post headlines on our homepage. The problem: I have been unable to format this content with CSS, even though I was told I could. My id definition in the Head: #x { font-size: .7em; } Code in the body: <div id="x"> <src="http://news.humboldt.edu/modules/xRss/index2.php/modules.php?op=modload&name=xRss&file=index&url=http%3A%2F%2Fnews.humboldt.edu%2Fbackend.php%3Ftopic%3D9%26stories%3D10&showtitle=0&showimg=0&showinput=0&maxitems=0&showdescs=0&titletrim=0&titlemax=0&desctrim=0&descmax=0&tabwidth=300px&linktarget=_top&bordercol=%23FFFFFF&headbgcol=%23FFFFFF&headtxtcol=Blue&titlebgcol=%23FFFFFF&titletxtcol=Blue&itembgcol=%23FFFFFF&itemtxtcol=Blue&mode=javascript&ctl=0"> </div> The headlines show up, but are huge. Any ideas? Hello, I have just got round to testing my site on my iPhone for continuity and I have found a weird problem. Here is the situation, on my blog I sometimes need to show blocks of code so I naturally use <pre></pre> tags. Some blocks of code are too wide for my content column so I coded up a little expander box with jQuery. This works fine and I'm really happy with it but the iPhone manages to screw it up. If you can test a page on my blog (rendernaut[dot]com) and navigate to a code block, you can see it is just a simple toggle switch. But when this is done an an iPhone the font inside of the block increases proportional to the width. Its the only browser I've tested which does it, does anyone have any answers to why this is? Thanks I am trying to organize some DIV's like a table, because the data being rendered is a series of footer menu's, not a table. It works fine in Firefox 7 alpha Google Chrome 12 Opera 11.50 Safari 5.1 But... as usually, Internet Explorer 8 and Internet Explorer 9 suck the big one and display my list as a straight vertical list, where the rest display it horizontally. Anyone have any recommendations? my css code: Code:
div#footer-menu {
display:table;
width:960px;
}
div#footer-menu-row {
display:table-row;
}
div#footer-menu-row div.footer-menu-cell {
display: table-cell;
}
in my HTML I have Code: <div id="footer-menu"> <div id="footer-menu-row"> <div class="footer-menu-cell"> <h2><a href="#">Cat 1</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 2</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 3</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 4</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 5</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 6</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> <div class="footer-menu-cell"> <h2><a href="#">Cat 7</a></h2> <ul> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> <li><a href="#">Sub 4</a></li> <li><a href="#">Sub 5</a></li> </ul> </div> </div> </div> I've recoded my previous version which fixes a span problem, but end up with the rows not being able to use different widths & the image spanning the column width from the first row... div.bg_tp_lt = row 1 @ 105px div.bg_ct_lt = row 2 @ 53px div.bg_bt_lt = row 3 @ 68px So if you can either see what I'm doing wrong or provide a more reliable method it would be greatly appreciated. Thanks in advance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>$var</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles2.css" media="screen" />
</head>
<body scroll="no">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td bg_tp_lt"></div>
<div class="td bg_tp_ct"></div>
<div class="td bg_tp_rt"></div>
</div>
<div class="tr">
<div class="td bg_ct_lt"></div>
<div class="td bg_ct_ct"><div class="content">$content</div></div>
<div class="td bg_ct_rt"></div>
</div>
<div class="tr">
<div class="td bg_bt_lt"></div>
<div class="td bg_bt_ct"></div>
<div class="td bg_bt_rt"></div>
</div>
</div>
</div>
</body>
</html>
Code:
div.table {
display: table;
border: 1px solid #DDDDDD;
padding: 0px;
width: 404px;
}
div.thead {
display: table-header-group;
}
div.tbody {
display: table-row-group;
}
div.tr {
display: table-row;
}
div.td {
display: table-cell;
border: 0px solid #DDDDDD;
padding: 0px;
}
div.bg_tp_lt {
width: 105px;
height: 60px;
background-image:url(images/stl.jpg); no-repeat;
background-color: #000000;
}
div.bg_tp_ct {
width: auto;
height: 60px;
background-image: url(images/st.jpg); repeat-x;
background-color: #000000;
}
div.bg_tp_rt {
width: 105px;
height: 60px;
background-image: url(images/str.jpg); no-repeat;
background-color: #000000;
}
div.bg_ct_lt {
width: 53px;
height: 150px;
background-image: url(images/sl.jpg); repeat-y;
background-color: #000000;
}
div.bg_ct_ct {
width: auto;
height: auto;
background-color: #000000;
}
div.bg_ct_rt {
width: 53px;
height: 150px;
background-image: url(images/sr.jpg); repeat-y;
background-color: #000000;
}
div.bg_bt_lt {
width: 68px;
height: 64px;
background-image:url(images/sbl.jpg); no-repeat;
background-color: #000000;
}
div.bg_bt_ct {
width: auto;
height: 64px;
background-image: url(images/sb.jpg); repeat-x;
background-color: #000000;
}
div.bg_bt_rt {
width: 68px;
height: 64px;
background-image: url(images/sbr.jpg); no-repeat;
background-color: #000000;
}
/* Little hack for IE */
* html div.td { display: inline; }
I want to have the functionality of this page
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>
<title>Bug Tracker | View All Active Bugs</title>
<script type="text/javascript">
function toggleCard(card) {
var o = document.getElementById(card);
o.style.display=(o.style.display == "none")?"block":"none";
}
</script>
<style type="text/css">
h2 {
border: 1px 0 0 0 solid #000;
background-color: #eee;
margin: 0px;
padding: 2px 2px 2px 15px;
font-size: 1.0em;
}
p {
margin: 2px;
padding: 0px;
}
</style>
<script src="inc/js/sorttable.js"></script>
</head>
<body>
<h2 id="head1" onclick="toggleCard('card1')">Click Me</h2>
<div id="card1" style="border: 1px solid #000; display: none"><p>Click should display me!</p></div>
</body>
</html>
But instead of using a heading element (h2) I would like to use a table row to display the new div. However, when I do this, the newly displayed division messes with the spacing for the table columns and also in firefox it will leave the display space for the div blank and continue to repeat this each time the row is clicked. I've looked for similar problems with google, but haven't dug anything up. Any pointers? Hello, I use the following css code to define the style of some tables. However in Firefox it shows it how i want it, but in IE it doesnt display the borders. (not around the rows of the table). Code: table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
}
.darkRow td{
background-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow td{
background-color: #BFACBF;
color: #4D3D4D;
padding-left: 4px;
}
I create the tables something like this: Code: <table class="listings"> <tr class="darkRow"><td>bla</td></tr> <tr class="lightRow"><td>bla</td></tr> </table> Why does it display so much different in those 2 browsers? I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Hello, I got a website with a table on it. This is how it looks in firefox 2.0: http://img139.imageshack.us/img139/9822/helpffkr6.jpg And here's how it looks in IE6: http://img111.imageshack.us/img111/9675/helpiehi7.jpg As you can see, where FF do display the table border, IE does not. Here's the simplified table code and the related css code: Table -> Code: <table class="listings" style="width: 100%;"> <tr> <td colspan="2" class="darkRow">Category 1</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 1</td> <td style="width: 70%" class="lightRow">This is thread number 1.</td> </tr> <tr> <td style="width: 30%" class="lightRow">Thread 2</td> <td style="width: 70%" class="lightRow">This is thread number 2.</td> </tr> </table> CSS code -> Code: <style type="text/css">
table.listings{
border-collapse: collapse;
border-style: none;
}
table.listings tr{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
.darkRow{
background-color: #4D3D4D;
border-color: #4D3D4D;
color: white;
padding-left: 4px
}
.lightRow{
background-color: #BFACBF;
border-color: #4D3D4D;
color: #4D3D4D;
padding-left: 4px;
}
</style>
It seems as if IE doesnt support borders around a whole row, because when i add this: Code: table.listings td{
border-style: solid;
border-color: #4D3D4D;
border-width: 1px;
vertical-align: top;
}
With that also IE displays a border but not only around the whole row, but around all the cells individually, which is not my intention. Does anybody have an idea what i can do about this? thanks in advance. I've dabbled with the display: table properties for awhile, and I've looked forward to the time I could use them at work. Equal height columns! No more faking it with extra wrapper div's and background images! As we're finally rolling out IE8 at work, I decided to take a pretty typical layout that I would have laid out years ago in a table. Header, footer, nav and content, that is always at least the height of the page and will expand with more content: http://www.richarddoyle.net/tests/css_table/table.html This could be done using floats, background images, etc, but I wanted to take advantage of what display: table could offer me. So I tried to recreate the same layout. I knew there was no colspan in CSS, but I was sure I could get it to work somehow. My first attempt showed the colspan issue: http://www.richarddoyle.net/tests/css_table/cssversion1.html My second attempt I couldn't get the page to match at least the height of the browser: http://www.richarddoyle.net/tests/css_table/cssversion2.html Is this just impossible to do with display:table properties? Is there some mixture of table properties and sticky footer code that can make this work? Hello, I am using a series of nested ULs to display information in a kind of tree structure with some DHTML involved to make it behave pretty. What I am trying to achieve is to have the information in the LI elements well spaced apart, using <span>s. Since these elements are inline I cannot give them a specific width. A workaround that solves the problem in using the property display:table-cell and then I can give it a width. Of course this doesn't work in IE. Could someone please suggest an alternative way of achieving the following: Code:
<ul id="tree">
<li id="node1">
<a href="#">
<span>CB200801</span>
<span>02/03/2007</span>
<span>IPS20003</span>
<span>17.58</span>
<span>3.08</span>
<span>0.00</span>
</a>
<ul>
<li id="node2">
<a href="#"><span>12028077</span></a>
</li>
<li id="node3" >
<a href="#"><span>12046086</span></a>
</li>
</ul>
</li>
etc etc
and then I give the <span> the display:table-cell and a width. In Firefox this is giving me the visual layout I require. Can something be done to help IE? Thanks in advance Andy I am trying to display data from a XML document in table form...can anyone help me...this is what i have so far, but it's not working and I'm running out of ideas. This is the XML document... Code: <?xml-stylesheet type="text/css" href="nasdaq.css" ?>
<quotes>
<heading>NASDAQ 100</heading>
<subHeading>Current quotes</subHeading>
<dateTime>
<date>11/01/2008</date>
<time>11:45:05</time>
</dateTime>
<titles>
<column id="c1">Symbol</column>
<column id="c2">Name</column>
<column id="c3">Last Sale</column>
<column id="c4">Net Change</column>
<column id="c5">% Change</column>
<column id="c6">Volume</column>
</titles>
<stocks>
<stock class="down">
<symbol>AAPL</symbol>
<company>Apple Computer, Inc.</company>
<lastSale>$15.26</lastSale>
<netChange>-0.17</netChange>
<pChange>-1.10%</pChange>
<volume>5.548</volume>
</stock>
<stock class="up">
<symbol>ABGX</symbol>
<company>Abgenix, Inc.</company>
<lastSale>$9.22</lastSale>
<netChange>0.06</netChange>
<pChange>0.66%</pChange>
<volume>1.396</volume>
</stock>
...so on and so on...
This is what the end result is suppose to look like... http://mtm324php.info/nasdaq.bmp This is what I have so far (the best I could apply a similar example from my textbook to the problem), but the stock data is not seperating in different rows like I specified...any help or direction would be wonderful. Thank you. Code: quotes {display:table;}
heading {display: block; position: absolute; top: 17%; left:44%}
subHeading {display: block; position: absolute; top: 20%; left:44%}
dateTime {display: block; position: absolute; top: 10%; left:75%;}
titles {display:table-header-group; position: absolute; color:blue; top: 24%;}
stocks {position: absolute; top: 30%;}
stock {display: table-row;}
symbol, company, lastSale, netChange, pChange, volume {display: table-cell}
With my CSS the XML document looks like this... http://mtm324php.info/nasdaq.xml I've read the pros and cons about using DIV over TABLE for layouts but what about displaying data? Should I go about using the DIV or TABLE commands? Code:
#ticker {
background: transparent url('../images/dark_gradient.png');
overflow: hidden;
display: table;
margin-left: 20px;
margin-top: 10px;
width: 835px;
height: 52px;
}
#ticker #items {
position: relative;
top: 0px;
left: 829px;
}
the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window. I'm sure this can be fixed... But I'm not sure how! I was doing the final adjustments and cross-browser tweaking when I stumbled upon this issue... I'm using a CSS with the following background tag: Quote: background: #E8E9EA url(img/test.png) repeat-x 0 8px; My PNG is 32bits, and of course, this works OK in Firefox, etc.. But not in MSIE! ( tested under 6.0.2900.x ) - Instead of correctly blending the PNG with the table background, it displays full white rects as backgrounds. I tried a few ms-ie "holy" fix scripts, etc. None of them worked on this special case. Any ideas?. I wouldn't like to work-around this one... Thanks. gday i have a bunch of tables that are only to be shown based on a javascript call, but for some reason, firefox is rendering the space of the table, where as IE 7 isn't.. eg. <table style"display: none;"></table> with a whole bunch of rows in it.. the webpage still loads blank space everywhere, rather than just empty space thoughts? Hi Could someone take a look at this please http://dmumford.bizhat.com/rca/fixtures.htm When viewed in firefox you will see my data table overlaps the div coloured brown, anyone know why this is ? Thanks for your help. I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. |
|||||||