Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > HTML / XHTML
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 11-15-2011, 06:19 PM
  #1
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
Text in Circle

I can define a rectangle within DIV and insert text, with the border of the rectangle forcing a carriage return. Is there any way to do this with a circle?
Thank you.
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-15-2011, 08:38 PM
  #2
COBOLdinosaur
Lord (Level 16)
 
COBOLdinosaur's Avatar
 
Join Date: Jan 2001
Location: Canada
Posts: 734
iTrader: (0)
COBOLdinosaur is on a distinguished road
{disclaimer}
I do not endorse the use of proprietary hacks and probably does not work right in IE. It is not something I would use but here it is anyway, for those who develop as a hobby ibstead of to make a living.
{disclaimer}

#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
__________________
Cd&
one of my toys And my repository and my old self ranting
Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack
COBOLdinosaur is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-15-2011, 08:49 PM
  #3
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
Thank you. I'll check it out. And, yes, I'm a 75 year old hobbyist (although it would be nice to add to my social security income).
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-15-2011, 08:58 PM
  #4
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
Sorry to be a pest, but I AM a novice. I assumed this was to be used with javascript. How do I insert the text. And, I'm assuming the edge of the circle is going to force a carriage return. The text will be INSIDE the circle.

Last edited by BillyShope : 11-15-2011 at 08:59 PM. Reason: Added last sentence.
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-15-2011, 09:01 PM
  #5
COBOLdinosaur
Lord (Level 16)
 
COBOLdinosaur's Avatar
 
Join Date: Jan 2001
Location: Canada
Posts: 734
iTrader: (0)
COBOLdinosaur is on a distinguished road
Its a a style for a div. Just create a div like <div id="circle"> some text<div>

Or if you want a bunch of circles just make a class and give the page measles
__________________
Cd&
one of my toys And my repository and my old self ranting
Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack
COBOLdinosaur is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-16-2011, 11:01 AM
  #6
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
Appreciate your help, but how do I get the text into the circle?

<html>
<body>
<div style=
"width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;">
text
</div>
</body>
</html>
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-16-2011, 11:49 AM
  #7
COBOLdinosaur
Lord (Level 16)
 
COBOLdinosaur's Avatar
 
Join Date: Jan 2001
Location: Canada
Posts: 734
iTrader: (0)
COBOLdinosaur is on a distinguished road
You put the text inside a proper tag of its own and position it.

HTML Code:
<html>
<body>
<div style=
"width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;">
<p style="width:20px;margin:25px auto;">text and more text</p>
</div>
</body>
</html>
Now, from I've seen you need to get some basics before you proceed with web page development. Please visit w3schools and learn the basics of HTML and CSS. It will only take a couple of hours, and then you will be better equipped to proceed.
__________________
Cd&
one of my toys And my repository and my old self ranting
Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack
COBOLdinosaur is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 08:07 AM
  #8
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
I've spent many, many hours at w3schools, but I'm still learning. They've been a great help. In this case, I wasn't able to find what I needed.

And, I certainly thank you for your help.
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 08:22 AM
  #9
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
There's still no forced carriage return at the circle boundary, which would have been nice. But, I can make this work.
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 09:59 AM
  #10
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,260
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
Hi there BillyShope,

here is an example that works in modern browsers: IE9, Firefox 8, Safari 5, Opera 11 and I would guess Google Chrome also...
Code:

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

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>circle with text</title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#circle {
    width:300px;
    height:300px;
    padding-top:4px;
    border-width:1px; 
    border-style:solid;
    border-color:#666 #222 #222 #666;
    margin:30px auto 0;
    border-radius: 150px;
    box-shadow:#333 10px 10px 20px;
    background-color:#e9e9e9;
 }
#circle div {
    line-height:21px;
    margin:auto;
    font-family:verdana,arial,helvetica,sans-serif;
    color:#333;
    text-align:center;
 }
#circle div:nth-child(1){width:72px;}
#circle div:nth-child(2){width:166px;}
#circle div:nth-child(3){width:218px;}
#circle div:nth-child(4){width:250px;}
#circle div:nth-child(5){width:278px;}
#circle div:nth-child(6){width:290px;}
#circle div:nth-child(7){width:296px;}
#circle div:nth-child(8){width:296px;}
#circle div:nth-child(9){width:290px;}
#circle div:nth-child(10){width:278px;}
#circle div:nth-child(11){width:250px;}
#circle div:nth-child(12){width:218px;}
#circle div:nth-child(13){width:166px;}
#circle div:nth-child(14){width:72px;}
</style>

</head>
<body>

<div id="circle">

<div>a b c d e</div>
<div>a b c d e f g h i j k l</div>
<div>a b c d e f g h i j k l m n o </div> 
<div>a b c d e f g h i j k l m n o p q</div>
<div>a b c d e f g h i j k l m n o p q r s</div>
<div>a b c d e f g h i j k l m n o p q r s t</div> 
<div>a b c d e f g h i j k l m n o p q r s t </div>
<div>a b c d e f g h i j k l m n o p q r s t</div>
<div>a b c d e f g h i j k l m n o p q r s t</div> 
<div>a b c d e f g h i j k l m n o p q r s</div>
<div>a b c d e f g h i j k l m n o p q</div>
<div>a b c d e f g h i j k l m n o</div>
<div>a b c d e f g h i j k l</div>
<div>a b c d e</div>

</div>

</body>
</html>
The number of lines to use and the position of the text will, of course, depend open the dimensions of your chosen circle.
This, obviously, will have to be done by the "trial and error method".
__________________

Last edited by coothead : 11-17-2011 at 10:02 AM.
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 11:10 AM
  #11
COBOLdinosaur
Lord (Level 16)
 
COBOLdinosaur's Avatar
 
Join Date: Jan 2001
Location: Canada
Posts: 734
iTrader: (0)
COBOLdinosaur is on a distinguished road
Quote:
This, obviously, will have to be done by the "trial and error method".
Isn't that what webdev is? T&E plus a little pixie dust, and a cold beer at the end.
__________________
Cd&
one of my toys And my repository and my old self ranting
Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack
COBOLdinosaur is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 11:24 AM
  #12
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,260
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
Hi there COBOLdinosaur,
Quote:
Isn't that what webdev is? T&E plus a little pixie dust, and a cold beer at the end.
Well, without wanting to sound too much like a smarmy smart arse, I would normally
be able to position text within a div without any "trial and error".

But, of course, at my advanced age, I can not be sure that this sublime state will last much longer.
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 12:11 PM
  #13
COBOLdinosaur
Lord (Level 16)
 
COBOLdinosaur's Avatar
 
Join Date: Jan 2001
Location: Canada
Posts: 734
iTrader: (0)
COBOLdinosaur is on a distinguished road
Quote:
I would normally
be able to position text within a div without any "trial and error"
Yeah hacking rectangles to look like other shapes does have some drawback. Not something I'm going to adopt as a "normal" presentation mode, given all the nice background images I have that take 10 seconds to put on a page.
__________________
Cd&
one of my toys And my repository and my old self ranting
Code that is 100% standards compliant is 100% correct 100% of the time... anything else is just a hack
COBOLdinosaur is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 05:17 PM
  #14
BillyShope
Aspirant (Level 2)
 
Join Date: Nov 2005
Posts: 13
iTrader: (0)
BillyShope is an unknown quantity at this point
Thanks, coothead, but I was hoping I could avoid the trial and error. I see what you mean, COBOL, by "hacking rectangles to look like other shapes," but this technique is certainly better than nothing and the final appearance is quite acceptable.

If only the rectangle boundaries will force a carriage return, I'll just have to live with that.

Thanks, guys, for your help.

Moderator, you can consider this thread closed.
BillyShope is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 11-17-2011, 05:40 PM
  #15
coothead
~ bald headed old fart ~
 
coothead's Avatar
 
Join Date: Aug 2003
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 13,260
iTrader: (0)
coothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond reputecoothead has a reputation beyond repute
No problem, you're very welcome.
__________________
coothead is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 07:44 AM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.