Return to Question

added 4 characters in body; edited title

Source Link

edited Nov 27, 2020 at 21:40

34.9k
13
133
237

Can I make my template code better? I use css inside template, working on this to integrate with Django next Template file for creating formatted webpages

This is my working template file which I manually edit to create new properly formatted webpages for my personal website. I

I am interested in what advantages if any could be realized by placing the cssCSS in this file into an external file before modifying this file to work as a djangoDjango template. Should

Should I just leave it the way it is before I add djangoDjango template tags to this file?

Source Link

asked Nov 27, 2020 at 20:46

stacker

Can I make my template code better? I use css inside template, working on this to integrate with Django next

This is my working template file which I manually edit to create new properly formatted webpages for my personal website. I am interested in what advantages if any could be realized by placing the css in this file into an external file before modifying this file to work as a django template. Should I just leave it the way it is before I add django template tags to this file?

Here is my present template code below:

<!DOCTYPE html>
<html>
<head>
<style>
div.in_page_menu {
    background: radial-gradient (#f69d3c,#ffeeaa);
    opacity: 0.6;
    margin: 50px;
    font-size: 14px;
    border-width: 25px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    border-color: hsl(0, 0%, 73%);
    box-shadow: 0 9px 9px -5px #666;
}
</style>
<style>
div.contentbox {
    background: #ffeeaa;
    opacity: 0.7;
    margin: 50px;
    font-size: 28px;
    border-width: 25px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: solid;
    border-color: hsl(0, 0%, 73%);
}
</style>
<style>
div.body_div {
  background-image: url("butterflies_faded.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>
<script src="autoScrollTo.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<?php include_once("php_includes/template_pageTop.php"); ?>
<div class="body_div">
<h2 id="myheading">Resource Links</h2>
<div class="in_page_menu">
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div1');">
  text link1</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div2');">
  text link 2</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div3');">
  text link 3</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div4');">
  text link 4</a><br />
  <a href="#" onclick="return false;" onmousedown="autoScrollTo('div5');">
  text link 5</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div6');">
  text link 6</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div7');">
  text link 7</a><br />
  <a href="#" onclick="return false;" onmousedown="autoScrollTo('div8');">
  text link 8</a><br />
  <a href="#" onclick="return false;" onmousedown="autoScrollTo('div9');">
  text link 9</a><br />
<a href="#" onclick="return false;" onmousedown="autoScrollTo('div10');">
  text link 10</a><br />
 </div>
 
 
<div id="div1" class="contentbox">
<h3>content 1 heading</h3>
<p>
paragraph content 1
</p>
<ul>
    <li>content 1 list item
</ul>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
  <br>
  <br>
<div id="div2" class="contentbox">
<h3>content 2 heading</h3>
<p>
paragraph content 2
</p>
<ul>
    <li>content2 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div3" class="contentbox">
<h3>content 3 heading</h3>
<p>
paragraph content 3
</p>
<ul>
    <li>content 3 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div4" class="contentbox">
<h3>content 4 heading</h3>
<p>
paragraph content 4
</p>
<ul>
    <li>content 4 list item
</ul>
    </div>

<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
  <div id="div5" class="contentbox">
  <h3>content 5 heading</h3>
  <p>
paragraph content 5
</p>
<ul>
    <li>content 5 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div6" class="contentbox">
<h3>content 6 heading</h3>
<p>
paragraph content 6
</p>
<ul>
    <li>content 6 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div7" class="contentbox">
<h3>content 7 heading</h3>
<p>
paragraph content 7
</p>
<ul>
    <li>content 7 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div8" class="contentbox">
<h3>content 8 heading</h3>
<p>
paragraph content 8
</p>
<ul>
    <li>content 8 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
  <div id="div9" class="contentbox">
  <h3>content 9 heading</h3>
  <p>
paragraph content 9
</p>
<ul>
    <li>content 9 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
<div id="div10" class="contentbox">
 <h3>content 10 heading</h3>
 <p>
paragraph content 10
</p>
<ul>
    <li>content 10 list item
</ul>
</div>
<a href="#" onclick="return false;" onmousedown="resetScroller('myheading');">
  go back to top</a>
</div>
</body>
</html>
```