Jump to content
Please Use CODE Tags

Navbar doesn't shrink with the text.

Underi
By Underi
in Programming
 Share
Posted

I'm trying to create a website but the navbar background is way too big and I don't understand where the problem is. Here is a screenshot and the code:

Spoiler

17fd28fa402f67ff2734e6372cd2d92d.png

Spoiler 


body {
  background-color: #cccccc;
  color: black;
  font-family: Verdana;
}

#navbar {
  width:50%;
  text-align:center;
  margin:auto;
  height:25px;
}
#main {
  width:50%;
  height:750px;
  margin:auto;
  margin-top:160px;
}
#bottom {
  margin-top:700px;
 font-size:10px;
}
li a {
  text-align:center;
  text-decoration:none;
  color:white;
  display:block;
  padding:1px;
  margin-right:20px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:15px;
}
li {
  margin-top:160px;
  text-align:center;
  list-style-type: none;
  float:left;
}
li a:hover{
  background-color:black;
  color:#FFA500;
}
p {
  font-size:12px;
  font-family:Verdana
}
.active {
  background-color:green;
}
ul {
  background-color:#FFA500;
  overflow:hidden;
  margin:0;
  padding:0;
}

 

Spoiler 

<!DOCTYPE html>
<html>
<head>
     <title>Lounais-Suomen Laatuhake Oy</title>
     <meta charset="UTF-8">
     <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body background-color="grey"
background="background.jpg" style="background-repeat: no-repeat;">
  <div id=header>

     <div id="navbar" style="background-color:#FFA500">
     <ul>
         <li><a class="active" href="index.html">Etusivu</a></li>
         <li><a href="palvelut.html">Palvelut</a></li>
         <li><a href="yhteystiedot.html">Yhteystiedot</a></li>
         <li><a href="kalusto.html">Kalusto</a></li>
        </ul>
      </div>
      </div>
     <div id="main" style="background-color:white">
         <img src=""/>
         <p>Lounais-Suomen Laatuhake Oy on haketukseen ja hakkeen kuljettamiseen erikoistunut yritys.</p>
         <p id="bottom" align="right"><i>Päivitetty 25.5.2017</i></p>
     </div>
</body>
</html>

 

 

My stuff:

Spoiler

CPU :  Intel i5 8400 | GPU : MSI GTX 970 Gaming 4GB

 

RAM : 32GB Corsair Vengeance DDR4 @ 3600MHz

 

Mouse : Logitech G502 HERO SE | Keyboard : Mountain Everest Max w/ Cherry MX Brown

 

Headset : Beyerdynamics DT990 Pro 250Ω w/ AT2020USB+

 

Monitor : Acer XF240H @  144Hz

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

bump

My stuff:

Spoiler

CPU :  Intel i5 8400 | GPU : MSI GTX 970 Gaming 4GB

 

RAM : 32GB Corsair Vengeance DDR4 @ 3600MHz

 

Mouse : Logitech G502 HERO SE | Keyboard : Mountain Everest Max w/ Cherry MX Brown

 

Headset : Beyerdynamics DT990 Pro 250Ω w/ AT2020USB+

 

Monitor : Acer XF240H @  144Hz

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
53 minutes ago, Underi said:

I'm trying to create a website but the navbar background is way too big and I don't understand where the problem is. Here is a screenshot and the code:

  Reveal hidden contents

17fd28fa402f67ff2734e6372cd2d92d.png

  Reveal hidden contents 



body {
  background-color: #cccccc;
  color: black;
  font-family: Verdana;
}

#navbar {
  width:50%;
  text-align:center;
  margin:auto;
  height:25px;
}
#main {
  width:50%;
  height:750px;
  margin:auto;
  margin-top:160px;
}
#bottom {
  margin-top:700px;
 font-size:10px;
}
li a {
  text-align:center;
  text-decoration:none;
  color:white;
  display:block;
  padding:1px;
  margin-right:20px;
  text-transform:uppercase;
  font-weight:bold;
  font-size:15px;
}
li {
  margin-top:160px;
  text-align:center;
  list-style-type: none;
  float:left;
}
li a:hover{
  background-color:black;
  color:#FFA500;
}
p {
  font-size:12px;
  font-family:Verdana
}
.active {
  background-color:green;
}
ul {
  background-color:#FFA500;
  overflow:hidden;
  margin:0;
  padding:0;
}

 

  Reveal hidden contents 


<!DOCTYPE html>
<html>
<head>
     <title>Lounais-Suomen Laatuhake Oy</title>
     <meta charset="UTF-8">
     <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body background-color="grey"
background="background.jpg" style="background-repeat: no-repeat;">
  <div id=header>

     <div id="navbar" style="background-color:#FFA500">
     <ul>
         <li><a class="active" href="index.html">Etusivu</a></li>
         <li><a href="palvelut.html">Palvelut</a></li>
         <li><a href="yhteystiedot.html">Yhteystiedot</a></li>
         <li><a href="kalusto.html">Kalusto</a></li>
        </ul>
      </div>
      </div>
     <div id="main" style="background-color:white">
         <img src=""/>
         <p>Lounais-Suomen Laatuhake Oy on haketukseen ja hakkeen kuljettamiseen erikoistunut yritys.</p>
         <p id="bottom" align="right"><i>Päivitetty 25.5.2017</i></p>
     </div>
</body>
</html>

 

 

I'm not 100% sure as I've not coded html/css in a while but is it to do with


li { margin-top:160px; text-align:center; list-style-type: none; float:left;

 

Try changing the margin as 160px seems a little too large.

i74790k, Asus Maximus Vii Ranger, EVGA gtx970 FTW+, 16GB Corsair vengeance, Corsair H105(2xNoctua NF-F12 IndustrialPPC 2000RPM PWM 120mm ), EVGA supernova p1200(remnant from better build), NZXT Phantom 410, Samsung 850 EVO and more :) 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×