Archive for category css

IE CSS Conditional

Posted by roqeem in css, html on May 3, 2012

Conditional comments are a simple Internet-Explorer-only feature that Microsoft added to IE5 Windows and later. (Mac IE doesn’t support them.) They provide an easy way to detect that the visitor is using an IE browser (and which version they’re using). You can then serve IE users different blocks of HTML as required.

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie01.css" />
<![endif]-->

<!--[if IE 5]>
<p>This message is only displayed in IE5.</p>
<![endif]-->

<!--[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]-->

<!--[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie01.css" />
<![endif]-->

<!--[if IE]>  
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
<![endif]-->

Leave a comment

Absolute position in Div boxes

Posted by roqeem in css, html on April 4, 2012

The parent when position: relative forms the container from which the position: absolute divs take their positions. If the parent containing div did not exist or didn’t have position: relative; the position: absolute divs would appear at the top of the screen, taking their positions from the main page container or body of the whole page.

The HTML markup code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
    .background { background-color: #c0c0c0; padding: 0; color: #335500; }
</style>
</head>
<body>
    <div class="background" style="position:relative; float:left; width:138px; height:158px;"> 
		<div style="position:absolute; z-index:2; top:0px; left:0px; width:100%; background-color: pink;">
		div satu div satu 
		</div>
		
		<div style="position:absolute; z-index:1; top:25px; left:0px; height:95px; width:100%; background-color:red;">
		posisi images
		</div>
		
		<div style="position:absolute; z-index:3; bottom:22px; left:0px; width:100%; background-color: yellow;">
		div tiga div tiga div tiga 
		</div>
		
		<div style="position:absolute; bottom:0px; left:0px; width:100%; background-color: yellow;">
		div empat
		</div>
    </div> 
</body>
</html>

note:
parent containing div must have position:relative; then you can apply the position:absolute.

source: http://www.wickham43.net

Leave a comment

centering image in div with CSS

Posted by roqeem in css, html on March 28, 2012

Images are a little trickier. While most browsers will display images centered using the same text-align property, it’s not a good idea to rely on that technique, as it is not recommended by the W3C. Instead, you should explicitly tell the browser that the image is a block element. Then you can center it as you would a block. Here is the CSS:

img_center { display: block;   margin-left: auto;   margin-right: auto; }

And this is the HTML that applies to:

<img class="img_center" src="blwebcam-sample.jpg" alt="Suni"/>

source: http://webdesign.about.com

Leave a comment

Design a site like this with WordPress.com
Get started