How can I adjust the width of the .TopMenuItem instead of having them stretch to fit 100% window width? I changed .TopMenuGroup width to 100% so that the green background stretches total width.
http://themusicshop.com/aeRntplan.aspx
Here is my CSS:
.TopMenuGroup
{
border: solid 0px #003167;
background-color: #005E20;
padding-bottom: 5px;
padding-top: 5px;
width: auto;
}
.MenuGroup
{
border: solid 0px #003167;
background-color: #005E20;
color: #000000;
font-size: 11px;
}
.MenuGroup td {
color: #FFFFFF;
font-size: 11px;
}
.MenuGroupHover td {
color: #FFFFFF;
}
.MenuItemHover td {
color: #99FF33;
}
td.MenuItemHover {
color: #99FF33;
font-size: 11px;
}
.TopMenuItem
{
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
padding-left: 0px;
padding-right: 0px;
}
.TopMenuItemHover
{
color: #99FF33;
background-color: #005E20;
font-size: 12px;
font-weight: normal;
cursor: hand;
cursor: pointer;
font-family: helvetica, arial, sans-serif;
}
-- leaf menu items
.MenuItem
{
background-color:#EEEEEE;
color:#FFFFFF;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
.MenuItemHover
{
background-color: #005E20;
color: #79FF00;
font-size: 11px;
border: solid 0px white;
cursor: hand;
cursor: pointer;
padding-top: 3px;
padding-bottom: 3px;
}
-- group menu items
.MenuItem td
{
color:#FFFFFF;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
.MenuItemHover td
{
background-color:#FEDF15;
color:#000000;
font-size:11px;
border: solid 0px white;
cursor:hand;
cursor:pointer;
padding-top: 3px;
padding-bottom: 3px;
}
You should do an horizontal list for your top menu, its much simpler.
I made this for you : http://codepen.io/anon/pen/avlAc/
Try to use tables only to present data in rows and columns, not for menus ;)
Related
Disclaimer - I know very little about CSS.
I'm interesting in using jemdoc's CSS (https://jemdoc.jaboc.net/jemdoc.css) with HTML5 exported from emacs org-mode. However I believe emacs org-mode exports a "table-of-contents" rather than a "menu" (which is generated from a separate file with jemdoc), but I would like it if the table of contents could be displayed in the sidebar like the menu. Can this be modified to accept a table of contents? I believe this is the relevant part of the jemdoc CSS.
table#tlayout {
border: none;
border-collapse: separate;
background: white;
}
body {
background: white;
font-family: Georgia, serif;
padding-bottom: 8px;
margin: 0;
}
#layout-menu {
background: #f6f6f6;
border: 1px solid #dddddd;
padding-top: 0.5em;
padding-left: 8px;
padding-right: 8px;
font-size: 1.0em;
width: auto;
white-space: nowrap;
text-align: left;
vertical-align: top;
}
#layout-menu td {
background: #f4f4f4;
vertical-align: top;
}
#layout-content {
padding-top: 0.0em;
padding-left: 1.0em;
padding-right: 1.0em;
border: none;
background: white;
text-align: left;
vertical-align: top;
}
#layout-menu a {
line-height: 1.5em;
margin-left: 0.5em;
}
tt {
background: #ffffdd;
}
pre, tt {
font-size: 90%;
font-family: monaco, monospace;
}
a, a > tt {
color: #224b8d;
text-decoration: none;
}
a:hover {
border-bottom: 1px gray dotted;
}
#layout-menu a.current:link, #layout-menu a.current:visited {
color: #022b6d;
border-bottom: 1px gray solid;
}
#layout-menu a:link, #layout-menu a:visited, #layout-menu a:hover {
color: #527bbd;
text-decoration: none;
}
#layout-menu a:hover {
text-decoration: none;
}
div.menu-category {
border-bottom: 1px solid gray;
margin-top: 0.8em;
padding-top: 0.2em;
padding-bottom: 0.1em;
font-weight: bold;
}
div.menu-item {
padding-left: 16px;
text-indent: -16px;
}
Currently I use something like this to display my org-mode at the top of the HTML5 page (which I also copied from another CSS file).
#table-of-contents {
display: table;
width: 350px;
border: 1px solid #aaa;
margin-top: 3ex;
padding: 10px 10px 10px 0px;
}
#table-of-contents h2 {
border: 0;
text-align: center;
list-style-type: none;
}
I have a problem with my button. When I wish to click on my button, normally the color of the button which is "blue" should change of color in black.
It seems my background color (black) is not whole???
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
I moved most of the CSS from the outer div to the <a> instead and now it behaves as you might expect.
.more-information{
position:absolute;
height: 33px;
width: 158px;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Try this.
.more-information{
position:absolute;
height: 33px;
width: 158px;
background-color: #005dbe;
color: white;
line-height: 33px;
border:none;
padding:7px 0 7px 0;
border-radius:20px;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.more-information a{
color: #f2f2f2;
text-decoration: none;
display: block;
height: 100%;
width: 100%;
}
.more-information:hover{
background-color: black;
color: white;
}
<div class="more-information">Login</div>
Change
.more-information a:hover{
to
.more-information:hover{
I create two classes which have same properties but only one property(width) is different then how to decrease css code?
.login-box button{
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button{
width: 48%;
height: 40px;
background-color:#ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
You can group selectors using a comma (,) separator:
.login-box button,
.add-category-box button {
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button {
width: 48%;
}
In that case, you can give the button a class of .button and make it as a reusable component with different variations.
.button {
width: 48%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.button--full {
width: 100%;
}
.button--outline {
background: transparent;
border: 1px solid #000;
}
And in your HTML you can add the above classes as ingredients:
HTML
<button class="button">Submit</button>
OR
<button class="button button--full">Login</button>
That way, you can reuse the buttons anywhere in your project very easily.
How to change font size for my SMF forum theme? I see percentages which change only some parts of the text, can't find where to change post font, thread font etc...
Please just point me in the right direction, also what does xx%/yy% mean in regards to the font?
/* SMFSimple.com Theme Style */
body
{
background: url(../images/theme/bg.png) #f8f8f8;
font: 78%/130% 'Oxygen',sans-serif;
padding: 0px;
}
a:link, a:visited {color: #4D4D4D;}
a.new_win:link, a.new_win:visited {color: #4D4D4D;}
input, button, select, textarea
{
font: 95%/115% 'Oxygen',sans-serif;
color: #000;
background: #fff;
border: 1px solid #7f9db9;
}
textarea
{
font: 100%/130% 'Oxygen',sans-serif;
}
.smalltext, tr.smalltext th
{
font-size: 0.85em;
font-family: 'Oxygen',sans-serif;
}
.middletext
{
font-size: 0.9em;
line-height: 1em;
font-family: 'Oxygen',sans-serif;
}
.normaltext
{
font-size: 1em;
line-height: 1.2em;
}
.largetext
{
font-size: 1.4em;
}
code.bbc_code
{
display: block;
font-family: 'Oxygen',sans-serif;
font-size: x-small;
background: #eef;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: nowrap;
/* Show a scrollbar after about 24 lines. */
max-height: 24em;
}
.bbc_tt
{
font-family: 'Oxygen',sans-serif;
}
#font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 400;
src: local('Oxygen'), local('OpenSans'), url(../fonttheme.woff) format('woff');
}
#full_header
{
margin: 0 auto;
min-width: 764px;
max-width: 2300px;
}
#bar_social
{
background: rgba(255, 255, 255, 0.7);
height: 50px;
border: 1px solid #e8e8e8;
}
.ss_content_header
{
clear: both;
overflow: hidden;
width: 100%;
padding: 20px 0px;
padding: 20px 0px;
}
.ss_logo
{
width: 48%;
float: left;
margin-top: 10px;
padding-left: 20px;
}
.ss_user_area
{
width: 48%;
float: left;
margin-top: 15px;
}
.table_user
{
border-radius: 5px;
background: rgba(00, 00, 00, 0.7);
padding: 0px 10px;
font-size: 12px;
border: 1px solid #333;
text-shadow: 0px 1px 1px #666;
}
.user
{
color: #f4f4f4;
}
.user a
{
color: #F9BC06;
}
.ss_avatar_pad
{
padding-right: 15px;
}
This line:
font: 78%/130% 'Oxygen',sans-serif;
breaks down to:
font-size: 78%;
line-height: 130%;
font-family: 'Oxygen', sans-serif;
If no font size is given explicitly, the browser's default value is used, which is actually 16px.
I'm currently working on a website.. I've check the css but I can't seem to figure out why this grey line keeps on showing on top of my Visual Studio website website... I'm using the default Site.css present when creating a asp.net website... please help....
my css:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.title
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
(This is based on Blender's answer, I will delete this if Blender will post his answer)
In order to be formal and to have an answer to this question, as what Blender suggested change
margin: 20px auto 0px auto;
to
margin: 0px auto 0px auto;
This solved the issue according to the one who asked the question.