Been trying to learn about CSS and the use of hover psuedo classes over elements. Whenever I select a tab in the navigation bar, the background colour changes colour ( which is what I want). However, when I move off the anchor text the text changes back to white.
Ideally what I'm wanting is for the navigation tab to turn the background colour white, and the text black together simultaneously when the mouse hovers over. Here's the code:
<head>
<link rel="stylesheet" href="css.css" />
</head>
<body>
<div id="container">
<div id="title">
<h1>Record Store</h1>
</div>
<div id="navigation">
<ul class="navbar">
<li>Home
</li>
<li>Vinyl Stock
</li>
<li>Online Offers
</li>
<li>Collectors News
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
and CSS code:
* {
border: 0;
padding: 0;
margin:0;
}
#container {
margin: auto;
width: 800px;
border: 1px solid black;
min-height: 600px;
z-index: -9;
}
#title {
margin:auto;
/*border: 1px solid black;*/
height: 30%;
}
#navigation {
border-top: 1px solid black;
border-bottom: 1px solid black;
height: auto;
overflow: auto;
}
.navbar {
}
.navbar ul {
}
.navbar li {
font: bold 12px/1.2em Arial, Verdana, Helvetica;
height: auto;
list-style: none;
text-align: center;
width: 20%;
float:left;
background-color: blue;
padding: 1% 0px;
}
.navbar a {
border-right: 1px solid #1F5065;
color: white;
display: block;
text-decoration: none;
}
.navbar a:hover {
color: black;
}
.navbar li:hover {
background-color: white;
}
Can someone have a look and point out where I'm going wrong?
You just have to be more conscientious about defining your selectors. You're doing one thing when somebody hover over an li and something else when they hover over the a. What you want is to change both elements when hovering over a common element.
To solve the problem, remove:
.navbar a:hover {
color: black;
}
And replace it with:
.navbar li:hover a {
color: black;
}
jsFiddle
The first selector says "Get all a:hover's that are children in .navbar," The second selector says "Get all a's that are children in li:hover's that are children of .navbar."
Related
I want to have the entire tab menu to be clickable. In order to do that, I need the "a href" to fill the entire tab but doing so I lose the exact size and shape I want. I'm trying to accomplish by adding the :not(#sub_menu ul il) to the main ul, il{} css styles but it throws the portions out of whack.
So how can I accomplish this in HTML & CSS? Also, the bottom border is still viewable, so how can I fix this as well? Thank you
Adding :not(#sub_menu ul li) to the main p, il settings.
Then increasing the padding by 5px to "10px 20px" in #sub_nav ul li #selected.
Home Page
<body>
<main>
<h3>Home</h3>
<nav id="sub_nav">
<ul>
<li id="selected">Home</li>
<li>Away</li>
</ul>
</nav>
</body>
Away Page
<body>
<main>
<h3>Away</h3>
<nav id="sub_nav">
<ul>
<li>Home</li>
<li id="selected">Away</li>
</ul>
</nav>
</body>
CSS
#sub_nav {
float: left;
width: 100%;
font-weight: bold;
padding-bottom: 5px;
border-bottom: 1px solid;
}
#sub_nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#sub_nav ul li {
display: inline;
border: 1px solid black;
}
#sub_nav ul li a {
padding: 5px 15px;
color: inherit;
text-decoration: none;
border-width: 1px 1px 0px 1px;
}
#sub_nav ul li#selected {
border-bottom: 1px solid white;
}
main {
margin-bottom: 1px;
padding: 1px;
height: 4000px;
width: 80%;
border: 1px solid black;
float: left;
}
main ul {
margin: 10px;
padding: 10px;
}
main p, li {
margin: 5px;
padding: 5px;
}
Trying to make the background for the "Submit Assignment" button green. Our website is http://www.stephensengineering.com/stephens33/. Solved the issue with the borders and now i need to make the background of the one menu item green. I tried adding css but still no luck.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Horizontal Navigation Bar w/Rollover Effect</title>
<style type="text/css">
<!--
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
-->
</style>
</head>
<body>
<div id="navbar">
<ul>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
</body>
</html>
#MercedesPennell here's the revised solution. Hope it will meet your requirement.
#navbar ul {
height: inherit;
margin: 0;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px;
height: inherit;
border-left: 1px solid #fff;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #fff;
}
#navbar ul li:hover a {
color: #000 !important;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:nth-child(3) {
border-right: 1px solid #fff;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
.submit-btn {
background-color: green !important;
border-left: none !important;
}
<!-- -->
<div id="navbar">
<ul>
<li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></li><!-- --><li>project#stephensengineering.com</li><!-- --><li>888-300-0642</li><!-- --><li>Stephens University</li><!-- --><li class="submit-btn" >Submit Assignment</li>
</ul>
</div>
Here's my solution. I made several changes in html and css files. Hope it will work for you.
#navbar ul {
height: inherit;
margin: 0;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px;
height: inherit;
border-left: 1px solid #fff;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
/* background-color: #000; */
}
#navbar ul li:hover {
background-color: #fff;
}
#navbar ul li:hover a {
color: #000 !important;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:nth-child(3) {
border-right: 1px solid #fff;
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
<!-- -->
<div id="navbar">
<ul>
<li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></li><!-- --><li class="social-icon-wrapper" style="float:left"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></li><!-- --><li>project#stephensengineering.com</li><!-- --><li>888-300-0642</li><!-- --><li>Stephens University</li><!-- --><li>Submit Assignment</li>
</ul>
</div>
Just simply add a CSS outline property, like outline: 3px solid red;, to your #navbar ul li selector. The border will make overlapping borders around each navigation link. To make your Submit Assignment button green, add style="background-color: green" to the respective li element.
To make the "Submit Assignment" button green i added a class:
<li><a class="active" href="http://github.com">Submit Assignment</a></li>
in this example i use "active" as the class and add the following CSS
.active {
padding: 10px;
background-color: green;
color: beige;
text-decoration: none;
}
And for the border, i added "border-left" to archieve what you want
#navbar ul li {
display: inline;
border-left: #fff 1px solid;
}
#navbar ul li a {
font-family: 'Montserrat';
text-decoration: bold;
padding: .2em 1em;
color: #fff;
padding: 10px;
/*background-color: #000;*/
}
I'm having another issue. I can't figure where the issue is. I had added a border around my menu items. Everything was working fine until I added a logo. I believe the issue is with my .Main-Nav li a:hover. in my CSS. I'll post everything and see if you guys can figure it out. I would also like to know if I need to make a different file for every page on my website
* {
margin: 0PX;
padding: 0PX;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://static.pexels.com/photos/371794/pexels-photo-371794.jpeg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 200px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hello {
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1 {
color: white;
text-text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 440px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one {
background-color: darkorange;
font-family: "roboto", sans-serif;
}
.btn-two {
font-family: "roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<HTML>
<Head>
<title> Drew's Blog</title>
<link href="style.css" rel="stylesheet" type "text/css" </head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Oh-deer.png">
</div>
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> GALLERY </li>
<li> NEWS </li>
<li> CONTACT </li>
<li> LESSONS </li>
</ul>
</div>
<div class="Hello">
<h1> Lets Get Started</h1>
<div class="button">
Get to Know Me
Check out my lessons
</div>
</header>
</body>
</html>
`
In
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "roboto", sans-serif;
font-size: 15px;
}
Add a:
border: 2px solid white;
This will put a border around your menu items that are put in the <li> tag
Look in the active class for the border:
.main-nav li.active a {
border: 2px solid white;
}
That's for the HOME button, because it's class is active (class="active">) and it already had a border
I changed the pixels so I can see the results, but the problem is exactly that: The pixels. If your hover pixels and li pixels are the same, you won't see any change
This should add a border to your menu items and change when you hover over them with the mouse.
Also, the
.main-nav li a:hover
does the exact opposite. When you define a border here and you HOVER OVER A MENU ITEM, a border will APPEAR, so basically try to balance the pixels out.
And I'm trying to figure out what exactly you want. Do you want borders to always be there and when you hover over them you want them to disappear or do you want borders to appear when you hover over them.
I have developed an CSS navigation menu and for each navigation item I have written php.file.
homepage.php
<html>
<head>
<title>My First Try Of CSS Navigation Bar</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
background-color: #fff;
}
/*
End navigation bar styling. */
/* This is just styling for this
specific page. */
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #fff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Shree Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. -->
<ul id="nav">
<li>Home
</li>
<li>About US
</li>
<li><a href="#">Contact
US</a>
</li>
<li>Login
</li>
</ul>
<!-- That's it! -->
<div id="content">Area
<tr>
<td height="20px" />
<td style="text-align:left">
<select name="leavetype" id="leavetype">
<?php $query="select code,areaname from areamaster" ; $query_run=mysql_query($query); mysql_num_rows($query_run); while($row=mysql_fetch_assoc($query_run)) { ?>
<option value="<?php echo $row['code']?>">
<?php echo $row[ 'areaname']?>
</option>
<?php } ?>
</select>
</td>
</tr>
</div>
</body>
</html>
aboutus.php
<?php include( "$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<html>
<head>
<title>Shree Shree Property,Kolhapur</title>
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 5em 0;
padding: 0;
list-style: none;
background-color: #f3f3f3;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul.primary li:hover a {
background: pink;
color: #666;
text-shadow: none;
}
#nav li {
float: left;
background: #0080ff;
}
#nav li a {
display: block;
padding: 8px 17.5px;
text-decoration: none;
font-weight: bold;
color: black;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: black;
background-color: #00bfff;
}
/* End navigation bar styling. */
/* This is just styling for this specific page.
*/
body {
background-color: #555;
font: small/1.3 Arial, Helvetica, sans-serif;
}
#wrap {
width: 900px;
margin: 0 auto;
background-color: #00bfff;
}
h1 {
font-size: 1.5em;
padding: 1em 8px;
color: #333;
background-color: #069;
margin: 0;
}
#content {
padding: 0 50px 50px;
}
h4 {
font-size: 1.1em;
float: center;
padding: 1em 8px;
color: #333;
background-color: #00bfff;
margin: 0;
-webkit-align-content: center;
align-content: center;
}
#content {
padding: 1em 8px;
}
#current a {
color: #ff0000;
}
#dddd {
color: red;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="wrap">
<form name="tstest" action="test20.php" onsubmit="return CommonFunction(this); method=" POST "> <h1>Shree
Shree Property, Kolhapur</h1>
<!-- Here's all it takes to make this navigation bar. --> <ul id="nav ">
<li>Home</li> <li class="current " id="dddd ">About US</li> <li>Contact US</li>
<li>Login</li> <li>Add Property</li> <li>Luxarious Property</li>
<li>Property For Sale</li> <li><a href="# ">Other
Services</a></li> </ul> <!-- That's it! --> <div> <html>
<body> <div id="wrap ">
<h4>Shree Shree Property<h4> <p>Shree Shree Property provides
leading property consultancy in Kolhapur</p> </div>
<body> </html> </form> </table> </div> </div>
</body> </html>
i need to set color of only home menu that is first from left manu. then
i need to change color of only selected menu background
and whenver i navigate to another menu that menu color also need to change
and previously changed menu's color need as like i at home page
You have done like this already. In home.php you use
<a href="../riteshproject/home.php" class="active">
So if you want to add same style to other pages just add this to your current php window.
class="active"
For example if you are on about.php Then open the file and change it to look like this. Also make sure that other a href tags do not have the same active class.
About US
If you want to style it better just find or create active class in your css file
.active {
background-color: red;
}
One of my assignments is to create a responsive webpage. I'm running into trouble when attempting to open it on mobiles. My 'li' elements touch and look awful.
How can I stop the 'box' around each li item from touching?
HTML -
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<body>
<center>
<div id="Menubar">
<ul>
<li id="active">Home
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
</center>
CSS -
#Menubar ul {
padding: .05em 0;
margin: 0;
list-style-type: none;
background-color: #3A3734;
color: #FFF;
width: 100%;
font-family: Oswald;
font-size: 32pt;
font-weight: bold;
text-align: center;
border-top:solid #8E7861 4px;
border-bottom:solid #8E7861 4px;
}
#Menubar ul li { display: inline; }
li a {
text-decoration: none;
margin: 0 0 3px 0;
background-color: white;
color: #6AA0CC;
padding: .1em 1em;
border: 2px solid #6AA0CC;
}
li a:hover {
background-color: #6AA0CC;
color: #fff;
border: 2px solid white;
}
.listcenter{
width:250px;
margin:0 auto;
text-align:left;
}
JSFIDDLE
Add the following code to the li a selector apart from other styles that you have applied.
li a {display:inline-block;}
Check the updated JSFIDDLE
The important thing is that for responsive webpage you should use media queries as well.