I have two templates. index.html (PARENT) and test.html (CHILD)
I have a DIV which is fixed on top of the page, like a bar [#TopBar]. it stays there on the the PARENT template, but once it reaches the CHILD template, it insists on adding some sort of padding or margin, and its a few pixels off the top.
I tried overiding the css from within the child template, and still no luck. I stopped using the templates, and creating two full HTML files and that works(don't want to do this as i am duplicating html code). So it seems everytime i put {% extends "crm/index.html" %} on the child template it stuffs things up.
Heres my code:
PARENT - index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{%block title%}Control Panel {%endblock%}</title>
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> TITLE</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="UserProfile">
{% block content %}
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
{%endblock%}
</div>
</div>
</body>
</html>
CHILD - test.html
{% extends "crm/index.html" %}
{%block title%} Test {%endblock%}
{%block content%}
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
{%endblock%}
CSS
*{padding:0px;margin:0px;}
body{background-color:#DBDBDB; }
#TopBar{width:100%; height:50px; background-color:#009999; margin:0px;}
#header{float:left}
#searches{float:right; padding:15px;}
#LeftCol{height:840px; margin-top:10px; width:200px; background-color:#C0C0C0; -moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; float:left;}
#RightCol{width:1040px; margin:10px; color:black;-moz-border-radius: 20px; -webkit-border-radius: 20px;-khtml-border-radius: 20px; border-radius: 20px;
display:block; overflow: hidden; background-color:white; float:left;}
h1{color:white;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
h1.profile{ color:black;font-family:"Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
padding:5px;}
.h3{margin-left:70px; padding-top:10px}
I Only want to change content in the {% block content %} there is no reason for me to put other DIVS in blocks.
This is the output I get from the browser (right click, view source):
index.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Control Panel </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1>Control Panel</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> USER PROFILE</h1>
<p>Random text</p>
</div>
</div>
</body>
</html>
test.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Test </title>
<link rel="stylesheet" type="text/css" href="/static/crm/crm.css" />
</head>
<body>
<div id="TopBar" >
<div id="header">
<h1> Test</h1>
</div>
<div id="searches" >
<input type="text" id="search" name="search" /> <input type="button" value="submit" />
</div>
</div>
<div id="LeftCol">
<div id="LeftMenu">
<h3>MENU</h3>
</div>
</div>
<div id="RightCol">
<div id="Contents">
<h1 class="profile"> test</h1>
<p> hkhksjhgkdhskghdk</p>
</div>
</div>
</body>
</html>
i don't think this is a django problem, the extended template seems right.. maybe you could post the full HTML output of both the index.html and the test.html you receive when accessing your views in the browser...
try using the stylesheet for css reset it removes a lot of margins and paddings. it may not solve your problem, but usually it helps a lot
Related
I am developing my first .net core web application. I am trying to put my company logo in _layout.cshtml page, but it seems that the style sheet site.css is not recognized by the _layout page. Below is my code for _layout.cshtml page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - VitalRecords</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - test - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
and my site.css has the following defined:
.headerDiv {
background-color: white;
}
.headerTopBanner {
background-color: $header-top-banner-color;
height: 5px;
width: 100%;
}
.headerLogo {
padding: 5px;
padding-left: 10px;
vertical-align: middle;
}
.logo {
background: url(../../images/LogoWithDesc) 0 0;
min-height: 70px;
vertical-align: middle;
}
$header-top-banner-color: #FD810A;
the screen shot of the output looks like so:
I have the similar code in Index.cshtml:
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
<div class="headerDiv">
<div class="headerTopBanner"></div>
<div class="headerLogo">
<div class="logo"></div>
</div>
<h1 class="display-4">Welcome</h1>
</div>
Thats is why the welcome is coming twice on my page, but logo and some other colors are not coming. It seems that site.css is not recognized at all.
any help will be highly appreciated,
Try importing your css link like this
<link href="#Url.Content("~/css/site.css")" rel="stylesheet" type="text/css" />
I'm trying to use bulma columns but they are overflowing the body in mobile views. In the next picture you can see the white gap to the right of the screen. I inspected and the body tag is flush with the 'tomato' section's right border. However when the instance of columns appears it overflows the body tag and creates horizontal scrolling.
Thanks in advance for your help!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<title>Buffalo Wings</title>
</head>
<body>
<div class="bw-hero" style='display: flex; align-items: center; justify-content: center'>
<h1 class='title is-bold' style="color: white">slider tbd</h1>
</div>
<div class="container">
<div class="columns">
<div class="column">
<img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts">
</div>
<div class="column">
<h2 class="title has-text-centered">SELECCIONA TU PAÍS Y CIUDAD</h2>
<div class="field is-grouped is-grouped-centered">
<div class="control">
<div class="select">
<select>
<option>País</option>
<option>With options</option>
</select>
</div>
</div>
<div class="control">
<div class="select">
<select>
<option>Ciudad</option>
<option>With options</option>
</select>
</div>
</div>
</div>
<div class="field has-text-centered">
<input class="is-checkradio" id="saveLocationPreferences" type="checkbox" name="saveLocationPreferences" checked="checked">
<label for="saveLocationPreferences">Recordar mi selección</label>
</div>
</div>
</div>
</div>
</body>
</html>
For avoid horizontal scrolling on mobile device change viewport meta tag in your <head> with this:
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1.0, user-scalable=no">
instead of :
<meta name="viewport" content="width=device-width, initial-scale=1">
For me the solution is hiding horizontal overflow in the body, as such
body {
overflow-x: hidden;
}
#sam-nzd offered an alternative solution, but it disables users capabilty to zoom. I'd love to know myself which is the better option.
The page container shrinks when a cell inside a row is empty or does not have enough contents.
html,
body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f3f3f4;
color: #676a6c;
height: 100%;
}
.box {
border: 1px red dotted;
}
#side-menu {
background-color: #2f4050;
padding: 0px;
}
#side-menu h1 {
color: #1f3647;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
.display-table {
display: table;
padding: 0px;
height: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
height: 100%;
float: none;
}
.valign-top {
vertical-align: top;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- 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]-->
</head>
<body>
<div class="container-fluid display-table">
<div class="row display-table-row">
<!-- side menu -->
<div class="col-md-2 display-table-cell valign-top" id="side-menu">
<h1>Navigation</h1>
</div>
<!-- main content -->
<div class="col-md-10 display-table-cell valign-top box">
<div class="row">
<header>
<div class="col-md-5">
<input type="text" name="term" placeholder="Search anythhing ...">
</div>
<div class="col-md-7">
<ul>
<li>Welcome to administration area</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<span class="label lable-warning">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="label lable-message">3</span>
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-log-out" aria-hidden="true"></span> Log out
</a>
</li>
</ul>
</div>
</header>
</div>
<div class="row">
<footer>
<div class="pull-left"><b>Copyright</b> © 2017</div>
<div class="pull-right"><b>Admin System</b></div>
</footer>
</div>
</div>
</div>
</div>
<!-- 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>
</body>
</html>
And as you can see i am using bootstrap to build my page. Container class is <div class="container-fluid display-table">
The page is supposed to be 100% width but it is having a left and right margins as shown here :
And when i fill the col-md-5with some text that is what i get :
Any idea why this is happening ??
I got this working with just adding width: 100% to the table element.
.display-table {width: 100%;}
Hope this solves the issue.
Agreed added 100% on display-table will give you your result you are wanting.
See screenshot screenshot
I am trying to create a website but these images I have are not working, they should be under the title, for example, the alcohol photo should be under the alcohol title and nervous system photo should be under the nervous system title.
Here is a screenshot of how it looks like at the moment:
Here is my code at the moment:
HTML: http://hastebin.com/utafabumof.xml
CSS: http://hastebin.com/arefipaguy.css
Thank you for helping if you can. it'd mean a lot.
The images should be inside the same div, for example alcohol image should be in
<div class="science">
<div class="alco">Image for Alco goes Here</div>
<div class="nersys">Image for Nersys goes Here</div>
</div>
Try this.
html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Science - Portfolio</title>
<link rel="stylesheet" type="text/css" href="styles/science.css"/>
</head>
<body>
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="about">English</li>
<li class="news">Hosptality & Catering</li>
<li class="contact">Leisure & Tourism</li>
<li class="contact">BTEC Computing</li>
<li class="contact">BTEC Business</li>
<li class="contact">CV</li>
</ul>
</div>
</header>
<div class="science">
<center><h2>Science:</h2></center>
</div>
<div class="center-block">
<div class="alco">
<h4>Alcohol:</h4>
<div class="alcoimage"><img src="images/Science/alcohol.jpg" width="400" height="357" alt=""/></div>
</div>
<div class="nersys">
<h4>Nervous System:</h4>
<div class="alcoimage"><img src="images/Science/NervousSystem.jpg" width="291" height="291" class="nerimage" /></div>
</div>
</div>
<div id="wrapper">
<div id="footer">
<p><center>Contact Me:</center></p>
<p><center>11lanjac#abbeyfield.wilts.sch.uk</center></p>
</div>
</div>
</body>
</html>
And Css file:
....
.science {
padding-top: 30px;
}
.center-block{
text-align: center;
}
.center-block .alco {
display: inline-block;
vertical-align: top;
text-align: center;
padding-right:150px;
}
.center-block .nersys{
display: inline-block;
text-align: center;
padding-left:150px;
}
.alcoimage {
padding-top: 60px;
}
#footer {
background:#40ea3c;
width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
color: white;
}
I want to keep everything within the parent div but the second div goes outside, as if starting a new row and I can't figure this out. Can someone please tell me why>
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands with the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
</div>
</body>
</html>
These are the new changes and renders correctly. Please see if I am missing anything else.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands to the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
I would add the following styles to the div that contains the floating divs:
overflow: hidden;
zoom: 1;
The overflow setting ensures it fully wraps its floating child divs and the zoom setting is for IE browsers, to kick them into "hasLayout" mode. Using special empty divs with clear:both is a rather ugly, dated way of ensuring you have the correct layout.
There is an excellent article on the subject here:
http://www.quirksmode.org/css/clearing.html
although the article uses width: 100% to achieve the same end.
Since you’ve used float, that container has zero height as far as the parent container is concerned. To change that, put an extra dummy tag just before the end of the parent div:
<div style="clear: both;"> </div>