W3 Lessons: CSS

Showing posts with label CSS. Show all posts

Monday, December 12, 2011

Create Full Screen Iframe or Full window Iframe or Iframe mask in HTML CSS

Working with iframe masking, We need to load / mask any Sub domain or Back Office pages in full available browser screen. Here is the pleasant and cross browser approach for iframe masking, with this simple css and html code we can make our web pages visible to Full Browser area, Full window area or full available browser screen. We can make iframe full height of available browser screen

1) Reset page floating margins as 0px for html body, div, iframe tags

html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}

2) Transform iframe Tag behavior in CSS

iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}

2) Setting iframe properties for resolve cross browser issues.

<iframe id="tree" name="tree" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

Example Full screen iframe html Page

<!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" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3Lessons.com Full Windows, Full Screen Iframe</title>
<style type="text/css">
html 
{
 overflow: auto;
}
 
html, body, div, iframe 
{
 margin: 0px; 
 padding: 0px; 
 height: 100%; 
 border: none;
}
 
iframe 
{
 display: block; 
 width: 100%; 
 border: none; 
 overflow-y: auto; 
 overflow-x: hidden;
}
</style>
</head>
<body>

<iframe id="tree" name="myiframe" src="http://www.w3lessons.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>

</body>
</html>

Saturday, August 27, 2011

Create drop shadow with css without images

With CSS we can create : Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. you can use this technique for your HTML objects

CSS Drop Shadow

Lifted corners
Curled corners
Perspective
Raised box
Single vertical curve
Vertical curves
Single horizontal curve
Horizontal curves
Rotated box

Browser Support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+

View Live Demo for CSS Drop Shadow

Saturday, August 13, 2011

Pure CSS Drop Down Menu, Complete Fully CSS 3

Here is a SEO Friendly Horizontal Multilevel Drop Down Menu using Completely written with Pure CSS attributes and properties. You can easily format it with your own color theme and Image background by adjusting few properties You can use this menu for your Real time projects Back office Admin Panels.

This menu written with Combination of <div> and <ul><li>, and <a> <span> Tags
Mokup for the Multi Level Menu as Followes

drop-down-menu.css
In this file you can edit your color values as per your need.

/* menu::base */
div#menu {
	float:left;
    height:30px;
	background-color:#3399CC;	
	font-size:11px;
	font-weight:bold;
	text-align:left;
}

div#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
	background-color:#0099CC;		
}
div#menu ul.menu {
    padding-left: 10px;
	background-color:#3399CC;
}

div#menu li {
    position: relative;
    z-index: 9;
    margin: 0;
    padding: 0;
    display: block;
    float: left;
}
   
div#menu li:hover>ul {
    left: -2px;
}

div#menu li div {
    list-style: none;
    float: left;
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    z-index: 11;
    visibility: hidden;
    padding:0px;
}
div#menu li:hover>div {
    visibility: visible;
}

div#menu li.current a {}

/* menu::level1 */
div#menu a {
    position: relative;
    z-index: 10;
    height: 11px;
    display: block;
    float: left;	
    padding:10px;
    text-decoration: none;
	color:#000;
}
div#menu span {

	font: bold 11px Tahoma, Geneva, sans-serif;
    padding-top:0px;
    color: #000;
    font-weight:bold;
    text-transform:capitalize;
    display: block;
    cursor: pointer;
    background-repeat: no-repeat;
}

div#menu ul a:hover span {
    color: #039;
}

div#menu li { border-right:1px solid #CCC; }
div#menu li.last span{
    padding:0px;
}

/* menu::level2 */
div#menu ul ul li {
    padding: 4px 0;
    z-index: 9;
	border-bottom:1px solid #000;
	border-left:1px solid #CCC;
}
div#menu ul ul {
    z-index: 12;	
    padding: 0;
    margin-top:2px;
    margin-left:0px;
    margin-right:0px;
}
div#menu ul ul a {
  	width: 184px;
  padding: 0px 7px 3px 8px;
    height: auto;
    float: none;
    display: block;
    background:none;
    margin-bottom: 2px;
    z-index: -1;
	color:#FFF;
}
div#menu ul ul a span {
	  padding: 0 10px 0px 10px;
    line-height: 20px;
    color: #000;
	font-weight:bold;
    text-transform: none;
    background:none;
}
div#menu ul ul a:hover {

}
div#menu ul ul a:hover span {

    color: #039;
}

div#menu ul ul li.last { background: none; }
div#menu ul ul li {
    width: 100%;
	border-bottom:1px solid #EEEEEE;
}

/* menu::level3 */
div#menu ul ul div {
    width: 208px;
    margin: -30px 0 0 190px !important;
    height: auto;
    _padding: 0 0 9px 3px;
}
div#menu ul ul ul {
	_padding-right:1px;
}

/* lava lamp */
div#menu li.back {
}
div#menu li.back .left {
}

sample-menu.html

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pure CSS Menu Fully CSS Only</title>
<link href="drop-down-menu.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="menu">
<ul class="menu">
<li><a class="parent" href="http://www.w3lessons.com/"><span>Home</span></a></li> 
<li><a href="http://www.w3lessons.com/"><span>About us</span></a></li>

<li><a class="parent" href="javascript://"><span>Services</span></a>
<!--First Level-->             
    <div>
    <ul>
    <li><a href="http://www.w3lessons.com/"><span>SEO</span></a></li>
    <li><a href="http://www.w3lessons.com/"><span>Web Design</span></a></li>  
        <!--Second Level-->     
        <li><a href="javascript:"><span>Web Development</span></a>
            <div>
            <ul>
            <li><a href="http://www.w3lessons.com/"><span>HTML</span></a></li>
            <li><a href="http://www.w3lessons.com/"><span>CSS</span></a></li>
                 <!--Third Level-->   
                <li><a href="javascript:void(0)"><span>PHP</span></a>
                    <div>
                    <ul>
                    <li><a href="http://www.w3lessons.com/"><span> PDO</span></a></li>
                    <li><a href="http://www.w3lessons.com/"><span>MySQL</span></a></li>                
                    <li><a href="http://www.w3lessons.com/"><span>SQLite</span></a></li>                
                    </ul>
                    </div>                                     
                </li>                
            </ul>
            </div>                
        </li>   
    
    </ul>
    </div>
</li>

<li><a class="parent" href="javascript://"><span>Skills</span></a></li>
</ul>
</div>

</body>
</html>

Horizontal and Vertical Aligned div using CSS

Horizontal and Vertical Centered Element is very use full for any layout.
Here we can see how to create a Centered div using CSS

Create Div with 400px in Width, and 200px in Height for your quick observation I used to just in 100s, you can adjust your div size based on this assumption

To Create a Aboslute Centered Div:

Position: Asbolute,
Top and Left : 50%
Margin-Left: -(50%) of width
Margin-Top- (50%) of Height

HTML & CSS Code for Horizontal and Vertical Centered Div.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Div</title>
<style type="text/css">
<!--
#center{
position:absolute; 
width: 400px; 
height: 200px; 
top: 50%; 
left: 50%; 
margin-left:-200px; 
margin-top:-100px; 
text-align:center;
background-color:#CCC;
}
-->
</style></head>
<body>

<div id="center">
Screen Centered Div
</div>

</body>
</html>

Design SEO Friendly 3 Column Liquid Web Layout

Percentage dimensions of 3 Column Liquid web Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

800 x 600: Left & right columns: 162 pixels; Center page: 357 pixels
1024 x 768: Left & right columns: 210 pixels; Center page: 459 pixels

The nested div structure

Div Arrangements for3 Column Liquid web Layout I've colour coded each div so it's easy to see:

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is inside colmask and colleft is inside colmid. The three column content divs (col1, col2 & col3) are inside colleft. Notice that the main content column (col1) comes before the other columns.

Author: Matthew James Taylor