Member Avatar for sovereign6

What I am hoping to achieve is to have the exact coloured layout as in the pic in the link but to duplicate this same layout with a number of rows with a break for each row.

In the example the second row with grey block layers to show what I want.

This must also be IE6 friendly

Any suggestions :)

Cheers

  • 3 Contributors
  • 4 Replies
  • 96 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

A practical, IE6-friendly way to get identical colored blocks repeated in rows is to give each row a semantic wrapper and float the items inside it. is right that tables will work, but using semantic markup keeps the structure clean for SEO and for Joomla templates. 's float demo proves the general approach; the gaps in that reply are how to contain floats and handle IE6 quirks reliably — the snippet below shows a cleaner, production pattern that avoids inline styles and makes repeating rows trivial.

HTML and CSS (put CSS in your template stylesheet, not inline):

<ul class="tiles-row clearfix">
  <li class="tile red"></li>
  <li class="tile blue"></li>
  <li class="tile green"></li>
</ul>
.tiles-row { list-style: none; margin: 0 0 12px; padding: 0; }
.tiles-row.clearfix:after { content: ""; display: block; clear: both; }
.tiles-row.clearfix { *zoom: 1; } /* hasLayout for IE6/7 */
.tile { float: left; width: 180px; height: 100px; margin-right: 10px; display: inline; }

Notes and troubleshooting

  • The display:inline on the floated .tile prevents the IE6/7 double-margin-on-floats bug.
  • The .clearfix uses a pseudo-element for modern browsers and *zoom:1 to trigger hasLayout in IE6/7 so the row contains its floats.
  • Wrap exactly the number of tiles you want per row (or use a server-side loop to output one .tiles-row per group) — IE6 does not support modern selectors to "break" rows automatically.
  • For Joomla: keep CSS in the template stylesheet and output only the markup in a Custom HTML module or a template override; many WYSIWYG editors strip inline styles, so prefer classes rather than inline style attributes.

Checklist: use a standards DOCTYPE, place CSS in the template, test in an IE6 VM or tester, and group tiles per .tiles-row so each row breaks exactly where you want.

Recommended Answers

All 4 Replies

Member Avatar for MJ Pieterse

mmm... not 100% but i think that you should rather use a table with cell spacing and use divs for your coloring

Member Avatar for sovereign6

Thanks for the quick reply.

Only problem with using the tables not really good SEO and secondly I have to include this code in Joomla opensource and it's pretty finky at the best of times when inserting tables and a foreign code.

Cheers

Member Avatar for colweb 
<html>
<head>
</head>
<body>
	<div style="width:100%; height:120px;"> <!-- container -->
		<div style="float:left; background:red; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:yellow; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:green; width:100px; height:100px; margin:10px;"></div>
	</div>
	<div style="width:100%; height:120px;"> <!-- container -->
		<div style="float:left; background:blue; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:brown; width:100px; height:100px; margin:10px;"></div>
		<div style="float:left; background:orange; width:100px; height:100px; margin:10px;"></div>
	</div>
</body>

This code will display 3 divs from left to right with 3 different colors, and a second row with 3 divs from left to right with 3 different colors.
And you can choose any color you want for the divs. An even better way is to move all style elements to css.

Member Avatar for MJ Pieterse

i'm not sure how you will align it, but add a margin to all your divs

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.