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>
CSS

Avatar of undefined
Last Comment
Oscurochu

8/22/2022 - Mon
lunadl

<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>
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.
Oscurochu

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.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Oscurochu

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
luigi382006

ASKER
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.
Oscurochu

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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
luigi382006

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

ASKER
And this is the style sheet used: http://www.rosaritofix.com/roundedcornr_box_383485.css
Oscurochu

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.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
luigi382006

ASKER
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!!!
Oscurochu

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.
luigi382006

ASKER
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?
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Oscurochu

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.
luigi382006

ASKER
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)
Oscurochu

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Oscurochu

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.