Creating the boxes

2006, július 12 - 23:07

In this tutorial, we are going to create three different types of boxes:
-sticky box
-full-width box
-half-width box

The HTML structure is the following:

<!-- turn off the breadcrum -->
<style>#breadcrumb{display: none}</style>
			<!-- sticky news here -->
<div id="front_wrap">
	<div id="front_left1" class="front_half">
		<h3>Itthon</h3><!-- box title -->
			<!-- generated content -->
	</div>
	<div id="front_right1" class="front_half">
		<h3>Nagyvilág</h3><!-- a boy title -->
			<!-- generated content -->
	</div>
	<div id="front_middle3" class="front_middle">
		<h3>Szubjektív</h3><!-- box title -->
			<!-- generated content -->
	</div>
</div>

In this case we pull news from three categories -Itthon, Nagyvilág, Szubjektív. We don't need the bredcrumb, make the HTML structure and lable the appropriate boxes. (I usually use static content where possible, but you could make the titles dynamic, of course)

As you can see, we don't make a separate box for the sticky news: the Drupal handles it nicely by itself, we should only do a little css to emphasize it.

I used the following CSS code to create boxes (note: I tried to use minimal styling in this example for better viewing):

/* half-width box */
.front_half{float: left; width: 216px; margin-right: 14px;}
/* full-width box */
.front_middle{float: left; width: 447px;}
/* box title */
#front_wrap h3 {margin-bottom: 7px; border-bottom: 2px solid #cccccc; text-transform: uppercase}
/* news title */
#front_wrap .node h2.title a {border-bottom: 1px solid #aaaaaa}
/* let's add a little style for the images */
#front_wrap img {float: left; width: 70px; padding: 1px; margin: 4px 5px 0px 0px; border: 1px solid #aaaaaa}
/* 'read more' link */
a.front_more{display: block; float: right; margin-top: -12px; margin-bottom: 25px}
#front_right1{ margin-right: 0px; }
/* the separator */
.front_hr {display: block; clear: both; width: 216px;}

So far, so good. Let's see the queries.

ote:
if you use nodevote module and don't want to see the stars on the front page, change the code in the first line of the HTML structure as described below:

<style>#breadcrumb, fieldset {display: none}</style>

...and the CSS as well:

#front_wrap fieldset {display: none}