I don't really understand, as whenever I try to use one (example: https://codepen.io/plavookac/pen/QMwObb) whenever I try to apply it to my index.html (the global one), it goes on TOP of my content and makes everything else unclickable. Probably something simple I'm missing, right?
My main index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<app-root></app-root>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>
In my global styles file I just import bootstrap and put in the css that I linked above.
You should make main.component.html that manages routing and view order then you can tweak z-index on your css
<div class="background"></div>
<router-outlet></router-outlet>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Related
i trying to build this layout with tailwind css but i can't figure out
layout i want to create
my layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/dist/output.css" />
<title>Document</title>
</head>
<body
class="font-Rubik grid grid-cols-[80px_minmax(400px,_1fr)_250px] grid-rows-2 h-screen"
>
<nav class="bg-slate-800 row-span-2">nav</nav>
<menu class="bg bg-violet-700 col-span-2 text-white">Menu</menu>
<section class="bg-slate-300">Inbox</section>
<main class="bg-slate-300">Email view</main>
<aside class="bg-slate-300">Additional info</aside>
</body>
</html>
To achieve this, you can mix the grid and flex systems. For the grid you can adjust the individual column widths in the config. i have taken 25/50/25.
https://play.tailwindcss.com/WqVvubeWsT
yo can do it this way to
grid-cols-[80px_400px_1fr_250px]
just need add (_) between ich size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>
Doesn't work. What can be the reason for this?
Any of the utility classes added to the body tag won't work
Your sample HTML doesn't include a stylesheet, so the bg-green-400 and h-screen classes aren't defined.
In production you should use a proper purged CSS file, but for testing you can load Tailwind from a CDN using this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Here's a fiddle of your HTML with this stylesheet included, and both of the classes you've used are working: https://jsfiddle.net/vrung30L/
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
Using the HTML5BoilerPlate template from Paul Irish and gang (although, I'm not saying that has anything to do with it) and I have some styles inside tags that are rendering on page. If I move them inside the they work as they're supposed to work. I've done this before to do some quick editing and have never seen the styles rendered on the page. Here's a sampling of the head code:
<!doctype html public "*">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width">
<title>Title</title>
<meta name="bitly-verification" content="xxxxxxxxxxxx" />
<meta name="google-site-verification" content="xxxxxxxxxxxxx" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="stylesheet" type="text/css" media="all" href="css.css" />
</head>
<body>
<div id="container">
<style>
...
</style>
</div>
</body>
However, we've found that taking out the container div allows the style tags to work and they no longer show up in the rendered page. What we haven't figured out is why and that's bothersome. Has anyone ever had this issue? Or can anyone give insight as to why this might happen?
Not a deal breaker just more a matter of knowledge. Thanks.
**EDIT: #selector > * was the culprit - aargh! *
W3Schools state that:
The style element always goes inside the head section. - Reference
It makes sense that putting the style tag in the body (for whatever reason you might be doing that) would come with some undefined behaviours.