[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

place a box (border) around text on html page

Posted on 2008-11-07
11
Medium Priority
?
1,425 Views
Last Modified: 2012-05-05
how do I create a box around a block of text in html?

I tried this but the borders overlap between lines of text:
<font style="border: 4px solid #0000FF;">
3) H.I.P. TO THE FOLLOWING SPECIFICATION: <br />
     &nbsp;&nbsp;&nbsp; a ) PER ... <br />
    &nbsp;&nbsp;&nbsp; b ) temp is: 1300 <br />
    &nbsp;&nbsp;&nbsp; c) temp2 is 1500 <br />

</font>
0
Comment
Question by:PACCAST-DEV
  • 6
  • 4
11 Comments
 
LVL 1

Expert Comment

by:PotentisFrog
ID: 22908606
Not sure if you mean a block of text, or an "inline" span of text. Anyway, you might try this if you want the entire block.

1. Entire block:
<div style="border:1px solid black">Your stuff here</div>

or
2. Inline:  
<span style="border:1px solid black">Your stuff here</span>
0
 

Author Comment

by:PACCAST-DEV
ID: 22909212
div method extends box beyond text to the end of the page,
span method has same problem as orignal html
please see pictuer

textbox.JPG
0
 
LVL 1

Expert Comment

by:downtap
ID: 22909375
To use the div method, you can add in a fixed width to the inline style like so:
<div style="border:1px solid black; width:500px" >Your stuff here</div>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:PACCAST-DEV
ID: 22909399
I would like the box to wrap around the text, not be the same static width no matter the width of the text and either extend way past it or force it into a box the size of the div tag...
0
 
LVL 1

Expert Comment

by:PotentisFrog
ID: 22912788
It sounds like you want the <span> version then. Did you try that? It's "inline" meaning it only extends as wide as the text it surrounds.
0
 
LVL 1

Expert Comment

by:PotentisFrog
ID: 22912794
Sorry, I see that you did try the span.  
0
 
LVL 1

Accepted Solution

by:
PotentisFrog earned 2000 total points
ID: 22912842
Given that you want the border around each line, you probably have to forego doing it all in a single font tag with br.  You either need to use a table or use a separate span for each line.  There are ways to finagle it to work as you have it (font tag with BRs) -- BUT you'll find that different browsers might display it differently and you'll spend a long time getting to work in all.
 
0
 

Author Comment

by:PACCAST-DEV
ID: 22923491
Hi all,
this is an intranet app, IE will be the only browser.
I would like it to display similar to the div method (see picture) except the right border to extend only as far as the longest text, i.e. borders around the entire block of text. I am hoping to avoid the table method becase I am building the html in asp code and trying to keep it simple. My page is an aspx page that gets created dynaically, the text comes from a database, and I am adding the html formatting tags (the formatting is stored in the DB also) to it in code like below.

Private Sub FormatText(ByRef baseText As String, ByVal dr As SqlDataReader)
Dim fontText As String = "" 
Try
If dr("FormatBold") = True Then
baseText = baseText.Insert(0, "<b>")
baseText = baseText.Insert(baseText.Length, "</b>")
End If
' format the font tag
fontText = "<font color='" & dr("FormatColor") & "'"
If dr("FormatLargeFont") = True Then
fontText &= " Size='5' " 
End If
If dr("FormatBox") = True Then
fontText &= " Style = 'border: 4px solid #0000FF;'>"
Else
fontText &= ">" 
End If
baseText = baseText.Insert(0, fontText)
baseText = baseText.Insert(baseText.Length, "</font>")
If dr("FormatUnderline") = True Then
baseText = baseText.Insert(0, "<u>")
baseText = baseText.Insert(baseText.Length, "</u>")
End If
If dr("FormatItalicized") = True Then
baseText = baseText.Insert(0, "<i>")
baseText = baseText.Insert(baseText.Length, "</i>")
End If
Catch ex As Exception
End Try
End Sub
0
 

Author Comment

by:PACCAST-DEV
ID: 22977181
hello, anyone with any feedback given my last post?...
0
 

Author Comment

by:PACCAST-DEV
ID: 23069871
Appears this is not possible...
0
 

Author Comment

by:PACCAST-DEV
ID: 25408549
please close
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question