CSS - Echo In 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.

I 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
}

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

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.

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>&nbsp;</td></tr>

to something "css"

Thanks!

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 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&nbsp;</span>
          <span class="description">merchant&nbsp;</span>
        </div>
        <div class="amount">&nbsp;
        <span class="credittxt">2424.42</span>        
        </div>
        <div class="posted">1</div>
      </div>
      
      <div class="transaction">
      
        <div class="details">
          <span class="group">test bill&nbsp;</span>
          <span class="description">test bill&nbsp;</span>
        </div>
        <div class="amount">&nbsp;
        -20.00        
        </div>
        <div class="posted">1</div>
      </div>
      
      <div class="dateTotal">balance <span class="dateTotalAmntCredit">2404.42</span></div>
      
    </div>
  </div>
</div>	

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">&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
		<td class="b">&nbsp;</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">&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>
				</table>

				</td>
				<td class="b">&nbsp;</td>
				<td rowspan="2">
				<table>
					<tr>
						<td rowspan="0">
						<table>
							<tr>
								<td class="n" rowspan="2">CCC</td>

								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>

				</td>
			</tr>
			<tr>
				<td class="l">&nbsp;</td>
			</tr>
			<tr>
				<td class="b l">&nbsp;</td>
				<td rowspan="2">
				<table>

					<tr>
						<td rowspan="0">
						<table>
							<tr>
								<td class="n" rowspan="2">DDD<br />
								DDD<br />
								DDD<br />

								</td>
								<td>&nbsp;</td>
							</tr>
							<tr>
								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>

				</table>
				</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>

	<tr>
		<td class="l">&nbsp;</td>
	</tr>
	<tr>
		<td class="b l">&nbsp;</td>
		<td rowspan="2">
		<table>
			<tr>
				<td rowspan="2">

				<table>
					<tr>
						<td class="n" rowspan="2">EEE</td>
						<td class="b">&nbsp;</td>
					</tr>
					<tr>
						<td>&nbsp;</td>
					</tr>

				</table>
				</td>
				<td class="b">&nbsp;</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>&nbsp;</td>
							</tr>
							<tr>

								<td>&nbsp;</td>
							</tr>
						</table>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			<tr>

				<td>&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
	</tr>
</table>


</body>
</html>

Thanks for any help you can provide!

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>

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?

Hi All,

I am trying to echo a table that I have given the following css style:
PHP Code:
 table.paginationtable {
cell-spacing: 1px;
border: 1px solid #000;
}

table.paginationtable td.location {
background-color: #6699FF;
color: #FFF;
font-family: arial, verdana;
font-size: 11px;
padding: 5px;
font-weight: normal;
line-height: 130%;
text-align:left;
} 




In the html I have:
PHP Code:
echo "<table class=\"paginationtable\"><tr>";
echo "<td class=\"location\">$location</td>";
echo "</tr></table>"; 




For some reason the 1 px border that I styled for the table is not showing up around my paginationtable. Can anyone see anything wrong with my code? Do the echo's look ok? Or is my CSS logic the problem?

Brad.

I have a php page wich returns some dymanic content....what i need is, using css stylsheets, place each echo where i want...

In this example shown here is supposed to move the word ID:
but it also moves the word Sueldo: and i dont why,
since the Div is already closed before Sueldo begins.... here`s what i get http://www.selex.com.mx/example.jpg
on this example

can someone help with this please...

PHP Code:
switch ($x) {
     case 0:
         echo "<div id=\"testing\"> <p class=\"p1\"><span> ID:</span></p> </div>";
         break;
     case 3:
         echo "<p> Sueldo: ";
         break;
        
     case 4:
         echo "<p> Horas Extras: ";
         break;
      case 5:
         echo "<p> Bono Estacionamiento: "; 





my css stylesheet goes like this

#testing {
clear:both;
margin: 20px 20px 20px 10px;
width: 160px;
float: left;
}
#testing {
font: italic 10pt/22pt georgia;
text-align:center;
}

Here is the default css.css file for a php directory I use >> http://www.phpmydirectory.com/demo/template/default/css.css
I want to create custom fields in user/listee admin that allow a user/listee to choose things like scrollbar colors, page colors, text sizes etc on their individual listing page. Each listing page has a header.tpl file w/ <head>/</head> section. Each .tpl file calls the default css.css file above. How can I echo new css fields into either the css.css file or the actual listing.php of the listing page itself? I got a suggestion to use this but I cannot make it work.
Code:

<? if (on_page('listing.php')) { ?> etcetcetc

I've tried maybe 10 different ways. No luck. Should I convert the css file to php file & echo custom fields into it & call the php/css file to the listing page header?

Hi,

I wonder if you can help me,

In FF, this site has it's rows messed up.

If you scroll down towards the bottom the colours become out-of-sync with the text.

Can anyone help? (It works fine in IE and Opera)

Thanks

CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all

Thanks again

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.