I am looking for a way to highlight the chosen page number in pagination using css,
or to make the chosen page number bold.
the pagination php code works fine so I think I should modify the css page.
what should I add here:
body
{
padding:50px;
font-size:0.85em;
font-family:arial;
}
a
{
text-decoration:none;
color:#0080ff;
}
a:hover
{
text-decoration:underline;
}
.info
{
line-height:150%;
width:650px;
overflow:auto;
margin-top:30px;
color:#555555;
}
.msg
{
padding:10px;
border-bottom:dashed 1px #5d478b;
width:450px;
margin-bottom:15px;
}
#pages
{
clear:both;
list-style-type:none;
overflow:hidden;
margin:0;
padding:0;
}
#pages li
{
float:left;
}
#pages li a
{
font-weight:bold;
margin:0 4px;
padding:5px 10px;
border:1px solid #bbb;
display:inline-block;
border-radius:5px;
}
#pages li a:hover
{
text-decoration:none;
color:#ff0080;
}
You are missing information in your post about the html produced for the pagination.
I presume from your CSS that each page link is an anchor within a list item within an element with the id pages. I'm going to assume that the selected anchor has some sort of class on it, let's say "selected". Add something like this to your css:
#pages li a.selected
{
font-weight: bold;
background-color: yellow;
}
Related
I've been working on my donation website and I've come to find an issue where the default Buycraft css is taking over the css that I'm writing. I'm extremely new to css and I don't plan on doing it much in the future but for now I need help.
When I inspect element my navbar it gives me a few variables for .navbar .nav > li > a such as a color and a text shadow. I've tried to re-write the code for the text and it's to no avail. I copied it exactly like what inspect element has and I gave the variables !important but nothing changes. If anyone can tell me whats wrong with the navbar button text please help me out.
My website.
Code:
#import "http://fonts.googleapis.com/css?family=Oswald:400,300";
body {
background:url(http://i.imgur.com/tYtIxao.jpg?1);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
padding:0;
margin:0;
height:100%
}
.navbar {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
height:80px;
display:block;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar-inner {
background:#11CFD9;
position:fixed;
font-family:"Oswald";
top:0;
left:-5px;
right:-5px;
background-color:#11CFD9;
font-size:x-large;
text-align:center;
display:block;
padding-top:30px;
padding-bottom:30px;
padding-left:5%;
padding-right:20%;
z-index:10
}
.navbar .nav>li>a {
float:none;
padding:10px 15px;
color:#000!important;
text-decoration:none;
text-shadow:0 0 0 #fff!important
}
.nav > li > a {
display:block;
color:#000!important
}
a {
color:#08c;
text-decoration:none
}
.navbar .nav > .active > a,.navbar .nav > .active > a:hover {
color:#fff;
height:auto;
text-decoration:none;
background-color:#11CFD9;
-webkit-box-shadow:inset 0 0 0;
-moz-box-shadow:inset 0 0 0;
box-shadow:inset 0 0 0
}
ul.nav a:hover {
color:#fff!important;
background:#1CDBE6
}
.box-container .basket-dropdown {
padding:20px;
margin-left:-145px;
margin-top:2px
}
.basket-dropdown .checkout {
float:right
}
.checkout {
z-index:9999;
font-family:Oswald;
font-weight:300
}
.row {
margin-left:20px;
margin-right:20px
}
.box-container .checkout {
width:98%!important;
float:none!important
}
.span11 {
width:98%;
float:none!important
}
.box {
background:url();
border:0!important;
margin-top:130px;
position:relative;
padding-right:25px;
padding-left:25px;
width:100%
}
.box-container {
font-family:Oswald;
font-weight:300;
margin-right:5px;
margin-left:5px
}
.box-container .checkout {
width:90%;
position:relative;
float:left;
z-index:0;
top:0
}
.box-container .header {
background-image:url(http://i.imgur.com/PzVJZ4V.png);
background-color:#fff;
border-top-left-radius:1px;
border-top-right-radius:1px;
-webkit-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-border-radius-topright:5px;
-border-radius-topleft:5px;
height:33px;
text-align:left;
text-transform:uppercase;
font-size:25px;
padding-top:20px;
font-family:Oswald;
font-weight:300;
border-radius:5px 5px 0 0
}
.box-container .content {
opacity:.9!important
}
.span7 {
width:60%;
margin-left:20px;
border-radius:10px
}
.span4 {
width:25%;
height:15%
}
.clear-fix {
z-index:9999;
top:0;
opacity:.9
}
.logo {
background:url();
background-repeat:no-repeat;
float:none;
z-index:9999;
position:fixed;
left:25%;
height:0!important;
width:0!important
}
.logo span {
opacity:0;
color:#fff;
font-size:0
}
em {
color:red;
font-weight:700;
font-style:normal
}
/*Spinny Heads*/
.image {
display:block;
text-decoration:none;
-webkit-transition:.5s all ease-in-out;
-moz-transition:.5s all ease-in-out;
-o-transition:.5s all ease-in-out;
transition:.5s all ease-in-out
}
.image:hover {
-webkit-transform:rotate(720deg) scale(1.5);
-ms-transform:rotate(720deg) scale(1.5);
-moz-transform:rotate(720deg) scale(1.5);
-o-transform:rotate(720deg) scale(1.5);
transform:rotate(720deg) scale(1.5)
}
.footer {
height:60px;
border-top:1px solid #000;
background:orange;
bottom:0;
margin-right:0;
margin-bottom:0;
width:100%;
z-index:99999;
position:static;
font-family:"Oswald";
left:-5px;
right:-5px;
background-color:#11CFD9;
color:#000!important;
box-shadow:0 2px 2px 0 rgba(50,50,50,0.24);
text-align:center;
display:block
}
The browser decides which css selector is applied over the others depending on its weight. Usually you will find the term CSS specificity describing this.
In your case the .nav > li > a is interpreted to have a very low weight and is therefore overridden by your default stylesheet.
If you remove the > symbols in those selectors it should still be the same result - since there are no nested a elements in the navigation bar you want to exclude, right?
The selector .nav li a has a bigger weight and should therefore take precedence. If that still does not help, please include the css-selector from your Buycraft css file, which is overriding your selector. So we can look at the specific weight of both in comparison.
Have a look at this answer here for another example.
A little background: the css specificity exists in order to make things like the following possible: Imagine, the links on your website should always be displayed in blue. But in your navigation, they should be black.
a { color: blue; }
.navbar a { color: black; }
Since the second selector is more specific, it takes precedence over the general links-are-blue selector and your navigational links are black.
Hi I was wondering how I can take styles from another class on a hover state in LESS.
At the moment I have:
.language .active {
background:#de1f24;
color:#ffffff;
padding:7px;
text-align:center;
border-bottom: solid 1px #3A3838;
display: inline-block;
border-bottom-left-radius: 4px;
border-bottom-right-radius:4px;
font-weight:bold;
}
.language a {
color:red;
font-weight:bold;
}
&:hover{
&:extend(.language);
}
.fontSize{
font-size:22px;
}
.box{
color:#fff;
width:50px;
height:50px;
background:red;
font-size:14px;
&:hover{ /*This will add Hover effect to .box */
.fontSize; /*This will inherit the style from the .fontSize class*/
background:blue;
}
}
Codepen Demo : http://codepen.io/anon/pen/rHghJ
I am not sure I understood a question. But try using this construction
.language a {
color:red;
font-weight:bold;
&:hover {color:blue;}
}
.language-2 a {
.language a:hover;
}
Hi guys i'm using CSS and i'm still learning div in replace of Table and rows. I'm wondering whenever i attached a background image without background just plain image (transparent background) how come it shows a white background on the website outlook even though its background in photoshop is transparent? how do i remove the white background? please direct me to the right track. Thanks
i tried background-color:transparent; it's not working :(
This is my output image used on css div baclground-image http://postimg.org/image/75t1jgqk3/
THis is the view of image having transparent background in Photoshop http://postimg.org/image/o1jddulcx/
here's my css and html code http://jsfiddle.net/XpCmb/
#charset "utf-8";
/* CSS Document */
body
{
margin:0px;
padding:0px;
}
#container
{
padding:30px;
min-width:1024px;
min-height:768px;
background:#d8e0eb;
border:0px;
margin:0px;
}
#container2
{
width:1000px;
height:730px;
background-color:#FFF;
padding-top:25px;
padding-bottom:15px;
}
#wrapper
{
min-width:800;
min-height:600px;
}
#header
{
width:900px;
height:120px;
background-color:violet;
}
#menubar
{
background-color:#FFF;
width:452px;
height:30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
float:;
}
#content
{
width:1000px;
height:40px;
background-color:#f9f2e0;
}
#contentbody
{
width:1000px;
height:auto;
padding-top:50px;
margin-left:0;
margin-right:0;
background-color:#f9f2e0; /*baclground of content holder body */
padding-bottom:100px; /*adjust the space bottom of content holder text */
}
#contentbodytext
{
margin-left:50px;
text-align:left;
}
ul
{
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li
{
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link
{
text-decoration:none;
} /* unvisited link */
a:visited {text-decoration:none;
} /* visited link */
li:hover
{
background-color:#ffd640;
}
ul#mcolor li:hover > a
{
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
ul#mcolor li.active a
{
color: rgb(25, 25, 25);
background-color: #ffd640;
}
#mcolor li.active {
background: none repeat scroll 0 0 #ffd640 !important;
}
/*FOLLOWS ARE MISCELLENEOUS LIKE DIVS image holder etc. */
/*ul:hover li
{
opacity: 0.5;
}
ul li:hover
{
opacity: 1;
}
nk */
#image1
{
padding-left:50px;
float:left;
}
#p1a
{
padding-left:350px;
}
#introductiona
{
padding-right:50px;
text-align:justify;
text-align:justify;
}
#p1
{
margin-left:50px;
text-align:left;
margin-top:70px;
}
#bulletin
{
float:left;
margin-left:10px;
background-image:url(bulletinboard.jpg);
background-size:550px 260px;
background-repeat:no-repeat;
width:550px;
height:260px;
background-color:#f9f2e0;
}
Your image is saved as a jpg, which does not save transparency. Save your image as a PNG or a GIF with transparency and you should fix your problem.
This is my CSS:
/* Navigation Bar */
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
My expected outcome is that links show like:
Which is the case for most of the elements, however the first link on the linkbar ends up like:
Linkbar code:
<div id="linkBar" class="linkbar">
<ul>
<li>Home</li>
<li>Course</li>
<li>Help</li>
</ul>
</div>
I've made a jsfiddle for this
(on jsfiddle i dont get the problem with the first link in the linkbar, so this implies its a problem with the rest of my code?).
I can solve the issue with the navbar if i just change the css around to be:
#linkBar
{
position: relative;
overflow: hidden;
height:24px;
width:999px;
background:#990033;
}
/* Links */
a:link,a:visited,a:active
{
font-size: 8pt;
font-weight:bold;
color:#990033;
text-decoration:underline;
}
a:hover
{
color:#0000FF;
text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.linkbar li
{
float:left;
}
.linkbar a:link,a:visited
{
font-size: 14px;
display:block;
width:134px;
font-weight:bold;
color:#FFFFFF;
background-color:#990033;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.linkbar a:hover,a:active
{
background-color:#000000;
}
But this then means that the visited normal links text color is white - which is not what I want (as some normal links are on light or white backgrounds).
I've made a jsfiddle for this (visited links being white).
Can anyone see what I'm doing wrong / point me in the direction of how to fix it?
Where you have written .linkbar a:link,a:visited you need to repeat the classname before a:visited
Right now you are actually saying '.linkbar link, and then override all a:visited'
So it should be .linkbar a:link, .linkbar a:visited { .. }
I'm using the Yahoo CSS reset, and all of my CSS uses pixel values rather than relative measures like ems. You'll notice that the bottom right corner of the div containing the form is shifted in Chrome from where it is in FireFox.
Check it out:
http://jsfiddle.net/rhewitt/anMmX/
Chrome:
FireFox
/*header style*/
html{
background:url(../Images/textureslice.png) repeat;
}
body {
font-family:Georgia;
color:#93b9bb;
}
/* Links */
li a{
color:#93b9bb;
text-decoration:none;
}
li a:hover {
text-decoration:underline;
color:#6b8f91;
}
/* Navigation Structure */
#nav {
width:920px;
margin:auto;
text-align:center;
padding-top:120px;
list-style-type:none;
}
#outterBox li{
display:inline-block;
padding:0 50px;
position:relative;
}
#linksLeft{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin:60px 0 0 25px;
padding:5px 0;
}
#linksLeft li ul {
background-color:#93b9bb;
margin-top:10px;
border-radius:6px;
}
#amy {
clear:both;
font-weight:bold;
letter-spacing:6px;
font-size:120%;
}
#talent{
font-size:70%;
}
#logo {
float:left;
background:url(../Images/logocropped.png) no-repeat;
height:134px;
width:160px;
}
#linksRight{
float:left;
border-top:3px solid #93b9bb;
border-bottom:3px solid #93b9bb;
margin-top:60px;
padding:5px 0;
}
/* Subnavigation menu */
#linksLeft li ul li {
display:block;
padding:10px 15px;
text-align:left;
}
#subNav a{
color:#FFF;
}
#subNav {
position:absolute;
left:10px;
top:15px;
z-index:999;
}
#subnavborder {
margin:10px 10px;
border: 6px solid white;
border-radius:6px;
}
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
display:block;
}
The text size for the browser was set > 100% (not page zoom). This caused the rendering to be wonky on my machine and also explains why it couldn't be replicated by others.
I cant replicate the difference either.
Did you clear cache in chrome? Try reloading by shift+f5.
I assume it should look like the second screenshot.
http://jsfiddle.net/xLTE4/
Adjust the buttons css right propperty and it should be fine in both browsers, at least it works on my end.
Also consider maybe doing this layout without everything being positioned absolutely.
#submitBtn{
position:absolute;
right:45px;
top:430px;
width:80px;
}