Problem with white space in preformat

Get Started
1

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

Hi CBKenn. Welcome to the forums. :slight_smile:

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

<!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):


<!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. :slight_smile: