I'm using slick.js to create a slideshow. All is working well except the dots. They're showing up, but they're showing up as this weird character string (http://newsinteractive.post-gazette.com/40for10/img/slideshow/weird_chars.png).
My code seems right. What's wrong?
jquery:
$('#slideshow2').slick({
arrows: true,
prevArrow: "<i class='fa fa-2x fa-arrow-circle-o-left'></i>",
nextArrow: "<i class='fa fa-2x fa-arrow-circle-o-right'></i>",
accessibility: true,
adaptiveHeight: true,
dots: true
});
css:
.slick-dots
{
position: absolute;
bottom: 0px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
background-color: white;
}
It is an encoding issue as Mindaugas suggested.
Matheus's solution is misleading, you do not have to download the css file although this works because in the actual .css file the encoding is stipulated.
For instance, I did not download the css and was successful pulling from a CDN simply by adding a charset="UTF-8" attribute to my <link> tag.
Full solution would look like:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" charset="UTF-8" />
meta charset="utf-8" << thats it
You need to download and import Slick's CSS files as following:
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
In my case i needed to go into the slick-theme.css file and remove the IE fix (only using on safari and chrome) and then change the font it was using to use the .ttf not .otf file.
That sorted it out for me.
TO SOLVE THIS ISSUE, JUST GO :
-in, slick-theme.css, go to .slick-dots li button:before, go to, content: 'PUT YOUR VALUE'
Just put a dot (or whatever you prefer).
(all others solutions I found in forums didn't work for me, then I found this EASY solution.
Related
Can you please help me to find a way to remove the spaces in the datatables pagination buttons?
I've referred the below URL's for doing so :
DATA TABLES BOOTSTRAP 4 EXAMPLE
I've added the .js and CSS files exactly as it was said in above, but it did't work.
Datatables pagination buttons - Remove unwanted space
None of the above are working. Kindly help me to override the current functionality. Thank you.
Please find the code I've worked below :
HTML
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="stylesheets/bootstrap.min.css">
<script src="javascript/third_party/popper.min.js"></script>
<script src="javascript/third_party/bootstrap.min.js"></script>
<!-- DATA TABLES -->
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css" />
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
CSS
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 0px;
margin-left: 0px;
display: inline;
border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}
Jquery
$.fn.dataTable.moment('MM/DD/YYYY');
$(`#${ID}`).DataTable({
columnDefs: [{
targets: [0, 1, 2, 5, 6, 7],
orderable: false
}],
"order": [[4, "asc"]]
});
After so many research, I found out that
while using bootstrap css, do not use jquery.dataTables.css with it. else it will create spacing issue in pagination.
Bootstrap Datatable 4 independently works good as you see in JsBin that i created.
Hope, if you point correct URL of poper.js which is as following :
else this will also create issue with bootstrap 4 css.
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
EDIT :
If you see below codepen, which has same issue that your are facing.
if you open that codepen, and remove the following line and it's work fine for you.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10-dev/css/jquery.dataTables.css">
Hope this may work for you. if not, comment down below.
As Yash pointed out, including 'jquery.dataTables.css' does cause this bug.
But, if you are using the DataTables' 'select' functionality, the visual aspects will be lost by removing this .css file.
So, it really is a decision you make of removing the .css file if you do not use 'select', if you do, you'll have to pinch the css styling for selected items.
Or, keep the .css and overwrite the css so that the pagination is not messy.
This CSS will remove all of the messy spacing around pagination.
.dataTables_paginate ul li {
padding: 0px !important;
margin: 0px !important;
border: 0px !important;
}
I just approached HTML and CSS.
I wrote a little HTML5 file and a CSS file, but my HTML doesn't get any info from CSS because nothing is styled.
I'm using Eclipse, there is a directory "WebContent" where there is the HTML file, and the CSS is in WebContent/WEB_INF/CSS/file.css.
HTML file:
<html lang="it">
<head>
<link rel="stylesheet" href="/WEB-INF/CSS/NewFile.css" type="text/css">
<title>Strumenti musicali</title>
<meta charset="UTF-8">
<meta name="description" content="Negozio di strumenti musicali">
<meta name="keywords" content="strumenti, musicali, negozio">
<meta name="author" content="Paolo">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
HTML |
CSS |
JavaScript |
jQuery
</nav>
<h2>The title attribute</h2>
<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
and the CSS file:
head {
display: none;
}
body {
background-color: lightblue;
display: block;
margin: 8px;
}
body:focus {
outline: none;
}
h1 {
color: white;
text-align: center;
}
nav {
display: block;
}
p {
font-family: verdana;
font-size: 20px;
}
I don't know how the CSS file has to be indicated, because the file .html is in the directory "WebContent"; The CSS file in WebContent/WEB-INF/CSS/NewFile.css; The path I used is "/WEB-INF/CSS/NewFile.css" and still doesn't work.
EDIT:
It seems to work on Chrome and Edge, but neither in Firefox, nor in Eclipse.
Try to use the path "/WEB-INF/CSS/NewFile.css", that's to say a relative path from the html file to the css one.
The path to your CSS file is incorrect. Assure that the relative path and filename match that of your intended CSS file.
In your case the path specified in html file points to "NewFile.css" which does not match "file.css", as Blackbam has mentioned. Other issues exist in the directory names as well. Fixing this will fix your issue.
I would also add that StackOverflow is not intended as a website to debug your issues.
I really hope you can help me because I spent 2 days now looking for my mistake. I want to link an external css stylesheet into my html website but the website opens without css affecting it. I already validated both codes and checked spelling 1000 times, still not working. I tried with FF Chrome and IE:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset = "UTF-8"/>
<link rel="icon" type="image/png" href="bilder/favicon.png" />
<title>Die Hauskatze</title>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css" />
</head>
Stylesheet:
#charset "UTF-8";
body{
background: url(bilder/background.jpg);
}
img {
border: 4px black;
}
your css file is probably is in another folder than your bilder folder. Be sure to specify this in the path.
If the css file is in a css folder for example, you need to go one folder up then in you bilder folder.
body{
background: url("../bilder/background.jpg");
}
for the border you need to specify the border 'style' (solid, dotted, etc)
border: 4px solid black;
https://www.w3schools.com/cssref/pr_border-style.asp
For starter you can try to add quotes to your URL here
body{
background: url(bilder/background.jpg);
}
change it to:
body{
background: url("bilder/background.jpg");
}
If that doesn't help it is quite likely that your path is wrong.
You can see it inside your developer console once the page is being loaded.
In case of wrong url you will get an error that the img file was not found.
I have an issue with the background-image property in an external CSS file. I can't seem to get the image to show up. Its been while since I have coded so maybe it's just me forgetting everything I know but I'm pretty sure I have the link right. The website is set up like this
/Root/
index.html
/styles/
webstyles.css
/img/
header.jpg
The background works when I use it inline so it's starting to annoy me.
HTML
<html>
<head>
<meta charset="UTF-8">
<title>MYSITE</title>
<link rel="stylesheet" type="text/css" href="/styles/webstyles.css">
</head>
<body>
<div class="headerBar">
<h1 class="Hlogo">Title</h1>
</div>
</body>
</html>
CSS
body
{
background:#999999;
}
headerBar
{
background: url(/styles/img/header.jpg);
}
Thanks for any help.
If this style is in webstyles.css, then you need to use this way.
.headerBar{
background: url('img/header.jpg');
}
Based on the folder structure, "styles/img/header.jpg" is still a wrong path.
And also, I'm not sure why, but you are missing . for CSS class selector when selecting the headerBar. Fix that one too.
You can use:
background: url("styles/img/header.jpg");
Replace
background: url(/styles/img/header.jpg);
with
background: url('img/header.jpg');
You can use:
.headerBar
{
background: url("styles/img/header.jpg");
}
since styles folder is the same level as your HTML file.
However, if your img folder is not placed inside styles folder (which makes more sense), then you want this path instead:
.headerBar
{
background: url('img/header.jpg');
}
Also you're missing . to target class .headerBar
I am attempting to bypass the need for a PDF component by building a good print stylesheet.
I have two CSS files, site.css and print.css. They are loaded via the following:
<link href="site.css" rel="stylesheet" type="text/css" />
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>
site.css is a large, long and boring css file with the addition of
.printonly
{
display: none;
}
This is applied to elements in the document I have added for the sole intention of printing which I do not want on the page. It only exists in the site.css file.
When I have the image loaded through <img class="printonly" src="image.png" id="logo" alt="logo"/> It is not visible on the printed sheet.
If I drop the class="printonly", then it places the picture on the printed page just fine.
This makes me believe that it is picking up site.css even when trying to print.
Is there any way around this, or can anyone suggest anything?
For completion sake, I have included the entire print.css, however, I am not sure it is really needed:
body {
width: 210mm;
height: 297mm; }
#logo {
margin-left: 50%;
margin-right: 50%; }
.noprint {
display: none; }
You can either make the first stylesheet for screen media only, or you can change the display value for those images back to inline in your print media stylesheet.