Solved

Trying to convert box with rounded corners from html table to CSS

Posted on 2004-08-10
14
970 Views
Last Modified: 2012-06-22
I am trying to replace the below listed html table with its CSS equivalent.

Existing HTML:

 <table border="0" cellpadding="0" cellspacing="0" width="99%" id="table5">
     <tr>
      <td bgcolor="#FFFFFF">
      <img name="content_r1_c1" src="web/images/content_r1_c1.gif"
width="16" height="17" border="0" alt=""></td>
      <td background="web/images/content_r1_c2.gif"></td>
      <td bgcolor="#FFFFFF">
      <img name="content_r1_c3" src="web/images/content_r1_c3.gif"
width="19" height="17" border="0" alt=""></td>
     </tr>
     <tr>
      <td background="web/images/content_r2_c1.gif">&nbsp;</td>
      <td bgcolor="#FFFFFF" align="left" valign="top" width="100%"
style="font-family: Tahoma; font-size: 10pt; color: #000000">
      <!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable --></td>
      <td background="web/images/content_r2_c3.gif">&nbsp;</td>
     </tr>
     <tr>
      <td>
      <img name="content_r3_c1" src="web/images/content_r3_c1.gif"
width="16" height="25" border="0" alt=""></td>
      <td background="web/images/content_r3_c2.gif">&nbsp;</td>
      <td>
      <img name="content_r3_c3" src="web/images/content_r3_c3.gif"
width="19" height="25" border="0" alt=""></td>
     </tr>
     <tr>
      <td colspan="3">
           <!--webbot bot="Include" U-Include="bottomnavigationbar.htm"
TAG="BODY" --></td>
     </tr>
    </table>

Attempt at CSS:

/* Beginning of Rounded Cornered Main Table */

.roundcont {
 width: 99%;
 height: 500px;
    padding: 0;
 background-color: white;
 color: #ffffff;
}

.roundcont p {
 margin: 0 10px;
}

.roundtop {
 background: url(web/images/content_r1_c2.gif) no-repeat top right;
}

.roundbottom {
 background: url(web/images/content_r3_c2.gif) no-repeat top right;
}

img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block;
}

New html:

<html>
<head>
<title></title>
</head>
<body>
<div class="roundcont">
   <div class="roundtop">
  <img src="web/images/content_r1_c1.gif" alt=""
  width="15" height="15" class="corner"
  style="display: none" />
   </div>

   <p></p>

   <div class="roundbottom">
  <img src="web/images/content_r3_c3" alt=""
  width="15" height="15" class="corner"
  style="display: none" />
   </div>
</div>
</body>
</html>

Any ideas would be appreciated...
0
Comment
Question by:TrueBlue
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11766669
TruBlue,
Try to rename this:
img.corner {

To this:
.corner {

Steve

0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11767093
TrueBlue,
Please disregard, I didn't understand your question properly before submitting my previous post.

Steve
0
 
LVL 3

Accepted Solution

by:
OutsideTheBox earned 400 total points
ID: 11768482
<!--TrueBlue,

OK, will the following code help you?


notes:

I made the styles as classes instead of ids just to follow your lead. If the style occurs only once many people would just make it an id instead.

install your gifs by replacing background-color(convient for construction only) with background-image: url(path) to all the respective classes.(don't forget to remove innerHTML text).

roundcont & topgif & bottomgif resize as window is resized. You may or may not want this but it seemed like the table page did too as width was 99%.

the left & right edges of topgif & bottomgif are actually under the corner gifs and this may be undesirable but since you need them to resize any way I figured that may work.

Corner gifs do not resize. cornertl=topleft, cornertr=topright, etc, etc.

you can put all styles on a linked stylesheet file if you want. I just put them on the html page to make it easy for me.

It may seem heavy with styles and there is probably a way to improve this design (I'm learning too), but if you have multiple pages, it is better than adding style to all the html tags.


-->
<html>
<head>
<title></title>

<style type="text/css">

.roundcont {
 display: inline;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 height: 500px;
 background-color: blue;
 color: #ffffff;
}

.roundcont p {
 margin: 30px 10px
}

.cornertl {
 position: absolute;
 left: 0%;
 top: 0%;
 width: 15px;
 hight: 15px;
 background-color: green;
 z-index: 101
}

.topgif {
 background: red;
 width:100%;
 hight: 15px;
 text-align: center;
 z-index: 100
}

.bottomgif {
 position: absolute;
 bottom: 0%;
 width: 100%;
 hight: 15px;
 background: red;
 text-align: center;
 z-index: 100
}

.cornertr {
 position: absolute;
 right: 0%;
 top: 0%;
 width: 15px;
 hight: 15px;
 background-color: green;
 z-index: 101
}
.cornerbr {
 position: absolute;
 right: 0%;
 bottom: 0%;
 width: 15px;
 hight: 15px;
 background-color: green;
 z-index: 101
}
.cornerbl {
 position: absolute;
 left: 0%;
 bottom: 0%;
 width: 15px;
 hight: 15px;
 background-color: green;
 z-index: 101
}

</style>

<body>

<div class="roundcont">
      <div class="cornertl">_r1_c1.gif</div>
      <div class="topgif">_r1_c2.gif</div>
      <div class="cornertr">_r1_c3.gif</div>
<p>Type content here. </p>
      <div class="cornerbr">_r3_c3.gif</div>
      <div class="bottomgif">_r3_c2.gif</div>
      <div class="cornerbl">_r3_c1.gif</div>
</div>
</body>

<!-- good Luck,
Steve
-->
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:TrueBlue
ID: 11768726
Hi OutOfTheBox:

Great job :)

I changed it from classes to ids as you suggested:

Modified HTML:

<html>
<head>
<title></title>
</head>
<body>
<div id="roundcont">
     <div id="cornertl"></div>
     <div id="topgif"></div>
     <div id="cornertr"></div>
<p>Type content here. </p>
     <div id="cornerbr"></div>
     <div id="bottomgif"></div>
     <div id="cornerbl"></div>
</div>
</body>
</html>

Modified CSS:

#roundcont
{
 z-index: -10;
 display: inline;
 position: absolute;
 top: 100px;
 margin-left: 0px;
 width: 99%;
 height: 1000px;
 background-color: white;
 color: #ffffff;
}

#roundcont p
{
 margin: 30px 10px
}

#cornertl
{
 position: absolute;
 left: 0%;
 top: 0%;
 width: 15px;
 hight: 15px;
 background: url(web/images/content_r1_c1.gif);
 z-index: 101
}

#topgif
{
 background: url(web/images/content_r1_c2.gif);
 width:100%;
 hight: 15px;
 text-align: center;
 z-index: 100
}

#bottomgif
{
 position: absolute;
 bottom: 0%;
 width: 100%;
 hight: 15px;
 background: url(web/images/content_r3_c2.gif);
 text-align: center;
 z-index: 100
}

#cornertr
{
 position: absolute;
 right: 0%;
 top: 0%;
 width: 15px;
 hight: 15px;
 background: url(web/images/content_r1_c3.gif);
 z-index: 101
}

#cornerbr
{
 position: absolute;
 right: 0%;
 bottom: 0%;
 width: 15px;
 hight: 15px;
 background: url(web/images/content_r3_c3.gif);
 z-index: 101
}

#cornerbl
{
 position: absolute;
 left: 0%;
 bottom: 0%;
 width: 15px;
 hight: 15px;
 background: url(web/images/content_r3_c1.gif);
 z-index: 101
}

I uploaded a sample of the page so far:
http://www.topsecurityinc.com/test.htm

The original HTML page is located at http://www.topsecurityinc.com

Is there a way to have the height automatically resize based on the content?

Is it my monitor or is the right border a little jagged?

I need to place this code in a DWT so can I place the following tags iwhere it says content here n the html?
<!-- #BeginEditable "Main" -->&nbsp;<!-- #EndEditable -->

Any other suggestions?

Thank you in advance.
0
 
LVL 18

Assisted Solution

by:arantius
arantius earned 50 total points
ID: 11769102
I can do nothing better for you than show you this link:
http://www.alistapart.com/articles/mountaintop/

Unless it's this one:
http://www.alistapart.com/articles/customcorners/
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11769210
Hi TrueBlue,

Remove the
hieght: 500px
from #roundcont
Looks like you changed it to 1000 to make it bigger. Conceptually, it would be better to remove this attribute - doing this will allow it size to however much content you have in the div(currently just the gifs). You have a pretty complex page to convert to css here. all the content that is viewd within the div#roundcont should be inside the div#roundcont  tags. Including the other tables ( really they could/should be converted over too). That would fix the right edge too.

I can not render the whole web page after saving it... for some reason it crashes this computer. ( I'm out of town right now just using notepad & IE & the hotel computer).

I tried moving the ending  /div tag, but with just notepad, a big file,  & limited experience, I could't get it right. I'll keep playing with it though & maybe another expert will jump in here to help.

Steve
0
 
LVL 2

Assisted Solution

by:Joakim_
Joakim_ earned 50 total points
ID: 11771213
Hi, TrueBlue,

The ID-attribute assigns a unique identifier to an element. It has several roles in HTML:
 - As a style sheet selector.
 - As a target anchor for hypertext links.
 - As a means to reference a particular element from a script.
 - As the name of a declared OBJECT element.
 - For general purpose processing by user agents (e.g. for identifying fields when extracting data from HTML pages into a database, translating HTML documents into other formats, etc.).

The CLASS-attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The CLASS-attribute has also several roles in HTML:

 - As a style sheet selector (when an author wishes to assign style information to a set of elements).
 - For general purpose processing by user agents.

There should not be more IDs with the same value, they should all be unique, and more than one of the same ID is not allowed. I recommend you to change the IDs back to classes.
0
 

Author Comment

by:TrueBlue
ID: 11773154
Hi!

I fixed the corners by tweaking the pixels.

Here is a link to the updated page http://www.topsecurityinc.com/test.htm

The problem I have now is how to get rid of the right and bottom borders outside of box.

Any ideas?

Here is my current CSS:

#roundcont
{
 display: inline;
 position: absolute;
 top: 100px;
 margin-left: 0px;
 width: 99%;
 background-color: white;
 color: #ffffff;
}

#roundcont p
{
 margin: 24px 0px
}

#cornertl
{
 position: absolute;
 left: 0%;
 top: 0%;
 width: 16px;
 height: 17px;
 background: url(web/images/content_r1_c1.gif);
 z-index: 101;
}

#topgif
{
 background: url(web/images/content_r1_c2.gif);
 width: 100%;
 height: 17px;
 text-align: center;
 z-index: 100;
}

#bottomgif
{
 position: absolute;
 bottom: 0%;
 width: 100%;
 height: 25px;
 background: url(web/images/content_r3_c2.gif);
 text-align: center;
 z-index: 100;
}

#cornertr
{
 position: absolute;
 right: 0%;
 top: 0%;
 width: 19px;
 height: 17px;
 background: url(web/images/content_r1_c3.gif);
 z-index: 101;
}

#cornerbr
{
 position: absolute;
 right: 0%;
 bottom: 0%;
 width: 19px;
 height: 25px;
 background: url(web/images/content_r3_c3.gif);
 z-index: 101;
}

#cornerbl
{
 position: absolute;
 left: 0%;
 bottom: 0%;
 width: 16px;
 height: 25px;
 background: url(web/images/content_r3_c1.gif);
 z-index: 101;
}
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11778837
TrueBlue,

I lead you a little astray. Replace the divs that hold the images with img tags. this should solve the bottom & right pixel border prob. It was having a hard time applying 0% positioning to the background-image. Using the img tags removes the middle-man so to speak. I used divs originally just to get an idea of what you wanted but should have replaced them sooner.
 below is the example. Don't forget to put remarks around the style sheet's background-image property as shown. If this works, go back and delete them completely.

Your site is looking Good!! Put some content between the p tags(lots so you have to scroll a ways), I'm worried you will then have problems with the inside of the box around the right side corners. You will either have to move them to the right a few pixels or modify your gifs. But try it first.


#roundcont
{
 display: inline;
 position: absolute;
 top: 100px;
 margin-left: 0px;
 width: 99%;
 background-color: white;
 color: #ffffff;
}

#roundcont p
{
 margin: 24px 0px
}

#cornertl
{
 position: absolute;
 left: 0%;
 top: 0%;
 width: 16px;
 height: 17px;
 /*background: url(web/images/content_r1_c1.gif);*/
 z-index: 101;
}

#topgif
{
 /*background: url(web/images/content_r1_c2.gif);*/
 width: 100%;
 height: 17px;
 text-align: center;
 z-index: 100;
}

#bottomgif
{
 position: absolute;
 bottom: 0%;
 width: 100%;
 height: 25px;
 /*background: url(web/images/content_r3_c2.gif);*/
 text-align: center;
 z-index: 100;
}

#cornertr
{
 position: absolute;
 right: 0%;
 top: 0%;
 width: 19px;
 height: 17px;
 /*background: url(web/images/content_r1_c3.gif);*/
 z-index: 101;
}

#cornerbr
{
 position: absolute;
 right: 0%;
 bottom: 0%;
 width: 19px;
 height: 25px;
 /*background: url(web/images/content_r3_c3.gif);*/
 z-index: 101;
}

#cornerbl
{
 position: absolute;
 left: 0%;
 bottom: 0%;
 width: 16px;
 height: 25px;
 /*background: url(web/images/content_r3_c1.gif);*/
 z-index: 101;
}

<div id="roundcont">
     <img id="cornertl" src="web/images/content_r1_c1.gif"></img>
     <img id="topgif" src="web/images/content_r1_c2.gif"></img>
     <img id="cornertr" src="web/images/content_r1_c3.gif"></img>
<p></p>
     <img id="cornerbr" src="web/images/content_r3_c3.gif"></img>
     <img id="bottomgif" src="web/images/content_r3_c2.gif"></img>
     <img id="cornerbl" src="web/images/content_r3_c1.gif"></img>
</div>
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11778851
By the way, Thanks for the points, I'm glad I could help.
0
 

Author Comment

by:TrueBlue
ID: 11779922
Hi OutsideTheBox:

Your welcome.

I made the changes you suggested.

The bottom border disappeared :)

The only thing I noticed is it looks like the right end of the box is like one pixel too long.

If you want to see what I mean look at this page:
http://www.topsecurityinc.com/test.htm

Any ideas?

Thank you in advance.
0
 

Author Comment

by:TrueBlue
ID: 11780018
Hi OutsideTheBox:

I read you message again.

There are three images that are not being used by your suggested CSS.

web/images/content_r2_c1.gif
web/images/content_r2_c2.gif
web/images/content_r2_c3.gif

Couldn't these be used to control the size of the box in the center of right side?

Thank you again.
0
 
LVL 3

Expert Comment

by:OutsideTheBox
ID: 11783377
TruBlue

Try positioning the cornertr & cornerbr to the right slightly.

where the have: right: 0%  change to  right: -3px

you may have to try -2 or -4 or whatever makes the corner arc line up best with the right verticl edge of #roundcont.

This would be better if it fixes the corners and it doesn't add anything else.

0
 

Author Comment

by:TrueBlue
ID: 11783433
Hi OutsideTheBox:

That fixed it :)

Have a great week.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question