'I´m having some problem with my header/footers and my sidecolumn
I would really appreciate some tips och advise! I have struggle!!
My headers and footers doesnt cover the entire width of the page and I dont understand why, this should be done with javascript. Also when i click on a page in my leftcolumn the page i clicked on should change colour, by something called active or activated in CSS but also here i dont understand and I have tried many different things! Would be so greatful for some input!
Here is my code:
<head>
<meta charset="utf-8">
<title> Metoder och material </title>
<link rel="stylesheet" type="text/css" href="design.css">
<!-- Detta gör att visad kod ska bli snyggare -->
<!-- <link rel="stylesheet" type="text/css" href="highlight/styles/default.css"> -->
<!-- <script src="highlight/highlight.pack.js"></script> -->
<!-- <script>hljs.initHighlightingOnLoad();</script> -->
<!-- <script src="script/showHideMenu.js"></script> -->
<!-- <script src="script/prettier-page.js"></script> -->
<script src="show_hide_x.js"></script>
<script src="klocka.js"></script>
</head>
<body>
<header>
<h1> Mitt gymnasiearbete </h1>
</header>
<aside>
<button id="knapp"></button>
<script>
/*
function knappen(){
let el;
el = document.getElementById("knapp");
el.innerHTML = "show nav"; }
document.getElementById("nav").addEventListener('click', knappen);
*/
let el = "nav";
let knapp = "knapp";
document.getElementById(knapp).addEventListener('click', a => showHideElement(el));
</script>
<nav id="nav">
<h2> Navigering </h2>
<a href="F%C3%B6rsta%20sida%20och%20abstract.html">Första sida och abstract</a>
<a href="Metod%20och%20material.html">Bakgrund och syfte</a>
<a href="Metoder%20och%20material.html">Metoder och material</a>
<a href="Resultat%20och%20analys.html">Teoretisk bakgrund</a>
<a href="Diskussion%20och%20analys.html">Diskussion och analys</a>
</nav>
</aside>
<main>
<article>
<section>
<figure>
<img src="attgöra.jpg" title="uppgifterattgörabakomendörr" alt="bilddärallasakermanskagöraärbakomennästanheltstängddörr"/>
<figcaption> ATT GÖRA! </figcaption>
</figure>
</section>
<section id="visaklocka">
<script>
function klocka(x){
// En funktion som visar dagens
// datum och tid
let el = document.getElementById(x); // Hittar elementet
let today = new Date(); // Allt om idag
// Nu hämtar vi tiden
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
// Nu fixar vi så att tiden är på formen
// HH:MM:SS
if (h < 10){
h = "0"+h;
}
if (m < 10){
m= "0"+m;
}
if (s < 10){
s = "0"+s;
}
let tid = h+":"+m+":"+s;
// Nu plockar vi datum
let year = today.getYear();
let month = today.getMonth() +1;
let date = today.getDate();
let day = today.getDay();
// Nu ser vi till att få datumet på formen
// ÅÅÅÅ/MM/DD
year = year + 1900;
if (month < 10){
month = "0"+month;
}
if (date < 10){
date = "0"+date;
}
let datum = year+"/"+month+"/"+date;
/*
// Här översätter vi veckodagen till text
// Det här används som standard inte och
// går att stryka helt
if (day == 1){
day = "Måndag";
}
else if (day == 2){
day = "Tisdag";
}
else if (day == 3){
day = "Onsdag";
}
else if (day == 4){
day = "Torsdag";
}
else if (day == 5){
day = "Fredag";
}
else if (day == 6){
day = "Lördag";
}
else if (day == 0){ // Jänkare räknar veckan från söndag till lördag.
day = "Söndag";
}
*/
// Den här biten uppdaterar elementet
el.innerHTML = tid+", "+datum;
// Den här ser till att funktionen körs
// hela tiden
t = setTimeout(function(){
klocka(x)
}, 500);
}
klocka("visaklocka");
</script>
</section>
<section>
<h2> Val av metod </h2>
<h3> Förplanering av undersökning </h3>
<p>
Jag valde att använda mig av den kvantitativa metoden, i form av en enkät. Jag valde denna metod då jag ville undersöka prokrastinering som helhet,
få en helhetsbild för att sedan övergripande läsa av statistik och hitta mönster kring de orsaker och konsekvenser jag nämnt i resultatdelen.
Den kvalitativa metoden passar inte till detta då dess syfte är att undersöka på individnivå, vilket inte passar mitt ämne då prokrastinering
varierar mycket beroende på personen, både utifrån orsaker och konsekvenser samt graden av prokrastinering.
</p>
<p>
Enkäten avslöjar dock inte att det är prokrastinering jag undersöker utan säger “skolarbete och studerande”, i information skrev jag även att enkäten
har frågor kring elevers studerande i form av upplägg och utförande samt konsekvenser av dessa delar. Detta i syfte att få så ärliga svar som möjligt.
Viljan att framställa sig bättre än vad man är samt höga tankar om sig själv kan få ens svar att ha en hög inkongruens gentemot ens realsjälv och idealsjälv
vilket inte ger ärliga eller realistiska svar, som resulterar i en opålitlig undersökning.
</p>
<p>
Jag gjorde ett urval utifrån tillgänglighet till elever på gymnasieskolor i Lund och valde att skicka ut enkäten till alla klasser på Polhemskolan.
Delvis för att få ett så brett och varierat resultat som möjligt ex. program, ålder och kön delvis då det är lätt för mig att gå till klasser och be dem fylla i
enkäten om jag skulle få in för få svar. I enkäten ställer jag dock inte frågor om respondentens ålder, kön eller program vilket gör att jag inte kan se fördelningen
mellan dessa faktorer i svaren och kan ha en indirekt påverkan på min helhetsbild. Detta har däremot inte en stor påverkan då jag ursprungligen enbart vill ha en nyanserad
och komplex helhetsbild att utgå från när jag undersöker mönster, därmed gör fördelningen mellan dessa faktorer inte så mycket skada.
</p>
<p>
Frågorna i undersökningen är precisa och stängda för att få ett så grundläggande svar som möjligt utan vidare utveckling från respondenten kring varför eller hur hen tror det
är på det sättet. Då frågorna bygger på faktan i teoridelen, som kommer från trovärdiga källor har undersökningen en hög reliabilitet samt en hög validitet eftersom den undersöker
orsaker från olika psykologiska perspektiv.
</p>
<h3> Strukturen av undersökningen </h3>
<p> Enkäten har 11 frågor, varav 3 är skalfrågor mellan 1-5 då man ska bedöma ens egen förmåga. </p>
<h3> Genomförande av undersökning </h3>
<p>
Ursprungligen svarade 8 elever på enkäten vilket var färre än förväntat. Författaren var medveten om att enkäter inte brukar få in många svar, mestadels pga elevernas vilja att
svar minskar i längden som ett resultat av det stora antal enkäter som skickas ut varje år men detta var under förväntan. Ursprungligen var det inte planerat att gå ut till klasser,
det blev beslutat pga bristande svarsandel. Besök anordnades i 3 olika klasser med 25-30 elever i varje, alla från samhällsprogrammet men olika årskurser: en etta och två tvåor.
Undersökningen blev avgränsad till samhällsprogrammet pga det var lättillgängligt. Sammanlagt svarade 71 av 2 100 elever på enkäten, bortfallet är 2 030 elever.
</p>
<p>
Genomförandet var samma i alla klasser. Författaren skickade ett meddelande på vklass till lärare hen haft i tidigare och pågående kurser för att be om assistant, detta urvalet grundas i att
ansvarig lärare i respektive kurs sedan länge sagt att när tiden kommer för vår klass att skriva gymnasiearbete skulle de gärna hjälpa till. Det bokades datum, tid och plats för besöket till
klasserna samt skickades länkar ut i förväg till ansvarig lärare. Besöken skedde på ett spann mellan 3 dagar. Besöket i samhällsklassen för ettan skedde i slutet av ett metorspass, för samhälls
tvåorna ägde besöken rum i början av en geografilektion och matematiklektion. Upplägget var samma på alla besök: ansvarig lärare presenterade mig, jag förklarade syftet med undersökningen,
därefter skickar ansvarig lärare gav ut länken som skickas till honom/henne och när alla eventuella frågor kring undersökningen blivit besvarade gick jag.
</p>
</section>
</article>
</main>
<aside>
<h2> Mitt källmaterial </h2>
<ul>
<li>Böcker
<ul>
<li> Pettersson, D. (2017), <i> Jag ska bara… konsten att få det gjort i tid </i>. Jelgava, Lettland: Ross & Tegnér </li>
<li> Rozental, A & Wennersten, L. (2014), <i> Dansa på deadline </i>, Falun: Scandbook AB </li>
</ul>
</li>
<li>Elektroniska källor
<ul>
<li> 1177 vårdguiden, “utmattningssyndrom” <a href="https://www.1177.se/Skane/sjukdomar--besvar/hjarna-och-nerver/utmattningssyndrom/">https://www.1177.se/Skane/sjukdomar--besvar/hjarna-och-nerver/utmattningssyndrom/</a> (hämtad 2021-09-20) </li>
<li> Aroseus, F. “Tanke blir handling” (Lätt att lära 2013-09-30) <a href="https://lattattlara.com/psykologiska-perspektiv/kognitivt-perspektiv/tanke-blir-handling/">https://lattattlara.com/psykologiska-perspektiv/kognitivt-perspektiv/tanke-blir-handling/</a> (hämtad 2021-09-28) </li>
<li> Hansen,A. “Anders Hansen om stressreaktioner” (Land 2019-09-25) <a href="https://www.land.se/halsa/anders-hansen-om-stressreaktioner/">https://www.land.se/halsa/anders-hansen-om-stressreaktioner/</a> (Hämtad 2021-10-02) </li>
<li> Laksov Bolander, K. “Jag gör det imorgon” — orsaker till studenters prokrastinering” (Centrum för universitetslärarutbildning 2018-11-30) <a href="https://www.su.se/ceul/forskning/aktuell-h%C3%B6gskolepedagogisk-forskning/jag-g%C3%B6r-det-imorgon-orsaker-till-studenters-prokrastinering-1.415157 ">https://www.su.se/ceul/forskning/aktuell-h%C3%B6gskolepedagogisk-forskning/jag-g%C3%B6r-det-imorgon-orsaker-till-studenters-prokrastinering-1.415157</a> (hämtad 2021-09-28) </li>
<li> Lundborg, E. “Panikångest” (Doktor.se 2021-09-21) <a href="https://doktor.se/fakta-rad/panikangest/ ">https://doktor.se/fakta-rad/panikangest/</a> (hämtad 2021-09-29) </li>
<li> Nationalencyklopedin,prokrastinera <a href="https://www.ne.se/uppslagsverk/encyklopedi/l%C3%A5ng/prokrastinera">https://www.ne.se/uppslagsverk/encyklopedi/l%C3%A5ng/prokrastinera</a> (hämtad 2021-09-01) </li>
<li> Perski, A. “Återkoppling: Hjärnans 'spela död-program' kan leda till apati” (Forskning & Framsteg, 2005-09-01) <a href="https://fof.se/tidning/2005/6/artikel/aterkoppling-hjarnans-spela-dod-program-kan-leda-till-apati">https://fof.se/tidning/2005/6/artikel/aterkoppling-hjarnans-spela-dod-program-kan-leda-till-apati</a> (hämtad 2021-09-24) </li>
</ul>
</li>
</ul>
</aside>
<footer>
Embla Olsson <br/>
Polhemskolan <br/>
SA19C <br/>
</footer>
</body>
And here is the document where i write all the css and javascript code:
:root{
--lunda-groen: #004447;
--stabila-lila: #55134E;
--varm-orange: #ED683F;
--magnolia-rosa: #FBD6D1;
--lunda-himmel: #CCE1E1;
--lunda-ljus: #FFF2BF;
--nav-link-height: 50px;
}
html{
scroll-behavior: smooth;
}
body{
background-color: var(--lunda-groen);
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 25% 60% 15%;
row-gap: 5px;
column-gap: 5px;
}
h1{
text-align: center;
font-size: 5em;
font-family:'Courier New', Courier, monospace
}
h1 a:hover{
color: var(--stabila-lila);
transition: all 1.0s ease;
}
header{
background-color: var(--lunda-himmel);
}
header div{
display: grid;
align-items: center;
}
header figure{
width: 100%;
}
header nav{
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
display: flex;
}
header nav button{
margin: 10px;
border-color: var(--stabila-lila);
background-color:var(--stabila-lila);
color: var(--lunda-himmel);
font-size: 2em;
flex-direction: row;
flex: 1;
}
header nav button:hover{
border-radius: 10px;
border-color: var(--lunda-groen);
background-color: var(--lunda-groen);
transition: all 1.0s ease;
}
header nav a{
background-color: var(--stabila-lila);
color: var(--lunda-himmel);
flex: 1;
flex-direction: row;
font-size: 2em;
text-decoration: none;
margin: 5px;
vertical-align: middle;
}
header nav a:hover{
background-color: var(--lunda-groen);
transition: all 1.0s ease;
border-radius: 10px;
}
#html-nav, #css-nav, #js-nav{
display: none;
}
.flex-push{
margin-left: auto;
}
aside{
background-color: var(--lunda-himmel);
grid-column: 25%;
grid-row: 2;
}
aside nav{
position: sticky;
top: 10px;
background-color: var(--lunda-himmel);
display: flex;
flex-direction: column;
}
aside nav a{
background-color: var(--stabila-lila);
color: var(--lunda-himmel);
margin: 5px;
font-size: 2em;
text-decoration: none;
padding-left: 1em;
}
aside nav a:hover{
border-radius: 10px;
background-color: var(--lunda-groen);
transition: all 1.0s ease;
}
main{
grid-column: 60%;
grid-row: 2;
}
article{
padding: 1em;
background-color: var(--lunda-ljus);
}
footer{
grid-row: 3;
grid-column: 1/3;
background-color: var(--lunda-himmel);
display: grid;
grid-template-columns: 25% 60% 15%;
}
p{
font-family: 'Open Sans',sans-serif;
min-width: 500px;
max-width: 750px;
}
img{
width: 700px;
height: 700px;
}
a:active{color:yellow;
}
code{
background-color: #F0F0F0;
}
.centered{
margin: auto;
}
figure{
width: 90%;
}
.image{
width: 100%;
}
@media only screen and (max-width: 1200px){
body{
grid-template-rows: auto auto auto auto;
grid-template-columns: 1fr;
}
header div{
flex-direction: column;
}
header nav{
flex-direction: column;
}
aside{
grid-column: 1;
grid-row: 2;
}
main{
grid-column: 1;
grid-row: 3;
}
footer{
grid-row: 4;
}
}
@media only screen and (max-width: 980px){
header div{
grid-template-columns: 0% 100% 0%;
}
}
Solution 1:[1]
The Coding of all WordPress plugins including the text and images are inside the plugin Folder "wp-content/plugins/".
A easy way to make change to the plugin is find the code line where "Start Now" is located, for this install String Location and search "Start Now" string on the whole WordPress directory or just the plugin directory. Then you will find and edit the text with no problem.
With this trick you can change any plugin text or even theme css colors.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mistalini |