I have this CSS :
<style>
#web_pagination_number {
float:left;
position:relative;
width:35px;
height:35px;
line-height:35px;
background-color:#111111;
font-family:Arial;
font-size:14px;
color:#ffffff;
text-align:center;
}
#web_pagination_number:hover {
color:#111111;
background-color:#93CF25;
}
#web_pagination_number a {
text-decoration:none;
color:#ffffff;
}
#web_pagination_number a:hover {
text-decoration:none;
color:#111111;
}
</style>
The problem i have it´s when i go over web_pagination_number , change the color of background of this div but no the color of the link , the link color only change when i go over the link
I don´t know how i can fix this
Thank´s , Regards
You need to add :hover to your web_pagination_number id, like this:
#web_pagination_number:hover a {
color: #333;
}
Just add a property display: block on a
Demo
Related
I've been trying to get the overflowing text to go to a new line, to no avail.
In the thumbnails section of my website, the thumbnail title is set to "overflow: hidden":
.thumb_title a {
color:#333333;
line-height:18px;
overflow:hidden;
text-decoration:none;
white-space:nowrap;
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
overflow:hidden;
padding-top:2px;
white-space:nowrap;
width:280px;
font-size:11px;
font-weight:bold;
}
I've read that if the width of the element is set, it will automatically wrap itself.. but the thumbnail_title is already set to 280px. I changed it to max-width but nothing happened. I've also tried adding "word-wrap: break-word" (CSS3), but there was no effect. Any ideas?
Remove white-space:nowrap; That prevents text from going to new lines.
These two selectors have nowrap and need it removed: .thumb_title and .thumb_title a
Fixing this will also change the layout. I recommend this:
.index .module {
display: inline-block;
vertical-align: top;
/* remove float: left */
}
There are few things preventing the wrap to happen.
Here the css changed :
.thumb_title a {
color:#333333;
line-height:18px;
/*overflow:hidden;*/
text-decoration:none;
/*white-space:nowrap;*/
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
/*overflow:hidden;*/
padding-top:2px;
/*white-space:nowrap;*/
width:280px;
font-size:11px;
font-weight:bold;
}
But, you will have another issue with the floating statement , the next image will move right.
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;
}
What would be the best way to add an active class on this css for my menu?
.vertical-nav{
width:200px;
height:auto;
list-style:none;
float:left;
margin-right:40px;
}
.vertical-nav li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
float:left;
}
.vertical-nav li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
I would add it on .vertical-nav li:active { }
this way you can modify both the <li> and the <a> properties
It depends on how you want the 'current' list item to display,
Personally I would always apply to the class to the li, and so it would give you something like:
.vertical-nav li.active {
background-color:#D9A300;
}
and to style the link inside that you would
.vertical-nav li.active a {
color:#000000;
}
I would actually suggest using the term 'current' rather than 'active' as it is easy to misunderstand.
I may of misunderstood what you're requesting.. if i have, let me know and i will amend my answer accordingly.
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 have this css below. Some how my this css's clicked link gets over written by some other css once I click the link. It turns the link color to red. I tried to keep it white in code below but thats not helping. What can I do to get it working
.grey {
background-color:#545154;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #120c12;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.grey:hover {
background-color:#a8a5a8;
}.grey:active {
position:relative;
top:1px;
}
.grey a:visited{
color:white !important;
}
.grey a:link{
color:white !important;;
}
html
Site
The selector for the white color is off. It should be .grey:visited or a.grey:visited.