I'm having issues with getting Inspiritas as an Ember app. The index.html looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<meta name="author" content="me">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico">
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span3">
...
</div>
{{outlet}}
</div>
</div><!-- /container -->
</script>
<script type="text/x-handlebars" id="dashboard">
<div class="span9" id="content-wrapper">
<div id="content">
<section id="tables">
...
</section>
</div>
</div>
</script>
First off, it won't load the CSS for <div class="container"> (not the one inside the navbar). Instead, it inherits from body.ember-application, and in the process loses all the CSS. This only happens with this container, though. The only bit of LESS I can narrow it down to is some custom styling here:
body > .container {
// Color the whole container like the sidebar to fix faux columns
background: url('images/sidebar_bg.png') repeat #sidebarBackground;
.border-radius(#borderRadiusLarge);
// Make some space, eh.
margin-top: 40px;
margin-bottom: 40px;
}
UPDATE: Well, I've got no clue why but one class name change later its all gone to shit and everything has lost its styling.
The CSS rule you pasted uses the descendant selector, which means only elements with the container class that are directly below the body element will be styled. But when Ember inserts Handlebars templates it wraps them via a View, which creates another intermediary DIV. I'd guess that's responsible for your styles not appearing.
Related
So I have very simple code like this:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="pt-5 bg-info">
<!-- Something -->
</div>
<div class="row pt-4 bg-success">
<!-- Something -->
</div>
But, as a result (of this particular code), I have 2 these blocks with different width. So why it is happened and how to prevent such situations?
The problem is caused by Bootstrap library's internal row class -bs-gutter-x: 1.5rem; to set the property. If you manually overwrite this property, this behavior will be resolved as you wish. Changing the library's behavior in this way causes different side effects. This is not recommended behavior. That's why I suggest you follow the steps in section "Suggestion".
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.row {
--bs-gutter-x: 0rem !important;
}
</style>
</head>
<body>
<div class="pt-5 bg-info"></div>
<div class="row pt-4 bg-success"></div>
</body>
</html>
Suggestion
The pt class is used to change the padding-top property. The different use of the pt class is not relevant to the problem. To responsively place elements horizontally, define child <div> elements with row class within a <div> element with container class.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="pt-5 bg-info"></div>
</div>
<div class="row">
<div class="pt-4 bg-success">
</div>
</div>
References
Bootstrap v5.2. - Gutters
Bootstrap v5.2 - Spacing
I know that using conditional comments will work of IE browsers (Except IE10), but i want to know how to do same in Firefox and chrome.
Do i need to create different stylesheets for different browsers?
Please answer with a example of some small code, so i can get it well.
NOTE: I m not that good at javascript, so if answer is using javascript, please make some simple script.
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link href="IEStyleSheet.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<div class="Container">
<header>
</header>
<nav>
</nav>
<div class="content">
<section class="main_articles">
<article class="siteDescription">
<div class="desImage">
</div>
<div class="des">
</div>
</article>
</section>
<aside class="side_article">
<div class="ads">
This is a Advertisement.
</div>
<div class="ads">
This is a Advertisement.
</div>
</aside>
</div>
<footer>
</footer>
</div>
</body>
</html>
Do I need to create different stylesheets for different browsers?
In general, no. Why do you think you might need to?
In my html template, based on Zurb Foundation , I have following code:
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
When I check the code source, firefox warns me there is an issue with closing p tag, with red color.
In firebug source, I see it self closing p tag and div tags around it.
So, it doesnt display things properly.
Even when I pasted this snippet here, the editor showed red closing tags for p & outermost div.
Do I have error in this html?
Am I missing something?
This is my whole document:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="stylesheets/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div id="top-bar">
<div id="top-bar-top-cont"></div>
<div class="row">
<div class="large-12 columns">
<p id="toplogo">
<h3>some text</h3>
</p>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
You are getting this error because Firefox does not expect any heading tag like <h3> inside <p> tag. Therefore, when Firefox encounters the <h3> tag in your example, it automatically closes the <p> tag. You must put the <h3> tag outside <p> tag.
I'm trying to figure out how to set the order of my containers in a page so that they will correctly reorder themselves in both mobile and desktop layouts when resized.
Here is my code, the order is correct here in tablet [col-sm] & and phone [col-xs] views:
<!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 href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
The problem is for a desktop layout, there is a big gap under the 1st Nav div, the social div should be immediately beneath the 1st Nav in desktop and larger views regardless of the height of the content div.
How do I fix this? I tried using the pull, push, offset and float methods, but nothing gave me the correct results.
The gap that you are talking about is actually not a gap in the solid left column. It is a gap between content in the left column of first row and the left column of the second row.
Your last wrapping div (social/nav2/footer) is in the second row, so it can touch the first wrapping div (rider/search/nav1) from below only if the height of second wrapping div (headers/content) is less than of first (which is definitely not an option here).
To fix the problem, I'd suggest to put contents of last wrapping div into first one. However it will break the order in mobile and tablet layouts.
As the second option I could offer to duplicate contents of last wrapping div to first one, but make it visible only in desktop screen sizes by using .visible-md and .visible-lg classes on upper instance and to show the one below only in mobile screens (use .hidden-md .hidden-lg classes). This is not the best idea from performance standpoint (extra traffic, extra server-side processing) but it could work.
<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 href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
div {border:1px solid #000;}
div.logo {background:transparent url(../images/logo.png) no-repeat left top; height:100px;}
div.rider {height:50px;background-color:#06C;}
div.search {height:50px;background-color:#F39;}
div.headers {height:100px;background-color:#933;}
div.navigation1 {height:300px;background-color:#69F;}
div.content {height:600px;background-color:#0FC;}
div.social {height:50px;background-color:#C99;}
div.navigation2 {height:300px;background-color:#3FF;}
div.footer {height:150px;background-color:#000;}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="col-md-12 logo"></div>
<div class="col-md-3 col-xs-12">
<div class="rider">rider</div>
<div class="search">search</div>
<div class="navigation1">1st Nav</div>
<div class="visible-md visible-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="headers">headers</div>
<div class="content">content</div>
</div>
<div class="col-md-3 col-xs-12 hidden-md hidden-lg">
<div class="social">social</div>
<div class="navigation2">2nd Nav</div>
<div class="footer">footer</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style>
/* Custom container */
.container-fixed {
margin: 0 auto;
max-width: 800px;
min-width: 800px;
width: 800px;
background-color:#C05659;
}
.container-fixed > hr {
margin: 30px 0;
}
</style>
</head>
<body>
<div class="container-fixed">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<hr>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</body>
</html>
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<div class="container">
<div class="row">
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
<div class="col-xs-4">.col-4</div>
</div>
</div>
Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<div class="container-fluid">
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
<div class="col-4">.col-4</div>
</div>
</div>