CODEWITHSUNDEEP
htmlcss
Hugh Chalmers
Hugh Chalmers

Reputation: 43

HTML & CSS Nav bar error

I'm doing a school project where I have to make a navigation bar in HTML & CSS. I have the following code, but it's not as responsive as I'd like it to be.

As I make the screen smaller, the text gets closer together. How would I add a fixed space between the p classes or use another way to fix this problem?

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Header</title> <!-- This is the page title -->
    <link href="style.css" rel="stylesheet" type="text/css"> <!-- This adds the stylesheet so that "style.css" can edit this page -->
    <meta content="Hugh Chalmers" name="author"> 
</head>
<body>
    <div class="header"> <!-- This will be the Navigation Bar part of the page. Currently, it is invisible, but the CSS will change that. -->
        <p class="text" id="home">Home</p>
        <p class="text" id="about">About Us</p>
        <p class="text" id="contact">Contact Us</p>
        <p class="text" id="products">Products</p>
        <p class="text" id="forums">Forums</p>
    </div> 
</body>
</html>

CSS:

.header {
    position: absolute;
    width: 100%;
    height: 10%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    position: absolute;
}

#home {
    position: absolute;
    left: 5%;
}

#about {
    position: absolute;
    left: 15%;
}

#contact {
    position: absolute;
    left: 27%;
}

#products {
    position: absolute;
    left: 40%;
}

#forums {
    position: absolute;
    left: 53%;
}

Upvotes: 0

Views: 430

Answers (4)

user5373973
user5373973

Reputation:

Replace your CSS styles with these

CSS:

.header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}
.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
}
.header p {
    display: inline-block;
    padding: 0 5px;
}

@media (max-width: 480px) {
  .text {
    font-size: 1em;
    font-weight: 350;
  }
 .header p {
    display: inline-block;
    padding: 4px 0;
  }
}

Upvotes: 0

inisial-A
inisial-A

Reputation: 1

Replace your html and css styles with these :

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: red;
}

ul.topnav li {float: left;}

ul.topnav li a {
    display: block;
    font-size: 30px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li.right {float: right;}

@media screen and (max-width: 400px){
    ul.topnav li.right, 
    ul.topnav li {float: none;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Upvotes: 0

xort
xort

Reputation: 347

You shouldn't use position:absolute to do this, you can use display:inline-block on the p elements.

.header {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    background-color: red;
}

.text {
    font-family: font-family: 'PT Sans',sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    text-align:center;
    padding: 5px;
}

You don't have to style every individual p.

JSFiddle

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21211

If your navigation bar is supposed to represent a list of options (which, really, is what a navigation bar does), then it makes a lot more sense semantically to use, well, a list. Since the order doesn't really matter, we'd use a unordered list, <ul>:

<div class="header">
    <ul>
        <li class="text" id="home">Home</li>
        <li class="text" id="about">About Us</li>
        <li class="text" id="contact">Contact Us</li>
        <li class="text" id="products">Products</li>
        <li class="text" id="forums">Forums</li>
    </ul>
</div>

Then, to display then horizontally, it's a simple matter of either floating them, or changing the display mode. I prefer the latter:

.header ul li
{
    display: inline-block;
}

An example with a slightly tweaked version of your CSS: https://jsfiddle.net/L0pb47ms/

Upvotes: 1

Related Questions