rajRana Thakur

NA
19
8.6k

how to height and width maintenance in html

Feb 8 2013 10:26 PM

please help to create a home page. I can to understand how to make home like this(http://propertylele.com/.) my email id is [email protected] and [email protected]

this is master page

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

$(document).ready(function () {

$("#rotator > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 4000, true);

});

</script>

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<div id="masterid" style="width: 100%; height: 3000px; margin: 0 0 0 0; padding: 0 0 0 0;

border: 1px solid blue;">

<div align="center" id="header_log" style="width: 22%; height: 150px; float: left;

margin-left: 0px;">

</div>

</div>

</div>

<ul>

<li><a href="#">About us</a>

<ul>

<li><a href="#">About us</a></li>

</ul>

</li>

<li><a href="#">Activities</a></li>

<ul>

<li><a href="#">Donation</a></li>

<li><a href="#">Volunteer</a></li>

<li><a href="#">Works With Us</a></li>

</ul>

</li>

<li><a href="#">Gallery</a></li>

<li><a href="#">Member</a>

<ul>

<li><a href="#">Goverment Body</a></li>

<li><a href="#">Non-Goverment</a></li>

</ul>

</li>

<li><a href="#">Contact Us</a></li>

</ul>

</div>

<span>Maximize Profits</span></a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Flexible

Technology</span></a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Practical

Solutions</span></a></li>

<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Customer

Support</span></a></li>

</ul>

<h2>

Maximize Profits</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum

lacus. Pellentesque ut diam.</p>

<p>

<a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">

Learn More</a></p>

</div>

<h2>

Flexible Technology</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum

lacus. Pellentesque ut diam.</p>

<p>

<a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">

Learn More</a></p>

</div>

<h2>

Practical Solutions</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum

lacus. Pellentesque ut diam.</p>

<p>

<a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">

Learn More</a></p>

</div>

<h2>

Customer Support</h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum

lacus. Pellentesque ut diam.</p>

<p>

<a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">

Learn More</a></p>

</div>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

<div id="footer_donors1" style="background: url(images/uitabsbg.gif); width: 18%;

height: 43px;">

           <span style="font-family: Verdana,arial;

font-size: 20px; color: White;">Donor</span>

</div>

<marquee id="donors_gallery" onmouseout="this.start()" onmouseover="this.stop()"

behaviour="alternate" scrolldealy="120" direction="left">

</marquee>

</div>

<div id="about_us" style="float: left; margin-top: 21px; padding: 21px 21px; height: 259px;

width: 143px;">

About us</h1>

<br />

<a class="footer_menu_size_links" href="#">Dr.Gyanendra kumar</a><br />

<br />

<a class="footer_menu_size_links" href="#">Vision and Mission</a><br />

<br />

<a class="footer_menu_size_links" href="#">Our Achievers</a><br />

<br />

<a class="footer_menu_size_links" href="#">Milestones Achieved</a><br />

</div>

<div id="pre_runin_proj" style="float: left; margin-top: 21px; padding: 21px 21px;

height: 257px;">

Presently Runing Projects</h1>

<br />

<a class="footer_menu_size_links" href="#">(A) Gender Resource Centre</a><br />

<br />

<a class="footer_menu_size_links" href="#">(B) Healt Pilot Project</a><br />

<br />

</div>

</div>

</form>

</body>

</html>

THis is my css of the master page.

*{padding:0; margin:0;}

.link{float:right; padding-right:12px; -webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out;

-o-transition: margin 0.5s ease-out; }

.ex1{ padding-top:1px; }

.ex1 img:hover { margin-top: 12px;}

/************menu bar**************/

#wrapper{float:right;width:714px; height:40px; background-color:#f23133;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

#navMenu{margin:0; padding:0;width:714px; height:40px;}

#navMenu ul{margin:0; padding:0; line-height:40px;}

#navMenu li{margin:0; padding:0;list-style:none;float:left;position:relative; height:40px;}

#navMenu ul li a{ text-align:center; font-family:Verdana;text-decoration:none;height:40px; width:110px; display:block;border-left:1px solid #ff0066;

border-right:1px solid #ff0066;font-size: 10px; color: #f3f3f3;}

#navMenu ul ul{ position:absolute; visibility:hidden;top:38px; z-index: 999;opacity: 0.36 !important;}

#navMenu ul li:hover ul{ visibility:visible;background-color:#f23133;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;} /* broder 5 6 01*/

#navMenu li a:hover{background:#ff0000;}

.menu{height: 39px; width:77%;float:right; font-size:12px; padding:0px; position:relative;}

.menu ul {padding:0;margin:0;list-style-type:none; height:39px; margin-top:0px;width: 714px;}

.menu ul li { text-align:center;}

.menu ul li {float:left;height:34px;line-height:28px;width: 119px;}

.menu ul ul {width:auto; }

.menu ul ul li{ display:block; width:auto; height:auto; position:absolute; }

/******************************slide images***************************/

#mid_content1_wrapper {

width:100%;

border-top:3px solid #92a5bc;

border-bottom:1px solid #92a5bc;

margin:0 auto;

height: 345px;

}

#rotator {

background:#FFF;

color:#000;

position:relative;

padding-bottom:2.6em;

margin:0;

font-size:16px;

}

/* Tabs */

ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {

margin:0;

padding:0;

border:0;

outline:0;

line-height:1.3;

text-decoration:none;

font-size:100%;

list-style:none;

float:left;

font-family:Arial, Helvetica, sans-serif;

}

ul.ui-tabs-nav

{

position: absolute;

bottom: 0px;

left: 0;

z-index: 1;

width: 100%;

background: #FFF url('../images/uitabsbg.gif') repeat-x right bottom;

border-top: 1px solid #FFF;

}

/* Non-Selected Tabs */

li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited

{

font-size: .8em;

font-weight: normal;

color: #999;

background: #FFF url('../images/uitabsbg.gif') repeat-x left bottom;

border-left: 1px solid #FFF;

border-right: 1px solid #c5ced9;

}

/* Hovered Tab */

#rotator .ui-tabs-nav-item a:hover, #rotator .ui-tabs-nav-item a:active

{

background: #FFF url('../images/uiactivetabbg.gif') repeat-x left bottom;

color: #333;

}

#rotator .ui-tabs-nav-item a span {

float:left;

padding:1em;

cursor:pointer;

}

/* Active Tab */

#rotator .ui-tabs-selected a:link, #rotator .ui-tabs-selected a:visited, #rotator .ui-tabs-selected a:hover, #rotator .ui-tabs-selected a:active

{

background: #fff url('../images/uiactivetabbg.gif') repeat-x left bottom;

color: #333;

}

/* Content Panels */

#rotator .ui-tabs-panel {

font-family:Arial, Helvetica, sans-serif;

clear:left;

color:#000;

padding:40px 540px 15px 15px;

height:225px;

}

#rotator .ui-tabs-hide {

display:none;

}

#rotator h2 {

color:#E75D00;

font-weight:normal;

margin:0;

font-size:1.8em;

line-height:1.2em;

}

#rotator p {

font-size:1.1em;

margin:.5em 0;

color:#333;

}

#rotator .btn_get_started

{

float: left;

height: 30px;

width: 99px;

text-indent: -9999em;

margin-right: 7px;

overflow: hidden;

background: transparent url('../images/getstarted.gif') no-repeat;

}

#rotator .btn_learn_more {

float:left;

height:26px;

font-size:.9em;

}

/* Background Images */

#rotator #fragment-1

{

background: transparent url('../images/coins.jpg') no-repeat right top;

}

#rotator #fragment-2

{

background: transparent url('../images/bearings.jpg') no-repeat right top;

}

#rotator #fragment-3

{

background: transparent url('../images/map.jpg') no-repeat left top;

padding: 40px 15px 15px 540px;

}

#rotator #fragment-4

{

background: transparent url('../images/support.jpg') no-repeat left top;

padding: 40px 15px 15px 540px;

}

/******************footer**********************/

.footer_menu_size_links

{

font-size: 12px;

font-family: Arial, Helvetica, sans-serif;

text-decoration:none;

}

#footer_donors1

{

border:2px solid #cde6ff;

padding:0 0;

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px; /* Old Firefox */

}

#footer1

{

margin-left:11px; margin-right:11px;border:2px solid #cde6ff; padding:0px 0px;

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px;

}

#footer_menu

{

background-image: url('../images/footer_content_bg.jpg');

background-repeat: no-repeat;

background-size:100% 100%;

-moz-background-size:100% 100%; /* Old Firefox */

-webkit--background-size:100% 100%;/*chrome*/

}

this is my default page code

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

</div>

<div id="mid_content221_msg_part1" style="float: left; width: 99%; height: 200px;

<blockquote style="float: right; margin-left: 1px; height: 112px; width: 105px; padding: 3 3;

background: transparent url(images/gyanendra.jpg);">

</div>

var myString = "The Gender difference between men and women effect their health In the different ways. At one level these difference lead of difference in the incidence and prevalence of ill health. Women's health for long was only importance as far as her childbearing capacities were concerned and thus there was a focus on maternal health, every eight minutes one women in India dies during childbirth. Despite improvement in maternal health in recent year the loss of more than 63,000 women every year due to pregnancy and its complications is clearly a threat to modern developed society.";

var myArray = myString.split("");

var loopTimer;

function frameLooper() {

if (myArray.length > 0) {

document.getElementById("mid_content221_msg_part1").innerHTML += myArray.shift();

}

else {

clearTimeout(loopTimer);

}

loopTimer = setTimeout('frameLooper()', 70);

}

frameLooper();

</script>

</div>

</div>

- <a class="latest_new_article" target="_parent" title="Employee of the Month- December 2012" href="#">Employee of the Month- December 2012</a><br />

- <a class="latest_new_article" target="_parent" title=" KRDWG" href="#">Navjyoti has been presented Healthcare Leadership Award 2012 for outstanding contribution in promoting inclusive healthcare by KRDWG</a><br/>

- <a class="latest_new_article" target="_parent" title="2013" href="#">Navjyoti India Foundation to celebrate Volunteers Day on 1, 2, 3 January 2013</a><br />

- <a class="latest_new_article" target="_parent" title="porters" href="#">Navjyoti India Foundation successfully participated in the Airtel Delhi Half Marathon 2012 with over a hundred supporters</a><br/>

- <a class="latest_new_article" target="_parent" title="2012" href="#">Employee of the Month- September 2012</a><br/>

- <a class="latest_new_article" target="_parent" title="onsibility" href="#">Ms. Chandni Taneja, Executive Director, Navjyoti India Foundation was invited as a speaker to the National Seminar on Corporate Social Responsibility</a><br/>

- <a class="latest_new_article" target="_parent" title="ntre" href="#">Navjyoti Community College offers a range of new Courses/Programmes at its Karala Centre</a><br/>

- <a class="latest_new_article" target="_parent" title="cation" href="#">Navjyoti-IGNOU Community College has been awarded with ISO (9001:2008) certification</a><br/></marquee><br/>

</p>

</div>

</div>

</div>

<div id="m_c_part1" style="width: 25%; height: 150px; float: left; margin-top: 50px;

margin-left: 21px; margin-right: 21px; background: yellow;">

</div>

<div id="Div1" style="width: 25%; height: 150px; float: left; margin-top: 50px; margin-left: 21px;

margin-right: 21px; background: yellow;">

</div>

<div id="Div2" style="width: 25%; height: 150px; float: left; margin-top: 50px; margin-left: 21px;

margin-right: 21px; background: yellow;">

</div>

</div>

</div>

</div>

</div>

</asp:Content>

this is my default page css

#mid_content_part2

{

/* background-image: url('../images/Volunteercommunity.jpg');

background-repeat: no-repeat;

background-size:

-moz-background-size: 100% 100%; /* Old Firefox */

/* -webkit--background-size: 100% 100%; /*chrome*/

}

.latest_new_article{ text-decoration:none; font-size:12px;}

#mid_content_part1{ border :1px solid #cde6ff;

border-radius:5px 5px 5px 5px;

-moz-border-radius:5px 5px 5px 5px; }

HTML : Image width full page ?

how i will use array in java script

rajRana Thakur

how to height and width maintenance in html

Answers (0)