How do I make Super or Subscript letters and numbers using HTML?
Posted by jerothe in 
Like those neat little footnotes you can add when doing word processing so you can properly annotate all of your sources? Of course not. But do you want to know how to achieve it anyway using HTML? Sure you do.
This was something I assumed, wrongly, that was done with CSS. But there are actually HTML tags to achieve subscript and superscript footnote type annotations. These are the two tags;
<sub></sub>
<sup></sup>
Surround the number, or whatever else you may be using these tags for, with this markup and you have your effect. You can redefine the selector in CSS, but I didn’t have much luck. I added a font-weight:bold to the selector, but when trying to adjust the font size, when set to font-size:10px I couldn’t see the number as good as when I didn’t set a font size.
Now, when I was reading about these two tags, I read that sometimes they can cause some problems with line height and making your line spacing look larger between lines in places where there is subscript or superscript. You can easily adjust that by added a little line height for your paragraph<p> for a certain section or a specific class, something like this;
p.lineChange{
line-height:20px;
}
or
.lineChange{
line-height:20px;
}
How do I turn the visibility off on a layer (div block)?
When I was working with layers in Dreamweaver before I built this site I was familiar with the visibility property for a layer. But not until recently did I learn that the best way to make a layer invisible is actually to change the declaration on a display property.
When working with visibility, which is written like this;
div.test{
visibility:hidden;
}
will actually hide the content in the layer, but it will not remove it. The dimensions will still affect the other layers. So, if you have a layer that is 200 pixels high that you want to show only after some user interaction and you use the visibility property, the content in that 200 pixel high area won’t show up, but the container will, so there will be a huge blank space on your page.
The better way to accomplish this, if you are using some Javascript for some DHTML is to use display:hidden. When you set display:block, this layer when then show up and push everything down below it.
So instead the above copy would be written like this to hide the layer;
div.test{
display:hidden;
}
And then to show it again;
div.test{
display:block;
}
This can create some great menus using only CSS which I will get into at a later tutorial.
Are height properties depreciated in XHTML 1.0?
According to the W3schools.org website, not only the height but the width properties are depreciated in XHTML 1.0. I am not sure why width is depreciated, but I have found that height is practically a useless measurement when it comes to CSS layout.
The content will drive the height of the containers and the correct use of paddings and margins will help cure any need for the use of a set height.
I found that it will cause problems when height is used in a CSS block container this weekend actually. My sidebar with the links and such was getting truncated after I switched my homepage into the archives. Turns out, my new blog entry wasn’t as long as the previous month of September, so I hadn’t noticed that the site was getting truncated in Mozilla browsers. This was because I had a height of 400 pixels set for my sidebar.
After taking out an absolute height, the content container resized the content and allowed the “clear” block element to extend the background down the height of the page, fixing the truncation problem.
How can I turn off scrolling if I know that I don't need it on a webpage?
I have encountered this before here at work. A freelance programmer was working a site that had frames and was database drive. Some of the pages he was working on would fit fine in the screen, but he still had a scrollbar for whatever reason.
If you know a specific page that you don’t want scrolling on, try this;
Add to your style sheet for a global change on every page:
<style type=”text/css”>
<!–
body {overflow:hidden;}
–>
</style>
Or as in inline style:
<body style=”overflow: hidden;”>
By default IE puts a vertical scrollbar on every page even when it doesn’t need it. That doesn’t explain anything in regards to scrolling bugs and frames per say, but it is a fix.
What does the "label" tag do and why should I use it?
That is what I was asking when the new version of Dreamweaver came out and I started using it this spring. When ever I was inserting a form field of any sort, DW was inserting a
If you have a checkbox or a radio button or some small form element like that, it may be hard for some users to click in that specific spot to fill out a form. So by using a
This should work for most form fields, try it out and see what happens. For text field your cursor will change from a pointer to a typing tool to indicate to the user what should be done in that box.
Design your own CSS website Part 1: The Wrapper
When I first started disecting CSS websites, which is sometimes the best way to learn, I found that each site has a “wrapper”. This not really a jargon term, but I found it showing up time and time again in designers CSS style sheets as the first layer entry. When I started to read tutorials and explanations on the internet I found out that the “wrapper” contains all of your content. See my entry below for more information.
So knowing now what the most basic building block was, I started as I usually do, in Macromedia Fireworks.
By laying out my sites, meaning, designing the front page of the site down to the pixel, I then have the roadmap for everything I am going to need when building my site. I have exact dimensions, I have color codes to pull from, and I have already created the images so all I need to do is crop them into their own seperate files, export them, and start making my site.
One of my goals with this site was to have a cool looking background. Originally I had this gradient in Purple and Blue, but for some reason, it seemed too overpowering to me and not what I had originally pictured my blog to look like.
I have always been a strong advocate of detail. Detail is what will set you apart from the crop. When I started to design my background I made the image that you see repeated at about 400 x 400 pixels and shrunk it down. In fact, here is the base pattern;
I tried to draw on other websites, logos I had found, and even a little Art Noveau to come up with my idea. Now, you may saw, why design it so huge when it will be so small and most of that detail will be lost. I say because it is that consideration of the detail that most users won’t pick up, but at the same time they won’t pause and go, “Gosh, that looks kind of funny.” Remember, everything looks that much better reduced when it was created a million times larger.
I then created a orange to red gradient, repeated the symbol pattern at a set height, {in this case the background image is 40px wide by 1350px high} and set my blending mode on the background pattern to multiply. Check out this link to see the background alone. Finally, in the Body selector I set up the background image and the repeat declaration;
Body {
background-image:url(http://www.rotheblog.com/images/background5.jpg);
background-repeat:repeat-x;
margin:0px;
padding:0px;
background-color:#960E0E;
}
Remember for the background-repeat declaration, repeat-x will repeat horizontally. I also set the margin and the padding to 0 in the Body so that my website butted right up against the sides of the browser. Finally, I set the background color to the same as the bottom of the image so that the pattern faded into a solid color. I didn’t want to have to plan for how tall my pages could get with however many entries, so I limited the height of my background pattern and had it fade out.
With my site designed in Fireworks, I can now make the declaration for my “wrapper” div block because I have the defined width of the site.
I know that most of this doesn’t apply to CSS, but this is the basis for my site. Tune in for Part 2 of my series when I get into how I made the second step of the website, the header and maybe even in part 2, the navigation.
Shortcomings of using Images in place of HTML buttons.
I was working on EVS Minder, the one stop shop for advanced online (pre) registration and on-site registration for conventions, at Esystems today. The online interface is very form intensive, and has a lot of submit buttons. My original designs had called for image replacement of the standard HTML button.
In order to use an image for a submit button, set this attribute in the input field;
<input type=”image” src=”something.jpg”>
However, the problem with using images for submit buttons is we found when a user submits information, the values returned were two numbers instead of the value set in the “value” attribute. The two numbers returned are coordinates, the value name plus an x and y coordinate. These numbers signify the place where the user clicked the button in relation to the upper left of the button.
So for Chris our programmer, it was screwing up his php code because he was testing for a value of “submit” and instead it was giving him something like this;
submit_y = 4
submit_x = 12
The other downfalls are that the buttons can be problematic in browsers. For browsers like Mozilla and Opera where a user can set whether they want to turn off all image downloading, the form will be useless as the image button wont’ show up at all. Since HTML 4.0 you can add an alt tag to the input field, so at the very least, if you insist on aesthetic over function, it will show the text in place of the image and the user can get an inclination of what was supposed to be there.
All in all, I decided to use a background image for all my submit buttons to spruce them up a little, but to keep them most accessible across the board.
Small HTML Tidbits
I came across some HTML I had never seen today. <big> and <small>which basically scale the text size in your webpage. It seems highly useless as it isn’t very specific.
<> These characters are known as chevrons.
Document Type Declaration doesn't work when I use an echo statement in PHP.
This is actually mostly a PHP thing, but since I don’t have a section for PHP and it uses HTML tags.
The problem is that you cannot have anything print out to screen before the Document Type Declaration (DTD) at the top of your HTML document. It can cause funny things to happen. If you are using it just for testing purposes, don’t worry about the errors continuing when you post your site pages live.
The particular problem we were having was with a center aligned using CSS content section. By the DTD not being declared first, the CSS was not reading correctly and hence did not look right.
Which should I use, relative or absolute positioning?
My biggest problem from when I first used layers back in the year I graduated in 2002, Dreamweaver would define the layers markup in the HTML page, all with absolute positioning. The problem with this was, as we all know, that each browser would read that differently, and it wouldn’t allow for any sort of a liquid layout with objects sizing to different browser windows.
As I have been building my CSS webpage, I have found that relative positioning in extremely useful, and here’s how.
If you haven’t figured out yet, the base of most CSS sites is what is usually termed a “wrapper”. Basically, this is a layer that contains every single piece of your content and subsequent layers.
Here is an example of code for a “wrapper”. (I am using an ID since it won’t be repeated more than once on a page;
div#wrapper{
margin:0 auto;
width:720px;
height:500px;
}
This is just an example, and you would probably use a combination of styles in the Body selector and more in the wrapper ID to set up the base for your site. Note:Take a look at the shorthand for the margin declaration. It is set to 0 and auto. The first measurement is for the margin of top and bottom, the second is for the left and right margin.
I don’t fully understand how “auto” works, but basically in this instance, it will center your wrapper in the middle of your browser window no matter what size.
Getting back to the original point, now you can set in each of your following containing block elements, or layers, the position:relative and set the margin in relationship to the position of the “wrapper”.
For example;
div#header{
margin-left:20px;
position:relative;
width:680px;
}
Another note, just like tables will render top to bottom in the manner that they are stacked in the code, so will layers. Each layer will render on top of each other in relation to how they are written in the code. (Unless you have a z-index set, but that is a whole other entry.)
This snippet of code will set a contain that is positioned in relation to the wrapper, 20 pixels from the left, in the very top because you don’t specify margin-top, and will be centered actually if you take a look at the wrapper width and this “header” container width.
This is really useful to get pixel perfect alignment, and along with using the float property can be very powerful.
How do I use the Float property?
“Float” is a property that I was not familiar with until I started working with CSS extensively. It is most commonly used as the equivalent of word or text wraps in the print world. Try this as an example;
IMG#example{
float:left;
}
This will set an ID for the IMG selector with a name of example. Then, open Dreamweaver, make a webpage with a table and a table cell and paste some copy into the cell. Then, insert an image and give the IMG tag the id name and the text should wrap around the image.
img src=”example.jpg” id=”example”…
To stylize the image further, so the text isn’t pressed right up against the sides, add a little padding to that style, shorthand for every side, and the image will move away from the text.
IMG#example{
float:left;
padding:10px;
}
While Float is the main building block for the three column CSS layout, it can also be used with two tables.
Make a new .html webpage and have two tables stacked on top of one another. Then, like we set for the IMG, set an ID using the Table selector specific to each table.
Table#left{
float:left;
}
Table#right{
float:right;
}
Apply the ID’s and watch what happens. There are some interesting applications where this can be used.
Setting the Table Selector Padding and Margin to 0 will left justify a webpage.
I was having some weird problems in Mozilla with my webpage, which was set to align=”center”, actually aligning to the left. Earlier on, I had set my “Table” selector margin and padding to 0px because I was getting weird spaces between tables when I was stacking them inside of a table cell.
But, after I removed that declaration of the table selector from my stylesheet, the webpage aligned to center again. I don’t really have more of an explanation, instead chalk that up to a browser quirk.
How do I make my website code XHTML and CSS compliant?
As I have been looking at CSS based websites, I have noticed that the cool thing to do, is at the bottom of the site list the words XHTML and CSS. Upon closer inspection, I found these were links to site validators, and as I clicked them, they validated just fine. I figured, cool, one more way to show my expertise on the subject. (Forgetting that I was still learning.)
I decided to put the links at the bottom of my site. As it has grown exponentially in the last couple of weeks, I haven’t even bothered to click on those links. But during testing the other day, I did. I remembered reading about XHTML specs a year or so ago, and didn’t see that much difference from HTML 4.01. However, when I clicked the links for validation, I was in for a surprise.
Basically, here is what I learned as I had to go back and fix a million errors. Thank God for the find and replace in Dreamweaver, otherwise I wouldn’t be typing this entry from the light at the other side of the tunnel.
As a little sidebar, the X in HTML is taken from XML. In XML you cannot have an open tag, all tags must be closed in order for the file to work.
First:
Make sure that any HTML tags that don’t have a closing set, now have a closing tag.
E.G. Your Link, Meta, IMG, and BR tags
This is how you should correctly write one of these tags, using the IMG selector as our example. “src=”something.jpg” alt=”One cool Image” />”
Which brings us to the next point, all images must have alt tags filled in. This is to make your site accessible to more devices that have access to the internet mostly.
All of your HTML tags must be lowercase. Gone are the days of tags that look like this.
TABLE CELLSPACING=”0″>
In order to be XHTML compliant, this same line of code will look like this;
table cellspacing=”0″>
Make sure you define your measurements in your stylesheets. This is not as common, but you can no longer write;
.style{
margin-left:0;
}
The correct way to write this is;
.style{
margin-left:0px;
}
Finally, this was one I didn’t know, as opposed to the other ones I kind of remembered reading about, but just was lazy about implementing.
When writing your semantic style sheet, use ID’s sparingly. ID’s are meant for one instance only, per one webpage. Also, when defined ID’s will always take precedence over a selector specific class. But let me back up.
This is an example ID, notice the pound sign. This style will be applied only to tables with an ID of “hotWheels”.
table#hotWheels{
font-weight:bold;
}
Now if you try to use that same table with the ID “hotWheels” and set a class where the font-weight is not bold you will run into a problem. The ID takes precedence, and sets the font weight for the whole table to bold. You would have to set another ID for one particular section of text to set the font-weight back to normal.
A better way to have written this was a Selector specific class like such;
table.hotWheels{
font-weight:bold;
}
Now you can set all sorts of classes in the table with font-weight’s and not have to worry about them being bold.
Columned layouts is a shortfall of CSS websites.
As I promised for objective view on CSS layout, I have found that doing a columned layout that involves three or more columns, is extremely difficult to pull off using CSS. I have found on most CSS sites, they just use a table, because tables were designed to contain tabular data, just the purpose for columns.
In order to archive a four column layout using CSS, you would need to have two container div blocks, one floated to the right and to the left. Then, inside one of the blocks, you would need two more blocks, again floated to the right and left. This is three columns. Finally, add two more blocks inside one of the blocks you just floated, and float one of those to each direction, left and right.
Extremely, difficult, and I have not actually tried it. But I think it would be difficult to manage, and it may be better to just use a table, hoping that the CSS3 spec will correct some of those problems in the coming years.