It's only problem with visability of css. There are a lot of answers in google, but since yesterday I've checked all of them and I still didn't solve my problem...
My project structure in eclipse looks like this:
Only in one file I have relation to css - in header.jsp:
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/bootstrap/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/resources/css1/main.css"/>
This path should be fine. What could be the problem?
In jsp also you can use the Html tags freely so just use
<link rel ="stylesheet" type="text/css" href="src/resources/css1/bootstrap/bootstrap.css">
i think this should work, see that you are not making spelling mistakes or Capital/small alphabet mistakes.
Related
my css is not working correctly on my github page. This is my repo. This is my website. I created this portfolio website without Github pages and it works correctly. I am very new to github , so there is a good chance I'm missing something. I usually localize all my css/jscript but for simplicity reasons I changed all my css/javascript to the html link.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css\main.css">
</head>
I had the same problem with my HTML file and my CSS file. I fixed it like this:
I had a repo with the index.html and a folder call "style" with the style.css file in it.
Deploy my index.html with the link tag within the head tag like this:
<link rel="stylesheet" href="./style/style.css" type="text/css">
Pay attention to the href attribute: "./style/style.css".
Andy.-
Like #TarasYaremkiv mentioned remove your './css/bootstrap-3.3.7/' folder.
The reason why it's happening is because Jekyll engine is looking for the includes present in the file 'bootstrap-3.3.7/docs/components.html'
For example: this file {% include components/glyphicons.html %} is not present in the components directory of your bootstrap folder. Hence the error.
You can avoid these kind of error's by downloading only the necessary compiled files or use cdn links
Change
<link rel="stylesheet" type="text/css" href="css\main.css">
to
<link rel="stylesheet" type="text/css" href="/css/main.css">
original post - External CSS not working with Github Pages
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
One of my stylesheets doesn't seem to load every style. I've read everything i can find but the issues that people usually have are obvious things to me but i can't seem to figure out my own issue. I have a site made using Razor and this is where i call my stylesheets in the head section.
<link href="#Url.Content("~/css/reset.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/jquery-ui-1.10.1.custom.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchLayout.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/searchSkin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/css/AvailabilityLayout.css")" rel="stylesheet" type="text/css" media="screen" />
<link href="#Url.Content("~/css/AvailabilitySkin.css")" rel="stylesheet" type="text/css" media="screen"/>
<link href="#Url.Content("~/css/Home.css")" rel="stylesheet" type="text/css" />
The issue seems to be with the AVailabilitySkin.css and sometimes AvailabilityLayout.css. So for example i have this code in AvailibilitySkin.css:
td#price h2, td#price h4
{
text-align:center;
}
And it doesn't get picked up, I don't even see it being overwritten by another style or anything. But if I add the same code to the Skin.css file then it works perfectly fine. I can't add all my styles to Skin.css so i can't just put that style in there and call it a day. It has to be separated, right now the site is being developed locally so unfortunately i cannot post a link to the site but if anything is needed (like more code) please let me know. I haven't been able to find the issue and I've tried adding #charset "UTF-8"; at the top of the stylesheets and it didn't really do much.
Problem has been fixed guys/gals. In the end it was just another mistake by me and it wasn't coming up in the Console and Visual Studio wasn't flagging it as an issue. It was mostly just a missed single quote and another programmer here ran the code through WebStorm and it came right up and fixed it. Thanks for the help and sorry for the dumb mistake question.
I know this is a simple question but for some reason I'm wondering if I'm doing something wrong here.
My understanding is that if you declare 2 CSS files
<script type="text/css" src="JQueryUI.css"></script>
<script type="text/css" src="Override.css"></script>
I want to use the "Override.css" to override some values, so if I type let's say ".ui-accordion" and put my own values, i would expect them to take priority over the original values located under that name on the JQuery.css file.
Mainly because the declaration states that Override.css comes AFTER JWuery.css.
For some reason this is NOT happening.
I tried switching the declaration of the 2 files
...but the Jquery.css seems to ALWAYS seems to take priority.
Any reason why ??
This is not working because you are not loading correctly the css files.
It should be:
<link rel="stylesheet" href="JQueryUI.css" type="text/css" media="all" />
<link rel="stylesheet" href="Override.css" type="text/css" media="all" />
I am agree with Zhihao about specificity of elements, but I have also noticed that your are using <script> to attach CSS files, use <link> tags instead, maybe that would load your css and it will override existing styles:
<link rel="stylesheet" type="text/css" href="JQueryUI.css" />
<link rel="stylesheet" type="text/css" href="Override.css" />
P.S. just posted my notice in the comment as an answer
I'm just curious how most people make their ASP.NET pages printer-friendly? Do you create a separate printer-friendly version of the ASPX page, use CSS or something else? How do you handle situations like page breaks and wide tables?
Is there one elegant solution that works for the majority of the cases?
You basically make another CSS file that hide things or gives simpler "printer-friendly" style to things then add that with a media="print" so that it only applies to print media (when it is printed)
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Our gracious host wrote a good blog post on this topic:
Coding Horror: Stylesheets for Print and Handheld
I am a php user, but the point must be that the result no matter what is HTML and HTML is styled with CSS and there is an option for your style sheets for just using the style for printing. This should be the way to do it, imho. About big tables, there isnt really a magic "fix" for that. Page will break where it breaks, dont really understand the problem here either.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />