Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > BOOK: Beginning HTML, XHTML, CSS, and JavaScript
Password Reminder
Register
Register | FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #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?
Reply With Quote
  #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>
Reply With Quote
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>
Reply With Quote
  #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?
Reply With Quote
  #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>
Reply With Quote
  #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.
Reply With Quote
  #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..
Reply With Quote
  #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>
Reply With Quote
  #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.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 11:46 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.