Solved

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

Posted on 2004-08-10
14
964 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
14 Comments
 
LVL 3

Expert Comment

by:OutsideTheBox
Comment Utility
TruBlue,
Try to rename this:
img.corner {

To this:
.corner {

Steve

0
 
LVL 3

Expert Comment

by:OutsideTheBox
Comment Utility
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
Comment Utility
<!--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
 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
Comment Utility
By the way, Thanks for the points, I'm glad I could help.
0
 

Author Comment

by:TrueBlue
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hi OutsideTheBox:

That fixed it :)

Have a great week.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

763 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now