登录 | 注册 | FAQ
Anonymous

css menu buttons resize

+ 发表回复

4 篇帖子 分页: 1 / 1


css menu buttons resize

katamail » 周日 9月 21, 2014 2:13 pm

Hi!

I'm a beginner and I'm trying to figure out how to change the size of the buttons on the menu without success, I can only move the "buttons bar" right-left-down-up, and I seem to not be able to find the values that enable me to resize the buttons.



Here is the HTML:

<div class="menu">
<ul>

<li><a href="page1.htm" class="welcome">Welcome</a></li>
<li><a href="page2.htm" class="home">Home</a></li>

</ul>
</div>




and here the CSS:


body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,th,td {margin:0;padding:0}
fieldset,img {border:0}
html {height:100%;margin-bottom:1px}
body {position:relative}
:focus {outline:none}
a {color:#222;text-decoration:none}
a:hover {color:#008cff;text-decoration:underline}
h1, h2, h3, h4, h5, h6 {font-family:Arial, Helvetica, sans-serif;font-weight:bold}
h1 {font-size:300%;color:#000}
h2 {font-size:150%;color:#600}
h3 {font-size:200%;color:#000}
h4 {font-size:175%;color:#000}
h5 {font-size:150%;color:#787878}
h6 {font-size:125%;color:#000}
body {background:url(../images/page_bg.jpg);font-family:Arial, Helvetica, sans-serif;line-height: no-repeat;140%;color:#000;font-size:14px}
div.rapidxwpr {margin:auto;width:860px;background:url(../images/wrapper-bg.png) 0 0 no-repeat}
.fleft {float:left}
.fright {float:right}
.fclear {clear:both}
.inner_copy, .inner_copy a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
div#header {position:relative;height:150px;margin:0}
span#logo, img#logo {width:200px;height:200px;border:0;margin:10px 0 0 0}
div#middle {width:auto;margin:0;clear:both}
div#left {width:222px;position:relative;z-index:10;float:left;padding:0}
div#main {width:auto;background:url(../images/content-top.png) 0 50px no-repeat;margin:0 0 0 222px;padding:109px 0 0 0;z-index:100;position:relative}
div#main_container {background:url(../images/content-bottom.png) 0 100% no-repeat;padding:0 0 59px 0}
div#mainmiddle {margin:0;background:url(../images/content-bg.png) 0 0 repeat-y;padding:10px 59px 0 59px}
div#footer {margin:auto;padding:10px 0 20px 222px;clear:both;color:#baac7e;text-align:center;font-size:12px}
div#footer a {color:#baac7e;text-decoration:none}
div#footer a:hover {text-decoration:underline}
.clearingfix:after {content:".";display:block;line-height:0;clear:both;visibility:hidden}
.clearingfix {display:block}
.floatbox {overflow:hidden}
div.menu {margin:230px 0 0 0}
div.menu ul {padding:0;margin:0 0 0 50px;list-style:none;float:left}
div.menu ul li:hover {margin:2px 0 0 0}
div.menu a {display:block;position:relative;padding:0;overflow:hidden;color:#fff;width:222px;text-indent:-9999px}
div.menu a:hover {text-decoration:none}
div.menu a.welcome {background:url(../images/welcome.png) -5px 0 no-repeat;height:44px}
div.menu a.home {background:url(../images/menu-home.png) -5px 0 no-repeat;height:44px}








is there a way to make the buttons resizable?

Thank you!
Max

最后由 katamail 编辑于 周日 9月 21, 2014 8:24 pm,总共编辑了 1 次

头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm

Re: css menu buttons resize

nanoverso » 周日 9月 21, 2014 6:20 pm

Looks like images are being used as menu captions, you can try keeping these tiny as possible and define the size using CSS width/height or padding properties.
头像

nanoverso

  • 帖子: 253
  • 注册: 周六 5月 10, 2014 12:08 am
  • 地址: Brazil
--
Free VST Plugins Download.

Re: css menu buttons resize

katamail » 周日 9月 21, 2014 8:29 pm

I just need to make the "images.png-buttons in the vertical menu a little wider, I tried most of the padding or px in the CSS-page but I'm not able to find anything..


I also have a couple of jquery "js" files, I have no idea how a js file work, thats is a little over my head :)

thank you for answering
Max
头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm

Re: css menu buttons resize

katamail » 周日 9月 21, 2014 9:17 pm

I was able to fix it by changing the value to a line in the CSS:

div.menu ul {padding:0;margin:0 0 0 20px;list-style:none;float:left}




changing from 50px to 20px did the trick :)

Thank you very much for your time
Cheers
Max
头像

katamail

  • 帖子: 6
  • 注册: 周日 9月 21, 2014 2:00 pm


+ 发表回复

分页: 1 / 1