Link to home
Start Free TrialLog in
Avatar of luigi382006
luigi382006

asked on

Multiple CSS Boxes

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>
Avatar of lunadl
lunadl
Flag of United States of America image

<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>
Avatar of luigi382006
luigi382006

ASKER

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.
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
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.
Yes, you can see it here: http://www.rosaritofix.com/CSSTest.html   I need more equal boxes like that.
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.
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.
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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Oscurochu
Oscurochu
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial