New version of www.morteniveland.net

 

Well, by doing lots of ‘experiments’ I came up with a technique (which, by the way, I haven’t seen anywhere else) that would make a page have its header and footer to the top and bottom of the browser window as if it was made using tables. I have an example where you can see what I mean. The layout, consists only of a header, contents and footer. This is just the ‘begining’ because I am still experimenting to expand this technique to use it with columns too.

Now going back to the topic, in my research to find a way to accomplish what I wanted, I always found examples where the container would hold the header, contents and footer… but this wouldn’t produce the results I wanted.

By the way, although ‘m not a writer, I will do my best to explain this technique; please bare with me. This technique consists of placing the header and the contents inside the container only. The footer will be placed outside the container; this will allow us to ‘push’; the footer all the way down and manipulate its position. In the definition of the container id, we define a height of 100% for Internet Explorer and create a filter for Firefox and other CSS2 compliant browsers like so:

html>body #container {
   height: auto;
   min-height: 100%;
}

Then, we define the contents div like so:

contents{

padding: 10px 10px 100px 10px; }

As you can see, we set the bottom padding to 100px. The reason for this is so the footer won’t overlap over the header if there is no text in the contents div and to leave some space in between both of them if the browser window is resized to a small size.

Finally, we define the footer div as follows:

footer{

position: relative; bottom: 0; background-color: #f90; margin: -100px auto 0 auto; height: 100px; width: 760px; }

Since the position of the footer is set to relative, it will be pushed down all the way to the bottom, even beyond the 100% of the user’s screen. For this reason, as you can see in the definition, we give it a top margin of -100px (which is the same value of the footer’s height) and then we give it the same positioning and width values as the container so that they align as they should.

That’s it! You can take it from here and tweak it as needed. See the source code for more details.I hope this technique helps and saves you some time .

To find web host independent hosting review sites are a great help that provide information and tips to help you find the right webhosting plan for you. The same is dedicated to make you access to the most renowned hosting services such as 1and1. Some of them enlist the top few dozens of the cheap hosting service providers ranked on the basis of price, uptime, speed, support and the number of dedicated servers.

If need some help for 642-973 and 1z0-052 then get the latest VCP-410 compiled by our certified experts to help you pass exam in first attempt.You can also download 70-515 dumps and 70-648 dumps.

 

It’s a chart that converts points to pixels (and ems and %). It’s an approximation, which will depend on font, browser and OS, but it’s a good starting point.

 

This very interesting article on A List Apart describes the technique for printing graphics of the web page as high-resolution images:

You probably already know how to use media-specific CSS to provide a suitable layout for the printed page. But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print? Awesome? Here’s how.

 

This thread I have found useful when I had the task make a footer div that resides on the bottom of browser’s window if height of content is smaller than window height. If otherwise, it’s behaves as usual – going to the bottom of content.

I have used this method on my personal site, so you can see it in action: www.polyakov.org (tag: polyakov)

An important update: I have redesigned site’s code with method by Juan from blog.coderlab.us, it’s seems even easier and uses less code than this approach.

Read the whole thread…

 

-A very useful article to everybody who dealing with CSS. It’s so simple and powerful!

Do you write and manage large CSS files? Ever get tired of scrolling up and down in search of a specific rule or set of rules? The CSS files I work with for client projects are often quite long, requiring constant scrolling up and down several screen’s worth of text to alter rules or add new ones. While working on a current project, I just made a tiny little addition that makes finding what I want almost immediate.

Read more: