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 !
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 