Here's the code:
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<div style="height: 500px; background: red;"></div>
</div>
<div class="content">
<div style="height: 500px; background: #eee;">
<ul class="tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
</html>
and a link to the live preview: http://jsfiddle.net/7W32Z/.
Why does the border end up below the sidebar? It has to do with the clearfix applied to the <ul class="tabs" /> element, because if I clear: right only, the border jumps up.
Float ul.tabs and the border should be fixed.
http://jsfiddle.net/laheab/7W32Z/3/
Related
The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">
Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.
The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I'm trying Bootstrap on a small project, But there is something I don't understand or I should do wrong. Here is my snippet:
nav{
background-color: lightblue;
}
section{
background-color: lightgreen;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
An horizontal scroll bar appears, how can I properly fix it, without adding external css rule, using only Bootstrap ones?
You need a use .container for a responsive fixed width Container. Add this class to your div
<div id="mainContainer" class="row container">
Use .container for a responsive fixed width container.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I believe you forgot your container.
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
You are missing the container class within your HTML markup, it needs to be:
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
</div>
Here is your code with the container class added:
nav{ background-color: lightblue; } section{ background-color: lightgreen; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="page-header"></header>
<div class="container">
<div id="mainContainer" class="row">
<nav class="col-sm-12 col-md-2">
<ul class="nav nav-pills nav-stacked">
<li>Home</li>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<section class="col-sm-12 col-md-10">
Here is my content.
</section>
</div>
</div>
</div>
Remove the class 'row' form :
<div id="mainContainer" class="row">
Add a wrapper around the .row with the .overflow-hidden class:
<div class="container overflow-hidden">
Why span5 not going to the right position? Span5 is go to under Span6.I'm linked to bootstrap
My code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
Use display: inline-block.
.span6, .span5 {
display: inline-block;
vertical-align: top;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="http://dummyimage.com/40/" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
From your snippet, it's hard to advise you're best option. Although one 'simple' styling would be to add float:right to your css like so:
.span5{
float:right;
}
The Demo below shows this in action:
.span5{
float:right;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
you could also use the display options, like below (aligning logo next to links):
div{
display:inline-block;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
See the following fiddle: http://jsfiddle.net/HXzPj/6/
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" />
</head>
<body>
<div class="navbar" style="position:absolute; top:0; width:100%;">
<div class="navbar-inner"> KB
<ul class="nav">
<li class="active">Home
</li>
<li>Create page
</li>
</ul>
<ul class="nav pull-right">
<li>
<p class="navbar-text">user#email.com</p>
</li>
<li class="divider-vertical"></li>
<li>Upload
</li>
<li class="divider-vertical"></li>
<li>Manage
</li>
<li class="divider-vertical"></li>
<li>Password
</li>
<li class="divider-vertical"></li>
<li>Sign Out
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid columns">
<div class="span2 article-tree">Article-tree</div>
<div class="span10 content-area">Content-area</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
And CSS:
html, body {
height: 100%;
}
.container-fluid {
margin: 0 auto;
height: 100%;
padding-top: 62px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
background-color: #C9E6FF;
height: 100%;
}
.content-area, .article-tree {
background: #bada55;
height: 100%;
}
.footer {
background: red;
height: 20px;
}
Everything works fine when the screen width is wide enough to show all elements of the navbar. When the width is reduced, then the navbar stacks nicely but the article-tree and content-area stay in their fixed position, so are partly hidden behind the navbar.
How can I get it so that the content gets pushed below the navbar when it's stacking? Do I have to use #media for this?
Problem solved by reworking the whole mess a bit. In case anyone is ever interested in this, here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner"> KB
<ul class="nav">
<li class="active">Home</li>
<li>Create page</li>
</ul>
<ul class="nav pull-right">
<li><p class="navbar-text">user#email.com</p></li>
<li class="divider-vertical"></li>
<li>Upload</li>
<li class="divider-vertical"></li>
<li>Manage</li>
<li class="divider-vertical"></li>
<li>Password</li>
<li class="divider-vertical"></li>
<li>Sign Out</li>
</ul>
</div>
</div>
<div class="container-fluid container-height">
<div class="row-fluid full-height">
<div class="span2 article-tree">Article-tree</div>
<div class="span10 content-area full-height"><div id='paragraphs' data-lorem='5'></div></div>
</div>
</div>
<div class="container-fluid footer">
<div class="footer">footer</div>
</div>
</body>
</html>
CSS
html, body {
height: 100%;
}
.full-height {
height: 100%;
}
.content-area {
background: green;
color: white;
}
.article-tree {
background: blue;
color: white;
}
.footer {
background: red;
}
.container-height {
margin: 0 auto;
min-height: 88%;
height: auto;
}
See jsfiddle: http://jsfiddle.net/pCut6/
It can be done much better still with more responsive design etc but this should give someone an idea if they're stuck like me and need an example.
The Twitter Bootstrap API tells me to add my css to add padding to the body element in between the bootstrap css and the bootstrap-responsive css. I have done so in the _master file, but it doesn't seem to be adding the padding still.
Am I reading this incorrectly or could something else potentially be wrong?
My _master head section
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Bootstrapped</title>
<link href="#Url.Content("~/css/bootstrap.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/skin.css")" rel="stylesheet" />
<link href="#Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div>
#RenderBody()
</div>
</div>
<script src="~/js/bootstrap.js"></script>
</body>
CSS
body {
padding-bottom: 40px;
}
A visualization of the body padding not working (scrolled all the way to the top)
What you need to do is to give a padding-top: 40px to the div which contains the body.
Ex: Fiddle
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<div style="padding-top: 40px">
some content 1<br />
some content 2<br />
some content 3<br />
some content 4<br />
</div>
</div>
I think you might want to use padding-top: 40px instead?