Jared Heinrichs » CSS

CSS Relative image URL

Jared Heinrichs — Tue, 31 Jan 2012 20:27:37 +0000

When using relative URLS, CSS images are always relative to the CSS FILE and NOT the Page URL!

Take this bit of CSS:

Make sure that you create a folder in the folder where the CSS file is located. Call it images.
Create a new file inside of images and called it: “header-background.jpg”

If you make the CSS relative to the page you will be in a world of hurt!

A running collection of fonts I like on Websites

Jared Heinrichs — Wed, 27 Apr 2011 18:02:19 +0000

Headings

Page Example:

Code Example:

copy and paste:

font-family: "Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;

z-index background issues

Jared Heinrichs — Mon, 13 Dec 2010 17:45:21 +0000

This post will cover how I worked around some z-index background issues I was having. In a recent project I was working on I wanted to use a “div” underneath a bunch of list items/anchor tags. I wanted to see the “div” above the rest of the items but below List items. While it’s pretty trivial doing it if NON of the items in the DOM tree have a background applied to them, I needed to use a background color.

*NOTE* – Before I go any further you might be asking why I didn’t just us a background color using CSS for each item. I couldn’t use the easy way because I eventually I wanted to slide the “highlight” from the left to where ever the person was holding their mouse.

Here’s an example of what I wanted to make:

Unfortunately I kept getting something like this:

Let’s look at the code to see how this issue can be resolved quite simply.

XHTML

CSS (That didn’t work)

CSS (That did work. I’ve highlighted the line that fixed the issue)

So basically I always thought the z-index on HTML elements was “0”/Or not set. This doesn’t seem to be the case. It looks like they are always set to 1. Another really important thing to include is the “position: relative”. If you were to excluded that from the code it wouldn’t work either.

How to give an anchor tag a width and height

Jared Heinrichs — Sat, 02 Oct 2010 14:09:24 +0000

I’ve seen this happen a few times by junior web designers. They create a bunch of anchor tags and using CSS they give it a background color, width and height. Then they go refresh their web browser and voila. Only the background color shows.

The width and height doesn’t seem to take. What they were wanting to get is to look something like this:

Here’s an example with code of what I am talking about:

HTML Code

CSS Code

Result

So why does this happen? This happens because anchor tags are not block level HTML elements but rather inline elements. So what is the difference between the two? Here is the definition of the two items:

Inline Element definition:

Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line. I found a good link that lists all of HTML inline elements.

Block Element:

Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line. I found a good link that lists all of the HTML Block Elements.

So how would we get the anchor tags to show their widths and heights? Well we only would have to add one line of CSS code in the /* Buttons */ section. This is what the CSS would look like after we were done with it.

CSS Code

After you have done this the buttons would now show their height and width. They would also be stacked on top of each other since the definition of a block element is to begin on a new line. If you didn’t want the buttons to be on new lines you could always float them to the left and put a padding on them.

I hope that helps explains thing a bit

Why CSS code margin:0px auto doesn’t center container

Jared Heinrichs — Fri, 23 Apr 2010 04:29:15 +0000

You may have come across this CSS annoyance. You go to type this in an HTML file:

<div class="mainWrapper">

   <p>Testp>

div>

In your linked CSS file you type:

.mainWrapper { width:1000; margin:0px auto; }

You THINK… Ok. Top and Bottom margin is 0px. Ok. There is nothing above or below the box. Left and Right margins set to auto. Ok. Say your screen resolution is 1680px. We can see 1000px is used for mainWrapper. The rest should be used in the Margin. 680px divided by 2 equals 340px on either side.

If you think this way you are mostly correct. Unfortunately this doesn’t work all by itself. mainWrapper needs help from the container above it. (Most likely the tag).

In order for mainWrapper object to float it needs this CSS code:

body { text-align:center; }

Without this “text-align”, the box will not float in the middle of the screen. Without the “margin:0px auto; the box will not float either. You NEED both! Now go back to coding

Visual tutorial on the “clear” property

Jared Heinrichs — Tue, 23 Mar 2010 19:23:39 +0000

Today I will be giving a tutorial on the clear property and how it works. I am guessing this info at some point will help you troubleshoot your code as I am sure most people run into this every so often. I’m first just going to show you the code and right after I will explain what each one does. I will also get you to change a few things to show you how the clear property works.

Let’s first look at the HTML code for the file “clear.html”.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 strict//EN">
<html>
  <head>
    <title>CSS Clear Property Tutorialtitle>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/property.css">
  head>
  <body>
      <div id="main-wrapper" class="container">
      <div id="header">
          <h1 class="red">H1 Tagh1>
          <p class="bold red">Hello Worldp>
      div>
      <div id="main-content" class="floatleft">
          <p>Main contentp>
      div>
      <div id="right-wrapper" class="floatright">
          <p>SideBarp>
          <p>SideBarp>
          <p>SideBarp>
          <p>SideBarp>
          <p>SideBarp>
          <p>SideBarp>
          <p>SideBarp>
      div>
      <div id="footer" class="floatleft">
          <p>Footerp>
      div>
  div>
  body>
html>

The next thing to look at is my “reset.css” file:

/* RESET CSS FILE */
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,table,caption,tbody,tfoot,thead,tr,th,td
{border:0; outline:0; vertical-align:middle; background:transparent; margin:0; padding:0; font-family: Verdana, Geneva, sans-serif;}
* {margin:0; padding:0; }
a img { border:0; }
/*

This is called the clearfix "hack" to prevent container from colapsing
in on itself when all the elements inside are floated elements.
Make sure to add --[ class="container" ]-- to any object that you
don't want to colapse.
*/
.container:after { visibility: hidden; display: block; font-size:0; content: " "; clear: both; height: 0; }
/* start commented backlash hack \*/
* html .container   { height: 1%;     }
.container          { display: block; }
/* close commented backlash hack */
/* Easy way for me to float items */
.floatleft 	{ float:left;       }
.floatright 	{ float:right;      }
.floatmiddle 	{ margin: 0px auto; }

The next thing to look at is main CSS file for the tutorial “default.css”:

/* Physical Styling */
body { text-align:center; }
/* Font Styling */
h1  { font-size: 45px; color: black; }
h2  { font-size: 35px;}
h3  { font-size: 30px; font-style: italic; }
p   { font-size: 18px;}
.red { color: red; }
.bold { font-weight: bold; }
#main-wrapper { width: 600px;  margin: 0 auto; text-align: left; background-color: aqua; }
#header { width: 600px; background-color: green; }
#main-content { width: 400px; background-color: gray; background-color: teal; }
#right-wrapper { width: 200px; background-color: red; clear: right;  }
#footer { width: 600px; background-color: lime; }

Some of you might not be aware but you can actually have more then one CSS file linked in your HTML file. The first CSS file named reset.css basically does what it’s named. It resets all the items so that your code *SHOULD* look similar in all browsers without a multitude of hacks or IF statements. I also created some custom classes that I tend to use over and over again. Things like floating a DIV left or right is done all the time. I wanted a way of knowing inside the HTML code whether an element is floated or not. I’ve also included 1 hack to prevent container collapse. The only thing you have to do is in the HTML file add the class=“container” to the container in question that is collapsing.

Note in advance please excuse the horrible colors I chose for the background of the elements!! I did it so that it would be fairly obvious so you could follow along easier!!

Here’s what the 3 files create:

*Educational NOTE* – Remember when I talked about the DIV collapse hack I included in the reset.css file? If I didn’t add that the light blue (cyan) would not show up! It would be the same color as the body background which in this case is white.

As you can see from the HTML file “Header”,”Main-Content”, and “Footer” are all floated left.

You should also see that the “side-wrapper” is floated to the right.

What happens if we changed the “right-wrapper” clear property from “clear: right” to “clear:left” or “clear:both”??

Did you notice that the “Side-wrapper” is no longer in the “correct” position? So what is happening here? Well we know the “Cyan” color is the background color of the wrapper that is containing all the elements in place. Basically what is happening in this situation is the “Side-wrapper” is dropped down below the “main-content” element because the float has been told “Don’t continue the float on the left hand side. Right after the last element continue drawing this element.

Here’s something else to consider. What would the layout look like if the “Side-wrapper” is floated left instead of floated right? Would it look the same?

Nope. All the elements would look like none of them were floated.

Did you have the “ah ha!!” Moment yet?

In closing the “clear” property is used to breakup the HTML floats flow.

How you can use HTML5 now even with older browsers

Jared Heinrichs — Tue, 02 Feb 2010 04:01:57 +0000

I’ve been reading up on HTML5 lately. I’ve got to say that the HTML5 code is so much cleaner. Unfortunately browsers like Internet Explorer 6 don’t understand some of the new elements that make up HTML 5 unless you tell it to them yourself.

What are some of the new elements you say? Well without further adieu here are the main additions to web layout:

header
section
footer
aside
nav
article
figure

You might be asking what is the big deal with these being added to HTML5? Well up until now most people would do something similar to this to create a header section:

<div id="header">

   some code goes here

div>

Things like search engines don’t really understand that the last piece of code is the header. To top it off when pages start getting a ton of

’s, it makes it much harder to read the code then what HTML5 brings to the table.

Here is the same HTML container but now we are using the “header” section that is part of HTML5:

<header>

    some code goes here...

header>

HTML5 also helps to make the CSS easier read and follow. Here is the example of css for both the

approach and the new HTML5 approach.

Old

approach:

#header    { width:1000px; height: 300px; }

#header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#nav    { width:1000px }

#footer { width:1000px }

New HTML5 approach:

header { width:1000px; height: 300px; }

header h1 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


nav    { width:1000px }

footer { width:1000px }

As you can see the new elements will provide a type of meta data to the browser and search engines letting it know where the main content is on the page. This should help with SEO (search engine optimization).

For most browsers you will need to add the elements to the HTML document by doing three things:

Set the new Doc Type:

<!DOCTYPE html>

Second we have to tell the browser to treat the new items as Block Type elements using CSS. Once we create the CSS file all we have to do then is to link the CSS to the page we want to code in HTML5. Copy this css and save it as HTML5.css:

header, section, footer, aside, nav, article, figure {

	display:block;

}

The third thing you will have to do is to add some JavaScript to the beginning of your webpage to add these items to the DOM list in your browser. (Incase it isn’t supported yet)



head>



<body><div id="page" class="container floatmiddle">


    <header>

    	<h1>The title of the webpageh1>

    header>


    <nav class="container">

    	<p class="floatleft">Leftp>

        <p class="floatright">Rightp>

    nav>


    <section>

    	<p>This is a testp>

    section>


    <footer>

    	<p>This is the footerp>

    footer>


div>body>

html>

reset.css <– Click here for the code

HTML5 – See above for the code.

master.css

body    { background:f4f4f4; font: 15px/1.5 Georgia,serif;}

a       { text-decoration: none; }


header h1 { font: bold 30px Helvetica, Sans-serif; margin: 0 0 5px 0; }

header h2 { font: bold 20px Helvetica, Sans-serif; margin: 0 0 10px 0; }


#page { width: 500px; background:#CCC }

This will produce something that will look similar to this:

I hope you found this informative

How to use CSS to reset the default browser element settings

Jared Heinrichs — Mon, 01 Feb 2010 06:58:07 +0000

Here is the contents of “reset.css”. I normally link this all my web sites.

/* RESET CSS FILE */


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,table,caption,tbody,tfoot,thead,tr,th,td

{border:0;outline:0;vertical-align:middle; background:transparent; margin:0; padding:0;}


* {margin:0 padding:0; }

a img { border:0 }


/*

This is called the clearfix "hack" to prevent container from colapsing

in on itself when all the elements inside are floated elements.

Make sure to add --[ class="container" ]-- to any object that you

don't want to colapse.

*/


.container:after {

   visibility: hidden; display: block; font-size:0;

   content: " "; clear: both; height: 0;

}


/* start commented backlash hack \*/

* html .container   {height: 1%; }

.container          { display: block; }

/* close commented backlash hack */


/* Easy way for me to float items */

.floatleft      { float:left;       }

.floatright     { float:right;      }

.floatmiddle    { margin: 0px auto; }

How to use firebug to troubleshoot a webpage

Jared Heinrichs — Sun, 10 Jan 2010 23:29:22 +0000

I’ve been wanting to write a tutorial on firebug bet never remember to because when I do remember it’s right after the “emergency” and it’s too late to really take screenshots. I want to thank Chris Coyier for telling people about this add-on in one of his online videos. If you haven’t checked out his CSS Tricks website I highly recommend it. I also recommend his “Digging Into WordPress Book”.

What you need

This should be fairly obvious but you will need to have two things installed on your computer in order to follow along. Please download and install both of these two items.

What is FireBug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug allows you to have a “live” online WYSIWYG editor/preview kind of like Dreamweaver. What I mean by “live” is Firebug can’t change the code on the website permanently, but it can make the items you are currently viewing move around to give you a sort of preview.

Once you make the changes and find that everything looks good, you still have to edit the file on the server using your favorite program/online editor.

Now I know some of you might be saying ”I have dreamweaver why don’t I just use that. Make the changes localy and then sync dreamweaver with the server”.

I would then answer you “You would be correct if you were working on your OWN site and the files were static HTML.” Where firebug is a life saver is when you work with online programs like WordPress because programs like Dreamweaver can’t properly show you the output of the PHP scripts on the page.

How do I run Firebug?

Glad you asked! You can either just hit your “F12” key while your Firefox program is open or you can go to “Tools” menu and then select “Firebug”. (Click the Picture to see a more detailed screenshot).

Now on to the tutorial

I am probably guessing you have already tried by now running “Firebug” and might feel overwhelmed. If you are, don’t be.

Why am I going to use Firebug today?

To put it bluntly when I released my new theme for my website I forgot to code the CSS for the comments section of my blog. I found out about this because I had just released a re-issue of an article about intel’s WiDi Display Technology and John commented on the post and the comment did not look pretty.

Instead of logging into WordPress and figuring out what class I gave the comments section let’s use Firebug to find that out and then play around with the code live to make sure that everything looks the way it should. Once we are happy let’s update WordPress with the CSS we created in Firebug.

Here’s of the shot before the CSS markup was added. (I still can’t believe I missed this before releasing the theme!)

Let’s hit “f12”. Firebug pops up. It should look something like this:

I am now go click on the “+” signs and drill down to the section on responses called “commentlist”.

Notice when you hover your mouse over the different area’s the selection on the web page will get highlighted?

To the right of the firebug logo you will see “”HTML”, “CSS” and “Script”. Click on CSS and then the “Edit” button. This will actually let you make changes to the CSS on the fly on effect this one browser session.

In this case I am going to add a few lines of CSS markup to fix the presentation behavior.

.commentlist {
	padding: 0;
	text-align: justify;
	}
.commentlist li {
	margin: 15px 0 10px;
	padding: 5px 5px 10px 25px;
	list-style: none;
	}
.commentlist li ul li {
	margin-right: -5px;
	margin-left: 10px;
}
#page h3{
        padding: 5px 5px 10px 15px;
}

The first 3 entries are for the comment lists and the last one is for the line “One Response to..” header. I know some of you might be saying why didn’t you put the “#page h3” line about the .commentlist items. While I agree it would make finding the “#page h3” item easier again I wanted to show you the order doesn’t really matter in CSS unless there was another item AFTER the tag in question that extended/overwrote the original style.

After entering this code I can see that layout looks much better now that the response is some much further from the edge?

Hope this helps give you introductory to Firebug and some of it’s unique abilities!

CSS Type properties cheat sheet

Jared Heinrichs — Mon, 31 Aug 2009 14:09:58 +0000

This post is going to be going over all the Type CSS Properties and giving you the properties of each item. Since I like Adobe Dreamweaver’s GUI so much I will use a screen shot of it as a reference because it provides a clean and compact way of organizing the properties.

CSS Font Families

   1:  font-family: Verdana, Geneva, sans-serif;

   2:  font-family: Georgia, "Times New Roman", Times, serif;

   3:  font-family: "Courier New", Courier, monospace;

   4:  font-family: Arial, Helvetica, sans-serif;

   5:  font-family: Tahoma, Geneva, sans-serif;

   6:  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

   7:  font-family: "Arial Black", Gadget, sans-serif;

   8:  font-family: "Times New Roman", Times, serif;

   9:  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

  10:  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  11:  font-family: "MS Serif", "New York", serif;

  12:  font-family: "Lucida Console", Monaco, monospace;

  13:  font-family: "Comic Sans MS", cursive;

CSS Font Size:

   1:  font-size: 12px;

   2:  font-size: 12em;

CSS Font Weight

   1:  font-weight: normal;

   2:  font-weight: bold;

   3:  font-weight: bolder;

   4:  font-weight: lighter;

CSS Font Style

   1:  font-style: normal;

   2:  font-style: italic;

   3:  font-style: oblique;

   1:  font-variant: normal;

   2:  font-variant: small-caps;

CSS Line Height

   1:  line-height: normal;

   2:  line-height: 12px;

   3:  line-height: 12em;

CSS Text Transform

   1:  text-transform: capitalize;

   2:  text-transform: uppercase;

   3:  text-transform: lowercase;

   4:  text-transform: none;

CSS Text Decoration

   1:  text-decoration: underline;

   2:  text-decoration: overline;

   3:  text-decoration: line-through;

   4:  text-decoration: blink;

   5:  text-decoration: none;

CSS Text Color

   1:  color: #000; /* Black */

   2:  color: #FFF; /* White */

CSS Example for

   1:  p

   2:  {

   3:      color: #000; /* White */

   4:      font-family: "Arial Black", "Gadget", "sans-serif";

   5:      font-size: 12px;

   6:      font-style: normal;

   7:      line-height: normal;

   8:      font-weight: normal;

   9:      font-variant: normal;

  10:  }