Need help with CSS, adding a border

  • CircleOfLinks
  • Graduate
  • Graduate
  • User avatar
  • Posts: 140
  • Loc: Sydney

Post 3+ Months Ago

Hey guys,

I've just purchased a template and I need to add a border to the styles.css, im not familiar with it, can someone help? I've attached the actull contects of style.css. I want the border to be in red and have rounded edges, I want the border to be the out side of the site.

Can any one help?

here is the code
Code: [ Select ]
td, table{
font-family:verdana;
font-size:9px;
vertical-align:top;
line-height:12px;
color:#7F7F7F;

}


form { margin:0px; padding:0px}
body { margin:0px; padding:0px; background-color: #FFFFFF}

a { color:#E93400; text-decoration:none}
a:hover{ text-decoration:underline}

span a { color:#E93400; text-decoration:underline}
span a:hover{ text-decoration:none}

.list ul{margin:0px; padding:0px; list-style:none; line-height:19px;}
.list ul li{ background:url(images/list_marker.gif) no-repeat left top; padding:0 0 0 10px}
.list ul li a{ color:#E93400; text-decoration:underline}
.list ul li a:hover{text-decoration:none}

.policy{ color:#7F7F7F}
.policy a{ color:#000000; text-decoration:none}
.policy a:hover{ text-decoration:underline}

span{ color:#000000}

strong a{ font-size:10px}

strong{ font-size:10px}
b{ color:#E93400}

.form input {
width:191px;
height:21px;
font-family:verdana;
font-size:9px;
color: #7F7F7F;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}

.form textarea {
width:191px;
height:102px;
font-family:verdana;
font-size:9px;
color:#7F7F7F;
overflow:hidden;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}
  1. td, table{
  2. font-family:verdana;
  3. font-size:9px;
  4. vertical-align:top;
  5. line-height:12px;
  6. color:#7F7F7F;
  7. }
  8. form { margin:0px; padding:0px}
  9. body { margin:0px; padding:0px; background-color: #FFFFFF}
  10. a { color:#E93400; text-decoration:none}
  11. a:hover{ text-decoration:underline}
  12. span a { color:#E93400; text-decoration:underline}
  13. span a:hover{ text-decoration:none}
  14. .list ul{margin:0px; padding:0px; list-style:none; line-height:19px;}
  15. .list ul li{ background:url(images/list_marker.gif) no-repeat left top; padding:0 0 0 10px}
  16. .list ul li a{ color:#E93400; text-decoration:underline}
  17. .list ul li a:hover{text-decoration:none}
  18. .policy{ color:#7F7F7F}
  19. .policy a{ color:#000000; text-decoration:none}
  20. .policy a:hover{ text-decoration:underline}
  21. span{ color:#000000}
  22. strong a{ font-size:10px}
  23. strong{ font-size:10px}
  24. b{ color:#E93400}
  25. .form input {
  26. width:191px;
  27. height:21px;
  28. font-family:verdana;
  29. font-size:9px;
  30. color: #7F7F7F;
  31. padding:2 0 0 6px;
  32. border-color:#D5D5D5;
  33. border-style:solid;
  34. border-width:1px;
  35. background-color:#F8F8F8
  36. }
  37. .form textarea {
  38. width:191px;
  39. height:102px;
  40. font-family:verdana;
  41. font-size:9px;
  42. color:#7F7F7F;
  43. overflow:hidden;
  44. padding:2 0 0 6px;
  45. border-color:#D5D5D5;
  46. border-style:solid;
  47. border-width:1px;
  48. background-color:#F8F8F8
  49. }


thanks heaps
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

here is a way to create rounded corners, or a few ways actually ...
  • champi0n
  • Graduate
  • Graduate
  • User avatar
  • Posts: 199

Post 3+ Months Ago

I think CSS3 will have a rounded corners option, but for now the way i do it is create 3 separate div containers with the top and bottom div containing a graphic with the rounded corners and the middle with the content.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Quote:
<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >


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


it only works in Mozilla Firefox and possible Opera and maybe other browsers but definitely not IE (not any version of it).

That's the CSS3 way to do it :)
  • dogbert
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Tacoma, WA

Post 3+ Months Ago

so the only easy methods to getting rounded border in css is just cutting the top and bottom half of the div off and filling pictures with the edges you want, why bother unless your div is really big why not just use a single picture as the background with all 4 corners rounded and call it a day. only down side is loading a bigger picture but it would not be a much bigger file size then if you had a bunch of small pics (untill CSS3 is more supported anyway.)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

dogbert wrote:
so the only easy methods to getting rounded border in css is just cutting the top and bottom half of the div off and filling pictures with the edges you want, why bother unless your div is really big why not just use a single picture as the background with all 4 corners rounded and call it a day. only down side is loading a bigger picture but it would not be a much bigger file size then if you had a bunch of small pics (untill CSS3 is more supported anyway.)


The other downside is that the height is fixed... if you add more content it would go be like two rounded corner boxes are filled in unless you put overflow: auto; attribute in the CSS... not a good idea.
  • champi0n
  • Graduate
  • Graduate
  • User avatar
  • Posts: 199

Post 3+ Months Ago

dogbert wrote:
so the only easy methods to getting rounded border in css is just cutting the top and bottom half of the div off and filling pictures with the edges you want, why bother unless your div is really big why not just use a single picture as the background with all 4 corners rounded and call it a day. only down side is loading a bigger picture but it would not be a much bigger file size then if you had a bunch of small pics (untill CSS3 is more supported anyway.)


Well using one picture with rounded corners sorta falls into the poor web design area.

It might not seem like a few KB are much in difference but think of it distributed to 50,000 users.... thats quite a bit of bandwidth you coulda saved... think of the starving kids in 3rd world countries that need the bandwidth your wasting :(

But the biggest thing is cutting corners and being sloppy really shows.
  • dogbert
  • Novice
  • Novice
  • User avatar
  • Posts: 28
  • Loc: Tacoma, WA

Post 3+ Months Ago

^ point taken a few kb over 50000 users is a big deal, I'm use to developing internal web sites were you know exactly how many users are gana access it so my opinion is more based on my perspective. just seems like a crapy way to get rounded edges.

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.