RSHAP
Reputation: 2447
CSS Nesting Not Getting Expected
I'm new to HTML/CSS so this may be a stupid/basic question, but I legitimately cannot find the answer to why this is happening:
I am making a super-basic webpage where there are buttons in the navigation bar that change the image that is displayed in the content section. I just want to change the appearance of the buttons but seem to be unable to do so:
HTML doc:
<!DOCTYPE html>
<html>
<head>
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="homestyle.css">
<script src='navfunc.js'></script>
</head>
<body>
<!-- WRAPPER DIV -->
<div id='wrapper'>
<!-- HEADER DIV -->
<div class = 'header'>
<h1> Price History and Stock Data </h1>
</div>
<!-- SIDEBAR/NAV DIV -->
<div class = 'sidebar'>
<nav>
<ul>
<li> <button type="button" onclick="navfunc('AMBA')"> AMBA </button> </li>
<li> <button type="button" onclick="navfunc('APH')"> APH </button> </li>
<li> <button type="button" onclick="navfunc('ASX')"> ASX </button> </li>
<li> <button type="button" onclick="navfunc('B')"> B </button> </li>
<li> <button type="button" onclick="navfunc('BDS')"> BDSI </button> </li>
<li> <button type="button" onclick="navfunc('CNC')"> CNC </button> </li>
<li> <button type="button" onclick="navfunc('CNK')"> CNK </button> </li>
<li> <button type="button" onclick="navfunc('COLB')"> COLB </button> </li>
<li> <button type="button" onclick="navfunc('EWBC')"> EWBC </button> </li>
<li> <button type="button" onclick="navfunc('FB')"> FB </button> </li>
<li> <button type="button" onclick="navfunc('GPRO')"> GPRO </button> </li>
<li> <button type="button" onclick="navfunc('HAIN')"> HAIN </button> </li>
<li> <button type="button" onclick="navfunc('HEI')"> HEI </button> </li>
<li> <button type="button" onclick="navfunc('LCI')"> LCI </button> </li>
<li> <button type="button" onclick="navfunc('MANU')"> MANU </button> </li>
<li> <button type="button" onclick="navfunc('NCLH')"> NCLH </button> </li>
<li> <button type="button" onclick="navfunc('RCL')"> RCL </button> </li>
<li> <button type="button" onclick="navfunc('TSN')"> TSN </button> </li>
<li> <button type="button" onclick="navfunc('TSO')"> TSO </button> </li>
<li> <button type="button" onclick="navfunc('WWD')"> WWD </button> </li>
</ul>
</nav>
</div>
<!-- CONTENT DIV -->
<div class = 'content'>
<img id='hmap' src = 'AMBA_heatmap.png' alt='AMBA', style="width: 880px; height: 660px;">
</div>
<!-- FOOTER DIV -->
<div class = 'footer'>
</div>
</div>
</body>
</html>
CSS Doc:
/* WRAPPER ------------------------------------------------------------------ */
#wrapper{
margin-left:auto;
margin-right:auto;
width:1280px;
}
/* HEADER ------------------------------------------------------------------ */
div.header{
background-color: #87CEFA;
font-family: 'Trebuchet MS', Verdana, Sans-Serif ;
text-decoration: underline;
text-align: center;
font-size: 150%;
color: #286F02;
padding: 25px;
margin: 0px;
border-bottom: 2px solid black;
}
/* SIDEBAR ------------------------------------------------------------------ */
div.sidebar{
float: left;
height: 1024px;
width: 225px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-top: 2px solid black;
padding: 5px;
margin:2px;
background-color: #0F4FAF; /* Blue*/
}
div.sidebar ul {
list-style-type: none;
margin-top: 10px
}
div.sidebar ul li{
margin: 10px;
font-size: 22px;
}
nav.sidebar button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* CONTENT ------------------------------------------------------------------ */
div.content {
width: 910px;
height: 1024px;
background-color:#C0C0C0;
border: 2px solid #0F0F0F;
border-collapse: collapse;
float: left;
margin:1px;
padding:5px;
}
/* FOOTER ------------------------------------------------------------------ */
div.footer {
width: 100%;
}
The center of attention in these docs is just the nav bar section where i write:
div.sidebar button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
But the buttons still take on default button values. I messed around with it a little and got some styles to change in the browser but then if i changed them again or changed them back, they stopped working...
Sorry if this is kinda vague, but I'm under the impression that there is something fundamental that I'm missing and can't seem to figure out what it is.
Thanks for any help/advice!
Upvotes: 0
Views: 48
Answers (2)
NosNits
Reputation: 102
You should be able to do this in your css:
.sidebar>nav button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* WRAPPER ------------------------------------------------------------------ */
#wrapper{
margin-left:auto;
margin-right:auto;
width:1280px;
}
/* HEADER ------------------------------------------------------------------ */
div.header{
background-color: #87CEFA;
font-family: 'Trebuchet MS', Verdana, Sans-Serif ;
text-decoration: underline;
text-align: center;
font-size: 150%;
color: #286F02;
padding: 25px;
margin: 0px;
border-bottom: 2px solid black;
}
/* SIDEBAR ------------------------------------------------------------------ */
div.sidebar{
float: left;
height: 1024px;
width: 225px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-top: 2px solid black;
padding: 5px;
margin:2px;
background-color: #0F4FAF; /* Blue*/
}
div.sidebar ul {
list-style-type: none;
margin-top: 10px
}
div.sidebar ul li{
margin: 10px;
font-size: 22px;
}
.sidebar>nav button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* CONTENT ------------------------------------------------------------------ */
div.content {
width: 910px;
height: 1024px;
background-color:#C0C0C0;
border: 2px solid #0F0F0F;
border-collapse: collapse;
float: left;
margin:1px;
padding:5px;
}
/* FOOTER ------------------------------------------------------------------ */
div.footer {
width: 100%;
}<!DOCTYPE html>
<html>
<head>
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="homestyle.css">
<script src='navfunc.js'></script>
</head>
<body>
<!-- WRAPPER DIV -->
<div id='wrapper'>
<!-- HEADER DIV -->
<div class = 'header'>
<h1> Price History and Stock Data </h1>
</div>
<!-- SIDEBAR/NAV DIV -->
<div class = 'sidebar'>
<nav>
<ul>
<li> <button type="button" onclick="navfunc('AMBA')"> AMBA </button> </li>
<li> <button type="button" onclick="navfunc('APH')"> APH </button> </li>
<li> <button type="button" onclick="navfunc('ASX')"> ASX </button> </li>
<li> <button type="button" onclick="navfunc('B')"> B </button> </li>
<li> <button type="button" onclick="navfunc('BDS')"> BDSI </button> </li>
<li> <button type="button" onclick="navfunc('CNC')"> CNC </button> </li>
<li> <button type="button" onclick="navfunc('CNK')"> CNK </button> </li>
<li> <button type="button" onclick="navfunc('COLB')"> COLB </button> </li>
<li> <button type="button" onclick="navfunc('EWBC')"> EWBC </button> </li>
<li> <button type="button" onclick="navfunc('FB')"> FB </button> </li>
<li> <button type="button" onclick="navfunc('GPRO')"> GPRO </button> </li>
<li> <button type="button" onclick="navfunc('HAIN')"> HAIN </button> </li>
<li> <button type="button" onclick="navfunc('HEI')"> HEI </button> </li>
<li> <button type="button" onclick="navfunc('LCI')"> LCI </button> </li>
<li> <button type="button" onclick="navfunc('MANU')"> MANU </button> </li>
<li> <button type="button" onclick="navfunc('NCLH')"> NCLH </button> </li>
<li> <button type="button" onclick="navfunc('RCL')"> RCL </button> </li>
<li> <button type="button" onclick="navfunc('TSN')"> TSN </button> </li>
<li> <button type="button" onclick="navfunc('TSO')"> TSO </button> </li>
<li> <button type="button" onclick="navfunc('WWD')"> WWD </button> </li>
</ul>
</nav>
</div>
<!-- CONTENT DIV -->
<div class = 'content'>
<img id='hmap' src = 'AMBA_heatmap.png' alt='AMBA', style="width: 880px; height: 660px;">
</div>
<!-- FOOTER DIV -->
<div class = 'footer'>
</div>
</div>
</body>
</html>Upvotes: 1
j08691
Reputation: 207881
nav.sidebar button will select all descendant button elements of a nav element with the class sidebar. You want div.sidebar > nav button. This will select all buttons that are descendants of all nav elements that are a child of divs with the class sidebar.
/* WRAPPER ------------------------------------------------------------------ */
#wrapper{
margin-left:auto;
margin-right:auto;
width:1280px;
}
/* HEADER ------------------------------------------------------------------ */
div.header{
background-color: #87CEFA;
font-family: 'Trebuchet MS', Verdana, Sans-Serif ;
text-decoration: underline;
text-align: center;
font-size: 150%;
color: #286F02;
padding: 25px;
margin: 0px;
border-bottom: 2px solid black;
}
/* SIDEBAR ------------------------------------------------------------------ */
div.sidebar{
float: left;
height: 1024px;
width: 225px;
border-right: 2px solid black;
border-bottom: 2px solid black;
border-top: 2px solid black;
padding: 5px;
margin:2px;
background-color: #0F4FAF; /* Blue*/
}
div.sidebar ul {
list-style-type: none;
margin-top: 10px
}
div.sidebar ul li{
margin: 10px;
font-size: 22px;
}
div.sidebar > nav button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
/* CONTENT ------------------------------------------------------------------ */
div.content {
width: 910px;
height: 1024px;
background-color:#C0C0C0;
border: 2px solid #0F0F0F;
border-collapse: collapse;
float: left;
margin:1px;
padding:5px;
}
/* FOOTER ------------------------------------------------------------------ */
div.footer {
width: 100%;
}<!-- WRAPPER DIV -->
<div id='wrapper'>
<!-- HEADER DIV -->
<div class='header'>
<h1> Price History and Stock Data </h1>
</div>
<!-- SIDEBAR/NAV DIV -->
<div class='sidebar'>
<nav>
<ul>
<li>
<button type="button" onclick="navfunc('AMBA')">AMBA</button>
</li>
<li>
<button type="button" onclick="navfunc('APH')">APH</button>
</li>
<li>
<button type="button" onclick="navfunc('ASX')">ASX</button>
</li>
<li>
<button type="button" onclick="navfunc('B')">B</button>
</li>
<li>
<button type="button" onclick="navfunc('BDS')">BDSI</button>
</li>
<li>
<button type="button" onclick="navfunc('CNC')">CNC</button>
</li>
<li>
<button type="button" onclick="navfunc('CNK')">CNK</button>
</li>
<li>
<button type="button" onclick="navfunc('COLB')">COLB</button>
</li>
<li>
<button type="button" onclick="navfunc('EWBC')">EWBC</button>
</li>
<li>
<button type="button" onclick="navfunc('FB')">FB</button>
</li>
<li>
<button type="button" onclick="navfunc('GPRO')">GPRO</button>
</li>
<li>
<button type="button" onclick="navfunc('HAIN')">HAIN</button>
</li>
<li>
<button type="button" onclick="navfunc('HEI')">HEI</button>
</li>
<li>
<button type="button" onclick="navfunc('LCI')">LCI</button>
</li>
<li>
<button type="button" onclick="navfunc('MANU')">MANU</button>
</li>
<li>
<button type="button" onclick="navfunc('NCLH')">NCLH</button>
</li>
<li>
<button type="button" onclick="navfunc('RCL')">RCL</button>
</li>
<li>
<button type="button" onclick="navfunc('TSN')">TSN</button>
</li>
<li>
<button type="button" onclick="navfunc('TSO')">TSO</button>
</li>
<li>
<button type="button" onclick="navfunc('WWD')">WWD</button>
</li>
</ul>
</nav>
</div>
<!-- CONTENT DIV -->
<div class='content'>
<img id='hmap' src='AMBA_heatmap.png' alt='AMBA' , style="width: 880px; height: 660px;">
</div>
<!-- FOOTER DIV -->
<div class='footer'>
</div>
</div>Upvotes: 2
Related Questions
- Change an HTML input's placeholder color with CSS
- How can I transition height: 0; to height: auto; using CSS?
- How do CSS triangles work?
- Is there a CSS parent selector?
- How can I make a div not larger than its contents?
- Transitions on the CSS display property
- What is the difference between margin and padding in CSS?
- How do I reduce the opacity of an element's background using CSS?
- Is it possible to apply CSS to half of a character?
- Set cellpadding and cellspacing in CSS?