FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS columns

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


adhoc
Okay, so here's the relevant markup:

Code:

<div id="products">
  <div id="product1">
    <img src="http://tinyurl.com/p82ml" />
    <h1>Super soaker</h1>
    <a href="#">(Toys)</a>
    <p>It soaks. x 10</p>
    <a href="#">button 1</a>
    <a href="#">button 2</a>
    <a href="#">button 3</a>
  </div> x 5
</div>


And I would like it to look like this:



I can't figure out how to do this.. I'm almost ready to resort to tables. I got something decent, but it turns out it didn't work in IE. Is anyone able to help? You may add classes and perhaps some containers, buy try to keep the html simple. Copy the product1,2,3 a few times to see that several after each other will work too. It's supposed to be liquid -- completely adaptable after the #products container. Any ideas?
Kaneda
I'd modify the HTML to this:

Code:
<div id="products">
  <div class="product">
    <img src="http://tinyurl.com/p82ml" />
    <h1>Super soaker <a href="#">(Toys)</a></h1>
    <p>It soaks. It soaks. It soaks. It soaks. It soaks. It soaks. It soaks. It soaks. It soaks. It soaks. </p>
    <p>
      <a href="#">button 1</a>
      <a href="#">button 2</a>
      <a href="#">button 3</a>
    </p>
  </div>
  ...
  ...
</div>


I.e., add a <p> tag around the anchors, and put the first anchor inside the <h1> tag (since structurally, it seems like it's a part of the headline, and having only block elements (other than the image) inside the product <div> will make things easier). Also, give the product boxes a class (<div class="product"). Not strictly necessary, and you can still add the id if you really need it.

Then the CSS would go like this:

Code:
#products {
   width: 400px; /* whatever width */
}

/* clear the float from the previous box. */
.product {
   clear: both;
}

/* make text wrap around the image, rather than starting at baseline */
.product img {
   float: left;
}

/* Just to get rid of large headline, you can style however you want */
.product h1 {
   font-size: 100%;
}

/* place all content 150 pixels to the left, so it doesn't wrap beneath the image when higher than image */
.product h1, .product p {
   margin-left: 150px;
}


You can obviously style the anchor in the headline as you wish - it doesn't have to be the same size, font, color, whatever as the headline part:

Code:
h1 a {
  /* whatever */
}


To get rid of the class for the product <div>'s, you'd just replace ".product" in the stylesheet with "#products div".

Remember to include a doctype. This is valid XHTML 1.0 Strict (except for the missing alt tag in the image Wink), and works in IE and Firefox (tested) and most likely the others too (untested).
adhoc
Wow.. well, that was simple. FYI it works just as well in Safari. Great job! Thank you, I have renewed faith in total-CSS-layouts. Care for some frih$ or something?
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.