Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Archives for Programming / CSS

Jan 31, 2012 By Jared Heinrichs Leave a Comment

CSS Relative image URL

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

Take this bit of CSS:

image

  • 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!

Filed Under: CSS

Apr 27, 2011 By Jared Heinrichs Leave a Comment

A running collection of fonts I like on Websites

Headings

Page Example:

image

Code Example:

image

copy and paste:

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

Filed Under: CSS

Dec 13, 2010 By Jared Heinrichs Leave a Comment

z-index background issues

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:

image

Unfortunately I kept getting something like this:

image

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

XHTML

z-index background issue 01

CSS (That didn’t work)

z-index background issue 02

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

z-index background issue 03

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.

Filed Under: CSS

Oct 2, 2010 By Jared Heinrichs 8 Comments

How to give an anchor tag a width and height

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:

image

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

HTML Code

image

CSS Code

image

Result

image

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

image

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

Filed Under: CSS Tagged With: How To

Apr 22, 2010 By Jared Heinrichs Leave a Comment

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

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 😉

Filed Under: CSS Tagged With: How To

  • 1
  • 2
  • 3
  • Next Page »

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design