Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    188
    Thanks
    41
    Thanked 0 Times in 0 Posts

    Drawing a box around text?

    Hello

    I am trying to use these attributes to draw a box around text to achieve this effect (screenshot attached):

    Code:
    CSS:
    
     .solidBlue
    {
    border-style:solid; 
    border-color:#E2EFF8;
    border-width:thin;
    margin:15px; 
    width:150px; 
    padding:10px;
    }
    
    HTML:
    
    <div class="solidBlue">
     
    </div>
    What I am unsure about is where to place the <div> tags in my HTML. At the moment I have this in my <body> tags:

    Code:
     SaveFiles = "<h4 class=""head"">Files uploaded:</h4> " for each fileKey in Upload.UploadedFiles.keys
                SaveFiles = SaveFiles & "<p class=""head1"">" & Upload.UploadedFiles(fileKey).FileName & " (" & Upload.UploadedFiles(fileKey).Length & " B)</p>"
                next
                else
               SaveFiles = "<p class = ""head1"">No file selected</br> or invalid file.</p>"
    The h4 class 'head' and the p class 'head1' in the script above refer to these CSS attributes:

    Code:
    h4.head
    {
    text-align:center;
    font-family:'Droid Sans',arial,sans-serif;
    color:#E2EFF8;
    } 
    
    p.head1
    {color:#ffffff;
    font-family:'Droid Sans',arial,sans-serif;
    text-align:center;
    
    font-size:90%;
    }
    Thanks for any advice.

    Blue1
    Attached Thumbnails Attached Thumbnails Drawing a box around text?-filesuploaded.jpg  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Is that Visual Basic?
    I would say:
    Code:
    SaveFiles = "<div class="solidBlue"><h4 class=""head"">Files uploaded:</h4> " for each fileKey in Upload.UploadedFiles.keys
                SaveFiles = SaveFiles & "<p class=""head1"">" & Upload.UploadedFiles(fileKey).FileName & " (" & Upload.UploadedFiles(fileKey).Length & " B)</p>"
                next
                else
               SaveFiles = "<div class="solidBlue"><p class = ""head1"">No file selected</br> or invalid file.</p>"
    SaveFiles = SaveFiles & "</div>"
    But since I don’t know that programming language very well I’m not 100% sure if that last line is right. This thread belongs into the server-side section since it’s not actually a question about formatting HTML but rather where to place HTML in the programming language.
    Last edited by VIPStephan; 05-01-2014 at 02:45 PM.

  • Users who have thanked VIPStephan for this post:

    Blue1 (05-01-2014)

  • #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    188
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Hello VIPStephan

    Thanks for getting back to me.

    It's ASP. This more or less works with the two lots (just to make life easy!) of inverted commas:

    Code:
     SaveFiles = "<div class=""solidBlue""><h4 class=""head"">Files uploaded:</h4> "
            for each fileKey in Upload.UploadedFiles.keys
               
            SaveFiles = SaveFiles & "<p class=""head1"">" & Upload.UploadedFiles(fileKey).FileName & " (" & Upload.UploadedFiles(fileKey).Length & " B)</p>"
    
            next
        else
            SaveFiles = "<div class=""solidBlue""><p class = ""head1"">No file selected</br> or invalid file.</p>"
    
        end if
    
    SaveFiles = SaveFiles & "</div>"
    
    end function
    %
    and this in my <style> tags:

    Code:
    .solidBlue
    {
    border-style:solid; 
    border-color:#E2EFF8;
    border-width:thin;
    margin:auto; 
    width:150px; 
    padding:10px;
    }
    I have attached a screenshot to show it in action.

    Drawing a box around text?-vip.jpg

    The problem I have now is how to push the box down (away from the 'Update' button) and how to pull the 'Files uploaded:' text closer to the top border, when I have already set some values in the <style> attributes.

    Thanks for your time.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    It’s impossible to say just from looking at an image; I don’t even know if my suggestion produced valid HTML. Paste the output source code (i. e. the generated HTML) here please.

  • #5
    Regular Coder
    Join Date
    Feb 2014
    Posts
    188
    Thanks
    41
    Thanked 0 Times in 0 Posts
    I think it's done now. If you go here: Upload your file and upload a simple text file, you can see the output. It should look quite neat. I am not sure, though, if the box will expand to accommodate a long file name.

    The code for the 'box', largely thanks to you, looks like this:

    CSS:

    Code:
    .solidBlue
    {
    border-style:solid; 
    border-color:#E2EFF8;
    border-width:thin;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px; 
    width:150px; 
    padding:10px;
    }
    
    ASP/HTML:
    
     SaveFiles = "<div class=""solidBlue""><h4 class=""head"">Files uploaded:</h4> " for each fileKey in Upload.UploadedFiles.keys
     SaveFiles = SaveFiles & "<p class=""head1"">" & Upload.UploadedFiles(fileKey).FileName & " (" & Upload.UploadedFiles(fileKey).Length & " B)</p>"
    
     next
     else
            
    SaveFiles = "<div class=""solidBlue""><p class = ""head1"">No file selected</br> or invalid file.</p>"
    
    end if
    
    SaveFiles = SaveFiles & "</div>"
    I think with ASP, the quotation marks that surround the CSS class, are doubled up as in: "<div class=""solidBlue""></div>

    Blue

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Quote Originally Posted by Blue1 View Post
    I think with ASP, the quotation marks that surround the CSS class, are doubled up as in: "<div class=""solidBlue""></div>
    Ah yeah, sorry, I missed that.
    Now, if you want to decrease the space between the heading and the top edge of the box then decrease or remove the top margin of the h4. For long text strings that are supposed to break anywhere you can use CSS’s word-/overflow-wrap.

  • #7
    Regular Coder
    Join Date
    Feb 2014
    Posts
    188
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Many thanks for the link - I think I had better use that word-wrap value.

    Regarding the heading and the top edge of the box, it -probably only needs to move slightly. I have:

    Code:
    SaveFiles = "<div class=""solidBlue""><h4 class=""head"">Files uploaded:</h4> " for each fileKey in Upload.UploadedFiles.keys
    and that h4 'head' class looks like this:

    Code:
    h4.head
    {
    text-align:center;
    font-family:'Droid Sans',arial,sans-serif;
    color:#E2EFF8;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    }
    There is no 'head' margin.

    Blue

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,793
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    I said “top margin”, i. e. margin-top: ??px

  • #9
    Regular Coder
    Join Date
    Feb 2014
    Posts
    188
    Thanks
    41
    Thanked 0 Times in 0 Posts
    Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •