I want to add pagination to one of my websites, but I have multiple problems with it, probably due to the fact that I don't have the best CSS skills in the world (they're mediocre at best).
You can see an SSCCE of my problem here: http://jsfiddle.net/rmurzea/qE7Ku/3/
1). To make the margin-bottom rule work, I had to add it to the pagination a class. If I add it directly to the pagination class, it doesn't work. Why ?
2). The content a:hover property has a text-decoration: underline rule. I can't seem to override it in pagination a:hover. How can I do it ?
3). I want that block of color and its text on the next line, but specifying a display: block rule doesn't seem to work.
Can anyone please help me with these problems ? Thank you in advance.
1) it works
.pagination {
margin-bottom: 20px;
}
2) Use !important in your css
.pagination a:hover {
text-decoration: none !important;
background-color: #5D4137;
color: #FFFFFF;
}
3) Replacing your p tag by div should work but it didn't, however I used a div with clear: both and it worked..
Here is your jsfiddle updated
Related
How set text-decoration to none in react of the link child text?
In my case this text with the 'preview-title' and 'preview-slogan' class.
I tried set it in app.css
.preview-title, .preview-slogan {
text-decoration: none;
}
As well i did that to a tag in index.css
a {
text-decoration: none;
}
Also attempted textDecorationStyle
to the element
<div className='preview-title' textDecorationStyle="none">
But that doesnt work too
In devtool we see the style is applied through .css but at the page it still with underline
Please try the below-given CSS code hope it will help you. You have to set !important because you are trying to override the pre-defined style of the particular element.
.preview-title{
text-decoration: none !important;
}
Hope it will help you in solving your issue.
Thanks.
Found out, it must be placed text-decoration: none in app.css, not in index.css.
I created a div with "commonDiv" id (example), then is create multiple divs inside it, div, div in divs etc. All divs contains button(s). I want to add a common style for the buttons. I'd like to add a css only one settings for it.
I tried the following but it's not worked:
div#commonDiv .button{
background-color: #4CAF50;
border: none;
color: white;
}
What's the right way?
Well the best way is mentioning class for all of your <div>s and then adding style in the CSS code using your class.
.your_class_name {write any style you want for all of them !}
Try it this way:
div#commonDiv button{
background-color: #4CAF50;
border: none;
color: white;
}
I removed the period before .button.
The rules you declared didn't match the <button> tag but any element that has class "button"...
If it doesn't solve your issue feel free to leave a comment.
You can see a very good document about CSS selectors here. And if your buttons have not any class may be this code fix your problem:
div#commonDiv button{
...
}
I figured out the solution which is the following: div#commonDiv input[type=button]
I cant change the colour of navbar elements elements when working with bootstrap. Every other style like font size, font weight etc works but the colour doesn't change. I've tried to style the hyperlinks within the list elements too but it doesn't change anything. Every other style seems to be working fine. It worked when I changed it in the actual bootstrap.css file but that was a little inconvenient finding that particular line of code first and then changing it the style for it. It looks like my custom css fails to override the default bootstrap css when it comes to changing the colour property in navbar. Any idea why? Thanks
Here's the code:
.nav li {
color: red;
}
Just check in your Head tag; that you have mentioned your main css file after bootstrap link.
Might be this will be the one case.
Else post your code ; i will figure out the problem.
tyr this way
.navbar-default .navbar-nav > li > a{
color:red
}
Try this :
.navbar-nav>li>a{
color:red;
}
or this
.navbar-default .navbar-nav>li>a{
color:red;
}
Try changing the code to:
.nav li {
color: red !important;
}
I want to add the href of a link after the link using a pseudo-element but not keep the parent's text-decoration. The code below shows "a" and "a:after" having different text-decoration.
a
{
text-decoration: none;
color:#000000;
}
a:after
{
content: attr(href);
color:#999999;
text-decoration: underline;
padding-left: 10px;
}
Even though the text-decoration is set differently both "a great link" and "www.stackoverflow.com" have the same text-decoration. (See below)
a great link wwww.stackoverflow.com
Changing the text-decoration of the pseudo-element doesn't work as it's specificity is 1. The only way I can solve the problem is by adding a span to the link itself.
.underline-kludge
{
text-decoration:underline;
}
<span class="underline-kludge">a great link</span> wwww.stackoverflow.com
I'm not happy with this solution. Is there a better way? Do I have to add spans to links to solve this problem?
EDIT - EDIT - EDIT
I would like like the pseudo class (a:after) to have a different text-decoration than the parent. I can't do an over-ride of the parent text-decoration using css alone. The only way I see how to do it is by adding a span which I would rather not do.
This is actually a really good question - it stumped me for a while.
Simply set display:inline-block on the :after pseudo element, therefore allowing text-decoration:none to take effect; and thus not be overwritten.
Working jsFiddle here
See a example without display:inline-block - you will notice the problem.
I'm working on a website: http://www.allaboutwinecellars.com
And on one of the galleries (the Accesory page) there are blue lines between the pictures and I don't know why, the layout is exactly the same as the first page.
Can anyone figure out why those lines are there?
Here is the first page (the correct one): http://allaboutwinecellars.com/gallery.html
Here is the second page (the one with blue lines): http://allaboutwinecellars.com/gallery-2.html
Edit: I tried adding outline:none; to my anchor tag CSS rules and it did not fix the problem.
The issue is your anchor tags. You need to explicitly set the text-decoration property. The line that you're seeing is the blue underline representing a hyperlink. It looks like you already have properties defined that alter anchor's behavior. Simply add to it:
a {
text-decoration: none;
outline: none;
}
a { text-decoration: none; }
should fix it
Try this:
a, img{
border:0px;
outline:0px;
}
add this to your css:
#content p a
{
color:#000;
}
It's actually a blue underline.
Use text-decoration: none;.