I'm still somewhat new to this and none of the proposed solutions seem to be helping me. Since I'm using jinja2 as templating language it's a little difficult to show the code, so I'm displaying the entire page source.
<!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>Record Scrobbler</title>
<link rel="icon" href="/static/img/favicon.ico">
<!-- Bootstrap -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 70px;
margin-bottom: 10px;
}
.footer {
position: absolute;
bottom: 0;
/* Set the fixed height of the footer here */
height: 80px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Record Scrobbler</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Collection</li>
<li>Explore</li>
<li>Add Record</li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="'container">
<div class="row" id="row_1">
<div class="col-md-12" id="image_1">
<img src="/static/tmp_viz/bar.png"
style="width: auto; height: auto; float: right">
</div>
</div>
<div id="footer" style="white-space: nowrap">
<div class="container text-left">
<footer class="footer">
<p>© Boudewijn Aasman.</p>
<div class="nav3" style="height:705px;">
<a href="https://github.com/baasman" class="icons"><img src="/static/img/Octocat.jpg"
style="width:50px;height:50px;"></a>
<img src="/static/img/lastfm_red_small.jpeg">
</div>
</footer>
</div>
</div>
</html>
The 'bar.png' image gets cut off on the left side. What could I do to resolve this? I assume it has something to do with the padding I had to do to get the navbar and footer showing correctly, or that is is overflowing somewhere on the bootstrap grid.
EDIT:
The image:
Dimensions: 516x366
Screenshot of page:
EDIT:
So I don't think this was a html or css problem, but rather a matplotlib problem.
sns.set_style('white')
fig, ax = plt.subplots(2, figsize=(8, 6), sharex=True)
counts_per_artist = df.groupby('Artist').TimesPlayed.sum()
counts_per_artist = counts_per_artist.sort_values(ascending=False).head(10)
index_artist = np.arange(len(counts_per_artist))
counts_per_album = df[['Title', 'TimesPlayed']].sort_values('TimesPlayed', ascending=False).head(10)
index_title = np.arange(len(counts_per_album))
bar_width = .35
rects = ax[0].barh(index_artist, counts_per_artist, alpha=.4, color='green',
label='Artists', tick_label=counts_per_artist.index,
align='center')
rects2 = ax[1].barh(index_title, counts_per_album.TimesPlayed, alpha=.4, color='red',
label='Records', tick_label=counts_per_album.Title)
ax[0].legend()
ax[1].legend()
plt.gcf().subplots_adjust(left=0.4)
fig.savefig('/Users/baasman/PycharmProjects/pyvinyl/static/tmp_viz/bar.jpeg',
bbox_inches='tight')
Just changing it from png to jpeg seems to have fixed this issue, but I have no idea why.
Related
Ok,i made header and logo :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/test1.png" class="img-fluid"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
and CSS:
.navbar-nav {
min-height: 110px;
}
.navbar-brand img {
max-width: 100%;
height: auto;
}
The question is how to my logo image be responsive as I resize the browser and how to header be responsive(when decrease size)? As you can see I put height in external CSS file 110px,and now I want to logo enter inside header(like in full size browser) when resize into small screens. I hope you get it
To keep your header image inside your header at all times you can simply apply max-height: 100%; to your image. This will stop it from overflowing its container. Here is an example: https://jsfiddle.net/rktr4q5v/1/
You can see that the images are both quite small. This is because the class navbar-brand has a height of 50px applied. If you remove this then your images will expand to their original width but remain inside the navbar. Here is an example of this: https://jsfiddle.net/rktr4q5v/2/
If you need to do specific size styling for your logos then you will need to use media queries to change the size of your logo at different screen widths. The documentation for this can be found here and a beginners guide can be found here
I have also fixed some of your mistakes. You can refer this.
Adjust your Logo Size in navbar-brand style tag. If requires
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="test2.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-default " role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" class="img-responsive img-rounded" style="max-height: 40px; margin-top: -15%;"></a>
</div>
<div class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I'm making a website using the Bootstrap FlatUI Framework and I found something weird happening. When I use <br> tags after the nav bar it makes this weird white box.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS:GO - Premium Betting</title>
<meta name="description" content="Flat UI Kit Free is a Twitter Bootstrap Framework design and Theme, this responsive framework includes a PSD and HTML version."/>
<meta name="viewport" content="width=1000, initial-scale=1.0, maximum-scale=1.0">
<!-- Loading Bootstrap -->
<link href="dist/css/vendor/bootstrap.min.css" rel="stylesheet">
<!-- Loading Flat UI -->
<link href="dist/css/flat-ui.min.css" rel="stylesheet">
<link href="docs/assets/css/demo.css" rel="stylesheet">
<link rel="shortcut icon" href="img/favicon.ico">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="dist/js/vendor/html5shiv.js"></script>
<script src="dist/js/vendor/respond.min.js"></script>
<![endif]-->
<style>
html {
background-color: #485B6E;
}
.logo {
width: 300px;
}
.navbar {
height: 90px;
}
.navbar-nav {
margin-top: 35px;
}
.place {
height: 32px;
background-color: #ecf0f1;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-tasks"></span>
</button>
<a class="navbar-brand" href="#"><img class="logo" src="img/home/main_logo_complete.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" style="a{text-transform: uppercase;}">
<li>HOW TO PLAY</li>
<li>SUPPORT</li>
<li><img src="img/icons/sits_small.png"></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
</nav>
<br><br>
<div class="place"></div>
<br><br>
<div class="container">
<p>Hello</p>
</div>
<script src="dist/js/vendor/jquery.min.js"></script>
<script src="dist/js/flat-ui.min.js"></script>
<script src="docs/assets/js/application.js"></script>
</body>
</html>
Image:
That's not a "weird white box". That's your site's body color showing through where you have content not inside an element with a differently-colored background. You can eliminate the breaks, put some padding in that div (to push it below the navbar) and see basically the same thing.
.place {
...
padding-top: 150px;
overflow: hidden;
}
Demo
I'm trying to have a full width jumbotron with a background color. For some reason it is staying at the default layout with the gray background. I followed the code from the bootstrap website, so I don't know whats wrong.
In my index.html
<div class="jumbotron">
<div class="container-fluid">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
In my css:
.jumbotron {
position: relative;
background: #ff0000;
width: 100%;
height: 100%;
}
Seemed pretty straight forward...guess I was wrong.
DavidK, Hi there.
Here is a simple demo for you.
Using both ways to display the Jumbotron.
If you have a issue, and your custom css is not below the Bootstrap css link, then that could be your issue.
Use the FULL PAGE view to see it.
Or use this Fiddle.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.spacer {
margin-top: 2%;
margin-bottom: 2%;
}
.block {
height: 200px;
}
.jumbotron {
background: #ff0000;
min-height: 25vh;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<div class="container bg-primary block">
...
</div>
</div>
<div class="container col-lg-12 spacer"></div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:
<!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>Seite</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/meine.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Startpage4you</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anmelden</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-8">.ccol-md-8</div>
<div class="col-md-2">.col-md-4</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
my stylesheet
.navbar{
margin-bottom: 50px;
}
Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.
So you just need to add margin-top:51px to your div 'row', in order for it to be seen.
What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.
Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:
body {
padding-top: 70px;
}
http://getbootstrap.com/components/#navbar-fixed-top
I'm using Bootstrap 3 with a Bootswatch theme. Here is my HTML:
<!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>Title</title>
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/flatly/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbarcollapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LicenseApp</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Nav 1</li>
<li>Nav 2</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="">Username</label>
<div class="col-sm-10">
<input class="form-control" name="username" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Any ideas why I'm having so many problems? Am I missing a DIV or something?
Your form is placed under your navbar because your navbar is fixed at top.
With following css rules:
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
Therefore, either push your form more down or make navbar not fixed, for example remove navbar-fixed-top from this element:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
Therefore, it displays jsfiddle example
Or as #Jamesking56 noticed, changing navbar-fixed-top to navbar-static-top works
In Bootstrap, when using a fixed navigation header, you usually put a padding-top on the body, the same height as the header.
See here: Bootstrap docs
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.