Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning HTML, XHTML, CSS, and JavaScript
This is the forum to discuss the Wrox book Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett; ISBN: 978-0-470-54070-1
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning HTML, XHTML, CSS, and JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old April 4th, 2010, 05:28 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default How do you create borders around text?

The title says it all. Is there any way to add a border around a few words?
  #2 (permalink)  
Old April 4th, 2010, 05:39 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

Code:
<html>
<head>
<style>
span.text-with-border {
	border-style: outset;
	border-width: 1px;
	border-color:red;
}
</style>
</head>
<body>
Hello <span class="text-with-border">world</span>!
</table>
</body>
</html>
The Following User Says Thank You to PeterPeiGuo For This Useful Post:
andypandyrox456 (April 4th, 2010)
  #3 (permalink)  
Old April 4th, 2010, 05:42 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

Another example with more flexibility demonstrated:
Code:
<html>
<head>
<style>
span.tea-cup {
	border-style: none solid solid solid;
	border-width: 1px;
	border-color:red;
}
</style>
</head>
<body>
A cup of <span class="tea-cup">tea</span>!
</table>
</body>
</html>
  #4 (permalink)  
Old April 4th, 2010, 06:08 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Thanks so much!
One more question - I have a long list. It is ordered using the alphabet, and i think it goes until H, so as you can see, it's a long list. If I want to place a border around it, would I use the span element, or the div element, or something else?
And must I use the span/div element, or can I use a different element. For example: Can I make everything in bold have a border simply by using the bold element in a CSS style sheet?
  #5 (permalink)  
Old April 4th, 2010, 06:17 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

One way is, like you said, use div. You can also use ol, ul, li, and all three are defined in HTML 4.01 specification.

Code:
<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	width: 40%
}
li {
	list-style: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>
  #6 (permalink)  
Old April 4th, 2010, 06:21 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by PeterPeiGuo View Post
One way is, like you said, use div. You can also use ol, ul, li, and all three are defined in HTML 4.01 specification.

Code:
<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	width: 40%
}
li {
	list-style: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>
I tried that, and it didn't work. But I"ll try again.
  #7 (permalink)  
Old April 4th, 2010, 06:25 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

Difference between browsers...

Last edited by PeterPeiGuo; April 4th, 2010 at 06:40 PM..
  #8 (permalink)  
Old April 4th, 2010, 06:39 PM
Friend of Wrox
 
Join Date: Dec 2008
Location: , , .
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

The following works for IE8, Firefox, Opera, Safari and Chrome:

Code:
<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	list-style: upper-alpha;
	list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>
  #9 (permalink)  
Old April 4th, 2010, 07:12 PM
Registered User
 
Join Date: Apr 2010
Location: Planet Earth
Posts: 70
Thanks: 4
Thanked 0 Times in 0 Posts
Default

Quote:
Originally Posted by PeterPeiGuo View Post
The following works for IE8, Firefox, Opera, Safari and Chrome:

Code:
<html>
<head>
<style>
ol {
	border-style: solid;
	border-width: 1px;
	border-color:red;
	list-style: upper-alpha;
	list-style-position: inside;
}
</style>
</head>
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Pear</li>
</ol>
</body>
</html>

Ok I have IE. I'll try that.


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to paste the text from a cell without its borders? bacoms Excel VBA 2 September 29th, 2009 05:34 PM
'Table' does not contain a definition for 'BorderS AccessAasif@aol.com C# 2005 1 September 13th, 2008 03:08 AM
How to: Have no borders and stuff! Apocolypse2005 Beginning VB 6 7 May 8th, 2007 11:56 AM
table borders scud-murphy Dreamweaver (all versions) 1 June 6th, 2006 12:57 PM
Borders Round Image Links Alexpizzoferro HTML Code Clinic 1 July 1st, 2003 01:34 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.