How to opimze this code? [Archive]

Click to See Complete Forum and Search --> : How to opimze this code?

weee

04-26-2005, 06:43 AM

I have a code that I'm using to create boxes that has round corners. The code is long and I'm sure there's a better way to make a box that will adjust by the amount of text and still, have 4 different coreners.

So this is the code:

.locationaBarTopCornersHolder {width: 400px; height: 11px; background: #E6E5F5;}
.locationaBarCornerTL {background: #E6E5F5 url('CornerTL.jpg') no-repeat; width: 11px; height: 11px; float: left;}
.locationaBarCornerTR {background: #E6E5F5 url('CornerTR.jpg') no-repeat; width: 11px; height: 11px; float: right;}
.locationaBarBody {width: 378px; padding: 0px 11px 0px 11px; background: #E6E5F5; font: 1.1em Verdana, Arial, Helvetica, sans-serif; line-height:1.6em; margin: 0px;}
.locationaBarBottomCornersHolder {width: 400px; height: 11px; background: #E6E5F5;}
.locationaBarCornerBL {background: #E6E5F5 url('CornerBL.jpg') no-repeat; width: 11px; height: 11px; float: left;}
.locationaBarCornerBR {background: #E6E5F5 url('CornerBR.jpg') no-repeat; width: 11px; height: 11px; float: right;}

Please let me know if there's any way I can make it shorter and still make it work on IE and FF OR maybe there's a better way to do what I'm trying to do here.

Thanks!

DaveSW

04-26-2005, 07:57 AM

try using backgrounds rather than floats - assuming you don't want a border.
If you have a fixed width you can make the whole horizontal stripe in one go.

Just for the backgrounds use white to hide the background color.

weee

04-26-2005, 01:07 PM

Can I use two images as background for the top corners for example?
I'm not sure how to do that. I don't have a fixed width...

I'm not sure how to handle this...

DaveSW

04-26-2005, 03:08 PM

Hi Weee
I've attached a zip with a crude example of what I mean, built for someone else.
For fixed width you could take a peek at my site ;)
Dave

weee

04-26-2005, 05:27 PM

Thanks man. It's working great. I love that code.
There's one thing I would like to ask you. As you can see I made a few adjustments so it'll work for my needs but there's something I'd like to fix.

I would like to have the text and the image to be always next to the top (of the "content" div). For some reason, there's an extra space there (from the top) and I don't know how to remove it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Page title</title>
<style type="text/css">

</style>

</head>
<body>
<div id="tl"><div id="tr"></div></div>
<div id="content">
<img src="image.jpg" width="100" height="54" alt="">
All content in this section All content in this section All content in this section All content in this section
All content in this section All content in this section All content in this section All content in this section
All content in this section All content in this section All content in this section All content in this section
</div>
<div id="br"><div id="bl"></div></div>
</body>
</html>

Thanks again DaveSW!

rsd

04-27-2005, 04:01 PM

Hi Weee
I've attached a zip with a crude example of what I mean, built for someone else.
For fixed width you could take a peek at my site ;)
Dave

This code breaks in a standards compliant browser (ie: Firefox, Netscape, etc.)

weee

04-27-2005, 04:02 PM

What do you mean by that?

rsd

04-27-2005, 04:20 PM

What do you mean by that?

Try it. Nothing lines up properly.

weee

04-27-2005, 05:11 PM

r u sure?
It works fine here...

DaveSW

04-27-2005, 05:31 PM

works fine here (or it did)
I'll alter the original example tomorrow to get it to the top of the thing - basically it will be ll four nested divs in one block.

weee

04-27-2005, 05:33 PM

thanks

DaveSW

04-28-2005, 01:21 PM

Hi Weee
Here's the latest sample of delightful code for your delectation... well, a simple rounded corners page anyway!!
Dave