I have added some bootsstrap to my django template and that works fine - but yet when I add my own css and it doesn't have an effect on the page; no errors are produced.
I have a personal web app with a dir static/personal/images/bg01.png
The image isn't loading and the ul isn't being put inline.
views.py:
def index(request):
return render(request, 'personal/home.html')
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Deps</title>
<meta charset="utf-8" />
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
background-image:url('{{ STATIC_URL }} personal/images/bg01.png');
li{
display:inline;
}
</style>
</head>
<body class="body" style="background-color:#f6f6f6">
<div class="container-fluid" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/images/bg01.png' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<center>
<h3>Programming, Teaching, Entrepreneurship</h3>
</center>
</div>
</div><hr>
<div class="row">
<div class="col-sm-2">
<br>
<br>
<!-- Great, til you resize. -->
<!--<div class="well bs-sidebar affix" id="sidebar" style="background-color:#fff">-->
<div class="well bs-sidebar" id="sidebar" style="background-color:#fff">
<ul class="nav nav-pills nav-stacked">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</div> <!--well bs-sidebar affix-->
</div> <!--col-sm-2-->
<div class="col-sm-10">
<div class='container-fluid'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<br><br>
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
</div>
</footer>
</body>
</html>
In your style block, the background-image property isn't nested within a selector. If you wanted that to also be applied to the html/body, just move it up into the curly braces (and add a semi-colon after the height property); otherwise, add an appropriate selector to apply the property to instead.
You may also need to remove the space after {{ STATIC_URL }} so you don't end up with a space in the image path.
<style type="text/css">
html,
body {
height:100%;
background-image:url('{{ STATIC_URL }}personal/images/bg01.png');
}
li {
display:inline;
}
</style>
Related
When i run the website on Android or Windows the text renders normally and everything works super smooth but when I run the website on iOS the text is just gone. Like it never existed. All other elements tuck in. It is almost as if all text has display: none;
not working on iOS
working on Android
Here is my html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link id="normalStylesheet" rel="stylesheet" href="style.css">
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<title>Tungstun Design and ICT</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="main_section">
<div class="header"
data-aos="header-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<ul id="header">
<li id="homeButton" class="headerItem"><a>Home</a></li>
<li id="workButton" class="headerItem"><a>Work</a></li>
<li id="contactButton" class="headerItem"><a>Contact</a></li>
</ul>
<img class="header_logo" src="images/logo#2x.png">
</div>
<div id="homeSection" class="logo_container">
<img class="logo" src="images/logo#2x.png">
</div>
<div class="buttons_container">
<button id="workMainButton" class="button primary_button">Work</button>
<button id="contactMainButton" class="button secondary_button">Contact</button>
</div>
<div class="image_div">
<img src="images/bgovals#2x.png" id="bgOvals">
</div>
<div class="circle_div"
data-aos="tagline-scroll"
data-aos-offset="100"
data-aos-duration="300"
data-aos-once="false"
data-aos-anchorPlacement="top-bottom"
data-aos-anchor=".work_content"
data-aos-easing="ease-in-out">
<img src="images/bgcircle#2x.png" id="bgCircle">
<h1 id="tagLine">A small IT and design company based in Utrecht</h1>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="workSection" class="work_content">
<h1 class="title">My work</h1>
<ul id="workList" class="work_list">
<li>
<div class="work_li_div">
<img src="images/amblogo.png" class="work_image">
<div class="work_name_div">Alles met boeken</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/Herfst.png" class="work_image">
<div class="work_name_div">VanGister</div>
</div>
</li>
<li>
<div class="work_li_div">
<img src="images/logo-transparent#2x.png" class="work_image">
<div class="work_name_div">Heimstel</div>
</div>
</li>
</ul>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<div id="contactSection" class="contact_content">
<h1 class="title">Contact me</h1>
<h2>Let's make something great together!</h2>
<div class="form_div">
<form>
<label for="formName">Your name</label><br>
<input id="formName" type="text"><br>
<label for="formEmail">Your e-mail</label><br>
<input id="formEmail" type="email"><br>
<label for="formType">What can I do for you?</label><br>
<select id="formType"></select><br>
<form action="formMessage">Anything to add?</form>
<textarea id="formMessage" type="text"></textarea><br>
<button id="formConfirmButton" type="button">Shoot!</button>
</form>
</div>
<div class="bottom_stroke"><hr><hr><hr></div>
</div>
<script src="work.js" type="text/javascript"></script>
<script>
AOS.init();
</script>
</body>
</html>
And here my css
#font-face {
font-family: gotham_medium;
src: url(font/GothamMedium.svg);
src: url(font/GothamMedium.ttf);
}
#font-face {
font-family: gotham_book;
src: url(font/GothamBook.svg);
src: url(font/GothamBook.ttf);
}
html, body {
background-color: var(--tungstun-background);
margin: 0px;
font-family: 'gotham_medium', 'Open Sans', sans-serif;;
text-rendering: optimizeLegibility;
}
Your implementation is correct, but the .ttf file is corrupted. Chrome is more forgiving than safari, but you can see that the font behaves weird on chrome, too (compare the two pictures using your font and the browser default font)
Load the font from a trusted source and if you refactored that font using an online service, try another one. The website itself works, you can test it by changing the font.
Here is my HTML file:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- Link to Bookstrap and stylesheet -->
<link rel='stylesheet' href="{% static 'css/bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %'}"></script>
</head>
<body class="bg-blue">
<div class="container">
<div class ="row">
<div class ="col-lg-4 col-lg-offset-4">
<br/>
<br/>
<br/>
<div class="panel panel-body">
<div class="panel-body">
<h3 class="text-center text-uppercase"><b> {% block heading %}{% endblock %}</b></h3>
<br/>
{% block content %}{% endblock %}
</div>
</div>
</div>
</body>
</html>
I want to use the "bg-blue" class defined in my style.css.
.bg-blue{
background-color: #3F3F63;
}
However it doesn't work. My boostrap and style.css are in the same folder. The Bootstrap loads, for example my text in centered and uppercase and the font is different.
I've also tried putting the class directly in the html file, and that works, but I want to be able to use style.css.
Edit: it works in Firefox but not Chrome, so it's not the code, any explain to this?
that is because you forgot to clear cache in chrome.press control + F5 to clear cache and load again.
Hi I am very new to html so I am having trouble understanding the examples online.
I want text either aligned under my images or to the right of the image. (see picture for reference)
Here is my current html code
<!-- reference https://stackoverflow.com/questions/35755237/displaying-3-images-in-a-row-with-text-underneath-in-bootstrap -->
<!-- https://www.w3schools.com/howto/howto_css_image_center.asp -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<section class="part2">
<div class="container">
<div class="row">
<div class="text-center">
{% for element in range(size) %}
<img alt="" class="resize-image" src=" {{url_for('send_image', filename=image_names[element])}}" style="width:20%">
<p>{{test[element]}}</p>
{% endfor %}
</div>
</div>
</div>
</body>
</html>
You should use "text-align: right;" in your css. If you haven't learned css yet, you absolutely should. Html is only meant for the structure of your site, while css is for the styling.
Im using Django web framework for my first project, trying to adjust my fonts. However, after various trial and error I was able to get a new font to render on my page. The problem is that when I get ride of my .font class, the p { } element no longer works for whatever reason and the font remains unchanged. I can't get my font to change any other way... I have NO idea why this is happening, driving me crazy...
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="{% static 'personal/css/bootstrap.min.css' %}" type = "text/css"/>
<link rel="stylesheet" href="{% static 'personal/css/custom2.css' %}" type = "text/css"/>
<link href="https://fonts.googleapis.com/css?family=Sansita" rel="stylesheet">
</head>
<!-- header table, no text displayed -->
<Br>
<Br>
<table align='center' width='75%' border= '0px'>
<tr>
<td bgcolor='transparent'>
</td>
</tr>
s
</table>
<!-- main body -->
<body background = "{% static 'personal/img/background.jpg' %}">
<table align='center' width='75%' border='1px'>
<tr>
<td bgcolor='white'>
<div class="body" style="min-height:95%; ">
<div class="row">
<div class="col-sm-2">
<br>
<center>
<img src="{% static 'personal/img/profile.jpg' %}" class="responsive-img" style='max-height:100px;' alt="face">
</center>
</div>
<div class="col-sm-10">
<br>
<p>test paragraph</p>
</div>
</div>
<!-- navigation bar -->
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li><a href='/header/'>HQ</a></li>
<!--<li><a href='/blog/'>Blog</a></li>-->
<li><a href='/bucket/'>TO DO</a></li>
<li><a href='/influencers/'>TO MEET</a></li>
<li><a href='/contact/'>TO CONTACT</a></li>
<li><a href='https://www.linkedin.com/in/pete-humiston-30255a5b' target='_blank'>LinkedIn</a></li>
</ul>
</div>
</nav>
{% block content %}
{% endblock %}
<footer>
<!-- This is a footer I'll leave for later. Overkill.
<div class="container-fluid" style='margin-left:15px'>
<p>Contact | LinkedIn | Twitter | Google+</p>
-->
</div>
</footer>
</td>
</tr>
</table>
</body>
</html>
Custom2.css
<style>
#import url('https://fonts.googleapis.com/css?family=Sansita');
</style>
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}
An external css file (Custom2.css) does not need <style> tags - just put straight CSS in it. The presence of those tags will break the next CSS rule. So if you have those tags in your CSS file, and you remove .font, then p won't be read since it will now come after those tags.
The contents should be...
#import url('https://fonts.googleapis.com/css?family=Sansita');
.font {
font-family: 'Sansita', sans-serif;
}
p {
font-family: 'Sansita', sans-serif;
}
On the bottom of my website, BJBGaming1.com, there is a weird white bar, please help me get rid of it. and my coding is
<!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>BJBGaming1</title>
<link rel="stylesheet" href="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li>Home</li>
<li>Minecraft</li>
<li>CS:GO</li>
<li>Smite</li>
</ul>
</div>
</div>
<div class="callout large primary">
<div class="row column text-center">
<h1 style="color:green">BJBGaming1</h1>
<h2 class="subheader">Happy Thanksgiving!</h2>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Minecraft <small>11/25/2015</small></h3>
<img class="thumbnail" src="Minecraft.png">
<p style="color:white">Minecraft is a very popular game, on PC, Xbox, and Smart Phones, played by millions of people every day. For more information go to www.bjbgaming1.com/minecraft</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>CS:GO <small>11/25/2015</small></h3>
<img class="thumbnail" src="CS.GO.png">
<p style="color:white">CS:GO stand for, Counter-Strike: Global Offensive, and is a FPS game that is assosiated with E-Sports, and played by millions of people everyday. For more information go to www.bjbgaming1.com/cs_go</p>
</ul>
</div>
</div>
<div style="color:black" class="row medium-8 large-7 columns">
<div class="blog-post">
<h3>Smite <small>11/25/2015</small></h3>
<img class="thumbnail" src="Smite.png">
<p style="color:white">Smite is a game just like LoL (League of Legends). In Smite you can pick from over 50 gods that ou unlock with Favor, favor is basically the currency to buy gods, but in Smite there are tons of different game modes, and every day they feature a community made gamemode. Also, Smite is always coming out with new gamemodes to try. For more information go to www.bjbgaming1.com/smite</p>
</ul>
</div>
</div>
</div>
<!-- begin wwww.htmlcommentbox.com -->
<div style="color:white" id="HCB_comment_box">Comment Form is loading comments... </div>
<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" />
<script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user) {hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttri bute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%24nHgonDoa 62nAhjUsN9BAt%2F"+"&opts=16862&num=10&ts=1448559904895");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script>
<!-- end www.htmlcommentbox.com -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.js"> </script>
<script>
$(document).foundation();
</script>
</body>
</html>
Im probably missing some code so its probably best that you look at it from bjbgaming1.com
Add background color to the "body" tag of this website by using CSS:
body {
background-color: #000;
}
The bottom of your background image is black so add black background to 'extend' the background image.