I am having problems with the nav bar tab's hover


#1

dont mind content, only nav bar has a problem
when you hover over a tab its supposed to change the font color of each to red except it. but only the math tab seems to work

<link rel="stylesheet" type="text/css" href="myblogstylesheet.css">
<header>
<nav class="navbar">
    <div class ="dropdown" >
        <button class="dropbtn">  </button>
	    <div class="dropdown-content" >
		    <button class="drpcontent" id="drpcontent1"><img src="data:image/png;base64,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"></button>
	        <button class="drpcontent" id="drpcontent2"><h>helloyou</h></button>
		</div>
	</div>
	<button class="tablink" id="mth" onclick="openTab(event, 'math')" onmouseover="changeTabColor(mth)">math</button>
	<button class="tablink" id="st"onclick="openTab(event, 'ScienceTechnology')" onmouseover="changeTabColor(st)">Science & Technology</button>
	<button class="tablink" id="insp"onclick="openTab(event, 'inspirations')" onmouseover="changeTabColor(insp)">inspiration</button>
	<button class="tablink" id="chess"onclick="openTab(event, 'chess')" onmouseover="changeTabColor(chess)">chess</button>

	</nav>


</header>
<body>
<div id="about" class="tabcontent">
<h> This is me!</h>
<p>my name is Joaquin de Castro</p>
</div>

<div id = "math" class="tabcontent" style="display: none;">
<h> Math math math and more math...</h>

</div>

<div id = "ScienceTechnology" class="tabcontent">
<h> me and technology</h>
<div id="st1"> 
<img class="newsimg" src="data:image/jpeg;base64,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">
<h3>Google's 72 Qubits achieving quantum supremacy?</h3></div>
<div  id="st2"> <h3> Genome Tests Babies Faster Than Superman ( not really )</h3> </div>

</div>

<div id = "inspirations" class="tabcontent">
<h> teachers, and of course my parents</h>
</div>
<div id = "logo-dropdown" class="tabcontent">
</div>
<div id = "chess" class="tabcontent"> </div>

<h1>Spreading Cognizance...<h1>
<div class="box" id="box1">
<h2> Unprecedented Presence Of Water In The Earth's Mantle?</h2></br>
</div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>


</body>
<script>

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablink, z, drpcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i<tabcontent.length; i++){
        tabcontent[i].style.display = "none";
	}
	tablink = document.getElementsByClassName("tablink");
    for(i = 0; i<tablink.length; i++){
        tablink[i].className = tablink[i].className.replace("active","");
		tablink[i].style.width = "20%";
		tablink[i].style.height = "30px"
	}
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += "active";
	drpcontent = document.getElementsByClassName("drpcontent");
	
}


function changeTabColor(tab) {
    var links;
	var excep;
	links = document.getElementsByClassName("tablink");
	for (c=0; c<links.length; c++) {
	links[c].style.color = "red";
	document.getElementById(tab).style.color = "white";
}

}
  
	


</script>
<style type="text/css">



/* Style the buttons that are used to open the tab content */
.navbar button {
    background-color: transparent;
    float: left;
    border: none;
    padding: 14px 16px;
    transition: 0.3s;
	width: 20%;
	padding-top: 0px;
}

/* Change background color of buttons on hover */

	


.navbar button:hover .tablink {
	
	
	color:#B0B0B0;
	width:20%;
}
.tablink {
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
	border: none;
}
/* Create an active/current tablink class */
.navbar button.active {
    background-color: none;
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
	height: 100%;
}
.navbar {
	width: 100%;
	position: fixed;
	align-content: flex-start;
	background-color: none;
	color: #ffffff;
	display: inline-block;
}
header {
	background-image: url("mathcool.jpg");
	height: 500px;
	
}
body, html {
	height: 100%;
	margin: 0;
	font-family: Arial;
}

/*DropDown Menu*/
.dropdown .dropbtn {
	font-weight: bold;
	font-size: 60px;
	color: white;
	text-align: top;
	width: 150px;
	z-index: 1;
    margin: 0;
	height: 30px;
	
}
.dropdown {
   float: left;
   overflow: hidden;
}
.dropdown-content {
	display:none;
	background-color: transparent;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content drpcontent {
	display: block;
	z-index: 1;

}

h1 {
	font-size: 40px;
	font-family:  Arial;
	padding: 25px;
    text-align: center;
}
/*News Ranking*/
#box1 {
	
	border-color: gold;
}
#box2 {
	border-color: silver;
	
}
#box3 {
	border-color: #CD7F32;
	
}
.box {
	margin-left: 30px;
	margin-top: 19px;
	width: 26%;
	display: inline-block;
	border-style: outset;
	border-width: 3px;
	box-shadow:5px 10px #888888;
    float: left;
	height: 500px;
}

h2   {
    font-size: 22px;
	font-family: Georgia, serif;
	text-align: top;
	padding: 25px;
    text-align: center;
}
/*Science and Technology*/

#st1 {
	display: inline;
	float: left;
	border: none;
	width: 27%;
	height: 350px;
	padding: o;
	margin: 0;
	z-index: 2;
	box-sizing: border-box;
	padding-left: 8px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}
.newsimg {
	padding: 9px;
}

h3 {
	font-family: "NeueHaas", sans-serif;
	font-weight: bold;
	font-size: 30px;
}
#ScienceTechnology:hover ~ .tablink {
	color: silver;
}
</style>

#2

here:

onclick="openTab(event, 'math')"

event is undefined? The event is math, so you simply have:

onclick="openTab('math')"

as for your hover events, i would do them purely in JS. don’t use the onmouseover attribute.

look at this documentation:

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

which explains the difference between mouseenter and mouseover, and then look at this documentation:

https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave

which explains mouseleave and mouseout, see which events best suit your program

yes, onmouseover is simpler, but its not the better solution.


#3

Thanks, I’ll try those.


#4

There is a reason libraries like Jquery exist, to make this easier.

also, css has a :hover pseudo-class which is really easy, which i think does fit with what you need. Let me know if you need further help :slight_smile:


#5
var tab = document.getElementById(tab);
tab.addEventListener("mouseenter", function() {document.getElementById("navbar").style.color = "gray";
tab.style.color = "white";})

Hi thanks for your advice, the mouseenter does work better for me, but I’m not sure how to give tab a value ( eg mth when math is hovered on or st when science & technology is clicked on.

I was thinking of creating separate event listeners for each, but is there an easier/ more efficient way?

Thank you!


#6

Why do you use mouseenter? If you read the documentation, you see that mouseover is passed to the children, making it yourself a lot easier:

http://jsbin.com/dakatag/edit?html,js,output

okay, they use a time out event to remove the color, you would have to create a mouseleave event or something. But


#7

Thanks, heres my new code:

var navbar = document.getElementById("navbar");
navbar.addEventListener("mouseover", function(event) {event.target.style.color = "silver";})

The only things is I want the whole nav bar to turn silver and then when a tab is hovered on it will turn back to white

How will I do that?


#8

then you need a mouseenter event to make the nav bar silver, and the mouseover event to make the tabs white, and hope they play nicely along. Otherwise just use :hover in css.


#9
var navbar = document.getElementById("navbar");
navbar.addEventListener("mouseenter", function(event) {event.target.style.color = "silver";})

Is there something wrong with my syntax? the mouse enter works when I made an alert but didn’t when I tried to change the color?

Thankyou!


#10

Please post your full code, you made too many changes for me to track them all down

or preferable, put the code in a bin (like jsbin), then save it and share the url, that is even easier


#11
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="myblogstylesheet.css">
<header>




<nav id="navbar">
    <div class ="dropdown" >
        <button class="dropbtn">  </button>
	    <div class="dropdown-content" >
		    <button class="drpcontent" id="drpcontent1"><img src="data:image/png;base64,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"></button>
	        <button class="drpcontent" id="drpcontent2"><h>helloyou</h></button>
		</div>
	</div>
	<button class="tablink" id="mth" onclick="openTab(event, 'math')"  onmouseout="normalize(this)">math</button>
	<button class="tablink" id="st" onclick="openTab(event, 'ScienceTechnology')"  onmouseout="normalize(this)">Science & Technology</button>
	<button class="tablink" id="insp" onclick="openTab(event, 'inspirations')" >inspiration</button>
	<button class="tablink" id="chess" onclick="openTab(event, 'chess')"  onmouseout="normalize(this)">chess</button>

	</nav>


</header>
<body>
<div id="about" class="tabcontent">
<h> This is me!</h>
<p>my name is Joaquin de Castro</p>
</div>

<div id = "math" class="tabcontent" style="display: none;">
<h> Math math math and more math...</h>

</div>

<div id = "ScienceTechnology" class="tabcontent">
<h> me and technology</h>
<div id="st1"> 
<img class="newsimg" src="data:image/jpeg;base64,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">
<h3>Google's 72 Qubits achieving quantum supremacy?</h3></div>
<div  id="st2"> <h3> Genome Tests Babies Faster Than Superman ( not really )</h3> </div>

</div>

<div id = "inspirations" class="tabcontent">
<h> teachers, and of course my parents</h>
</div>
<div id = "logo-dropdown" class="tabcontent">
</div>
<div id = "chess" class="tabcontent"> </div>

<h1>Spreading Cognizance...<h1>
<div class="box" id="box1">
<h2> Unprecedented Presence Of Water In The Earth's Mantle?</h2></br>
</div>
<div class="box" id="box2"></div>
<h2> </h2>
<div class="box" id="box3"></div>


</body>
<script>

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablink, z, drpcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i<tabcontent.length; i++){
        tabcontent[i].style.display = "none";
	}
	tablink = document.getElementsByClassName("tablink");
    for(i = 0; i<tablink.length; i++){
        tablink[i].className = tablink[i].className.replace("active","");
		tablink[i].style.width = "20%";
		tablink[i].style.height = "30px"
	}
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += "active";
	drpcontent = document.getElementsByClassName("drpcontent");
	
}

var navbar = document.getElementById("navbar");
navbar.addEventListener("mouseenter", function(event) {navbar.style.color = "silver";})



  
	


</script>

as for my style sheet:

<style type="text/css">



/* Style the buttons that are used to open the tab content */
#navbar button {
    background-color: transparent;
    float: left;
    border: none;
    padding: 14px 16px;
    transition: 0.3s;
	width: 20%;
	padding-top: 0px;
	z-index: 1;
}

/* Change background color of buttons on hover */

	


#navbar button:hover .tablink {
	
	
	color:#B0B0B0;
	width:20%;
}
.tablink {
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
	border: none;
}
/* Create an active/current tablink class */
#navbar button.active {
    background-color: none;
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
	height: 100%;
}
#navbar {
	width: 100%;
	position: fixed;
	align-content: flex-start;
	background-color: none;
	color: #ffffff;
	display: inline-block;
}

header {
	
	height: 500px;
	background-size: 100% 100%;
	background-image: url(slideshow1.jpg);
	
}
#imgslideshow {
	height:500px;
}
body, html {
	height: 100%;
	margin: 0;
	font-family: Arial;
}

/*DropDown Menu*/
.dropdown .dropbtn {
	font-weight: bold;
	font-size: 60px;
	color: white;
	text-align: top;
	width: 150px;
	z-index: 1;
    margin: 0;
	height: 30px;
	
}
.dropdown {
   float: left;
   overflow: hidden;
}
.dropdown-content {
	display:none;
	background-color: transparent;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content drpcontent {
	display: block;
	z-index: 1;

}

h1 {
	font-size: 40px;
	font-family:  Arial;
	padding: 25px;
    text-align: center;
}
/*News Ranking*/
#box1 {
	
	border-color: gold;
}
#box2 {
	border-color: silver;
	
}
#box3 {
	border-color: #CD7F32;
	
}
.box {
	margin-left: 30px;
	margin-top: 19px;
	width: 26%;
	display: inline-block;
	border-style: outset;
	border-width: 3px;
	box-shadow:5px 10px #888888;
    float: left;
	height: 500px;
}

h2   {
    font-size: 22px;
	font-family: Georgia, serif;
	text-align: top;
	padding: 25px;
    text-align: center;
}
/*Science and Technology*/

#st1 {
	display: inline;
	float: left;
	border: none;
	width: 27%;
	height: 350px;
	padding: o;
	margin: 0;
	z-index: 2;
	box-sizing: border-box;
	padding-left: 8px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}
st2 {
	
}
.newsimg {
	padding: 9px;
}

h3 {
	font-family: "NeueHaas", sans-serif;
	font-weight: bold;
	font-size: 30px;
}
#ScienceTechnology:hover ~ .tablink {
	color: silver;
}

</style>

#12

Sorry, is this what bin means?
html:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="myblogstylesheet.css">
<header>




<nav id="navbar">
    <div class ="dropdown" >
        <button class="dropbtn">  </button>
	    <div class="dropdown-content" >
		    <button class="drpcontent" id="drpcontent1"><img src="data:image/png;base64,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"></button>
	        <button class="drpcontent" id="drpcontent2"><h>helloyou</h></button>
		</div>
	</div>
	<button class="tablink" id="mth" onclick="openTab(event, 'math')"  onmouseout="normalize(this)">math</button>
	<button class="tablink" id="st" onclick="openTab(event, 'ScienceTechnology')"  onmouseout="normalize(this)">Science & Technology</button>
	<button class="tablink" id="insp" onclick="openTab(event, 'inspirations')" >inspiration</button>
	<button class="tablink" id="chess" onclick="openTab(event, 'chess')"  onmouseout="normalize(this)">chess</button>

	</nav>


</header>
<body>
<div id="about" class="tabcontent">
<h> This is me!</h>
<p>my name is Joaquin de Castro</p>
</div>

<div id = "math" class="tabcontent" style="display: none;">
<h> Math math math and more math...</h>

</div>

<div id = "ScienceTechnology" class="tabcontent">
<h> me and technology</h>
<div id="st1"> 
<img class="newsimg" src="data:image/jpeg;base64,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">
<h3>Google's 72 Qubits achieving quantum supremacy?</h3></div>
<div  id="st2"> <h3> Genome Tests Babies Faster Than Superman ( not really )</h3> </div>

</div>

<div id = "inspirations" class="tabcontent">
<h> teachers, and of course my parents</h>
</div>
<div id = "logo-dropdown" class="tabcontent">
</div>
<div id = "chess" class="tabcontent"> </div>

<h1>Spreading Cognizance...<h1>
<div class="box" id="box1">
<h2> Unprecedented Presence Of Water In The Earth's Mantle?</h2></br>
</div>
<div class="box" id="box2"></div>
<h2> </h2>
<div class="box" id="box3"></div>


</body>

JS:``

type or paste code here<script>

function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tablink, z, drpcontent;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i<tabcontent.length; i++){
        tabcontent[i].style.display = "none";
	}
	tablink = document.getElementsByClassName("tablink");
    for(i = 0; i<tablink.length; i++){
        tablink[i].className = tablink[i].className.replace("active","");
		tablink[i].style.width = "20%";
		tablink[i].style.height = "30px"
	}
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += "active";
	drpcontent = document.getElementsByClassName("drpcontent");
	
}

var navbar = document.getElementById("navbar");
navbar.addEventListener("mouseenter", function(event) {navbar.style.color = "silver";})



  
	


</script>``

CSS:
/* Style the buttons that are used to open the tab content */ #navbar button { background-color: transparent; float: left; border: none; padding: 14px 16px; transition: 0.3s; width: 20%; padding-top: 0px; z-index: 1; } /* Change background color of buttons on hover */ #navbar button:hover .tablink { color:#B0B0B0; width:20%; } .tablink { color: white; font-weight: bold; width:20%; background-color: transparent; border: none; } /* Create an active/current tablink class */ #navbar button.active { background-color: none; color: white; font-weight: bold; width:20%; background-color: transparent; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; height: 100%; } #navbar { width: 100%; position: fixed; align-content: flex-start; background-color: none; color: #ffffff; display: inline-block; } header { height: 500px; background-size: 100% 100%; background-image: url(slideshow1.jpg); } #imgslideshow { height:500px; } body, html { height: 100%; margin: 0; font-family: Arial; } /*DropDown Menu*/ .dropdown .dropbtn { font-weight: bold; font-size: 60px; color: white; text-align: top; width: 150px; z-index: 1; margin: 0; height: 30px; } .dropdown { float: left; overflow: hidden; } .dropdown-content { display:none; background-color: transparent; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown:hover .dropdown-content { display: block; } .dropdown-content drpcontent { display: block; z-index: 1; } h1 { font-size: 40px; font-family: Arial; padding: 25px; text-align: center; } /*News Ranking*/ #box1 { border-color: gold; } #box2 { border-color: silver; } #box3 { border-color: #CD7F32; } .box { margin-left: 30px; margin-top: 19px; width: 26%; display: inline-block; border-style: outset; border-width: 3px; box-shadow:5px 10px #888888; float: left; height: 500px; } h2 { font-size: 22px; font-family: Georgia, serif; text-align: top; padding: 25px; text-align: center; } /*Science and Technology*/ #st1 { display: inline; float: left; border: none; width: 27%; height: 350px; padding: o; margin: 0; z-index: 2; box-sizing: border-box; padding-left: 8px; background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } st2 { } .newsimg { padding: 9px; } h3 { font-family: "NeueHaas", sans-serif; font-weight: bold; font-size: 30px; } #ScienceTechnology:hover ~ .tablink { color: silver; } ```

#13

ugh sorry I’m bad at this, heres the formatted CSS:

<style type="text/css">



/* Style the buttons that are used to open the tab content */
#navbar button {
    background-color: transparent;
    float: left;
    border: none;
    padding: 14px 16px;
    transition: 0.3s;
	width: 20%;
	padding-top: 0px;
	z-index: 1;
}

/* Change background color of buttons on hover */

	


#navbar button:hover .tablink {
	
	
	color:#B0B0B0;
	width:20%;
}
.tablink {
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
	border: none;
}
/* Create an active/current tablink class */
#navbar button.active {
    background-color: none;
	color: white;
	font-weight: bold;
	width:20%;
	background-color: transparent;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
	height: 100%;
}
#navbar {
	width: 100%;
	position: fixed;
	align-content: flex-start;
	background-color: none;
	color: #ffffff;
	display: inline-block;
}

header {
	
	height: 500px;
	background-size: 100% 100%;
	background-image: url(slideshow1.jpg);
	
}
#imgslideshow {
	height:500px;
}
body, html {
	height: 100%;
	margin: 0;
	font-family: Arial;
}

/*DropDown Menu*/
.dropdown .dropbtn {
	font-weight: bold;
	font-size: 60px;
	color: white;
	text-align: top;
	width: 150px;
	z-index: 1;
    margin: 0;
	height: 30px;
	
}
.dropdown {
   float: left;
   overflow: hidden;
}
.dropdown-content {
	display:none;
	background-color: transparent;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown-content drpcontent {
	display: block;
	z-index: 1;

}

h1 {
	font-size: 40px;
	font-family:  Arial;
	padding: 25px;
    text-align: center;
}
/*News Ranking*/
#box1 {
	
	border-color: gold;
}
#box2 {
	border-color: silver;
	
}
#box3 {
	border-color: #CD7F32;
	
}
.box {
	margin-left: 30px;
	margin-top: 19px;
	width: 26%;
	display: inline-block;
	border-style: outset;
	border-width: 3px;
	box-shadow:5px 10px #888888;
    float: left;
	height: 500px;
}

h2   {
    font-size: 22px;
	font-family: Georgia, serif;
	text-align: top;
	padding: 25px;
    text-align: center;
}
/*Science and Technology*/

#st1 {
	display: inline;
	float: left;
	border: none;
	width: 27%;
	height: 350px;
	padding: o;
	margin: 0;
	z-index: 2;
	box-sizing: border-box;
	padding-left: 8px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);	
}
st2 {
	
}
.newsimg {
	padding: 9px;
}

h3 {
	font-family: "NeueHaas", sans-serif;
	font-weight: bold;
	font-size: 30px;
}
#ScienceTechnology:hover ~ .tablink {
	color: silver;
}

</style>

#14

jsbin (the site i used) is a bin, its a simple place where you can run some code.

you need to make the navbar white:

#navbar {
  color: white;
}

and not the buttons, otherwise JS has conflict over color css property.


#15

Hi I removed the color property for the tablink and set navbar color to white, but the text just turned black

#navbar {
	width: 100%;
	position: fixed;
	align-content: flex-start;
	background-color: none;
	color: white;
	display: inline-block;``
.tablink {
	
	font-weight: bold;
	width:20%;
	background-color: transparent;
	border: none;
}
#navbar button {
    background-color: transparent;
    float: left;
    border: none;
    padding: 14px 16px;
    transition: 0.3s;
	width: 20%;
	padding-top: 0px;
	z-index: 1;
}


#16

Hi this is the navbar that I’m trying to copy…

Thanks!


#17

i can’t work with small code snippets, everything on your page relate to each other. A change you made might go undetected. Please start working with jsbin, or codepen, or jsfiddle, whichever you find pleasant. It will make our collaboration easier.


#18

Here’s my current code…
https://jsfiddle.net/nmt1wyyp/1/
thanks! hope it made it easier


#19

Now you attempt both css and js to do the hover thing, which one is it? If you don’t know what you want, its really difficult for me to help you. Then i can do it my way, but is that really what we are after?

can we get rid of the buttons? They won’t inherit the color. Now that we will use eventlisteneres, we don’t need the buttons, we could something easier like a list, or divs, whatever.


#20

I’ll try to replace them with divs