A small update and using word wrap in the pre tag
Just made a few quick changes today to help enhance readability, more improvements will be forthcoming.
I did want to make note of one rather interesting problem that I ran into; in my previous post I discussed using tokens to specify where I would place text which should be displayed as a code block. To do this, I simply used the <pre> HTML tag to contain the code. After implementing the change, I noticed that the <pre> container would sometimes overflow the intended container, resulting in text hanging over the margin of the designated area. This is because by default, text within a <pre> tag will not wrap. Fortunately a simple change to the CSS style corrected this problem. All it required was adding white-space: pre-wrap;
pre {
background:#fbe2aa;
border: 1px solid #820000;
white-space: pre-wrap;
max-width: 95%;
padding: 15px;
margin: 10px auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 15px;
tab-size: 5;
}
Credit to
this article for helpng to clarify a few points regarding css styling of <pre> elements.
Next, I think I will first set this website up with some type of multi-page system and a self-generating menu.
Category: Cms