hydwebdesigner

Tuesday, May 22, 2012

Code for Footer should be at bottom in all the cases

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>
html, body{ height:100%; }
#main-wrapper{ min-height:100%; position:relative; }
#footer{ height:100px; background:#999999; position:absolute; bottom:0px; width:100%; }
</style>
</head>

<body style="padding:0px; margin:0px;">

<div id="main-wrapper">
<div style="height:100px;">h</div>
<div style="padding-bottom:100px;">Content</div>
<div id="footer"></div>
</div>
</body>
</html>

Thursday, May 17, 2012

Responsive Header Codes

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<title>Hydwebdesigner.com - Welcome</title>
/head>

or
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

<title>Hydwebdesigner.com - Welcome</title></head>

CSS3 Media Queries

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 --------------------------------

 Other Media Queries

/* if height is between 960 and 1024 */
@media screen and (max-width: 1280px) and (max-height:1024px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:yellow; height:100px; width:350px; text-indent:100px;}
}

/* if height is between 720 and 960 */
@media screen and (max-width: 1280px) and (max-height:960px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:green; height:100px; width:350px; text-indent:100px; color:yellow;}
}

/ if height is between 0 and 720 */
@media screen and (max-width: 1280px) and (max-height:720px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:pink; height:100px; width:350px; text-indent:100px; color:black;}
}

@media screen and (max-width: 800px) and (max-height:600px){
#change ul{font-size:15pt; text-decoration:none; list-style-type:none; text-indent:300px; margin-top:150px;
background-color:blue; height:100px; width:350px; text-indent:100px; color:white;}
}

 --------------------------------

Of course, you might not want all your responsive design styles inside one huge stylesheet. If that’s the case, you can serve alternative stylesheets using the same queries as attributes on your link elements.

<head>

<link rel="stylesheet" href="smartphone.css" 
media="only screen and (min-device-width : 320px) 
and (max-device-width : 480px)">

<link rel="stylesheet" href="smartphone-landscape.css" 
media="only screen and (min-width : 321px)">

<link rel="stylesheet" href="smartphone-portrait.css" 
media="only screen and (max-width : 320px)">

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

<link rel="stylesheet" href="ipad-portrait.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)">

<link rel="stylesheet" href="widescreen.css" 
media="only screen and (min-width : 1824px)">

<link rel="stylesheet" href="iphone4.css" 
media="only screen 
and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5)">

</head>

from: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

 -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0-

@media (min-width:768px) and (max-width:979px){}

@media (max-width:767px){}

@media (max-width:480px){}

 @media (min-width:1200px){}

@media (max-width:979px){}

@media (min-width:980px){}

  -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0- -0-

Wednesday, May 16, 2012

CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

Font-sizes as they increase from 100% to 120%.

Font-size as the client changes the text size in their browser.

1em = 12pt = 16px = 100%--------------------------------------------------------------------------------------
<body style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<div style="font-size:1em;">I am the web designer</div> /* here 1em=12px because body font-size is set to 12px. */
<div style="font-size:1.2em;">I am the web designer</div> /* here 1em=14px because body font-size is set to 12px. */
</body>
--------------------------------------------------------------------------------------

Make the Footer Stick to the Bottom of a Page through the CSS

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style>

</style>
</head>

<body style="padding:0px; margin:0px;">
<div id="main">
<div id="header">Header Section</div>
<div id="content">Container section</div>
<div id="footer">Footer Section</div>
</div>
</body>
</html>

Tuesday, May 15, 2012

block content from $node->field

<?php if (arg(0) == 'node' && is_numeric(arg(1)) ) { $node = node_load(arg(1)); if($node->type == 'article') { print $node->body['und'][0]['value']; } } ?>

URL: http://drupal.org/node/232474#comment-764060

Monday, May 14, 2012

Update your hosts file and point to the IP in hosts file

C:\Windows\System32\drivers\etc\hosts.txt