Multiple CSS Boxes

luigi382006
luigi382006 used Ask the Experts™
on
Hi, i just used the website roundedcornr.com to make a css box,  now the question is, how can I make more boxes in the same page?
This is my 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body><style type="text/css">
<!--
@import url("roundedcornr_box_383485.css");
.style1 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 36px;
}
-->
</style>

<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>
<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>
<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>
<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>
<div class="roundedcornr_box_383485" id="roundedbox">
  <div class="roundedcornr_top_383485"><div></div></div>
      <div class="roundedcornr_content_383485">
         <p align="center" class="style1">Welcome to Mex123.com</p>
      </div>
   <div class="roundedcornr_bottom_383485"><div></div></div>
</div>

Author

Commented:
Thank you for your advise, but I try that before and didn't work, is not just a copy paste solution, if I copy and paste the same code several times, the page remains the same, showing only one box.
My question is, why do you have this:

</div></div></div>

Im not sure if that is a problem, or not. Im pretty sure it is, but I haven't tried it for myself.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

also, for firefox compatiability, you shouldn't use the @import feature. It is only available in IE as far as I know. use this:

<link type="text/css" rel="stylesheet" href="roundedcornr_box_383485.css" />

Unless there is a reason you use @import, such as IE-only CSS

Author

Commented:
Thank you for your comment Oscurochu, about the </div></div></div>, like I said, I just generate the code from an online generator, and the @import feature, that is generated by Dreamweaver. I really newbie to CSS, I´m just trying to do boxes like the ones in www.realtor.com. My code is for one, works fine, but can't figure it out how to insert more than one box.
do you have a URI of the page you are working on i can view to see what it looks like right now so i can work with it? I would like to see it work with the stylesheet and i can't because  you did post it's code.

Author

Commented:
Yes, you can see it here: http://www.rosaritofix.com/CSSTest.html   I need more equal boxes like that.

Author

Commented:
And this is the style sheet used: http://www.rosaritofix.com/roundedcornr_box_383485.css
The coding of this is a little bit complicated there are simpler ways to acheive this however. You can use tables. If you wish for me to help you with this, let me  know.

I can help you with the way it is now, but you said you're new to CSS so it would be more work than you need.

Author

Commented:
Thank you Oscurochu, with tables I don't have the rounded corners, it needs to be that way, and also I don't have the same ability to move the boxes freely like with CSS. If you can help me to achieve this with CSS I´ll be glad to learn!!!
i can achieve this with tables. i tried to set up multiple CSS boxes with DIV tags and i couldnt. so the only way i can help you is with tables. i garantee i can get tables working just like you want.

Author

Commented:
Like I said before, I need to do something almost exactly like in www.realtor.com, (of course without the search features) I tried with tables with no success. Do you think you can do it?
definately. you want the box to look exactly like it is now, or you just want a box with a rounded rectangle?

the rectangles you got right now are kinda split in pieces right now.

i can do both.

Author

Commented:
I need a box with rounded corners, and I need to be able to put content (images, text) inside that box (like a container).
Yes, right now the box is done with five gif files with CSS.
I like the CSS box I have right now, because I can move that anywhere on my page, that is not posible with tables. (using absolute positioning on CSS)
yes you can. I'll show you once im done writing the code. you have to put the table inside of its own div tag.
change the style attribute on the div tag. it should work if you fix it up.


<div style="width: px; height: px; top: px; left: px">
<table border="0" cellpadding="0" cellspacing="0">
      <tr>
            <td align="right" valign="bottom"></td>
            <td align="center" valign="bottom"><img src="roundedcornr_383485_r.png" width="100%" /></td>
            <td align="left" valign="bottom"><img src="roundedcornr_383485_tr.png" /></td>
      </tr>
      <tr>
            <td align="right"></td>
            <td align="center" valign="middle" width=">
            </td>
            <td align="left"><img src="roundedcornr_383485_r.png" height="100%" /></td>
      </tr>
      <tr>
            <td align="right" valign="top"></td>
            <td align="center"  valign="top"><img src="roundedcornr_383485_r.png" width="100%" /></td>
            <td align="left" valign="top"><img src="roundedcornr_383485_br.png" /></td>
      </tr>
</table>
</div>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial