I have a navigation bar that has a black background with white text. The text changes to red when hovered over. however when the user is on the select page that specific background will change to red. however the hover over change the text to red. I want it so that when the user is on the home page, and they hover over the home button, the text doesnt change to red.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TL Custom Printing</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="topbar">
</div>
<div id="navbar">
<div id="navbtn">
<ul>
<li>Home</li>
<li><a href="custom.php" >Custom Printing</a></li>
<li>Products</li>
<li>Gallery</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="logo">
<img src="testlogo.png" alt="logo">
</div>
</body>
</html>
the CSS:
#navbtn {
width:100%;
Margin:20px;
white-space: nowrap;
text-align:center
}
ul {
width:100%;
list-style:none;
margin:0;
padding:0;
display: inline-block;
padding-top: 2.25em;
}
li {
width: 140px;
display: inline-block;
}
a {
text-align:center;
font-size: 1.25em;
padding:8px 0;
display:block;
width:100%;
text-decoration:none;
color:#FFF;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
a:hover {
color:#F00;
background-color:#000;
}
You can use an active class to fix this easily: JSFiddle
<li>Home</li>
a.active {
background-color:#F00;
}
a.active:hover {
color: #fff;
}
I also added your active tab background color into the .active class removing your inline style
You could add:
<style type="text/css">
a:hover {
color:#FFF !important;
background-color:#000;
}
</style>
In your html pages but your "home" so it will rewritte the main css sheet.
Related
I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
I'm trying to get the navigation bar inside of the header but it only stays below it. How can I fix this? The nav divs are inside of the <header> so I'm not sure why the entire nav-bar is set below the header.
Here's the JSFIDDLE link.
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FMHS Choral Dept.</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
<link rel="icon" type="text/css" href="img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>
<body>
<header><span>FMHS Choral Department</span></p>
<div class="nav_wrap">
<div class="nav_items">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Calender</li>
<li>News</li>
<li>Awards/Honors</li>
<li>Documents</li>
<li>Links</li>
</ul>
</div><!--end of nav_items-->
</div><!--end of nav_wrap-->
</header><!--end of header-->
<div class="container">
</div><!--end of container-->
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../img/crossword_green.png);
margin:0;
}
/* HEADER */
header {
font-family: Roboto;
width:100%;
height:50px;
font-size:24px;
background:#FFF;
text-align:left;
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
position:fixed;
top:0;
line-height:50px;
}
header span {
margin-left:20px;
}
header span a {
text-decoration:none;
color:#000;
}
.nav_wrap {
width:800px;
float:right;
background:#f0f;
}
.nav_items ul li {
display:inline-block;
list-style-type:none;
float:right;
}
/* CONTAINER */
.container {
width:900px;
height:800px;
border-radius:5px;
background:#fff;
margin:auto;
margin-top:70px;
}
http://jsbin.com/lufik/1/edit
First, you need to use some CSS reset, I used the Global one:
*{margin:0; padding:0;}
Than you don't need height set to header
...unless you want to replace your menu with an icon for 'mobile'.
header {
font-family: Roboto;
width:100%;
/*height:50px;*/ /* nope */
you don't need width for your nav wrapper, you already floated it right:
.nav_wrap {
/*width:800px;*/ /* njaaah */
float:right;
}
you don't need to float left your LI elements:
.nav_items ul li {
display:inline-block;
list-style-type:none;
/*float:right;*/ /* nöööu */
}
P.S: I would really apply that #media rule for a fancy nav tab icon!
I am trying to create a navigation bar on my website for a project. I get the bar just fine, but I can't get it to center on the page. I have tried a variety of different methods. Can someone help me out? I'm using an external style sheet. Here is the code for my main page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="tylerschevy.css">
</head>
<body>
<h1>Tyler Chevrolet</h1>
<ul>
<li>Home</li>
<li>Show Room</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Official Site</li>
</ul>
</body>
</html>
Here is my style sheet:
h1 {text-align:center}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
display: inline-block;
float:left;
}
a:link,a:visited{
display:block;
width:120px;
font-weight:bold;
color:black;
background-color:#FFFF33;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active{
background-color:#0033FF;
color:white;
}
jsfiddle
Add class="nav" to your <ul>, and then in your stylesheet create a new class:
.nav {
display: table; margin: 0 auto;
}
jsFiddle
Center ul
body {
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I recommend to put your ul in one wrapper (so you don't touch the body) like this
<div class="wrapper">
<ul>...</ul>
</div>
css
.wrapper{
text-align:center;
}
ul {
margin:0 auto;
display: inline-block;
}
I am making a personal bio site, and I want different color backgrounds for the header, body, and footer. I found this website, http://www.chimengxi.com/ and that is kinda what I am going for. In the end, I hope to get my header to be horizontal, instead of stacked. Some 3 toned color scheme would be awesome if its doable.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h1>Terrence Horgan <br> Information Science Major </h1>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
CSS
body {
background-color:orange;
height:100%
}
ul.navbar {
background-color:orange;
text-align:right;
font-size:175%
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto
}
h1 {
position:relative;
bottom:85px
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative
}
Wrap your navbar in a div. Style the div background-color however you want.
Wrap the content below the navbar and above the footer in another div. Style accordingly.
Set background-color of footer to whatever you want.
Here is an example of changing the colors. I made them quite noticeable by coloring them green and yellow and adding a few simple CSS styles to make them fit accordingly (floats, text-aligns). Look at the code below, and please note I pasted your CSS at the top. All you need to do is paste the code between the tags into your CSS file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
height:100%
}
ul.navbar {
background-color:green;
text-align:right;
font-size:175%;
padding-bottom: 10px;
text-align: center;
}
.navbar ul {
height:auto;
padding:0;
margin:0;
background-color:#f2f2f2;
border-bottom:1px solid #ccc;
display:inline-block;
float: left;
}
.navbar li {
display:inline-block;
padding:20px;
margin-left:auto;
margin-right:auto;
font-size: 25px;
margin-top: 20px;
}
h1 {
float: left;
font-size: 24px;
text-align: left;
}
h1 a:hover, a:active {
color:#FFF;
background-color:#3CF;
text-decoration:none
}
h1 a:visited, a:link {
color:#F36;
text-decoration:none
}
p {
width:30%;
font-size:120%
}
#summary {
font-size:135%;
font-weight:700
}
.footer {
display:inline-block;
position:relative;
background-color: yellow;
width: 100%;
text-align: center;
}</style>
<meta charset="utf-8">
<title>My Personal Website</title>
</head>
<body>
<div class="wrapper">
<ul class="navbar">
<h1>Terrence Horgan <br> Information Science Major </h1>
<li>Home
</li>
<li>About Me
</li>
<li>School
</li>
<li>Contact Information
</li>
</ul>
<h2><u>My Personal Website...About ME!</u></h2>
<p id="summary">Here is a little about myself....</p>
<p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
<div class="footer">Call me (607-425-0760)<address>Email Me tmh233#cornell.edu.<br></address>
</a>Copyright # 2014 Terrence Horgan</div>
</div>
</body>
</html>
I am new to HTML/CSS and need some help with text aligning. THe text are link and I'd like to align two links to the left of the page and one link to the right. Can anyone help? Here is my code
BACK and HOME buttons are meant to be aligned left, and MISC is meant to be aligned right
THanks Heaps it's driving me creasy!
HTML **
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/portfolio.css">
</head>
<body>
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
</body>
</html>
CSS **
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
Add the following css to your links. Demo
#left{
float:left;
}
#center{
position: absolute;
left: 48%;
}
#right{
float:right;
}
use style="float:left;" for BACK and HOME buttons and style="float:right;" for MISC.
Put style="display:inline;" for ul tag.
Here you go.
WORKING DEMO
The Code:
MISC
I hope this is what you are looking for.
<div class="menu">
<ul>
<a class="pull-left" href="index.html">BACK</a>
<a class="pull-left" href="index.html">HOME</a>
<a class="pull-right" href="index.html">MISC</a>
</ul>
</div>
As you can see I've added classes to your links. Now lets add some class declarations to your stylesheet file:
.pull-left {
float: left;
}
.pull-right {
float: right;
}
HTML
<div class="menu">
<ul>
BACK
HOME
MISC
</ul>
</div>
css
.right{
float:right;
}
DEMO HERE
You need better structure in your HTML ... Namely, in the ul element ... You're adding list items that are not labeled as list items. The alignment issue can be fixed using the following code.
For the sake of time, I've removed the reference to an external stylesheet, and added the styles in the head tag. You can remove the styles from the head tag and readd them to the stylesheet to maintain HTML best practices.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0//EN">
<html>
<head>
<style type="text/css">
body
{
background-color: #ffffff;
}
.menu
{
font-family:"HelveticaNeue-Light", "Arial";
font-size: 75%;
color: #1f4462;
text-align:left;
margin-left: -36px;
margin-top: -3px;
font-style: normal;
letter-spacing: 1px;
word-spacing: 3px;
}
.menu ul {
}
.menu ul li { display: inline-block; }
.menu ul li.misc {
float: right;
}
a:link
{
color:#1f4462;
text-decoration:none;
}
a:visited
{
color:#1f4462;
text-decoration:none;
}
a:hover
{
color:#1f4462;
text-decoration:none;
}
a:active
{
color:#1f4462;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>BACK</li>
<li>HOME</li>
<li class='misc'>MISC</li>
</ul>
</div>
</body>
Pure CSS solution can be :
a:nth-child(3n) {
float:right;
}
or
a:nth-last-child(1) {
float:right;
}
Plus, write valid HTML. If you have only anchor elements for list then you have to use nav tag and there is no need of using extra div.
<body>
<nav class="menu">
BACK
HOME
MISC
</nav>
</body>
Remove margin-left from .menu.