I have a piece of code enclosed with div tags and containing some sub elements:
<div class="menu">
<ul>
<li>A hurr</li>
<li>A durr</li>
<li>A murrmurr</li>
</ul>
</div>
Now in the tutorial I am reading, in the CSS file he does:
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
And then:
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
To change the appearance of the ul element.
I assume that this is an older version of CSS since we now use .menu not #menu and now it doesn't seem to work to type menu ul { blabla }
How do I change the appearance of sub element ul in todays CSS?
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
<div class="menu">
<ul>
<li>A hurr</li>
<li>A durr</li>
<li>A murrmurr</li>
</ul>
</div>
if i understand your question, you can do this :
.menu ul li {
//properties
}
You just have to replace your #menu by .menu , because you put it as a class in the html code.
Related
I'm attempting to create a navigation menu that shows a border when an item is hovered over. While it currently looks fine, the other menu items are pushed out of the way when one item is hovered over. How would I go about making them stay put?
I've tried a few methods that were answered here but none of them have worked.
I've included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style:none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
</nav>
View on JSFiddle
Because you are adding padding on hover. Move the padding from hover to anchor.
li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
Here is the fiddle.
Move the padding property from 'li a: hover' to 'a'.
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
padding: 5px 10px;
}
Right now I am stuck with this ribbon bookmark. I don't know how to make a navigation bar where ribbon is like in those two pictures:
Normal
On mouseover
How ribbon looks when page is active.
How ribbon looks when you slide cursor on selected menu. it should slide out.
nav[role="top"] {
width:60%;
float:right;
}
nav[role="top"] li {
float:right;
}
nav[role="top"] ul {
list-style-type: none;
margin: 10px;
padding: 0;
overflow: hidden;
}
nav[role="top"] li a {
color: #b3b3b2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
width:50px;
font-size:11px;
font-family: 'Pontano Sans', sans-serif;
font-weight:600;
}
nav[role="top"] li:hover {
width: 0;
height: 30px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Here is my solution for this:
nav[role="top"] ul {
list-style-type: none;
float: right;
}
nav[role="top"] li {
display: inline-block;
position: relative;
float: right;
}
nav[role="top"] a {
display: block;
color: #b3b3b2;
text-align: center;
padding: 14px 0;
text-decoration: none;
width: 70px;
font-size: 11px;
font-family: 'Pontano Sans', sans-serif;
font-weight: 600;
background-color: #103252;
}
nav[role="top"] a::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 20px;
border-right: 35px solid #103252;
border-left: 35px solid #103252;
border-bottom: 12px solid transparent;
}
nav[role="top"] a:hover::after {
height: 30px;
}
<nav role="top">
<ul>
<div class="ribbon">
<li>home</li>
<li>news </li>
<li>blog</li>
<li>photos</li>
</div>
</ul>
</nav>
Please be aware that element div is not allowed as child of element ul. It's not valid.
I am trying to figure out how to remove the last black section of my secondary nav.
I want the "wishlist" link to be the last thing there, not have the border and then more black space afterwards basically. I'm just not sure how to do this.
my html:
<title>LOST Collector</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<!--Header-->
<header>
<a href="http://www.lostcollector.com">
<img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
</a>
<!--Primary navigation-->
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!-- Secondary Navigation -->
<ul id="navigation_layout">
<li>Artwork</li>
<li>Autographs</li>
<li>Books/Magazines</li>
<li>Clothing</li>
<li>Dvds and Cds</li>
<li>Film Crew</li>
<li>Original Props</li>
<li>Special Events</li>
<li>Toys and games</li>
<li>Trading cards</li>
<li>Everything else</li>
<li>Wish list</li>
</ul>
my css:
body {
width: 1200px;
height: 130px;
margin: 0 auto;
background-color: #ffffff;
color: #111111;
font-family: "Georgia", "Times New Roman", serif;
font-size: 90%;
}
header a {
float:left;
display:inline-block;
}
header a img {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right:10px;
display: inline;
height: 112px;
width:; 113px;
}
nav {
display: inline;
float: right;
}
nav ul {
list-style: none;
display: inline;
}
nav ul li {
display: inline-block;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
margin-right: 50px;
padding: 40px 30px;
padding: right 10px;
}
nav li a {
display: inline-block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #000000;
}
nav li a:hover {
color: #ff0000;
background-color: #ffffff;
}
/*secondary navigation*/
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #000000;
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
#navigation_layout li {
float: left;
}
#navigation_layout li a {
display: block;
padding: 4px 3px;
text-decoration: none;
font-size: 90%;
font-weight: bold;
color: #ffffff;
border-right: 2px solid #ffffff;
}
#navigation_layout li a:hover {
color: #ff0000;
background-color: #fff;
}
I have put it into a jsfiddle here, so it is clearer what I am trying to do.
https://jsfiddle.net/thzfm0fe/1/
Apply the background color to your list items <li> and not the <ul>.
Remove background-color from here:
#navigation_layout {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
/* background-color: #000000; */
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
}
And add to here:
#navigation_layout li {
float: left;
background-color: black;
}
https://jsfiddle.net/thzfm0fe/3/
A <ul> by default is a block level element and will fill up the full width of the parent element. Your list items <li> did not fill up the full width of the parent but your <ul> did, hence the extra black after your list items.
By applying the background color to the <li> you don't need to add white border to your anchors anymore. You could apply a margin instead.
I have this HTML code
<div id="navbar">
<ul>
<li>Page1</li>
<li>page2</li>
<li id="NavItem">
page3
<div id="PopOver">
<div class="ow-button">
xnewPage1
xnewPage2
xnewPage3
</div>
</div>
</li>
<li>page4</li>
</ul>
</div>
CSS code
#navbar { position: relative; margin: 3px; }
#navbar ul {
padding: 0;
margin: auto;
background: #f0f0f0 url(../images/1px.png) repeat-x 0 -441px;
padding: 4px 0 4px 0;
}
#navbar li { display: inline; margin-right: 80px; }
#navbar li a {
font-family: EqualSansDemo;
font-size: 1.6em;
color: #555555;
text-shadow: 1px 1px 0px #fff; }
#navbar li a:hover { color: #0071e4; }
#PopOver {
position:absolute;
border:2px solid #07B1F1;
width:170px;
height:auto;
padding:15px 5px 10px 5px;
display:none;
top:30px;
left:229px;
background-color:#FFFFFF;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}
#NavItem:hover #PopOver {display:block}
.ow-button a {
display: block;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 160px;
height: 28px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 28px;
text-shadow: 1px 1px 1px #6A6A6A;
text-decoration:none;
margin: 0px 5px 10px 5px;
background: #28A9FF;
}
.ow-button a:hover {
background: #48B6FF;
}
The problem:
"#navbar li a" will hide:
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-size: 14px;
color: #FFFFFF;
text-shadow: 1px 1px 1px #6A6A6A;
Which "ow-button a" have..and will enable its own.
And I don't want that... How do I enable the full "ow-button a" CSS code?
The quick and dirty solution is to add !important to your ow-button a which will override #navbar li a.
The better solution is to use better scoped CSS. Use selectors like > to specify exactly the element you want to. In your case, it should look like this:
#navbar > ul > li > a
I made a jsFiddle for you: http://jsfiddle.net/6NrWF/.
I've set up the following CSS. Everything looks fine except for one thing. When I roll over the links in the nav, the entire "button" is filled with the background color, whereas when I rollover the links in the footer, only the the are behind the text is filled. How do I resolve this so that the entire "button" is filled in the footer, preferably without resort to classes and images (meaning, leverage HTML5/CSS3 as much as possible)?
i've looked at this via multiple web browsers. i am guessing it is because the list items are displayed inline, but i don't know the solution.
--- CSS ---
#CHARSET "UTF-8";
* {
margin: 0;
padding: 0;
}
html * {
margin: 0;
/*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}
/* GENERAL */
body {
background: #fff;
color: #333;
font-family: verdana, "MS Trebuchet", arial, helvetica, sans-serif;
font-size: 62.5%;
margin: 0 auto;
width: 960px;
}
header {
background-color: #999;
border: 1px solid #999;
border-radius: 25px;
margin-top: .5em;
}
header h1 {
color: #fff;
font-weight: bold;
font-size: 2.4em;
margin: .8em 0 .3em 0;
text-align: center;
}
nav {
margin: 1em 30em;
padding: .8em 1.2em;
}
nav ul {
padding-left: 1.5em;
list-style: none;
}
nav ul li {
}
nav ul a {
display: block;
text-decoration: none;
}
nav ul li a {
background-color: #FFF;
border: 1px solid #999;
border-radius: 25px;
color: #222;
display: block;
font-size: 1.2em;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
padding: 12px 10px;
text-align: center;
text-decoration: none;
}
nav ul a:hover {
color: #333;
background: #ccc;
}
nav#baseball {
display: none;
}
nav#football {
display: none;
}
footer {
border-top: 1px solid #ccc;
margin-top: .5em;
margin-bottom: 1em;
padding: .8em 1.2em;
}
footer ul {
list-style: none;
text-align: center;
}
footer ul li {
border: 1px solid #999;
border-radius: 25px;
display: inline;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
}
footer ul a {
/* display: block; */
text-decoration: none;
}
footer ul li a {
color: #222;
}
footer ul a:hover {
color: #333;
background: #ccc;
}
--- HTML ---
<header>
<h1>Sports Fan</h1>
</header>
<nav id='sports'>
<ul>
<li>Baseball
</li>
<li>Basketball
</li>
<li>Football
</li>
<li>Hockey
</li>
<li>Soccer
</li>
</ul>
</nav>
<nav id='baseball'>
<ul>
<li>Homerun
</li>
<li>Big Hit
</li>
<li>Double Play
</li>
<li>Bad Call
</li>
</ul>
</nav>
<nav id='football'>
<ul>
<li>Touchdown
</li>
<li>Big Play
</li>
<li>Sack
</li>
<li>Interception
</li>
<li>Bad Call
</li>
</ul>
</nav>
<footer>
<ul>
<li>Choose
</li>
<li>Manage
</li>
<li>About
</li>
</ul>
</footer>
Placed updated code in a jsFiddle
CSS changes:
footer li{ display:inline }
footer ul a{
border: 1px solid #999;
border-radius: 25px;
display: inline-block;
margin: 0.0em 1.0em 0.0em 1.0em;
padding: 0em 1.5em 0 1.5em;
text-decoration: none;
color: #222;
}