brick style boxis css problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • normunds
    New Member
    • Nov 2006
    • 2
    #1

    brick style boxis css problem

    hi!

    I'm newbie in css and I can't make myself brick boxes that work in IE and Firefox.
    The problem is in brick size and layout. Can anybody put there code, how to make such wall without absolute positioning? Boxes should be with borders and with widths (different for each but pointed with width parameter). Height of boxes are equal. In one row is ~ 20-30 boxes with different widths. There is no vertical space between boxes.

    _______________ _
    | x | xxxxx | x | ....
    _______________ _______________
    | x | x | x | xxxxxxxxxxx | xxxxxxx | ....
    _______________ _______________
    | x | x | x | xxxx | xxxxx | ....
    _______________ ______
    ....

    Norm
    Tags: None
    • bradvanwick
      New Member
      • Nov 2006
      • 13
      #2
      Hello,

      Could you clarify what you mean by "bricks"?

      Is this a background, or will content be placed in the boxes?

      Is the "wall" to be fluid, and resize with the window?

        Comment

        • bradvanwick
          New Member
          • Nov 2006
          • 13
          #3
          Ok. This is a brick wall. Try it out. Let me know if this is what you wanted.

          Here is the HTML with the CSS inside it:

          [HTML]<html>
          <head>

          <style type="text/css">

          <!--

          .brick-narrow, .brick-medium, .brick-wide {
          height: 50px;
          border: 2px solid #ccc;
          background-color: red;
          float: left;
          }

          .brick-narrow {
          width: 100px;
          }

          .brick-medium {
          width: 150px;
          }

          .brick-wide {
          width: 200px;
          }

          .row {}

          -->

          </style>

          </head>

          <body>

          <div class="row">

          <div class="brick-narrow">Brick</div>
          <div class="brick-narrow">Brick</div>
          <div class="brick-medium">Brick</div>
          <div class="brick-wide">Brick</div>
          <div class="brick-wide">Brick</div>
          <div class="brick-narrow">Brick</div>

          <div>


          <div class="row">

          <div class="brick-wide">Brick</div>
          <div class="brick-medium">Brick</div>
          <div class="brick-medium">Brick</div>
          <div class="brick-wide">Brick</div>
          <div class="brick-narrow">Brick</div>
          <div class="brick-medium">Brick</div>

          <div>

          <div class="row">

          <div class="brick-narrow">Brick</div>
          <div class="brick-narrow">Brick</div>
          <div class="brick-medium">Brick</div>
          <div class="brick-wide">Brick</div>
          <div class="brick-wide">Brick</div>
          <div class="brick-narrow">Brick</div>

          <div>

          </body>

          </html>[/HTML]

          Note: the <div class="row"> are simply for orginization -- they provide no structure. Also, this brick wall was tested in Firefox, Opera, and Safari for Mac. I don't know what it will do in Internet Explorer.

            Comment

            • normunds
              New Member
              • Nov 2006
              • 2
              #4
              thanks bradvanwick,

              this is right direction, but still there are 2 problems

              1) if I'm increasing border, on IE the wall looks smaller than on Firefox
              2) if brick is first brick in 2nd row, it always should be first brick in 2nd row. there should be no wrapping and I should be able to point, which brick is first in the row.

              2nd problem is more important

              Norm

              Originally posted by bradvanwick
              Ok. This is a brick wall. Try it out. Let me know if this is what you wanted.

              Here is the HTML with the CSS inside it:

              [HTML]<html>
              <head>

              <style type="text/css">

              <!--

              .brick-narrow, .brick-medium, .brick-wide {
              height: 50px;
              border: 2px solid #ccc;
              background-color: red;
              float: left;
              }

              .brick-narrow {
              width: 100px;
              }

              .brick-medium {
              width: 150px;
              }

              .brick-wide {
              width: 200px;
              }

              .row {}

              -->

              </style>

              </head>

              <body>

              <div class="row">

              <div class="brick-narrow">Brick</div>
              <div class="brick-narrow">Brick</div>
              <div class="brick-medium">Brick</div>
              <div class="brick-wide">Brick</div>
              <div class="brick-wide">Brick</div>
              <div class="brick-narrow">Brick</div>

              <div>


              <div class="row">

              <div class="brick-wide">Brick</div>
              <div class="brick-medium">Brick</div>
              <div class="brick-medium">Brick</div>
              <div class="brick-wide">Brick</div>
              <div class="brick-narrow">Brick</div>
              <div class="brick-medium">Brick</div>

              <div>

              <div class="row">

              <div class="brick-narrow">Brick</div>
              <div class="brick-narrow">Brick</div>
              <div class="brick-medium">Brick</div>
              <div class="brick-wide">Brick</div>
              <div class="brick-wide">Brick</div>
              <div class="brick-narrow">Brick</div>

              <div>

              </body>

              </html>[/HTML]

              Note: the <div class="row"> are simply for orginization -- they provide no structure. Also, this brick wall was tested in Firefox, Opera, and Safari for Mac. I don't know what it will do in Internet Explorer.

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  First, there are errors in that code. Validate it.
                  Second, you will never get IE to pretend to act like a modern browser without a proper doctype. Use this one:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                  "http://www.w3.org/TR/html4/strict.dtd">

                    Comment

                    • AricC
                      Recognized Expert Top Contributor
                      • Oct 2006
                      • 1885
                      #6
                      I think you'll get the effect you want if you use an image.

                        Comment

                        • bradvanwick
                          New Member
                          • Nov 2006
                          • 13
                          #7
                          Both drhowarddrfine and AricC are correct. IE will not act properly.

                          To drhowarddrfine: I didn't give the DOCTYPE declaration in that snippet for simplicity's sake. I agree with you that validation generally corrects most problems (accept not in IE of course).

                          To normunds: Like AricC wrote, images may be a better way. Also, you may find it difficult to acheive a layout that does not wrap if you don't use some kind of absolute positioning.

                            Comment

                            Previous template Next
                            Working...