/    Sign up×
Community /Pin to ProfileBookmark

Need An Explanation – Image Linking – Curved Borders

Copy linkTweet thisAlerts:
Jul 28.2010

ok I really need a skilled response here, I have a basic understanding of CSS but this is just a little beyond my skillset.

[url]http://surrenderyourwings.com/tester/tester.html[/url]

My borders aren’t working. Top left corner isn’t showing up at all, there is a break in the borderline. I dont’ know why this is happening, or how to fix it. please help

What is the biggest stumbling block for me is that the code is pulling the images for the curved corners from a single .png file, and I don’t understand how this is being accomplished. how does the css know which image to put for top left bottom right etc? Is there anyone who could explain that to me?

Nearly all the tutorials I have found on how to do curved boxes use 4 different images, one for each corner, not a single image.

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Major_PayneJul 29.2010 — Might try putting in a proper document type. Even a test page needs to be a well-formed HTML file. Could not check CSS/HTML errors with w3c.org's validators as failed to load.

Might see if you get some ideas from these CSS Rounded Corners examples:

http://www.css3.info/preview/rounded-border/

http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

http://kalsey.com/2003/07/rounded_corners_in_css/

http://malsup.com/jquery/corner/

http://www.html.it/articoli/nifty/index.html
Copy linkTweet thisAlerts:
@Mr__BagginsJul 29.2010 — Lieutenant,

One major problem with your code is the use of tables. Tables are, well, outdated; everything that can be done with tables can be done with css and almost always with a lot less code.

I would also suggest using the layout suggested by www.wigflip.com/cornershop. I used this layout in www.thesiteguru.com. Though the Cornershop site also will create corner graphics for you, you merely need to click "Create Graphics" and you will see some streamlined code for implementing round corners (with 4 graphics).
Copy linkTweet thisAlerts:
@LieutenantFrostauthorAug 02.2010 — Many thanks for the links and responses above. I will look into them now. leaving aside the tables issue. Could anyone explain how the CSS knows which corners are which when its pulling them all from the same image file?

if you use 4 separate images I can understand how you name them br bl tr tl, and reference them accordingly, but if they are all in the same png file, as they are in my link, how does it know which ones goes where?
×

Success!

Help @LieutenantFrost 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.18,
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,
)...