To learn more about web development I am trying to make a webapp.
My first challenge is working out how to interface Django, Bootstrap and custom css.
I am trying to create a nav bar consisting of an image where I can overlay a profile image, a link to your account settings etc. I would like it to look like the following image:
Essentially it would be a responsive nav bar where the height is set at say 200px and the width is always 100% of your browser window.
I have got my custom css as below:
.wide {
width:100%;
height:100%;
height:calc(100% - 1px);
height:200px;
background-size:cover;
}
And I have tried to interface this with the HTML below:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mapvpage/style.css">
</head>
<body>
<div class="wide">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
</body>
</html>
I have got the image into my page. However I cannot work out how to change the image size in any way. I am also a bit confused as to how custom CSS interacts with Bootstrap and Django. Can I just use a mix of Bootstrap and custom CSS as and when I want for different elements?
Many thanks for any help, I have been working on this for a while and getting nowhere so would appreciate some guidance!
Update:
CSS:
#header {
background-image:url("paper.gif");
max-width:100%;
max-height:auto;
}
HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static "mapvpage/style.css" %}">
</head>
<body>
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
</body>
</html>
Note I loaded the CSS stylesheet in a different way (as suggested in the other answer). It was working before (as I tested it with simple font sizes etc) so not sure if that was necessary.
First of all I will answer your question about mixing things.
When you use Django, this means that you have a Django application that renders some html and sends it to the client to display it in a browser. This html, uses bootstrap in order to give a consistent and responsive style. What bootstrap does is to apply some css to your html. However, if the functionalities provided by bootstrap are not enough, you can always include your own custom css and there is no problem with that.
About your header, I would do it having a bootstrap row with a background image and a col with padding to include the image:
<div class="row" id="header">
<div class="col-md-3 col-md-offset-9">
<img src="{% static "mapvpage/BananaFarm.jpg" %}" alt="My image"/>
</div>
</div>
Then, you would need to add the background image of the header to the header div:
#header {
background-image:url("paper.gif");
}
You can easily find some more properties to add to the header css in order to center the image, expand it to fill the whole div...
Related
I use bootstrapemail to make my e-mails. But with I have problems with Gmail Mobile Webmail.
The user-icon must not be shown on mobile devices. But here it is shown in the logo in the header.
It doesn't respond to: display: none;. Also it ignores the col-lg classes of bootstrap-email when the header becomes to small. Can eneyone help me?
This is my code:
<!DOCTYPE html>
<html lang="nl">
<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">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
In the image below tou can see what it looks like now.
Display:none is not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmail
It also doesn't support <style> blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on #media queries in the <style> block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).
You could try adding your own styles like style="width:0;height:0;" (inline on the image) and then adding a custom embedded style to show it in desktops like <style>#media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the <style> block, and you'll have to do something about Outlook, but you can use their conditional block for that)
I am creating a website in Django. I downloaded a html homepage template design on the internet that I want to improve upon and use for my website. since its been designed it came with a CSS file. now when I try to make the improvements specifically add a background image in one of the elements. it refuses to do so. the other elements respond to the CSS style but the background image refuses too. since I'm using Django i had to set up the static files and 'collect static' which I did but when I set that those pics to my background image in my CSS it refuses. here is the html file & css.
html
<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Home </title>
<link rel="stylesheet" href="{% static 'style.css' %}">
<!-- Boxicons CDN Link -->
<link href=
'https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css'
rel='stylesheet'>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<section class="home-section">
<div class="main" >
</div>
the class="main" is where I'm trying to add the background-image too.
CSS
.home-section .main{
background-image: url('https://www.pexels.com/photo/singer-
singing-on-stage-beside-guitar-player-and-bass-player-
167636/');
padding: auto;
margin: auto;
background-size: 50pc;
}
#media (max-width: 700px) {
.sidebar li .tooltip{
display: none;
}
}
I've tried everything but it refuses to acquis. Thanks in advance.
Load Static or have non-empty div
Without knowing what more code you have I can only guess that perhaps you forgot to load static files by including this on the top of your html file:
{% load static %}
Second, until the div is filled with something, it has no dimensions, so the image would occupy no space either.
For an html header, a div box containing elements including a logo, would it be possible to put the logo as well as the colors in the css file? For example:
<html>
<head>
<link rel="stylesheet" href="myurl.css"/>
</head>
<body>
<div class="header">
<div class="header-left>
<img id="logo"/>
</div>
</div>
In the stylesheet, I would like to say
#logo {
src: mylogo.jpg;
}
so that the look and feel is all within the stylesheet. Then to select a different skin, the only thing needed is to switch the stylesheet.
I am currently redesigning a site using svg. However I have run into several issues that I have yet to solve. This is a three part question.
How do you make an object which is an svg file dynamically change to fit on screen that are smaller than the viewbox without the file getting cropped. The svg file in this case is diagonal arrow.
How do you keep text in the same location based on this dynamically changing image, so that the arrow always points to the text no matter the screen size, without using vague #media queries throughout the css file (eg. min-width:15 to max-width:40...). Example of the arrow with the apple
When using objects in html, how do I replace an object with another object based on screen size. For example I have an svg of an apple above the arrow and when the screen resolution hits 1000px it shows this arrow and when its below it shows a flipped version of this arrow. It would have been easy using srcset with img, but because I have the to change color of the arrows using svg styling I can't use img.
Thank you for all your help.
Dropbox file of website
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Comatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://orgrune.com/style.css">
</head>
<body>
<div class="container">
<header class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12 text-uppercase">
<h1>Home</h1>
<hr class="hr-cl">
</header>
<div class="clearview col-xs-12 col-md-12 col-lg-12 col-md-12">
<div class="svg-container">
<object type="image/svg+xml" data="http://orgrune.com/Untitled-3.svg" class="svg-content "></object>
</div>
</svg>
<a class="photography text-uppercase" href="\" alt="photography">photography</a>
</div>
</div>
</body>
</html>
I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>