oh hai.

Standard HTML elements for styling with CSS

Posted: March 2nd, 2009 | Author: Nick | Filed under: web | Tags: , , | No Comments »

I use the following code to demonstrate what the content of a web site is going to look like.  This goes over the typical HTML elements within a page, you might need to add more for your specific site but this should get you started.  This code can also be used as a demo to a designer on what styles you need made within the design file before it starts development.

<h1>The H1 tag looks like this</h1>
<p>The paragraph after an H1 looks like this</p>
 
<h2>The H2 tag looks like this</h2>
<p>The paragraph after an H2 looks like this</p>
 
<h3>The H3 tag looks like this</h3>
<p>The paragraph after an H3 looks like this</p>
 
<h4>The H4 tag looks like this</h4>
<p>The paragraph after an H4 looks like this</p>
 
<h5>The H5 tag looks like this</h5>
<p>The paragraph after an H5 looks like this</p>
 
<ol>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ol>
 
<ul>
<li>This is a normal list element in an ordered list</li>
<li><strong>This is a strong element in an ordered list</strong></li>
<li><em>This is an italic element in an ordered list</em></li>
</ul>
 
<blockquote>A blockquote looks like this. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. 
</blockquote>
 
<code>
A code looks like this. Nullam nec dolor. In, A code looks like this. Nullam nec dolor. In
</code>
 
<span>
This is what a span tag looks like
</span>
 
<a href="">A basic link </a>
 
<p>
A long paragraph. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. <a href="">A link in the middle of a paragraph</a> Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>
 
<p>
Another long paragraph stacked below the one above. Nullam nec dolor. Integer mauris metus, dictum ut, consequat vitae, bibendum vitae, arcu. Maecenas ut enim vel nunc laoreet tempus? Nulla porta ultrices nunc. Maecenas eleifend, diam eget interdum placerat, eros purus accumsan neque, a vestibulum leo enim sed quam. Maecenas mi libero, molestie in, sollicitudin sed, dapibus non, felis. Sed interdum blandit nulla. In nisi! Pellentesque lacus tortor, tempus vel; adipiscing et, egestas sed, enim. Pellentesque aliquam, lectus id varius dictum, turpis dolor vehicula justo, ut faucibus dolor tortor non metus. Nam tincidunt magna non justo! Praesent nisl ipsum, vestibulum id, viverra cursus, viverra non, neque! Nullam nunc. Quisque vel nibh. Nullam vitae ante vitae diam aliquam volutpat. Nullam bibendum tellus vitae dui. Suspendisse vehicula vestibulum ligula. Nullam eget nisl.
</p>

Stylized CSS textbox

Posted: October 14th, 2008 | Author: Nick | Filed under: css | Tags: , , | No Comments »

I recently had to style textboxes on a site and didn’t want to use anything that involved a hack or workaround.  What I ended up with is a pretty simple solution, you just have to wrap every textbox in the background image you would like. This could technically work for all of your other form elements as well, the process would be very similar.

First you need to apply a CSS global clear.  If you aren’t already using something like this then you are causing yourself way to many headaches with trying to get your site to work in all browsers.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: arial;
    vertical-align: baseline;
    background: transparent;
}
:focus {
    outline: 0;
}

Then add the style that displays the background image for the textbox

.background{background: url(/images/layout/text-field.jpg) no-repeat;}

Then add the class for textboxes.

.text{
	margin:0px 0px 0px 8px;
	width: 145px;
	height: 17px;
border: none;
	background:transparent;
	color: #666;
}

adjust your styles as needed.

Then to get your textbox to appear it needs to be like this…

<div class="background">
<input id="name" class="text" name="name" type="text" /></div>

which should output this… (might need to adjust the margin for the input box)