I am using arrow up glyph-icon using Bootstrap. when i applied downloaded css in HTML it is not working, but if used full HTTP css path in online it works.below is my code, tell me where is wrong in my code,is it browser version is dependent? if I used https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css. this complete path it works.but I need to add offline.
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<body>
<div class="w3-container">
<button class="w3-button w3-xlarge w3-circle w3-red w3-card-4"> <span class="glyphicon"></span></button>
</div>
</body>
</html>
Replace this
<span class="glyphicon"></span>
with
<span class="glyphicon glyphicon-arrow-up"></span>
More information :
https://getbootstrap.com/docs/3.3/components/
Got it! Well, at least if you use the µBlock plug-in in your browser.
For me it worked when checking the "Ignore generic cosmetic filter"-option (or whatever it is called in English) on the "Prepared Filters"-page (or whatever it is called in English).
I tried to figure out where the source of this feature is located to see how that cosmetic filter works, but couldn't find it. I mean there might be a way to work around that cosmetic filter if the element with the glyphicon would be coded differently.
Related
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
So I have been wracking my brain trying to figure out why my CSS file cannot be read by my Xampp server. I think everything is written correctly and all the references are where they should be but I'm not getting different results.
body {
background-color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>ETB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header ">
<a id="logo" href="homepage.html"><img src="media/logotext.png" class="wtv"></a>
<ul id="navigation" class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
<li>Services</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
The bootstrap link is overriding your css link so just put the css link below the bootstrap and it will work.
<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="css/theme.css">
Put the link to your css/theme.css after all other references as shown below (it looks like the property was overridden by Bootstrap css):
<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="css/theme.css">
The problem is, I think, that the <body> is only the space between the open and close <body> tags, which is immediately overlaid by the <nav> bar, so the black is being set, it's just that you cannot see it. To set the whole page background, you can use this:
html
{
background-color: black;
}
See this JSFiddle - the body rule does nothing, but the html rule sets the whole page bar the toolbar.
There are two options here:
When you are deploying, whatever the code you are using to deploy is either changing the path of theme.css, or it's not actually copying it over.
Bootstrap.min.css is overriding your css styles (see answer by alex-bell)
Checking #1... I'm honestly not sure, never used your deployment system. Usually I would just check the files on disk and make sure I can access them. Another choice is wherever you access your .html, try accessing css/theme.css through your browser. It should attempt to download the file. If it doesn't attempt to download the file, this is likely your issue.
Checking #2 is easy. Simply open up the page in any browser (let's use chrome for this example) and open Web Developer tools. Inspect the body element, and you will see how specific styles are being applied or overridden.
Get familiar with the Developer tools in your browser. They are very handy at helping solve these kinds of issues.
Using Chrome as an example hit f12 to bring up the developer tools
Go to the Network Tab and reload the page. Check that your css file is being loaded. I suspect not, as your path is css/themes/theme.css is going to resolve to http:\\yoursite.com\folder-where-the-page-is\themes\theme.css. You more than likely want to use /css/theme.css which will resolve to http:\\yoursite.com\themes\theme.css
Once you have confirmed you have the path correct using the Network Tab, you can use the Elements Tab to inspect the various elements of the page. Here you can see what styles are being applied to an element and where they are coming from.
Finally, and unrelated to the Dev Tools, learn about CSS Specificity
I had the same problem. I just decided to put the CSS code on the same document as my html code. All you need to do is type this:
<style>
body {
background-color:black;
}
</style>
I assume you do, but just incase you do not know each html document can contain multiple <style> tags.
I'm wondering if you are able to add a css framework, specifically bulma, into an html sheet with existing css. The current css is just a standard < link > style.css, and I'm wondering if I can just link the bulma https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css
with the same < link > tag just under or above it on the same sheet.
Simple Starter from Bulma Website
http://bulma.io/documentation/overview/start/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.0/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">
in the <head>...</head> of your html file and it will works
I think the question is probably missing a part.
The part where the question is raised : will this inclusion of the bulma css interfere with the existing style.css?
In that case.. probably.. as soon as pure HTML elements are described in the style.css and return in the bulma.css, for example: table {....} is present in the bulma css, it could cause some strange behavior.
There are several ways to try and bypass this behavior, some of them clean, others less clean :)
First you need to decide whether the bulma is the default css to be used or not...
If so, use your own style.css to overwrite the bulma.css.
If not, still call your style.css as last css in the row.. items that are not defined in your stylesheet will be taken care of by the bulma css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Basics</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>JavaScript Basics</h1>
</div>
</body>
</html>
h1{
color: green;
}
Here are both my HTML and CSS. I am using the ATOM text editor on my Mac. Whenever I preview HTML it shows JavaScript Basics in the default black color,not in green from my css.
Try this one dude!
`<link href='style.css' rel='stylesheet' type='text/css'>
The problem is a caching issue. CSS can be a little strange with caching, and while the classic combination CTRL + F5 works for images, it doesn't work for CSS. The better solution to dealing with caching in CSS is to hold down SHIFT while clicking on the refresh symbol.
Obviously, you can include a backslash in the filepath for the CSS reference, or append a version number, such as: <link rel="stylesheet" type="text/css" href="style.css?v2 />.
This version number doesn't 'mean' anything inherently, but can be useful for denoting updates to the CSS, and importantly will be considered a different file by the browser (forcing it to re-load the CSS).
If you have access to a back-end language like PHP, you can also force the browser to refresh the CSS automatically every time the page is loaded with PHP, by appending a timestamp within the link to the CSS file, with something like:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Keep in mind that CSS can be 'costly', so once you have finished development, you probably want to allow visitors to cache by removing the timestamp in a production environment :)
Hope this helps! :)
I would like to accomplish this layout with CSS and HTML.
I started a fiddle which is a start, but I don't know how to make the fonts look more like the goal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3 class="marg-left title"><img src="/images/logga.png"> Account Administration</h3>
<hr />
Add new account <br> Search account <br> Export <br> Import <br> Setup <br> Log out
</body>
</html>
I created a fiddle that closely matches your UI mockup. Unfortunately futura is not a very freely accessible web font, so I have instead used a google font called Raleway.
For the single button links on the sidebar I have created button modules, just add or delete these as you wish. Hope you find it useful!
<!-- SINGLE BUTTON MODULE -->
<a href="#"><div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
http://jsfiddle.net/HEue6/1/
I don't think futura is a default font. You need to include the fonts you want to use. I recommend google fonts since it worked great for me in the past, but there're many services like this. Here's a brief how-to for including it in your page:
Go here:
http://www.google.com/fonts
Find the font you want (futura is not in google, it is external).
Click in "add to collection".
Click "use" on the bottom right of the page
Then copy something like this in your webpage (before the css):
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC' rel='stylesheet' type='text/css'>
Finally put this in your css:
font-family: 'Alegreya Sans SC', sans-serif;