1 reply [Last post]
frenchie
frenchie's picture
Offline
Regular
Last seen: 3 years 11 weeks ago
Timezone: GMT-4
Joined: 2011-07-07
Posts: 12
Points: 20

Hi,
I'm doing a website using weebly, here is the address: http://nachobizness.weebly.com.
I'm trying to modify the CSS file so that the top navigation bar looks better, with the buttons spread evenly. I cant find the width property in the CSS, so I would like to know what determines the width of each button, and if there is a way so that the buttons automatically adapt to the width of the bar.

Here is the CSS code:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
}
fieldset{
    border:0;
}
a img{
    border:0;
}
.clear{
    clear:both;
}
 
 
body {
    background: #000000;
    font-family: arial, sans-serif;
    font-size:12px;
    color:#666666;
    height: 100%;
    margin:0;
    padding:0;
}
 
a{
    color: #ec008c;
    text-decoration: none;
}
p {
    line-height: 170%;
    color: #fff;
    font-size: 13px;
    padding: 5px 0px 5px 0px;
}
h1 {
    font-size:30px;
    font-weight:bold;
    color:#ec008c;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
}
h2 {
    font-size:22px;
    font-family: arial, sans-serif;
    color:#ec008c;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
}
 
#wrapper {
    width:960px;
    margin: 0px auto;
}
 
.title{
    width: 960px;
    padding: 30px 0px 30px 0px;
    font-size: 30px;
  font-family:"Stencil";
    color: #fff200;
    font-weight: bold;
  text-align: center;
  line-height: 10px
}
 
#navigation{
    position: relative;
    width: 960px;
    height: 64px;
    z-index: 2;
    padding: 1px 0px 0px 0px;
    background: url(navigationbg.jpg) no-repeat;
}
 
#navigation li{
    float: left;
    height: 64px;
    z-index: 2;
    padding: 0px 2px 0px 0px;
    background: url(activebg.jpg) top right no-repeat;
}
 
#navigation li#active{
    background: url(activebg.jpg) top right no-repeat;
}
 
 
#navigation li a{
    position: relative;
    display: block;
    height: 45px;
    color: #fff;
    float: left;
    z-index: 2;
    padding: 19px 45px 0px 45px;
    font-size: 13px;
    text-decoration: none;
}
 
#navigation li a:hover{
    background: url(hoverbg.jpg) repeat-x;
    text-decoration: none;
}
 
#navigation li#active a{
    background: #3a5984;
    background: url(active.gif) bottom no-repeat;
 
}
 
#header{
    position: relative;
    width: 960px;
    height: 249px;
    z-index: 1;
    margin: -10px 0px 0px 0px;
}
 
.weebly_header{
    background: url(%%HEADERIMG%%) no-repeat;
}
 
#weebly-menus .weebly-menu-wrap { z-index: 5000; position: relative; margin: -10px 0px 0px 0px; border-top: 1px solid #132238; }
 #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
 #weebly-menus .weebly-menu li { float: left; clear: left; width: 163px; text-align: left; }
 #weebly-menus .weebly-menu li a { position: relative; display: block; width: 100%; background: #2f4665; border-top:  none; border-bottom: 1px solid #132238; border-right: none; border-left: none; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #fff; }
 #weebly-menus .weebly-menu li a:hover { background: #3f5f89; color: #fff; }
 
#content{
    width: 904px;
    height:auto !important;
    min-height:400px;
    background: #000000;
    border-bottom: 1px solid #cecece;
    padding: 25px 28px 35px 28px;
}
 
 
#content a{
    color: #26518a;
    font-weight: bold;
    text-decoration: none;
}
 
#footer{
    width: 900px;
    color: #fff;
    font-size: 10px;
    text-align: right;
    background: #000000;
    border-top: 1px solid #fff;
    padding: 30px 30px 30px 30px;
    margin: 0px 0px 20px 0px;
}
 
 
‚Äč

Thank you !

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 5 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

I'm assuming you've found the

I'm assuming you've found the line in the CSS file that corresponds to the LIs in div#navigation?

You're quite right, only the div itself has a width specified. I can't see any generic UL or LI or A selectors that it could be getting a width from.

My guess is, because it's a block element, it's just taking it's content (the text on the buttons), adding your padding/margins specified, and just using an inbuilt default width to calculate a width for it that looks right.

Try adding a width statement in the relevant CSS line and see if it takes effect Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies