I am unsure on how to place the image in correct location. I am using a bootstrap custom blog template, and I am trying to slightly modify it to make it look the way I want.
I want to place a image in the location of the blue rectangle on the left side as shown in picture bellow. Here I have tried couple of different things, but my images keeps rendering right under the blog title "The Bootstrap Blog", which is not what I want. I have tried using
class="col-sm-offset-1"
But the more I increase the offset, this just moves the image to the right of the screen. I can't get it to go far left. How can i accomplish this, without losing the bootstrap auto scaling for different screen sizes?
Here is my base.html file:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
{% load staticfiles %}
<title>Blog Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Global blog css for custom defined parameters -->
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="{% url 'blog:index' %}">Home</a>
<a class="blog-nav-item" href="{% url 'about:index' %}">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Code'N Cofee Blog</h1>
<p class="lead blog-description">Live and write code. </p>
</div>
<!-- place image on page -->
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<img src="{% static 'media/Pic3.jpg' %}" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- blog post goes here -->
{% block content %}
{% endblock %}
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for Bootstrap by #mdo.</p>
<p>
Back to top
</p>
</footer>
<!-- 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.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here is my blog.css file:
/*
* Globals
*/
body {
font-family: 'Source Sans Pro', Georgia, "Times New Roman", Times, sans-serif;
color: #555;
background-color: ghostwhite;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*
float image to left
*/
.pull-left {
float: left !important;
}
#swoosh {
padding-left: 0;
}
Thank you for your help,
Nermin
The class="col-sm-offset-1" moves the image to the right not to the left. If you increase the no like class="col-sm-offset-2" it will move to the right by 1 column. So, this is not the solution.
You have two option
NO.1
Wrap it inside class="container-fluid" and don't give class="col-sm-offset-1" see the snippet below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
No.2
Wrap it inside class="container" and add some margin-left according to your wish.
See the example below--
.image {
margin-left:-60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 image">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
Related
I have started with a website, which uses border-radius in css. But not working as per requirement. It is getting curved on top-left and bottom-left but not on top-right and bottom-right. I have also tried specific border-top-right-radius: but still is not working.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150 px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
The width should have no spaces between the value and the units, otherwise it is width 100% which is the default one for a block element as div is.
Even though you only distinguish the part with the background at first sight but if you use your browser's inspector tools you can check it.
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/*** HEADER ***/
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://via.placeholder.com/150') no-repeat;
border-radius: 60px;
width: 150px;
height: 150px;
margin: 10px 15px 10px 5px;
border-collapse: inherit;
}
<!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>Big Bite</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght#300;400;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="">
<div id="logo-img" alt="Logo image"></div>
</a>
</div>
</div>
</nav>
</header>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
The class "pull-left" doesn't work, the logo is not being floated to left and the background color of body tag is not visible as well?
Can anyone explain where I am going wrong?
The index.html file and bootstrap files are in the same directory.
I checked the tags as well but could not find a typo.
body {
font-size: 16px;
font-family: font-family: 'Oxygen', sans-serif;
background-color: #61122f;
color: #fff;
}
#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('https://scontent-sea1-1.cdninstagram.com/t51.2885-19/s150x150/17437826_285820131856427_2792512281873743872_a.jpg') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding: 25px;
}
.navbar-brand h1 {
font-family: 'Lora', serif;
color: #557c3e;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: 0.75;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p {
color: #000;
text-transform: uppercase;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span {
vertical-align: middle;
}
<!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>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet" type="text.css">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700" rel="stylesheet" type="text/css">
</head>
<body>
<p></p>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>David Chu's China Bistro</h1>
</a>
<p>
<img src="https://www.davidchuschinabistro.com/images/star-k-logo.png" alt="Kosher Certification">
<span>Kosher Certified</span>
</p>
</div>
</div>
</div>
</nav>
</header>
<h1></h1>
<!-- jQuery (bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
In bootstrap 4 pull-right, pull-left are changed with float-right, float-left.
Also your bootstrap css file conflict to other reboot.scss file that's you can't see your background color.
You can use css properties like this to resolve conflict:
body {
font-size: 16px !importnat;
font-family: 'Oxygen', sans-serif !importnat;
background-color: #61122f !importnat;
color: #fff !importnat;
}
There's the html tag where I changed pull-left class with float-left
<a href="index.html" class="float-left">
<div id="logo-img" alt="Logo image"></div>
</a>
I hope it'll helps you
In bootstrap 4 pull-right, pull-left are changed to pull-sm-right
That is, pull-sm/xs/md/lg-left/none/right
Body background colour must have been applied.... It's just not visible because of height may be.. just check by specifying with a significantly larger height of body
does anybody know why there is a gap between my banner and navbar? This gap appears in Edge and Chrome, but not Firefox.
I've reduced all of the margins, that I can think of, to 0. Doing this removed the gap in Firefox but not the other browsers.
I've used Chrome and Edge's developer tools to inspect the gap and it actually falls under the .wrapper class. This is the parent of both the .navbar and .banner, so I can't figure out what is causing its meaningless existence!
What it should look like - i.e Firefox
What it looks like in Edge and Chrome
HTML:
{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv"X-UA-Compatible" Content = "IE=Edge">
<meta name = "viewport" content="width=device-width", initial-scale=1>
<link rel="icon" href="favicon.ico">
<title>{% block title %}MyBlog Title{% endblock title %}</title>
<link href="{% static 'reset.css' %}" rel="stylesheet">
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<link href="https://cdnjs.cloudfare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel = "stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:700" rel="stylesheet">
<!-- MyBlog custom styles -->
<link href="{% static 'myblog.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% render_block "css" %}
</head>
<body>
<div class="wrapper">
<!--<div class="blog-header"></div>-->
<div class ="banner">
<h1 id="logo">Patch's Soapbox </h1>
<!--<img class = "blog-header" src="../../media/images/banner.png">-->
</div>
{% cms_toolbar %}
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<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>
<!--<img src="{% static '#' %}"/>-->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% show_menu 0 1 0 100 "menu.html" %}
</ul>
</div>
</div>
</nav>
<div class="container-full">
{% block content %}{% endblock content %}
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container-full">
<p class="text-muted">{% block footer %}Patch The Bill© 2015{%endblock footer%}</p>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bu -->
<script src="{% static "ie10-viewport-bug-workaround.js" %}"></script>
{% render_block "js" %}
</body>
</html>
CSS:
html {
position : relative;
min-height: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
/* Margin bottom by footer height */
/*margin-bottom: 60px;*/
font-family : Georgia, "Times New Roman", Times, serif;
color: #555;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height:100%;
margin-bottom:-60px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serfi;
font-weight: normal;
color: #333;
}
.footer,.push {
height:50px;
}
.footer {
position: absolute;
clear:both;
padding-bottom:0;
padding-left : 0px;
bottom: 0;
width: 100%;
min-height: 60px;
height:100%;
background-color: #f5f5f5;
}
footer.footer {
position: relative;
bottom: 0;
width: 100%;
}
.blog-header {
display: block;
width: 100%;
border-style: solid;
/*border-bottom: solid #C6C6C6*/
}
.container-full {
margin: 0 auto;
width: 100%;
padding: 0;
}
.blog-title {
margin-top: 0px;
width: 500px;
margin-bottom: 0;
font-size: 28px;
font-weight: normal;
}
.blog-description{
font-size: 20px;
color: #999;
}
.sidebar-module{
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child{
margin-bottom: 0;
}
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
.blog-post{
margin-bottom: 60px;
}
.blog-post-title{
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color : #999;
}
body > container {
padding: 0px 0px 0;
}
.container .text-muted {
margin: 0 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 0;
bottom:0;
}
.row {
margin-right: 0px!important;
}
.navbar { margin-bottom: 0;
margin-top: 0;
padding-top:0
}
.footer { margin-bottom: 0;}
.banner {background-color: green;
min-height: 120px;
padding-bottom:0
}
#logo {
position: relative;
bottom: -50px;
text-align:right;
color:white;
font-family: 'Source Sans Pro', sans-serif;
font-size: 50px
}
Use -webkit-padding-before for top padding, -webkit-padding-after for bottom padding.
(Top) - -webkit-padding-before
(Right - -webkit-padding-end
(Bottom) - -webkit-padding-after
(Left) - -webkit-padding-start
see document on browser specific hacks
https://css-tricks.com/snippets/css/browser-specific-hacks/
or maybe could try this media query:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* rules only apply in saf3+, chrome1+ */
}
I'm currently working on putting together a very basic site and using CSS/ Bootstap. I am unable to figure out however why my columns are stacking on each other. I've looked through Stack Overflow and the official bootstrap documentation and as far as I can see, it should be working: I am looking to create three equal columns underneath the "about me" header that span the page.
<!DOCTYPE html>
<html lang="en">
<title>Testing | </title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Bootstrap Core CSS-->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Copse|Cutive|Lora:700|Sanchez|Scope+One|Slabo+27px|Trocchi|Vesper+Libre" rel="stylesheet">
<style>
header {
text-align: center;
background: url('sunlightthroughgrass.jpg');
background-size: cover;
color: black;
width: auto;
height: auto;
}
a {
color: white;
}
h1 {
font-family: 'Vesper Libre', serif;
font-size: 70px;
}
img {
max-width: 400px;
max-height: 400px;
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 20px;
width: auto;
height: auto;
}
ul {
text-align: center;
padding: 10px;
background: rgba(0, 0, 0, 0.5);
}
li {
display: inline;
padding: 0px 10px 0px 10px;
}
<!-- article {
max-width: 500px;
padding: 20px;
margin: 0 auto;
}
#media (max-width: 500px) {
h1 {
font-size: 36px;
padding: 5px;
}
li {
padding: 5px;
display: block;
}
}-->
</style>
</head>
<body>
<div class="container-fluid">
<header>
<img src="robin.jpg">
<h1>Test Person|Testing</h1>
<ul class="nav nav-pills">
<li>About Me
</li>
<li>Resume
</li>
</ul>
</header>
<div class="row">
<div class="col-lg-4">
Test Test Test
<div class="col-lg-4">
Nother Test
<div class="col-lg-4">
Third Nother Test
</div>
</div>
</div>
</div>
<!-- SCRIPTS GO UNDER HERE -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<!--Anti-Spam-->
<script type="text/javascript" src="js/obscure.js"></script>
You are nesting your col-lg-4 divs, do it like this instead:
<div class="row">
<div class="col-lg-4">
Test Test Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
<div class="col-lg-4">
Third Nother Test
</div>
</div>
I'm trying to make a navbar for a new project I'm working on.
I want the navbar to have the website title in it, that is the h1 and the menu items, but when I try to do that it doesn't make both the h1 and the ul on the same line.
I want the navbar items and the navbar "header" aligned at the same height and on the same line not as diffrent blocks that can't fit together.
html, body {
width: 100 % ;
padding: 0;
margin: 0;
font - family: 'Roboto',
sans - serif;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
.main - title {
text - align: center;
margin - top: 20 px;
margin - bottom: 2 px;
}
header {
border - bottom: 2 px solid grey;
}
ul {
padding: 0;
margin: 0;
}
.nav - ul {
list - style - type: none;
float: right;
margin - right: 50 px;
display: inline - block;
}
.navbar - title > h1 {
text - align: center;
margin - top: 20 px;
}
.nav - ul > a: visited, a: link {
text - decoration: none;
color: black;
font - size: 1.5e m
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>
h1 tags are display:block by default, meaning they take up 100% width. You can change this by adding display:inline-block to .nav-brand and .nav-list:
html, body {
width: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5 {
margin: 0;
padding: 0;
}
.main-title {
text-align: center;
margin-top: 20px;
margin-bottom: 2px;
}
header {
border-bottom: 2px solid grey;
}
ul {
padding: 0;
margin:0;
}
.nav-brand, .nav-list {
display:inline-block;
}
.nav-ul {
list-style-type: none;
float:right;
margin-right: 50px;
display: inline-block;
}
.navbar-title > h1 {
text-align: center;
margin-top: 20px;
}
.nav-ul > a:visited, a:link {
text-decoration: none;
color: black;
font-size: 1.5em
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>