/    Sign up×
Community /Pin to ProfileBookmark

How to opimze this code?

Copy linkTweet thisAlerts:
Apr 26.2005

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:

[code=php]
.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;}
[/code]

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!

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWApr 26.2005 — 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.
Copy linkTweet thisAlerts:
@weeeauthorApr 26.2005 — 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...
Copy linkTweet thisAlerts:
@DaveSWApr 26.2005 — 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

[upl-file uuid=55466b8d-1425-4864-aa24-cb5584209d2b size=2kB]autocrat.zip[/upl-file]
Copy linkTweet thisAlerts:
@weeeauthorApr 26.2005 — 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.

[code=html]
<!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">
<!--
#tl {width: 260px; background: #e6e5f5 url(tl.jpg) 0 0 no-repeat;}
#tr {background: url(tr.jpg) 100% 0 no-repeat; height: 11px;}
#br {width: 260px; background: #e6e5f5 url(br.jpg) 100% 100% no-repeat;}
#bl {background: url(bl.jpg) 0 100% no-repeat; height: 11px;}
#content {width: 238px; background-color: #e6e5f5; padding: 0px 11px 0px 11px; font: 11px Verdana; line-height:1.6em; margin: 0;}
.image {float: left; margin: 4px 10px 0 0; padding: 4px; border: 1px solid #999; background: #fff;`}
-->
</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>
[/code]

Thanks again DaveSW!
Copy linkTweet thisAlerts:
@rsdApr 27.2005 — 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[/QUOTE]

This code breaks in a standards compliant browser (ie: Firefox, Netscape, etc.)
Copy linkTweet thisAlerts:
@weeeauthorApr 27.2005 — What do you mean by that?
Copy linkTweet thisAlerts:
@rsdApr 27.2005 — What do you mean by that?[/QUOTE]

Try it. Nothing lines up properly.
Copy linkTweet thisAlerts:
@weeeauthorApr 27.2005 — r u sure?

It works fine here...
Copy linkTweet thisAlerts:
@DaveSWApr 27.2005 — 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.
Copy linkTweet thisAlerts:
@weeeauthorApr 27.2005 — thanks
Copy linkTweet thisAlerts:
@DaveSWApr 28.2005 — Hi Weee

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

Dave

[upl-file uuid=d89f186a-15f1-4bba-82b3-dcf6b3ebc9b5 size=2kB]autocratone.zip[/upl-file]
×

Success!

Help @weee spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...