SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Location
    Kansas
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with white space in preformat

    I am new to website design and am taking a course at the local community college. One of our tasks is to use pre-formatting in one section. I want to use tabs to align information and also keep word wrap functioning. My problem is with white space. Here is my basic layout:
    Topic header
    (tab) a. (info with web link)
    (tab) b. (info with web link)
    (tab) c. Just text info

    I am also trying to keep some consistency between the way my coding (in Notepad++) and the actual website will look (knowing where lines will actually wrap in the site vs. in the code.)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi CBKenn. Welcome to the forums.

    The best way to do something like this is with the ordered list element. Here is a simple example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    <style media="all">
    ol {list-style-type: lower-alpha }
    </style>
    	
    </head>
    <body>
    
    <ol>
    	<li><a href="">Info with web link</a></li>
    	<li><a href="">Info with web link</a></li>
    	<li>Just text info</li>
    </ol>
    
    </body>
    </html>
    However, you can't just cut and paste text from Notepad to do that. If you really want to do it that way (which is not really how to build a web page, but anyhow ...) you could just copy the text from Notepad, paste it into your web page, and wrap <pre> tags around it (which "preserve" the formatting):

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    	
    </head>
    <body>
    
    <pre>
    	a. (info with web link)
    	b. (info with web link)
    	c. Just text info
    </pre>
    
    </body>
    </html>
    That won't create active links, though, so you'd have to type in the <a> tags as I did in the first example.

    Hope that helps.


Bookmarks

Posting Permissions

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