CSS - Color To Even & Odd Rows?

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

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!

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 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 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.

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

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

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>	

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">&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 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?

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