Click here to Skip to main content
15,170,020 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello I am a game developer and new to web development And I have started making my own static site but I am facing a couple of problems

here the zoom value is 100% and it works perfectly
100% ZOOM VALUE PICTURE


Here the zoom value is 190% as you can see some of the menu elements are gone

190% ZOOM VALUE PICTURE

Now my final problem is the HOME button has a background and a border but the HOME text is not centered I want to fix the background-color and the border so the text can be centered inside it.

site is sadeqrasheed.com test and you can inspect the elements to see my `HTML/CSS`

HTML CODE
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HOME</title>
<link rel="stylesheet" href="des.css">

</head>

<body>
<header class="header">
<div class="logo">
SADEQ<span>rasheed</span>
</div>

<nav class="main-nav">
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SAMPLES</a></li>
<li><a href="#">HIRE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">DRUSKERS</a></li>
</ul>
</nav>
<img class="path" src="img/Path.png">
</header>

<section>

</section>

</body>
</html>


css style sheet is :
CSS
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,700,600,400italic);
/* CSS Document */

body {
	font-family: 'Open Sans', sans-serif;
	margin:0;
	}
.header{
    width:100%;
	height:80px;
	background-color: #76c7c0;
	position:relative;
	}	
	.path {
		position:absolute;
		bottom:0px;
		width: 100%;
		}
	.logo {
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	position:absolute;
	left :140px;
	top:20px;
	}
	.logo span{
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 25px;
	font-weight: 400;
	line-height: 30px;
		}
		/*naaav*/
		.main-nav{
			width:100%;
			}
		
		.main-nav ul{
			list-style:none;
			position:absolute;
			top:18px;
			left :500px;
            width:750px;

			}
		.main-nav li {
			float: left;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 15.6px;
	margin-right:35px;
			}
		
		.main-nav li a {
			text-decoration:none;
				color: #ffffff;

			}
			.active {
			    height: 30px;
				width: 70px;
				border-bottom: 4px solid #5B9A94;
				border-radius: 5px;
	            background-color: #62A29E;
				}
Posted
Comments
   
Why don't you use Bootstrap?
Sadeq Rasheed 14-Dec-14 6:31am
   
well i am great with bootstrap i learned it instead of making my own CSS but now i need to be better in CSS !
   
Then just apply bootstrap and inspect in Devloper tool to know what CSS and how they are exactly applied to make controls appear perfectly on very screen.
Sadeq Rasheed 14-Dec-14 14:14pm
   
already done that :D but thanks for the tip
Chubby Ninja 14-Dec-14 5:47am
   
Can I ask what the purpose of checking 190% zoom is for? If you are concerned about users wanting larger text I would recommend having controls on site for that. That way you can still constrain certain parts of your site.

1 solution

You can do it as following:


In your css:

In the following, add two more properties
CSS
.main-nav li {
    padding:5px;
    text-align:center;
}



In the following, change property:
CSS
.active{
height:20px;
}



And as @Tadit Dash said, it is recommended to use bootstrap.
   
Comments
Sadeq Rasheed 14-Dec-14 10:07am
   
that didn't solve it all
still please enter the site HERE , and please zoom to 190% or more then move to the right and notice that the background color didn't stretch ! why ? although the width is 100% !
Ishpreet Kaur 14-Dec-14 23:07pm
   
Ok, now I understood, what your requirement. I gave solution for only one thing that is to center the HOME text.
First, I didn't understand why you give 190% resolution. Now. I understood.
Ishpreet Kaur 14-Dec-14 23:27pm
   
For this, It is better to use bootstrap. Bootstrap will do most of things for you. You just have add bootstrap css and js file. And Everything will be easy to do.
Sadeq Rasheed 17-Dec-14 14:36pm
   
i used media quires and JQuery and made responsive am weak with CSS because i skipped it and learned bootstrap

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900