Need Help In CSS Screen Resolution

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

  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