Is it possible to have a different style source for each div.
Example
<div src="abc.css"> A
</div>
<div src="xyz.css">B
</div>
You can have multiple stylesheets in your HTML, and then use the CSS code inside them for your divs. Here; 'div1' class is inside div1-styles.css and 'div2' class is inside div2-styles.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="div1-styles.css">
<link rel="stylesheet" href="div2-styles.css">
</head>
<body>
<div class='div1'>
Div-1 text
</div>
<div class='div2'>
Div-2 text
</div>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
First its not a good practice but even is a horrible practice.. you can just use different classes in your style file and will done the work.. but if you're insisting in that even if its not right.. you can do it using this JQuery plugin that used scoped attribute to achieve that
The plugin: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin
Related
I was trying to experiment with container, container-fluid, jumbotron classes of bootstrap 4. The HTML code i used is:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<h1 class="container">contaigjnohjbofitujkiner</h1>
<h1 class="container-fluid">containfhonjoiyjboifgber</h1>
<span class="jumbotron">jumbotofgbnoitrjbogiftjron</span>
</body>
</html>
In the output of this file I noticed that span element with jumbotron class was slightly overlapping h1 element with container-fluid class. I want to understand why this happened is this a bug in firefox quantum? or is it because any property of jumbotron or container-fluid in bootstrap 4?
As #zgood said in his comment, the span is a display: inline element by default.
Here are some characteristics of it:
The <span> tag is used to group inline-elements in a document.
The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or
a part of a document.
Your question aked why span was overlapping h1 element with container-fluid class. And, how I said before, because of the inline propriety.
Check out this example, using a <div> and see how it is no more overlapping.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<h1 class="container">Lorem ipsum - Container</h1>
<h1 class="container-fluid">Lorem ipsum - Container Fluid</h1>
<div class="jumbotron">Lorem ipsum - Jumbotron</div>
</body>
</html>
A little unsure on when to start a new context in BEM.
Should all child elements always reference the block element?
For e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__search">
<!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
</div>
</div>
</body>
</html>
Here the search is inside the 'header' div but should we really attach it to the header as this could be used elsewhere on the site?
Do you have new blocks inside blocks?
Cheers
It's my understanding there isn't any problem with blocks overlapping, as long as the css being used to target each block is discreet and separate. So, the search styling shouldn't depend on the header styling if it's usable in other places. Similarly, the header styling doesn't need to go any further down once it loses relevance to its children.
Would something like this work; does that make sense?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__right">
<div class="search">
<input class="search__input>
<button class="search__button>GO!</button>
</div>
</div>
</div>
</body>
</html>
There is a missing end quote on the search__button element, but stack overflow is so rigid with its edit criteria it wont let me edit it.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
For some reason the entire web page is wider than the browser window. When I remove the row class everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.
You may either use .container class or .container-fluid.
.container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can.
See your html script modified below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.
md stands for Medium sized devices like laptop,desktop etc.
lg stands for Large sized Devices like projector or some bigger screens etc.
sm stands for Small sized devices like mobiles etc.
You are free to use a combination of these three. For example,
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
Hope it helps you get started and resolve your problem.
To fix this issue you have use class row properly.
You have not wrapped class row with class container.
Bootstrap provides grid system.
Bootstrap's grid system allows up to 12 columns across the page.
You need to arrange your page width into that 12 columns.
It is not possible to explain all of here.
Please refer following links.
Bootstrap grid template
Bootstrap grids
Maybe you have to add the grid of the bootstrap css?
Look to this example
http://getbootstrap.com/examples/grid/
Please wrap it in bootstrap .container class and then check if the problem still persists.
<body>
<div class="container">
//your content goes here
</div>
</body>
You must use containers to use any of the bootstrap functionality. This can be a set width container or a fluid container but adding one will fix your issues. I also switch around your style to use a working CDN version and moved Javascript to the recommended location. You might find this a better starting point.
Reference: http://getbootstrap.com/css/#overview-container and http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<header class="row">Test 1</header>
<section class="row section1">Test 2</section>
<section class="row section2">Test 3</section>
<section class="row section1">Test 4</section>
<section class="row section2">Test 5</section>
<section class="row section1">Test 6</section>
<footer class="row">Test 7</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.
Removing the margin is the easiest and quickest way to fix your problem.
You can do that by adding the m-0 class along with your row:
<div class="row m-0">
...
</div>
Can someone plz explain the meaning of nodec?
I saw it is being used as a.nodec in CSS
But totally have no idea what is the purpose of this usage.
TQ
If you saw something like
a.nodec {
...
}
Then "nodec" is a class name of "a" tags like in this HTML:
<a class="nodec" href="?">Link #1</a>
<a class="nodec" href="?">Link #2</a>
recently I've been studying about that problem too. The is a reason for you to do a.nodec instead of just .nodec.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.underline{
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
Assume the .underline as the .nodec and based on the code above, the output will show h1 and p underlined. For some reasons, you may only want specific element to be able to use the class (for example, you only want h1 to use the underline class). For that reason, you can specify what kind of element can only use the class you have made. Check out the code below.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1.underline{ <!--just added the h1 in front of .underline-->
text-decoration:underline;
}
</style>
</head>
<body>
<div class="underline">
<h1>this is h1</h1>
<p>this is p</p>
</div>
</body>
</html>
In this case, the div won't be able to use the underline class unless you set the class for h1 element to underline (for example this is h1)
In conclusion, it's just about limiting number of element to use specific class. Hope you find this helpful!
I am trying to learn 960 grid system. My left body text appears on the right and vice versa for the other text. My intention is to have these two boxes on the same line. Left body text is appearing higher on the page than right body text too.
Any ideas? Confused!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Site name</title>
<link rel="stylesheet" type="text/css" href="./960.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />
</head>
<body>
<div id="skip">
Skip navigation
</div>
<div id="header" class="container_12">
<div id="mainLogo" class="grid_4">
<h1>Page name</h1>
</div>
<div id="testContainer" class="grid_8">
<div id="mainNavigation">
<ul>
<li>nav1</li>
<li>nav2</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_12">
<div id="contentleft" class="grid_8">
<p>Left body text</p>
</div>
<div id="contentright" class="grid_4">
<p>Right body text</p>
</div>
</div>
<div id="footer" class="container_12">
</div>
</body>
</html>
For me (in Chrome 8), the problem is caused by the margin on the H1. Specifically, Chrome's user agent stylesheet is inserting:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0px;
}
The extra height to this h1 causes the contentleft div to start directly underneath the testContainer div.
Setting a margin of 0 removes the problem for me in Chrome 8.
Note the instructions for setting up 960.gs mention the use of the reset.css stylesheet:
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
which should also remove this problem. It's generally good practice to include a reset stylesheet anyway, so if you're learning about the 960 grid system you should include this stylesheet.
After every Line please add the div with the clear class.
First would be just after you close the div tag for id= mainLogo. And 2nd one would after you close the div tag with id = testcontainer.
I have had the same issue. If you are using multiple containers on the same page you will also need to apply the clear_fix css class to to all but the first as the container class with try to position it's self at the top of the page.
<div id="content" class="container_12 clear_fix">
</div>
If you look at the source of any of the example sites on 960.gs they have done this where they use many containers.