first post here.
I was wondering why the background color is not changing.
I have the bg color property that is not working, apparently.
<body bgcolor="#f0ffff">
This is what I put as the body, and in CSS that's no mention of body whatsoever.
<head>
<title>User Settings</title>
<link rel="stylesheet" type="text/css" href="MainStyles.css">
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- jQueryMobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="JS\changeProfile.js"></script>
</head>
This it the heading of the HTML file, I don't know if this could be what's causing it.
Any help? I'm sorry but I'm quite new to this and it's really frustrating... If you need more info I will post more code.
Just gonna mention that there's no mention of background OR color in the HTML.
Open the developer tools in your browser.
Inspect the body element.
Look at the styles that apply to it.
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css is changing the background colour of the ui-overlay-a class (which is, presumably, added to the body by jQuery Mobile when you load its JS).
That is not working because jquery.mobile-1.4.5.min.css contains a class which overriding backhround-color property.
See below:
Related
I hope I am asking it correctly, I am creating a website and saved an HTML and CSS files for my navbar and footer.
I am trying to load those files from different pages on the site.
My index page isn't loading anything, it has the navbar and footer inside the index.html and index-style.css.
However, when I am using the load function on the other pages there is some kind of delay and you can see on the top left side of the page some kind of a "jump" where you see the HTML for half a second then the navbar and footer are loaded.
This is how my code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/png" href="../images/logo/soup.png">
<title>Souplease - Gallery</title>
<link rel="stylesheet" type="text/css" href="../css/gallery-style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://kit.fontawesome.com/44f557ccce.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
</head>
<body>
<!-- Navigation Bar -->
<nav class="load-navbar"></nav>
<!-- more code here -->
<!-- Footer -->
<footer id="load-footer"></footer>
<script type="text/javascript">
$(document).ready(function() {
$(".load-navbar").load("navbar.html");
$("#load-footer").load("footer.html");
});
</script>
</body>
</html>
You can also check this short video to understand the problem better. Pay attention to the top left side of the screen
The load() will always execute asynchronously, so it'll get painted as you see it in the video, there's no way to change that using jquery's load().
If you really want to use it though, I'd use some kind of transition or loading element.
On the other hand I would never load components like that on a project of my own, I'd rather use an iframe even if not elegant, at least it'll load (or try) as the page is painted.
I am trying to embed Bokeh plots in to portable html slideshows using WebSlides (note that Reveal.js doesn't suit my needs).
The problem is illustrated below with the toolbar being misaligned:
My steps were:
1) I downloaded the source code for WebSlides
2) ran a simple Bokeh plot obtaining the div and script components
3) Inserted the relevant html links, div and scripts components in to 'index.html' from the WebSlides folder. The components were inserted using the Component Instructions for Bokeh 0.12.10. The div was inserted in to a blank component of the WebSlides.
Does anyone know how I might prevent the toolbar misalignment? Any advice, however vague is appreciated as I am loathe to dropping Bokeh for this application.
A copy of the html doc is here and a snippet without the javascript is below:
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link
href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.css"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.10.min.js"></script>
<BOKEH SCRIPT IS PLACED HERE>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&subset=latin-ext" rel="stylesheet">
<!-- CSS WebSlides -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/webslides.css">
<!-- Optional - CSS SVG Icons (Font Awesome) -->
<link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
</head>
<body>
<main role="main">
<article id="webslides" class="horizontal">
<section>
<div class="bk-root">
<div class="bk-plotdiv" id="dac8b20e-c981-49a6-8c18-cf0ca0ddc43a"></div>
</div>
</section>
</article>
</main>
<script src="static/js/webslides.js"></script>
<script>
window.ws = new WebSlides();
</script>
<script defer src="static/js/svg-icons.js"></script>
</body>
</html>
Toolbars were reimplemented almost from scratch in bokeh 0.12.11dev1 and they don't use fragile float positioning anymore, so this shouldn't be an issue. You can follow our developer guide to get you started with dev version of bokeh. However, if the issue persists in 0.12.11dev1, please submit an issue with a complete, reproducible example.
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
My design works fine (it's a circle object with rotate functionality) with meta tag <meta http-equiv="content-type" content="text/html; charset=UTF-8"> but when I fit that design into any responsive template it won't work.
Reason I find out is that every responsive template e:g: bootstrap,foundation,skeleton etc. use metatag <meta name="viewport" content="width=device-width, initial-scale=1.0">
http://prefortune.com/rotate/bootstrap/
You can click on changeview link in responsive mode on above link it will change view and circle design will be fit properly but toggle menu will be loss. (On click I am removing content of viewport metatag content.)
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
Error Code
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If you are using Bootstrap you can try this.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
Starting at line 315 in your HTML you have
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
It looks to me that this path to jquery may not be correct, and as a result the bootstrap js isn't working, and this would cause a problem with the toggle menu.
This may not be the full answer to all your questions, but a good place to start.
Another issue I notice is that the source document for your iframe isn't responsive: http://prefortune.com/rotate/
If you view this on a narrow viewport the layout breaks, so this might need some attention as well. Iframes with responsive design can complicate your life and to begin you would need to add a viewport meta tag to this page as well.
Good luck!
I was practicing this website
http://www.lingulo.com/tutorial-content/html5/
While comparing this website with my non-responsive website I was frightened which part of the following header code turns the website mentioned above a responsive one?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Page Title</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/vendor/jquery.slides.min.js"></script>
<script src="js/script.js"></script>
Yes and No and it depends. Lets say for example the <picture> tag of HTML5 is a responsive one but you can't say the same for the other tags.
Basically the responsiveness is all about fitting your content inside every possible layout of the output device without impacting the design. This is achieved by having the width,height in %'s, Media queries and CSS along with JavaScript etc.
For ease of development I would recommend you to start with Bootstrap, which is a light responsive framework used to build responsive websites and easy to use.
It's all about the stylesheet.
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
Is the applicable line.
HTML5 is a structural markup language - it is simply a set of stylable containers around content. In terms of responsiveness, HTML5 has almost no benefit over HTML4 (there are many other good reasons to use HTML5 though).
The "responsive" part of a website is achieved in how those containers are organised and then styled.
This is usually done in the CSS by using media selectors to specify styles for specific display widths (so, smaller phones or even non-maximised windows have different styles compared to wider screen monitors). Javascript is then used to provide a bit more of an enhancement for behaviour that CSS cannot achieve alone.
So, you want to take a look at the stylesheet located at css/style.css
and a good introduction: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
You can make your website responsive by combining HTML5 and CSS3. Alone, I don't think so. you can refer to below link:
https://msdn.microsoft.com/en-us/magazine/hh653584.aspx