When I put in a logo at the top of my page, the logo became formatted like my nav bar.
I believe it has something to do with how I designed my nav bar. I tried to change the formatting on the logo by using inline css but that still didn't work.
My CSS :
ul {
list-style-type: none;
margin: 7;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
h2 {
color:#FFFFFF;
font-family:impact;
text-align:center;
text-decoration:underline;
}
a:link, a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #4D5365;
}
.divstory {
background-color:#B33951;
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
My HTML :
<body background="webbackground.png">
<img src="DTDTMLogo.png" style="width: 180px; margin-bottom: 5px;" >
<hr>
<!--Nav Bar-->
<ul>
<li>
Home
</li>
<li>
Database
</li>
<li>
Map
</li>
<li>
About Us
</li>
</ul>
<!-- Nav Bar End-->
<hr>
<img alt="When Your In The Action" src="Gamers_in_action1.jpg" style="width:1260px;height:600px;">
<hr>
<h2>Our mission</h2>
<div>
<p>
</body>
Screenshot :
You're giving all your a elements the same styling, because you used selectors like a:link, a:visited, etc.
To fix this issue, You need to make your selectors more specific.
The easiest way replace this :
a:link, a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #4D5365;
}
with this :
ul a:link, ul a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
ul a:hover, ul a:active {
background-color: #4D5365;
}
This would still impact all a elements that belong to an ul element, though.
To avoid that, consider adding a class to your menu, like this :
<ul class="main-navigation">
<li>
Home
</li>
<li>
Database
</li>
<li>
Map
</li>
<li>
About Us
</li>
</ul>
Then, adjust your selectors like this :
.main-navigation a:link, .main-navigation a:visited {
display: block;
width: 314px;
font-weight: bold;
color: #FFFFFF;
background-color: #21242B;
text-align: center;
padding: 1px;
text-decoration: none;
text-transform: uppercase;
}
.main-navigation a:hover, .main-navigation a:active {
background-color: #4D5365;
}
This ensures that ONLY your main navigation (or other a elements that belong to an element with the class .main-navigation) will be impacted.
Related
New to CSS . I am experiencing a problem where i only want to change elements within a class only. I have looked online and tried many ways but i really dont know whats the problem.
Here is the html part:
<nav class = "choice">
<ul>
<li>Sign-in</li>
<li> | </li>
<li>Register</li>
<li> | </li>
<li>Request</li>
</ul>
</nav>
<footer class = "footer">
<h2>Site Map</h2>
<ul>
<li>Home</li>
<li>Register</li>
<li><a class = "active" href="about.html">How it All Works</a></li>
<section id = "copy">
<p>© 2018. All Rights Reserved.</p>
</section>
</ul>
</footer>
Here is the css:
.choice{
text-align : right;
}
ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color:white;
}
li a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy{
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom:0;
}
So long story short. I just want to change the elements "li" and "ul" under the class choice only but because i have same elements in the footer part, the selectors for the footer part will also change the elements in the class choice. What is the correct way to change g a specific part of a element only for that class ? Thank you
Try adding .choice to select elements under it:
.choice {
text-align : right;
}
.choice ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color:white;
}
.choice li a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
.choice li a.active {
background-color: #4CAF50;
color: white;
}
.choice li a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy{
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom:0;
}
Add .choice to all ul and li in CSS which you want to change.
For example: .choice ul, .choice li > a, .choice li > a.active
Below is working code:
.choice {
text-align: right;
}
.choice ul {
list-style-type: none;
margin: 0;
padding: 1em;
width: 200px;
color: white;
}
.choice li > a {
display: block;
color: #00ff00;
padding: 8px 16px;
text-decoration: none;
}
.choice li > a.active {
background-color: #4CAF50;
color: white;
}
.choice li > a:hover:not(.active) {
background-color: #555;
color: white;
}
#copy {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
font-size: 1em;
text-align: center;
bottom: 0;
}
<nav class="choice">
<ul>
<li>Sign-in</li>
<li> | </li>
<li>Register</li>
<li> | </li>
<li>Request</li>
</ul>
</nav>
<footer class="footer">
<h2>Site Map</h2>
<ul>
<li>Home</li>
<li>Register</li>
<li><a class="active" href="about.html">How it All Works</a></li>
<section id="copy">
<p>© 2018. All Rights Reserved.</p>
</section>
</ul>
</footer>
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
I have an excerpt of code that I need centered in my header, (just the text and the actual padding). I'm new to coding so if this doesn't sound right don't be surprised. This is the code where I need my list items centered in. Try to make your answer as beginner-like as possible.
CSS:
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
HTML:
<div id= "navcontainer">
<!-- BEGIN TABS -->
<ul>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
I know the li elements are messy but I do it so I can see it better. Sorry.
Add a text-align: center to the <ul>:
#navcontainer ul {
text-align: center;
}
Snippet
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
<div id="navcontainer">
<!-- BEGIN TABS -->
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
<ul>
<li>
Jackpot
</li>
<li>
Profile
</li>
<li>
Market
</li>
<li>
Support
</li>
</ul>
</div>
Also, not a good idea to have anything other than <li> inside the <ul>. You have also omitted a </a>.
There were a few errors in your markup, I've gone ahead and fixed them for you. All that's required to center your list items is text-align: center if you're positioning them as inline elements.
<div id= "navcontainer">
<ul>
<li>
<a id="index" class="page-logo" href="/">
<img src="slamlogo.png" alt="Logo">
</a>
</li>
<li>Jackpot</li>
<li>Profile</li>
<li>Market</li>
<li>Support</li>
</ul>
</div>
#navcontainer ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:'Raleway', sans-serif;
font-size: 23px;
color: #800000;
text-align: center;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: 0px;
margin: 40px;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #800000;
}
http://jsfiddle.net/ruLns221/
Just to further explain the changes, you should only add li elements to an unordered list (ul) so I've nested your logo within a list item. I've closed some unclosed tags off as well.
I want the text in the center but they all seem to be sticking on top of the nav bar.
see my image attached. Please tell me what I am doing wrong.
edit:I am unable to attach image as I don't have 10 reputations.
body {
background-color: white;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
padding: 0;
width: 200px;
height: 30px;
background-color: blue;
text-decoration: none;
font-family: arial;
color: white;
font-weight: bold;
text-align: center;
}
a:hover,
a:active {
background-color: green;
}
<body>
<ul>
<li> Home
</li>
<li> Products
</li>
<li> Services
</li>
<li> Contact us
</li>
<li> About us
</li>
<li> Blog
</li>
</ul>
</body>
use line-height same has height to align text of 'a' vertically to center.
set the style on a or a:link, a:visited
a {
line-height: 30px;
}
jsfiddle demo
Take padding from top padding-top:12px of a:link, a:visited in your css
and it's done
Because of that you gave padding:0 the text is sticking to the top.
so i changed two thing and it works for me.
padding:5px 0px;
height:20px;//To make your `li height 30px`
Fiddle: Text at center
I think this is what you want...Just add a padding-top to the anchor tag.
body {
background-color: white;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
width: 200px;
height: 30px;
background-color: blue;
text-decoration: none;
font-family: arial;
color: white;
font-weight: bold;
text-align: center;
padding-top:12px;
}
a:hover,
a:active {
background-color: green;
}
<body>
<ul>
<li> Home
</li>
<li> Products
</li>
<li> Services
</li>
<li> Contact us
</li>
<li> About us
</li>
<li> Blog
</li>
</ul>
</body>
add line height to a tag
<style>
body {
background-color: white;
}
ul {
list-style-type: none;
}
li {
float: left;
}
a:link,
a:visited {
display: block;
padding: 0;
width: 200px;
height: 30px;
line-height: 30px;
background-color: blue;
text-decoration: none;
font-family: arial;
color: white;
font-weight: bold;
text-align: center;
}
a:hover,
a:active {
background-color: green;
}
</style>
Add padding-top:10px; in a:link, a:visited
Here is working fiddle :Demo
I put a link in the image which leads back to the home page; however, I have my nav menu set up so they turn red with hovering and somehow it's making a red block behind my image when I hover over it. I'm using HTML5 and CSS3
HTML5
<header class ="main-header">
<a href="index.html">
<img src="Images/image.png" alt="image logo"></a>
<nav><ul>
<li class="active">HOME</li>
<li>NEWS</li>
<li>LOCATION</li>
</ul></nav>
</header>
CSS3
/* Define Hyperlink Info */
a {
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:link, a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover, a:active {
background-color: #C71F0E;
color: #FFFFFF;
text-decoration: none;
}
/* Defines navigation menu */
.main-header nav {
background-color: #354175;
height: 40px;
}
.main-header nav ul {
list-style: none;
margin: auto;
}
.main-header nav ul li {
display: inline;
float: left;
}
.main-header nav li a:hover, .main-header nav li.active {
background-color: #C71F0E;
color: #FFFFFF;
text-shadow: none;
}
.main-header nav ul li a {
border-radius: 15px;
color: #FFFFFF;
display: block;
height: 20px;
padding: 10px 25px;
}
If you look at the a:link, a:visited line, you'll notice that this targets ALL links, even your image link.
To do away with this, try giving your first link a class (like "logo"), and write specific styles for it after the a:link, a:visited line.