main site

Online Portfolio and Resource Blog Online Portfolio and Resource Blog

Posts Tagged ‘HTML’

CSS: Make a Div Height 100% of the Screen

02Dec 2011

Many designers have come across this issue several times in their career. How do you make your div fill up the entire height of your browser window? The answer is very simple, but not so obvious.

HTML

<div id="main">
     <div class="content">
                A div thats height is %100 of the screen!
     </div>
</div>

CSS

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: url("bg.gif");
	font-family: Arial, Verdana, sans-serif;
}
#main {
	background: #f1f1f1;
	width: 960px;
	margin: auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 10px 0 10px;
	min-height: 100%;
}
.content {
	padding-top: 10px;
}

Click here for the result

CSS: Center a Div Using Absolute Positioning

02Nov 2011

Aligning divs to the center of the page is relatively easy. It’s just a matter defining its width and setting the left and right margins to “auto”. Easy does it. But what happens when your div is using absolute positioning? It won’t matter if your left and right margins are set to “auto”. I have found a simple solution that works like a charm!

HTML structure:

<div id="main">
    <div id="header"> Header </div>
    <div id="content"> Body </div>
    <div id="footer"> Footer </div>
</div>

CSS: Positioning the “main” div:

#main {
    width: 960px;
    background: #f1f1f1;
    color: #000;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -480px;
}

The left position is set to 50% so that the div will begin at the center of the screen. The left margin value is -half of the size of the div we are centering. This pushes the div over to the left directly to the exact center of the page.

Click here for the final result

Web Development: Creating 404 Error Pages

28Sep 2011
404 Error Tutorial

404 Error Tutorial

A 404 page is a necessity for any professional website. As files are updated and shuffled around, there is no guarantee that search engines will be up to date with your most latest changes. By creating a 404 page, you are keeping the user experience constant throughout the entire website, even if they happen to run across a file or page that is missing.  (more…)

CSS: Targeting IE Using Conditional Comments

16Sep 2011
HTML/CSS Tutorial and Resource

HTML/CSS Tutorial and Resource

Conditional Comments

Here is a compiled list of conditional comments that are used for cross browser compatibility exclusively in Internet Explorer browsers.
(more…)

CSS: When in Fear Use .clear

15Sep 2011
HTML/CSS Tutorial and Resource

HTML/CSS Tutorial and Resource

HTML and CSS can be very simple, but there are a some things that are not self explanatory and can cause major frustration for novice designers. I am hoping this article will .clear some things up for those who are having trouble with floating block level elements (div,p,h1,h2).
(more…)

Powered by DarkLab Productions

the current theme is Phoenix 1.0
Powered by DarkLab Productions | © 2012 John Hirchak All Rights Reserved.

John Hirchak