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>
Related
I have arranged the anchor tag with text with borders.
I want to make the text to center inside the block.
I have tried padding, margin left, float but nothing is working.
body {
background-color:black;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.title{
height: 17%;
width: 100%;
margin: 0%;
text-align: center;
font-size: 2rem;
color: white;
}
.subjects{
color: white;
width: 28%;
height: 7%;
border: 2px solid white;
font-size: 2rem;
border-radius:20px;
margin-top: 86px;
margin-left: 8px;
text-align:center;
vertical-align: middle;
}
.maths{
margin-left: 24%;
margin-top: 41px;
}
.maths a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 140px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px 103px;
padding-right: 206px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
.chemistry{
margin-left: 24%;
margin-top: 41px;
}
.chemistry a{
text-decoration: none;
color: white;
border: 2px solid white;
padding: 4px;
padding-right: 169px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="title">
<h1>Syllabus</h1>
</div>
<div class="subjectsList">
<div class="subjects">
Syllabus
<span class="triangle"></span>
</div>
<div class="maths">
<a href="mathsinfo.html" target="_blank">
<!--<img src="images/maths.jpg" height="50px" width="50px" alt="Mathematics Icon">-->
Mathematics</a>
</div>
<div class="physics">
Physics
</div>
<div class="chemistry">
Chemistry
</div>
</div>
that physics text must be at middle.Can anyone help me out to solve this problem.
Just change the padding (left and right padding to half of what you had for right padding):
.physics{
margin-left: 24%;
margin-top: 41px;
}
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 103px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
}
<div class="physics">
Physics
</div>
remove padding-right:206px; add text-align:center
.physics a{
text-decoration: none;
color: black;
border: 2px solid black;
padding: 4px 0px;
font-size: 2rem;
border-radius: 20px;
cursor: pointer;
vertical-align:middle;
display: inline-block;
text-align:center;
}
remove margin-left from .physicsc and padding-right from .physics a and set
.physics {
text-align: center;
}
.physics a {
width:30%; // or anything you need
}
Also check out centering guide.
I tried to round the corners on this div box that I created and it doesn't work. Tested this out on Chrome, IE, Firefox and no go. I am not too fluent in CSS and DIV. So if you can see my problem, please help me.
Code CSS:
.side-nav-menu{
width: 100%;
border-radius: 10px;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
margin-bottom: 0;
padding: 7px 0 7px 7px;
}
.side-nav-menu ul{
list-style-type: none;
margin: 0;
padding: 0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
margin-bottom: 0;
}
.side-nav-menu ul li{
padding-bottom: 0px;
border-bottom: 1px solid #c0c0c0;/
}
.side-nav-menu ul li a{
font-size: normal 1.1em;
font-weight:bold;
color: #777777;
background: #ffffff;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 7px;
text-decoration: none;
}
.side-nav-menu ul li a:hover{
color: #777777;
background: #F7F7F7;
}
HTML
<div class="side-nav-menu">
<h1>Sub-Categories</h1>
<ul>
<li>Air Sampling Pumps</li>
<li>Dust Monitors</li>
<li>Flame Ionization Detectors</li>
<li>Photoionization Detectors</li>
<li>Ventilation Blower</li>
</ul>
</div>
https://jsfiddle.net/pssz0xv0/
Child elements wont inherit round corners from their parents. You will have to apply a border radius to the top element 'h1' and bottom element, the last 'a'.
https://jsfiddle.net/pssz0xv0/5/
.side-nav-menu h1{
border-radius:10px 10px 0 0;
}
.side-nav-menu ul li:last-child a{
border-radius: 0 0 10px 10px;
}
border-radius: 10px
On .side-nav-menu ?
.side-nav-menu{
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
//margin-bottom: 0;
margin: 0;
padding: 7px 0 7px 7px;
}
https://jsfiddle.net/alireza_safian/pssz0xv0/9/
I've created a button but I'd like to align it within a container div so it looks like:
My code is:
body {
background-color: black;
}
.buttoncontainer {
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
#button2:hover {
background-color: #feb73b;
}
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 20px;
}
HTML
<div class="buttoncontainer">
start a free trial
</div>
Link to Fiddle
Any advice?
Apologies for not posting the links as pictures, I do not have enough reputation yet.
Remove margin-top: 20px; from your #button2 CSS
See the fiddle
Thus the CSS would be like
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
/* margin-top: 20px; */
}
UPDATE
See the updated fiddle
I've changed the padding in the css as padding: 14px 32px;. So it gets centered.
In button2' style :
Remove margin-top
Set display as block
Then :
width:100%;
height:100%;
box-sizing: border-box;
Fiddle : http://jsfiddle.net/by3pe47d/7/
So what I did was swap the id's and class and I added the button 2 class to the html.
I added a position: relative; attribute to the container so the insides would stay inside.
Also if you want to change the position of it like left, right, etc. you can.
I also changed the top margain to 2px instead of 20px
http://jsfiddle.net/by3pe47d/10/
Html-
<div id="buttoncontainer">
<div class="button2">
start a free trial
</div>
</div>
Css-
body {
background-color: black;
}
#buttoncontainer {
position: relative;
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
.button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 2px;
}
.button2:hover {
background-color: #feb73b;
}
Large Update
Saw the image that was removed and made a thing that mimics it. It will stay formatted even if you use the left, right, etc. attributes.
http://jsfiddle.net/by3pe47d/11/
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
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..