1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need Help In CSS Screen Resolution

Discussion in 'CSS' started by xcd125, May 12, 2011.

0
  1. #1
    Hello, I am a newbie in web designing. For For the first time i've planned to code a very simple looking layout and i choosed to code a google.com layout. My screen resolution is 1336*768 (Home pc) and 800*600 (at college), I've coded the layout at home and it was perfect in my screen when i took that to the college and viewed in their screen the buttons are looking like attached and some texts have been misplaced.

    Here is my script
    
<!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>
<style type="text/css">
body {
	background-color:#FFFFFF;
	margin:0px;
	overflow-y:scroll;
}
/*=========================Main navigation============================*/
.menu ul {
	word-spacing:7px;
	padding-left:1%;
}
.menu ul li {
	display:inline;
	list-style:none;
	margin-bottom: 2px solid #6CF;
	line-height:25px;
}
.menu ul li a {
	color:#06F;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	text-decoration:none;
	font-weight:500;
}
.menu ul li a:hover {
	text-decoration:underline;
}
/*=========================Navigation current page============================*/
a.active {
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	color:#222;
	font-weight:bold;
}
#logo {
	top:143px;
	margin-left:41%;
	position:absolute;
	border:0px;
}
#logo h1 {
	margin-left:77%;
	position:relative;
	color:#555;
	font-size:15px;
	line-height:0px;
	font-family:Arial, Helvetica, sans-serif;
}
/*=========================Search box============================*/
#search {
	top:250px;
	margin-left:29%;
	background: -moz-linear-gradient(top,  #DDD,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DDDDDD', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DDDDDD', endColorstr='#FFFFFF')";
	background: -webkit-gradient(linear, left top, left bottom, from(#DDDDDD), to(#FFFFFF));
	position:absolute;
	border:1px solid #BBB;
	height:38px;
	width:508px;
	color:#AAA;
	padding-left:5px;
}
/*=========================Search tools============================*/
.search_tools ul {
	margin-left:65%;
	padding-top:191px;
}
.search_tools ul li {
	list-style:none;
}
.search_tools ul li a {
	color:#06F;
	font-size:12px;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
}
.search_tools ul li a:hover {
	color:#06F;
	text-decoration:underline;
}
/*=========================Search buttons============================*/
.google_search {
	background: -moz-linear-gradient(top,  #FFFFFF,  #DDD);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD')";
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
	height:15px;
	width:95px;
	text-align:center;
	padding:12px;
	color:#888;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	border:1px solid #AAA;
	top:300px;
	position:absolute;
	margin-left:37%;
	text-decoration:none;
}
.google_search:hover {
	background: -moz-linear-gradient(top,  #FFFFFF,  #CCCCCC);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC')";
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
}
.google_search:active {
	background: -moz-linear-gradient(top,  #DDD,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF')";
	background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF));
	text-decoration:none;
}
.lucky_search {
	background: -moz-linear-gradient(top,  #FFFFFF,  #DDD);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DDDDDD')";
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
	height:15px;
	width:115;
	text-align:center;
	padding:12px;
	color:#888;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	border:1px solid #AAA;
	top:300px;
	position:absolute;
	margin-left:48%;
}
.lucky_search:hover {
	background: -moz-linear-gradient(top,  #FFFFFF,  #CCCCCC);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCCCCC')";
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CCCCCC));
}
.lucky_search:active {
	background: -moz-linear-gradient(top,  #DDD,  #FFFFFF);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CCCCCC', endColorstr='#FFFFFF')";
	background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#FFFFFF));
}
/*=========================Language settings============================*/
#language ul {
	margin-left:21%;
	padding-top:80px;
}
#language ul li {
	list-style:none;
	display:inline;
}
#language ul li a {
	color:#06F;
	text-decoration:none;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
#language ul li a:hover {
	color:#06F;
	text-decoration:underline;
}
/*=========================Google's Services============================*/
#services ul {
	margin-left:32%;
	color:#AAA;
}
#services ul li {
	list-style:none;
	display:inline;
}
#services ul li a {
	color:#06F;
	text-decoration:none;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
#services ul li a:hover {
	color:#06F;
	text-decoration:underline;
}
/*=========================Footer Copyright============================*/
#copyright ul {
	margin-left:28%;
}
#copyright ul li {
	list-style:none;
	display:inline;
}
#copyright ul li a {
	color:#06F;
	text-decoration:none;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
#copyright ul li a:hover {
	color:#06F;
	text-decoration:underline;
}
a#copyright {
	color:#AAA;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
}
#background-image a{
	color:#06F;
	padding-left:1%;
	text-decoration:none;
}
#background-image a:hover {
	text-decoration:underline;
	color:#06F;
}
</style>
</head>
<body>
<div class="menu">
	<ul>
    	<a class="active"><li>Web</li></a>
        <li><a href="#">Images</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Orkut</a></li>
        <li><a href="#">Gmail</a></li>
        <li><a href="#">Maps</a></li>
        <li><a href="#">Translate</a></li>
        <li><a href="#">Moreâ–¼</a></li>
        <ul style="float:right; padding-right:30px;">
        <li style="text-align:center; word-spacing:0px;">&nbsp;<a href="#">iGoogle</a></li>
        <li style="text-align:center; word-spacing:0px;">&nbsp;<a href="#">Search Settings</a></li>
        <li style="text-align:center; word-spacing:0px;">&nbsp;<a href="#">Sign in</a></li>
    </ul></ul>
</div>
<div id="logo">
<a href="#"><img src="http://i56.tinypic.com/10ni54g.jpg" alt="google.com" >
</a><h1>india</h1></div>
<input type="text" name="Search" id="search" title="search" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/>
<div class="search_tools">
	<ul>
    <li><a href="#">Advanced Search</a></li>
    <li><a href="#">Search tools</a></li>
    </ul>
</div>
<a href="#"><div class="google_search">Google Search</div></a>
<a href="#"><div class="lucky_search">I'm Feeling Lucky</div></a>
<div id="language">
<ul>
Google.co.in is offered in:
<li><a href="#">Hindi</a></li>&nbsp; &nbsp;
<li><a href="#">Telegu</a></li>&nbsp; &nbsp;
<li><a href="#">Bengali</a></li>&nbsp; &nbsp;
<li><a href="#">Marathi</a></li>&nbsp; &nbsp;
<li><a href="#">Tamil</a></li>&nbsp; &nbsp;
<li><a href="#">Gujarati</a></li>&nbsp; &nbsp;
<li><a href="#">Kannada</a></li>&nbsp; &nbsp;
<li><a href="#">Malayalam</a></li>&nbsp; &nbsp;
<li><a href="#">Punjabi</a></li>&nbsp; &nbsp;
</ul>
</div><br />
<div id="services">
<ul>
<li><a href="#">Advertising Programs</a></li>&nbsp; &nbsp; &nbsp;
<li><a href="#">About Google</a></li>&nbsp; &nbsp; &nbsp;
<li><a href="#">Go to google.com</a></li>&nbsp; &nbsp; &nbsp;
</ul>
</div><br />
<div id="copyright">
<ul>
<a id="copyright">&copy; 2011 -</a>
<li><a href="#">Privacy</a></li><a id="copyright"> | Designed By Santhosh and Karthik | Coded By: Karthik</a>
</ul>
</div><br />
<div id="background-image"><a href="#">Change background image</a></div>
</body>
</html>
    Code (markup):
    Where have i made the mistake? What should i do to make this fit in all kind of screen resolution?
     
    xcd125, May 12, 2011 IP
  2. smashylee

    smashylee Peon

    Messages:
    79
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Could you provide some screen shots?
     
    smashylee, May 18, 2011 IP