I'm using WordPress for a website.
Here is the link for the website: http://Jamezpearce.byethost7.com
How can I can make the font smaller so can fit more menu bars onto the website?
I really appreciate any help given to me if anyone wants anything else please comment and I will supply it.
I have already tried altering the CSS but don't seem to get anywhere I'm probably doing it incorrectly.
I have added
font-size: 0.75em;
to all the menu CSS I can see and still no joy.
/* Pagenavi */
#pnavigation {
margin: 20px 0px;
}
.wp-pagenavi {
font-size:0.75em;
text-align: centre !important;
margin-left: auto;
margin-right: auto;
}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
text-decoration: none;
background: #42444e!important;
border: 1px solid #212227!important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: centre;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
.wp-pagenavi a:hover {
color: #ffffff;
}
.wp-pagenavi span.pages {
display: none;
}
.wp-pagenavi span.current {
text-decoration: none;
background: #CF5912 !important;
border: 1px solid #993206!important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: center;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
.wp-pagenavi span.extend {
text-decoration: none;
background: #FFD000 !important;
border: 1px solid #E8B900 !important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: center;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
Try and change the font-size. You can change this in the #botmenu or in the #submenu
#botmenu {
font-size: 90%; /*the smaller the percentage, the smaller the text*/
}
OR
#submenu {
font-size: 90%; /*the smaller the percentage, the smaller the text*/
}
If #submenu li a {font-size: .75em;} doesnt work, try adding like this.
submenu li a {
font-size: .75em !Important;
}
You can also use font-size: 100%. The percentage is inherited from the parent, and you can also set 75% or 85%. I recommend you to play a bit in dev tools with this.
Cheers
Some 'coders' might have their opinion but for me I will add a new class with !important
eg;
.wp-mbfontupdate {0.75em !important}
Then add the wp-mbfontupdate class to my menubar's class. This way I can easily go to this line and update new font style later
Related
For some reason my browser with xampp (PHP) isn't giving a response when hovering in this piece of code. how can I solve this to get my text get a different color while hovering over with my mouse?
.headermenu a{
font-size: 18px;
color: #ffffff;
display: inline-block 5px;
background-color: #7f2048;
box-shadow: 0px 0px 50px #888888;
border-radius: 5px;
vertical-align: middle;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 24px;
padding-right: 24px;
margin-bottom: 10px;
text-decoration: none;
font-family:
.headermenu a: hover{
color: #5b5a64;
}
I'm using <div class="headermenu"> and a end-div to get it to work.
In Sublime Text the text hover from .headermenu a:hover{} is white so means not functioning or something i guess.
Complete braces in .headermenu a class css.
.headermenu a{
font-size: 18px;
color: #ffffff;
display: inline-block 5px;
background-color: #7f2048;
box-shadow: 0px 0px 50px #888888;
border-radius: 5px;
vertical-align: middle;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 24px;
padding-right: 24px;
margin-bottom: 10px;
text-decoration: none;
height:50px;
width:50px;
border :1px solid black;
}
.headermenu a:hover {
color: #5b5a64;
}
<div class="headermenu"><a href="" >aaa</a></div>
for some reason thats not solving the hover issue. i have a if else structure that starts the complete php site, i don't know if that can have anything to do with it...?
.headermenu a{
font-size: 18px;
color: #ffffff;
display: inline-block 5px;
background-color: #7f2048;
box-shadow: 0px 0px 50px #888888;
border-radius: 5px;
vertical-align: middle;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 24px;
padding-right: 24px;
margin-bottom: 10px;
text-decoration: none;
height:50px;
width:50px;
border :1px solid black;
}
.headermenu a:hover {
color: #5b5a64;
}
<div class="headermenu"><a href="" >aaa</a></div>
What do I do wrong? As I've understood, this code should make a black background behind the sideMenu-id, but it does not. Why?
CSS:
/* The side menu */
.bg_ #sidemenu {
background-color: black;
height: 20%;
}
.sideMenu li {
list-style-type: none;
float: left;
margin: 0 0 0 20px;
width: 20%;
font-size: 100%;
border: 1px solid black;
text-align: center;
letter-spacing: 5px;
border-radius: 5px;
color: black;
}
/* Menu buttons */
.btn_ a {
color: black;
margin: 5px 5px 5px 5px;
text-decoration: none;
display: block;
}
.hover_btn {
background-color: #CC4545;
}
This is my code: http://jsfiddle.net/RBTT8/183/
Two problems:
Your selector is .bg_ #sidemenu but it should be .bg_ .sideMenu (you use a period for a class, the # is for an ID. And it's case-sensitive.)
Since the list items are floated, the ul element collapses, so to expand it, add overflow:auto;
jsFiddle example
for some reason I am having one heck of a time trying to figure out how to center this silly pricing table in my page using css. Each table has a width of 40%, I've already tried changing the left and right margin to auto using CSS but with no success.
Here is the HTML:
<div id="pricing-table" class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="price">£20</li>
<li>Starter package</li>
<li>15 Projects</li>
<li class="action">Buy Now</li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="price">£60</li>
<li>Intermediate package</li>
<li>20 Projects</li>
<li class="action">Buy Now</li>
</ul>
</div>
Here is the CSS:
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li{
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd){
background-color: #FFFFFF;
}
.pricing-table ul .heading{
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price{
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action{
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a{
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}
I'd like to thank everyone in advance for any help you may provide.
And here's a fiddle for what I have so far.
The <ul> elements are floated to left. In order to align the items horizontally, you could set a proper width on .pricing-table then use margin: 0 auto;
Mind the margins. you have to include the margin of <ul> elements for calculating the width of the .pricing-table element.
However, to get rid of specifying an explicit width for .pricing-table, you could change the display type of the ul elements to inline-block and align the inline elements by using text-align: center; for their parent as follows:
.pricing-table {
text-align: center; /* <-- align the inline(-block) elements horizontally */
}
.pricing-table ul {
display: inline-block; /* <-- display the ul elements as inline-block */
vertical-align: top; /* <-- keep the inline(-block) elements at the top */
/* other styles here... */
}
Working Demo.
There's also a white space between inline-block elements, you might want to consider removing that.
You can also remove the margins from <ul> elements, instead of removing the white space between them.
Updated Demo
Your choice :)
Try to do this:
.pricing-table{
width: 80%;
margin: auto;
}
Or any width you want.
Fiddle Demo
If you can define width in body, then do in CSS as :
body {
width :900px;
margin:auto;
}
Have you tried this? fiddle here
#pricing-table{
width:80%;
margin: auto;
}
Maybe you should add this to your CSS:
body{
text-align:center;
margin:0 auto;
padding:0 auto;
}
.pricing-table {
text-align:center;
margin:0 auto;
padding:0 auto;
width:40%;
}
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 100%; //40% is now 100%
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
Try including this; a fiddle
.pricing-table{
disply:block;
margin-right: auto;
margin-left:auto;
border:1px solid black; //just extra
width:80%; //need to define width to be able to center
}
Try the following CSS if you want them in the middle of the whole screen (centered), with some spacing between the two <ul> elements. Just added a body declaration and changed the margin in .price-table ul, just something different.
body {
width:900px;
margin:auto;
padding-top:150px
}
.pricing-table ul {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin:30px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li {
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd) {
background-color: #FFFFFF;
}
.pricing-table ul .heading {
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price {
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action {
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a {
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I cant for the life of me find out whats wrong with the CSS code, I cant get the font in main <p> to be 20px and can't properly center the address in the footer. I am only allowed to edit css file.
Html file:
http://www.mediafire.com/view/68bcokhw6tb086g/redball.htm
CSS file:
http://www.mediafire.com/view/9rk9dracsz47sn7/pizza.css
CSS code:
/*
New Perspectives on HTML and CSS
Tutorial 4
Case Problem 2
Pizza Style Sheet
Author: Joesph Aguilar
Date: 01/31/2014
Filename: pizza.css
Supporting Files:
*/
/* Display Block Elements */
header, section, aside, footer, nav{
display: block;
}
/* Padding and Margin Style */
*{
padding: 0px;
margin: 0px;
}
/* Body Style */
body{
background-color: red;
font-family: Verdana, Geneva, sans-serif;
}
/* Container Style */
#container{
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
background: white url('redbar.png') repeat-y left top;
}
/*Header Style */
header{
background-color: white;
height: 100px;
}
/* Horizontal Nav Style */
nav.horizontal{
background-color: white;
height: 70px;
width: 100%;
}
nav.horizontal li{
background-color: white;
font-size: 16px;
height: 50px;
line-height: 50px;
width: 180px;
display: block;
float: left;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
nav.horizontal li a{
display: block;
background-color: red;
color: white;
border-radius: 30px / 25px;
-moz-border-radius: 30px / 25px;
-webkit-border-radius: 30px / 25px;
text-decoration: none;
}
nav.horizontal li a:hover{
background-color: (255, 101, 101);
color: black;
}
/* Vertical Nav Style */
nav.vertical{
clear: left;
float: left;
width: 200px;
}
nav.vertical li{
list-style-type: none;
text-indent: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
nav.vertical li a{
color: white;
text-decoration: none;
}
nav.vertical li a:hover{
color: black;
}
/* Section Style */
#main{
background-color: rgb(255, 211, 211);
float: left;
width: 600px;
}
#main > p {
font-size: 20px;
margin: 15px;
}
#main img{
float: right;
margin: 15px;
width: 350px;
border-bottom-left-radius: 350px;
-moz-border-radius-bottomleft: 350px;
-webkit-bottom-left-radius: 350px;
}
/* Coupon Style */
#main div.coupon{
border: 5px;
border-style: dashed;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background: white url('slice.png') no-repeat right bottom;
}
#main div.coupon h1{
color: white;
background: rgb(192, 0, 0);
font-size: 16px;
letter-spacing: 2px;
text-align: center;
height: 25px;
font-variant: small-caps;
}
#main div.coupon p{
font-size: 14px;
text-align: center;
margin: 5px;
}
/* Aside Style */
aside{
float: left;
width: 200px;
}
aside h1{
color: rgb(192, 0, 0);
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
}
aside li{
background-color: rgb(255, 135, 135);
border-radius: 5px;
list-style-type: none;
margin: 10px;
padding: 5px;
}
/*Footer Style*/
footer{
clear: left;
margin-left: 200px;
}
footer address{
border-top-style: 1px solid red top;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
}
The address is centered in the footer. Your problem is that you want the address centered on section#main, and the footer isn't in the section#main, it's in div#container, resulting in an address centered to the whole container.
However, since your aside has a static width of 200px, we can add that as a margin into footer>address, so that it centers the content accordingly.
So, we want on footer address is:
margin-right:200px;
but since we already have
margin-top:25px;
we can just delete that margin-top line and say both with:
margin:25px 200px 0 0;
which is shorthand for margin top 25px right 200px bottom 0 left 0.
Finally, the correct way to post this would be on JSFiddle, it's super easy to figure out, and I put my solution for your problem here:
http://jsfiddle.net/R8Hsv/
All about your font size seems fine, at least I can change it. How do you expect 20px to be?
Had to set a width for your footer, to the same as the main.
footer address{
border-top-style: 1px solid red top;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
width:600px;
}
JSFIDDLE: http://jsfiddle.net/42h96/1/
I have created Html menu as follow
Football
Basketball
Baseball
then my css file is as follow:
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
}
#main-nav a:hover, #main-nav .active
{
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
I am trying to customize it a bit more by adding 30*30 icon of football etc in each corresponding button
i have tried to make every image as a Div and use position to make it in the corresponding button but this solution is fragile and not the best option.
can idea of better solution?
You can try this code:
<div id='main-nav'> Football<div class='icon'></div>
Basketball<div class='icon'></div>
Baseball<div class='icon'></div>
</div>
whit this css:
#main-nav a {
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
position : relative;
}
#main-nav a .icon {
height: 30px;
width : 30px;
background : red;//change this for the img.
position : absolute;
top : 0;
left : 35px;
}
#main-nav a:hover, #main-nav .active {
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
Changing the red background for a background: url(/path/to/image)
Please, take a look at this jsfiddle.
Note: include a <div> intro a <a> it's valid in html5 but not in html 4.01. More info here.
Try this
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 115px;
height: 78px;
vertical-align: middle;
line-height: 78px;
text-align: center;
background:url(http://img6a.flixcart.com/image/ball/4/g/g/vector-x-football-england-100x100-imade784dbrjbdzp.jpeg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
#main-nav a:nth-child(2){
background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/american_football_icon.jpg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
#main-nav a:nth-child(3){
background:url(http://www.iconshock.com/img_jpg/BRILLIANT/sports/jpg/128/archery_icon.jpg) no-repeat 50% 99% #EEEEEE;
background-size:25px
}
DEMO
DEMO UPDATED
try this. your html
<div id="main-nav">
Football
Cricket
Tennis
</div>
css
#main-nav a
{
display: block;
float: left;
margin: 125px 0px 0px 0px;
color: #666666;
border: 1px #C0C0C0 solid;
background-color: #EEEEEE;
font-family: Arial;
font-size: 13px;
font-weight: normal;
font-style: normal;
text-decoration: none;
width: 106px;
height: 78px;
vertical-align: middle;
line-height: 78px;
padding-left:50px;
}
#main-nav a.football{
background:url("http://icons.iconarchive.com/icons/ampeross/qetto/32/icon-developer-icon.png") no-repeat 10px;
}
#main-nav a.cricket{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
#main-nav a.tennis{
background:url("http://icons.iconarchive.com/icons/deleket/mac-folders/32/Blue-Apple-icon.png") no-repeat 10px;
}
#main-nav a:hover, #main-nav .active
{
color: #666666;
background-color: #C0C0C0;
border: 1px #C0C0C0 solid;
}
my fiddle http://jsfiddle.net/ponrajpaul/4VMa4/
or if you want to use same icon for all links, remove all class names from a tags and use like this
<div id="main-nav">
Football
Cricket
Tennis
<div>
#main-nav a{
background:url("http://icons.iconarchive.com/icons/deleket/3d-cartoon/32/Axialis-Icon-Workshop-icon.png") no-repeat 10px;
}
a:nth-child(numbers) will not support in ie6. If you dont need ie old
browsers support, nth-child method is best to you..