HTML/CSS header problem

Question

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 13-Dec-14 8:54am

Sadeq Rasheed

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-14 0:27am

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 !

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Dec-14 11:12am

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ishpreet Kaur · Answer 1 · 2014-12-13T19:44:00

Solution 1

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.

Posted 13-Dec-14 19:44pm

Ishpreet Kaur

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