CSS webpage

I’ve created a webpage using html & css but the webpage is getting distortedwhile zooming in/out
whats the solution? thank you

It all depends on what is causing the problem - there could be a number of solutions. In order for us to help you, we really need to see the code for this page. Paste it into the edit area, then highlight it and select the </> icon you see above the edit area to format it properly.

1 Like

Welcome to the forums, @iampavankrishna.

It’s always difficult to dianose a problem without seeing the actual code. Do you have a live web page you can link to, so we can see the issue for ourselves?

If not, can you please post either the code or a working example here? (You can find more information about how to do that here.)

Here is my Code : (http://pastebin.com/gnVfJtQf)

HTML:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="home.css"/>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="container">
<div class="logo-header">
	<img src="aac-griet-logo.png">
</div>
<div  class="main">
<div class="logo"><img src="logo.png">
</div>

	<div  class="header">
		
		<ul class="menu"> 
		<li><a href="#s1">News Feed</a></li>
		<li class="active"><a href="#s2">Subjects</a>
		<ul class="submenu">
		<li><a href="#">Subject 1</a></li>
		<li><a href="#">Subject 2</a></li>
		<li><a href="#">Subject 3</a></li>
		<li><a href="#">Subject 4</a></li>
		<li><a href="#">Subject 5</a></li>
		</ul>
		</li>
		<li><a href="#">Faculty</a></li>
			<li><a href="#">About Us</a></li>
				<li class="menu4"><a href="#">Login</a>
  	        		<ul class="submenu4">
               			<li>
                   	   	 	<div class="row">
                        		<div class="col-md-12">
                             		<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
                                  		<div class="form-group">
                                      		<label class="sr-only" for="exampleInputEmail2">Email : </label><br/>
                                      		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
								 		</div>
                                	 	<div class="form-group">    
                                      		<label class="sr-only" for="exampleInputPassword2">Password : </label><br/>
                                      		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
                                  		</div>
                                  		<div class="form-group">
                                      		<div class="cbtn"><button type="submit" class="btn btn-success btn-block">Sign in</button></div>
                                 		</div>
                            		</form>
                        	    </div>
                   		   </div>
              	 	  </li>
           	 	  </ul>
       	 	   </li>
		  </ul>
	</div>
</div>
	</div>
</body>
</html>

CSS:

*{
	margin: 0 auto;
	padding:0px;
}

.menu, .menu ul {
	list-style: none;
	padding-right: 100px;
	margin: 0 auto;
	float: right;
	}
	.menu {
	height: 58px;
	float: right;
	z-index: 4;
	}
	.menu li {
	/*background: -moz-linear-gradient(#bdc3c7, #bdc3c7);
	background: -ms-linear-gradient(#bdc3c7, #bdc3c7);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bdc3c7), color-stop(100%, #bdc3c7));
	background: -webkit-linear-gradient(#bdc3c7, #bdc3c7);
	background: -o-linear-gradient(#bdc3c7, #bdc3c7);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdc3c7', endColorstr='#bdc3c7');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bdc3c7', endColorstr='#bdc3c7')";
	background: linear-gradient(#bdc3c7, #bdc3c7);*/
	background: -moz-linear-gradient(#ecf0f1, #ecf0f1);
	background: -ms-linear-gradient(#ecf0f1, #ecf0f1);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ecf0f1), color-stop(100%, #ecf0f1));
	background: -webkit-linear-gradient(#ecf0f1, #ecf0f1);
	background: -o-linear-gradient(#ecf0f1, #ecf0f1);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ecf0f1', endColorstr='#ecf0f1');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ecf0f1', endColorstr='#ecf0f1')";
	background: linear-gradient(#ecf0f1, #ecf0f1);
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	min-width: 160px;
	}
	.menu > li {
	display: block;
	float: left;
	position: relative;
	width: 193px;
	}
	.menu > li:first-child {
	border-radius: 5px 0 0;
	}
	.menu a {
	padding-left: 15px;
	border-left: 3px solid rgba(0, 0, 0, 0.8);
	color: #808080;
	display: block;
	font-family: 'Lucida Console';
	font-size: 18px;
	line-height: 54px;
	padding: 0 25px;
	text-decoration: none;
	color: red;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	text-transform: uppercase;
	}

.menu li:hover {
	background-color: White;
	background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
	background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
	background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
	background: -o-linear-gradient(#1c1c1c, #1b1b1b);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
	background: linear-gradient(#1c1c1c, #1b1b1b);
	border-bottom: 2px solid #222222;
	border-top: 2px solid #1B1B1B;
	}
	.menu li:hover > a {
	border-radius: 0 0 0 5px;
	border-left: 3px solid #C4302B;
	color: #C4302B;
	}

/* submenu styles */
	.submenu {
	left: 0px;
	max-height: 0;
	position: absolute;
	top: 100%;
	z-index: 0;
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-ms-perspective: 400px;
	-o-perspective: 400px;
	perspective: 400px;
	}
	.submenu li {
	opacity: 0;
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	-webkit-transition: opacity .4s, -webkit-transform .5s;
	-moz-transition: opacity .4s, -moz-transform .5s;
	-ms-transition: opacity .4s, -ms-transform .5s;
	-o-transition: opacity .4s, -o-transform .5s;
	transition: opacity .4s, transform .5s;
	}
	.menu .submenu li:hover a {
	border-left: 3px solid #454545;
	border-radius: 0;
	color: #ffffff;
	}
	.menu > li:hover .submenu, .menu > li:focus .submenu {
	max-height: 2000px;
	z-index: 10;
	}
	.menu > li:hover .submenu li, .menu > li:focus .submenu li {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	}

/* CSS3 delays for transition effects */
	.menu li:hover .submenu li:nth-child(1) {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
	}
	.menu li:hover .submenu li:nth-child(2) {
	-webkit-transition-delay: 50ms;
	-moz-transition-delay: 50ms;
	-ms-transition-delay: 50ms;
	-o-transition-delay: 50ms;
	transition-delay: 50ms;
	}
	.menu li:hover .submenu li:nth-child(3) {
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	transition-delay: 100ms;
	}
	.menu li:hover .submenu li:nth-child(4) {
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
	}
	.menu li:hover .submenu li:nth-child(5) {
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
	}
	.menu li:hover .submenu li:nth-child(6) {
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
	}
	.menu li:hover .submenu li:nth-child(7) {
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
	}
	.menu li:hover .submenu li:nth-child(8) {
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-ms-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	transition-delay: 350ms;
	}
	.submenu li:nth-child(1) {
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-ms-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	transition-delay: 350ms;
	}
	.submenu li:nth-child(2) {
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
	}
	.submenu li:nth-child(3) {
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
	}
	.submenu li:nth-child(4) {
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-ms-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
	}
	.submenu li:nth-child(5) {
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
	}
	.submenu li:nth-child(6) {
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	transition-delay: 100ms;
	}
	.submenu li:nth-child(7) {
	-webkit-transition-delay: 50ms;
	-moz-transition-delay: 50ms;
	-ms-transition-delay: 50ms;
	-o-transition-delay: 50ms;

	transition-delay: 50ms;
	}
	.submenu li:nth-child(8) {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
	}





	.submenu4 {
	left: 5px;
	max-height: 0;
	position: absolute;
	top: 100%;
	z-index: 0;
	}
	.submenu4 li {
	padding-left: 10px; 
	padding-top: 10px;
	opacity: 0;
	width: 180px;

	}
	.menu .submenu4 li:hover a {
	border-left: 3px solid white;
	border-radius: 0;
	color: #ffffff;
	}
	.menu > li:hover .submenu4, .menu > li:focus .submenu4 {
	max-height: 2000px;
	z-index: 10;
	}
	.menu > li:hover .submenu4 li, .menu > li:focus .submenu4 li {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	}

/* CSS3 delays for transition effects */
	.menu li:hover .submenu4 li:nth-child(1) {
	-webkit-transition-delay: 0s;
	-moz-transition-delay: 0s;
	-ms-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
	}
	.menu li:hover .submenu4 li:nth-child(2) {
	-webkit-transition-delay: 50ms;
	-moz-transition-delay: 50ms;
	-ms-transition-delay: 50ms;
	-o-transition-delay: 50ms;
	transition-delay: 50ms;
	}
	.menu li:hover .submenu4 li:nth-child(3) {
	-webkit-transition-delay: 100ms;
	-moz-transition-delay: 100ms;
	-ms-transition-delay: 100ms;
	-o-transition-delay: 100ms;
	transition-delay: 100ms;
	}
	
	.submenu4 li:nth-child(1) {
	-webkit-transition-delay: 350ms;
	-moz-transition-delay: 350ms;
	-ms-transition-delay: 350ms;
	-o-transition-delay: 350ms;
	transition-delay: 350ms;
	}
	.submenu4 li:nth-child(2) {
	-webkit-transition-delay: 300ms;
	-moz-transition-delay: 300ms;
	-ms-transition-delay: 300ms;
	-o-transition-delay: 300ms;
	transition-delay: 300ms;
	}
	.submenu4 li:nth-child(3) {
	-webkit-transition-delay: 250ms;
	-moz-transition-delay: 250ms;
	-ms-transition-delay: 250ms;
	-o-transition-delay: 250ms;
	transition-delay: 250ms;
	}

div.cbtn{
	align-content: center;
	margin: 0 auto;
}

div.form-group{
	align-content: center;
	color: white;
}

.submenu4 li:hover{
	color :black;
	background-color: white
}

.btn:hover{
	color:white;
	background-color: green;
	border: 1.5px solid red;
}

div.header{
	padding: 120px 0 0 155px; 
	width: auto;
	z-index: 999;
	height: 58px;
}


div.main{
	width: 100%;
	height: 200px;
	border: 2px solid #B9B9B9;
	z-index: 999;
}
div.logo{
	float: left;
	width: auto;
}

div.logo img{
	padding-top: 7px;
	padding-bottom: 5.5px;
	padding-left: 7px;
	margin: auto;
	width: 160px;
	height: 160px;
	z-index: 2;
	float: left;
}


div.section{
	padding-top: 15px;
	background: -moz-linear-gradient(red, #252525);
	background: -ms-linear-gradient(red, #252525);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, #252525));
	background: -webkit-linear-gradient(red, #252525);
	background: -o-linear-gradient(red, #252525);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
	background: linear-gradient(#292929, #252525);
	color: white
}

div.logo-header img{
	margin: 0 auto;
	position: fixed;
	padding-left: 220px;
	padding-bottom: 80px;
	width: 950px;
	height: 160px;
	z-index: -2;
}

div.container{
}

.menu li:active{
	background: white;
	color: black;
}

I’m not able to put my code here
it says “sorry, new users cannot put more than one image”.

I’ve pasted your code here for you, @iampavankrishna. I don’t know why you should be seeing that error, as you’re not uploading images.

Can you tell me how to fix that distortion ? please

Are you referring to the way that your menu wraps onto another line when you zoom in?

Im not able to fix the postion of any class and not able to get a responsive with different resolution

I’m new to this web designing and im not able to clearly explain my problem
can you please run that code for me and try zoom in/out . please

I’m still trying to understand your problem. When I run your code I see this:

Zoomed in to 125% I see this:

Can you explain how you want it to look/behave?

When I zoom in/out I dont want the menu to get distorted. How do I fix it?

When I zoom out this happens.

That looks normal to me. What do you expect the menu to look like on the page when you zoom out?

Please use a different descriptive word other than “distorted”. Distorted in what way? Describe what “distorted” means to you. What you see and what you would like to see.

The space between the logo(left side) and menu shouldnt move away from each other when i zoom out

What should the space do when you zoom out? or maybe… what do you want the logo and the menu do when you zoom out?

You can create a make-believe screen shot with your graphics program showing what the page with the logo and menu should look like when you zoom out.

Sorry I dont get it. For example : http://www.harvard.edu/ I want it to happen like this website

So you want the menu to stay centred below your logos when anybody zooms in or out?

The reason it currently moves to the right when you zoom out is because you’ve used float:right to position it, which is not the best approach if you want it centred. You also seem to have been using fixed-size padding to position things, which will only work at specific sizes and zoom levels.

2 Likes

Do you have your code on a web site? a test site? If not, please attach the logo image.

Do you have a graphics program that you know how to use? Can you manipulate screen shots?

Please show us how you would like your page to look when you zoom out.

If I wont use float right then my menu is not staying in proper order