/    Sign up×
Community /Pin to ProfileBookmark

rounded corners css help please/code

trying to do rounded corners with css as mentioned here (or similar if someone can advise). able to do it with new, test file (html/css) for only one area that runs entire width of page but not able to figure it out incorporating into my existing external css (using float columns) for my site. here’s my css (question follows after code–thanks for bearing with me!):

[code=html]body
{
margin: 0 5 10 5;
padding: 0;
color: #191970
font-size: 90%;
font-family: arial, helvetica, sans-serif;
background-color:#8FBC8F

}

#header
{
width: 80%;
height: 5px;
background-color: ;
margin-bottom: 5px;
margin-left: 20%;
}

#gutter
{
float: left;
width: 3%;
height: 1px;
}

#col1
{ height: 500px;
float: left;
width: 25%;
background-color: #FFFACD;
margin-bottom: 10px;
margin-left: 3%;
}

#col2
{
float: left;
width: 45%;
background-color: #FFFACD;
margin-bottom: 10px;
padding: 5px;
}

#col3
{ height: 100px;
float: right;
width: 20%;
margin-right: 2%;
padding: 1em;
background-color: #FFFACD;
margin-bottom: 5px;
}

#col4
{
float: left;
width: 43%;
background-color: #FFF0F5;
margin-bottom: 10px;
margin-left: 4%;
padding: 5px;
}

#footer

{
margin-bottom: 10px;
margin-left: 21%;
padding: .5em;
float: left;
width: 55%;
height: 65px;
background-color: ;
}

h1
{

color: #191970;
font-size: 100%
margin: 0;
padding: 0px;
text-align: left;
}

h2
{ font-size: 125%;
color: #FFF0F5;
margin-top: 0;
padding-top: 3px;
text-align: center;
}

h3
{ color: #191970;
text-align: center;
font-size: 60%;
}
h4
{ font-size: 100%;
color: #191970;
margin-top: 0;
padding-top: 3px;
text-align: center;
}
p
{ font: geogia;
font-size: 10 pt;
color: #191970;
text-align: left
}

ul.square {list-style-type: square; color: #191970; font-size: 10 pt; text-align: left; }
ul.disc {list-style-type: disc}
[/code]

also wondering, is there a difference/advantage to using #/ div id= in css/html or ./ div class=? seems the same to me, except when mixing/matching id/class and #/., get some unusual effects.

thanks for help

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelJan 19.2008 — Problems:
body

{

margin: 0 [B]5[/B] 10 [B]5[/B];

padding: 0;

color: #191970

font-size: 90%;

font-family: arial, helvetica, sans-serif;

background-color:#8FBC8F

}[/QUOTE]
Only "0" ("zero" can stand without a unit-of-measure. "5" is meaningless (although most likely a browser will assume "px", -I wouldn't count on it.

Possible values are:

"px", "em", ex", "in", "cm", "mm", "pt" and "pc"

And:p

{ font: [B]geogia[/B];

font-size: [B]10 pt;[/B]

color: #191970;

text-align: left

}

ul.square {list-style-type: square; color: #191970; font-size: [B]10 pt;[/B] text-align: left; }

ul.disc {list-style-type: disc}[/QUOTE]
White-space gap needs to be closed, as "pt" is without any meaning unless it is 'touching' the integer. ?

p.s. The font's name is spelled "georgia". ?
Copy linkTweet thisAlerts:
@paulmoauthorJan 20.2008 — yes typos/mistakes a plenty...noob...been using % with good luck...any thoughts on my question?
Copy linkTweet thisAlerts:
@smyhreJan 20.2008 — The only way I have done rounded corners is with a image file but then again I'm not as versed in css as other on this site are. As for your question about the id and class difference is that you should use an id when you know that you will never use that id again on your page as it can only be safely used once per page, class names however can be used as many times as you please on the site.
Copy linkTweet thisAlerts:
@WebJoelJan 20.2008 — Google "nifty corners" for an image-less variant of rounded corners. Here is a copy of the archived version I refer to..

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

<html>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<meta name="generator" content="HAPedit 3.1">

<style type="text/css">

body{padding: 20px; background-color:#fff; font: 100.01% Verdana, Arial, helvetica, sans-serif}

h1 {font-size:200%; color:white; margin: 0 10px}

p {padding-bottom:1em; margin:0 10px}

#nifty {margin:0 2%; background-color:black; color:white;}

b.rtop, b.rbottom {display:block; background-color:white}

b.rtop b, b.rbottom b {display:block; height:1px; overflow:hidden; background-color:black}

b.r1 {margin: 0 5px}

b.r2 {margin: 0 3px}

b.r3 {margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4 {margin:0 1px; height:2px}

</style>

</head>

<body>

<div id="nifty">

<b class="rtop"><b class="r1"><!-- --></b><b class="r2"><!-- --></b><b class="r3"><!-- --></b><b class="r4"></b>

<!-- --></b>

<h1>Image-less Rounded Corners</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

<b class="rbottom"><b class="r4"><!-- --></b><b class="r3"><!-- --></b><b class="r2"><!-- --></b><b class="r1"><!-- --></b></b>

</div>

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@smyhreJan 20.2008 — Hmmm, that is really cool. I'm definitely saving that code for reference in the future. Man you really do learn things reading other threads ?
Copy linkTweet thisAlerts:
@paulmoauthorJan 21.2008 — yes thank you for that...was trying to get my head around how to external css that...
Copy linkTweet thisAlerts:
@tmwJan 22.2008 — This is a very simplified explanation, but IDs carry more weight than classes, so if two styles conflict and one is specified with an ID and the other a class, the one with the ID will be applied.

As another poster mentioned, you can use IDs once per page, while classes can be applied to many different elements on a page.

IDs are best suited to layout elements that occur once per page, like a header, main content area, footer, etc. You can, of course, reuse these same elements/IDs on other pages throughout the site.
Copy linkTweet thisAlerts:
@WebJoelJan 24.2008 — Hmmm, that is really cool. I'm definitely saving that code for reference in the future. Man you really do learn things reading other threads ?[/quote] Tell me about it. ?

-Before I [I]([/I]sic[I]) became awesome[/I] I copied, borrowed, tweaked, altered, improved, busted and re-built many hundreds of snippettes of code and full-blown templates posted here and on other forums. It's all part of that '[I]standing on the shoulders of giants[/I]' thing.. :rolleyes:
×

Success!

Help @paulmo 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.17,
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,
)...