What do I do wrong? As I've understood, this code should make a black background behind the sideMenu-id, but it does not. Why?
CSS:
/* The side menu */
.bg_ #sidemenu {
background-color: black;
height: 20%;
}
.sideMenu li {
list-style-type: none;
float: left;
margin: 0 0 0 20px;
width: 20%;
font-size: 100%;
border: 1px solid black;
text-align: center;
letter-spacing: 5px;
border-radius: 5px;
color: black;
}
/* Menu buttons */
.btn_ a {
color: black;
margin: 5px 5px 5px 5px;
text-decoration: none;
display: block;
}
.hover_btn {
background-color: #CC4545;
}
This is my code: http://jsfiddle.net/RBTT8/183/
Two problems:
Your selector is .bg_ #sidemenu but it should be .bg_ .sideMenu (you use a period for a class, the # is for an ID. And it's case-sensitive.)
Since the list items are floated, the ul element collapses, so to expand it, add overflow:auto;
jsFiddle example
Related
My end goal is when each box is clicked, the background-color is shown. When I added the Javascript for this, it became apparent that the back-ground color didn't actually fill the whole box. This wasn't apparent when there wasn't a color. How do I fix this?
http://jsfiddle.net/k7rm33h7/
HTML:
<div id="logo">Codeplayer</div>
<ul class="toggle">
<li id="htmlLi">HTML</li>
<li id="cssLi">CSS</li>
<li id="jsLi">JS</li>
<li id="resultLi">Result</li>
</ul>
<button>Run</button>
</div>
CSS:
/* ----------- UNIVERSAL -----------*/
a, body, html, ul, li, div, button {
margin: 0;
padding: 0;
list-style: none;
font-family: helvetica;
}
#logo, .toggle {
line-height: 50px;
}
/* ----------- MENU BAR -----------*/
#menu {
background-color: #EDEBED;
width: 100%;
height: 50px;
box-shadow: 1px 1px 1px #000000;
position: absolute;
}
/* ----------- LOGO -----------*/
#logo {
float: left;
font-weight: bold;
margin-left: 15px;
font-size: 20px;
height: 20px;
text-shadow: 1px 2px #000000;
color: #9d9d9a;
}
/* ----------- TOGGLE BAR -----------*/
.toggle li {
list-style: none;
float: left;
margin-left: 20px;
border-right: 1px solid black;
padding-right: 17px;
font-weight: bold;
}
.toggle {
margin: 0 auto;
width: 300px;
height: 30px;
line-height: 30px;
margin-top: 10px;
border: 1px solid black;
box-shadow: 1px 1px 1px #000000;
border-radius: 4px;
}
/* ----------- TOGGLE LIST ITEMS -----------*/
#resultLi {
border-right: none;
}
/* ----------- BUTTON -----------*/
button {
float: right;
margin-right: 15px;
height: 30px;
width: 50px;
position: relative;
top: -30px;
border-radius: 4px;
}
/* ----------- TEST -----------*/
#htmlLi {
background-color: red;
}
#cssLi {
background-color: green;
}
#jsLi {
background-color: yellow;
}
#resultLi {
background-color: blue;
}
You want padding-left on your lis, instead of margin-left.
.toggle li {
list-style: none;
float: left;
padding-left: 20px; /* <-- padding-left */
border-right: 1px solid black;
padding-right: 17px;
font-weight: bold;
}
This is because the background-color of an element does not extend outside of the containing box. Think of margin as creating external whitespace and padding as creating internal whitespace.
I would recommend just removing the margin and padding, then set a fixed width and center the contents. Much easier to manage in my opinion and will work fine since your container is fixed # 300px. I also added CSS to remove border from last-child since it's not needed.
JSFiddle
.toggle li {
list-style: none;
float: left;
width: 74.2px; //fixed width allows you to center text exactly
border-right: 1px solid black;
font-weight: bold;
text-align: center; //easy as pie
}
.toggle li:last-child {
border: none;
}
I'm looking to add a border to an element on hover while also keeping the parent div size the same.
Currently when I add the border it makes the parent div larger in height.
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border-left: 1px white solid;
border-right: 1px white solid;
border-bottom: 1px white solid;
}
<nav>
Home
About
Google
</nav>
You could add a transparent border to displace the one that is added on hover.
In this case, you could use:
nav a {
border: 1px transparent solid;
border-top: none;
}
nav {
margin: 0px auto 1px auto;
padding-bottom: 1px;
display: inline-block;
position: fixed;
background-color: #000;
width: 100%;
}
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border: 1px transparent solid;
border-top: none;
}
nav a:first-child {
margin-left: 25px;
}
nav a:hover {
background-color: red;
border: 1px white solid;
border-top: none;
}
<nav>
Home
About
Google
</nav>
There are a couple of ways to do it.
Method No. 1 - Give the <a> a transparent border:
nav a {
padding: 10px;
float: left;
font-size: 20px;
background-color: #000000;
color: white;
text-decoration: none;
box-sizing: border-box;
border-left: 1px transparent solid;
border-right: 1px transparent solid;
border-bottom: 1px transparent solid;
}
Method No. 2 - Give the <nav> a fixed height:
nav{
height:45px;
}
Essentially, I'm trying to get the entire box to be a link and when you hover over it, the entire box also changes colors. I know this is easily done if I write separate code for each "li" tag but that would be timely. Is there something I'm doing wrong?
Here is my code:
.genrelist li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
.genrelist li:hover {
float: left;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>
They all work when you hover over the word, but only the first item works when you hover over any part of it's box. Any help is appreciated!
a needs to be wrapped into li to valid your HTML structure, then displayed as block.
A pseudo element can be used to help vertical-align your span.
display:flex; could be used too to center a content.
Demo using pseudo-element
li {
float: left;
text-transform: uppercase;
font-weight: bolder;
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
margin: 50px;
background: #fff;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li:hover {
list-style-type: none;
text-align: center;
width: 150px;
height: 150px;
background: #000;
margin: 15px;
border-style: solid;
border-width: 5px;
border-color: #000;
}
li a {
display:block ;
height:100%;
width:100%;}
a:before {
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
a span {
display:inline-block;
max-width:99%;
}
<ul>
<li><span>Fiction Short Stories</span></li>
<li><span>Non-Fiction Short Stories</span></li>
<li><span>Comic Strips</span></li>
<li><span>Poetry</span></li>
<li><span>Biblical</span></li>
<li><span>Inspirational</span></li>
<li><span>Children's Corner</span></li>
<li><span>Comedy</span></li>
<li><span>Drama</span></li>
<li><span>Chiller</span></li>
<li><span>Romance</span></li>
<li><span>Science Fiction</span></li>
<li><span>Memoirs</span></li>
<li><span>In The Feathers</span></li>
</ul>
I've spent an absurd amount of time on google and still cannot figure out how to center the buttons on my nav bar (I'm still new to css).
Here is what I have for the navbar (not included are my various failed attempts).
CSS:
#navigation
{
list-style-type: none;
background: #222222;
overflow: hidden;
width: 1150px;
margin: 0;
padding: 0;
display:inline-block;
margin-left: 0 auto;
margin-right: 0 auto;
}
#navigation li
{
border-right: solid 1px #ca0002;
height: 35px;
display: inline-block;
margin: 0 auto;
}
#navigation li a:link, #navigation li a:visited
{
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 20px 0 20px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover
{
background: #990000;
color: #fff;
}
#navigation li.first
{
border-left: solid 1px #ca0002;
}
Without any html I took the liberty of creating the html and using your IDs.
Here is a working fiddle:
WORKING FIDDLE
In your navigation div I added
height: auto;
text-align:center;
Some unnecessary CSS was deleted as well.
This will make the navigation tabs center in the div.
Hope this helps!
I'm using WordPress for a website.
Here is the link for the website: http://Jamezpearce.byethost7.com
How can I can make the font smaller so can fit more menu bars onto the website?
I really appreciate any help given to me if anyone wants anything else please comment and I will supply it.
I have already tried altering the CSS but don't seem to get anywhere I'm probably doing it incorrectly.
I have added
font-size: 0.75em;
to all the menu CSS I can see and still no joy.
/* Pagenavi */
#pnavigation {
margin: 20px 0px;
}
.wp-pagenavi {
font-size:0.75em;
text-align: centre !important;
margin-left: auto;
margin-right: auto;
}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited {
text-decoration: none;
background: #42444e!important;
border: 1px solid #212227!important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: centre;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
.wp-pagenavi a:hover {
color: #ffffff;
}
.wp-pagenavi span.pages {
display: none;
}
.wp-pagenavi span.current {
text-decoration: none;
background: #CF5912 !important;
border: 1px solid #993206!important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: center;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
.wp-pagenavi span.extend {
text-decoration: none;
background: #FFD000 !important;
border: 1px solid #E8B900 !important;
color: #fff !important;
padding: 4px 8px !important;
display: block;
text-align: center;
float: centre;
display: inline;
margin-right: 6px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
font-size:0.75em;
}
Try and change the font-size. You can change this in the #botmenu or in the #submenu
#botmenu {
font-size: 90%; /*the smaller the percentage, the smaller the text*/
}
OR
#submenu {
font-size: 90%; /*the smaller the percentage, the smaller the text*/
}
If #submenu li a {font-size: .75em;} doesnt work, try adding like this.
submenu li a {
font-size: .75em !Important;
}
You can also use font-size: 100%. The percentage is inherited from the parent, and you can also set 75% or 85%. I recommend you to play a bit in dev tools with this.
Cheers
Some 'coders' might have their opinion but for me I will add a new class with !important
eg;
.wp-mbfontupdate {0.75em !important}
Then add the wp-mbfontupdate class to my menubar's class. This way I can easily go to this line and update new font style later