When using relative URLS, CSS images are always relative to the CSS FILE and NOT the Page URL!
Take this bit of CSS:
If you make the CSS relative to the page you will be in a world of hurt!
font-family: "Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
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.
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.
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:
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:
Block Element:
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.
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
You may have come across this CSS annoyance. You go to type this in an HTML file:
<div class="mainWrapper"><p>Test</p></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 <body> 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 😉