CODEWITHSUNDEEP
htmlcss
user2984987
user2984987

Reputation: 7

Buttons filling the entire page?

I've this site: [Removed - problem solved] As you can see, if you look at the navigation bar, buttons don't fill it, thus making it to look ugly. I want to know if there is a way to calculate the button's width in a manner that no matter how many buttons I'll have, they'll always fill the entire page's width, thus only allowing a small stripe below them to be seen. This is the CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}

a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}

.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}

Upvotes: 0

Views: 493

Answers (4)

user2203993
user2203993

Reputation: 83

.navbg {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0;
}
.navbg ul > li {
    display: table-cell;
    width: 1%;
    float: none;
    position: relative;
}
.navbg ul > li > a {
    background-color: #E5E5E5;
    color: #777777;
    font-weight: bold;
    margin-bottom: 0;
    padding-bottom: 15px;
    padding-top: 15px;
    text-align: center;
    display: block;
    padding: 10px 15px;
    position: relative;
}

Upvotes: 0

Will
Will

Reputation: 3044

Just change the li width 

li {
width: 20%;
float: left;
}

Upvotes: 2

Exploring
Exploring

Reputation: 573

Change your code like the following:

 <!DOCTYPE html>
 <!-- WEBSITE DE DUMITROV CRISTIAN -->
 <head>
   <title>Liceul Teoretic Dunarea</title>
   <link rel="stylesheet" type="text/css" href="css/stil.css">
 </head>
 <body>
  <header>
   <h2>Liceul Teoretic Dunarea</h2>
  </header>
 <div class="navbg">
    <ul>
     <li><a href="#">Acasa</a></li>
     <li><a href="#">Proiecte</a></li>
     <li><a href="#">Management</a></li>
    <li><a href="#">Profesori</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

 <footer>
   <div class="footertxt">
   <p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
 </div>
</footer>
</body>

Also add the following CSS:

.navbg ul{width:100%;margin:0 auto;}

Upvotes: 0

T0to
T0to

Reputation: 422

The solution of this problem is in your HTML, you have to put your in your navigation bar.

for the moment you have:

<header>
<h2>Liceul Teoretic Dunarea</h2>
    <ul>
     <li><a href="#">Acasa</a></li>
     <li><a href="#">Proiecte</a></li>
     <li><a href="#">Management</a></li>
     <li><a href="#">Profesori</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
</header>
<div class="navbg">
te
</div>

It should be like that:

<header>
    <h2>Liceul Teoretic Dunarea</h2>
  </header>
    <div class="navbg">
       <ul>
         <li><a href="#">Acasa</a></li>
         <li><a href="#">Proiecte</a></li>
         <li><a href="#">Management</a></li>
         <li><a href="#">Profesori</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
    </div>

Upvotes: 0

Related Questions