I'm trying to get the orange part across the whole screen instead of just on the text? So when someone hovers over it, the orange color comes up on the selected menu item
Capture
Here is my code
* {
margin: 0;
padding: 0;
}
html {
background: #76787a;
font-family: Arial, sans-serif;
font-weight: bold;
}
.container {
text-align: center;
list-style-type: none;
}
a {
text-decoration: none;
background-color: #c67b3d;
}
a:hover {
background-color: green;
}
.menu li a {
color: yellow;
font-size: 160px;
}
<div class="container">
<nav class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</div>
Amend your css file:
Put:
background-color: #c67b3d; max-width: 100%;
in .container
Make .menu li a display: block.
Not sure if you want margin-bottom: 10px;
* {
margin: 0;
padding: 0;
}
html {
background: #76787a;
font-family: Arial, sans-serif;
font-weight: bold;
}
.container {
text-align: center;
list-style-type: none;
}
a {
text-decoration: none;
background-color: #c67b3d;
}
a:hover {
background-color: green;
}
.menu li a {
display: block;
margin-bottom: 10px;
color: yellow;
font-size: 160px;
}
<div class="container">
<nav class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
Simply add display: block to the a element. You can even get rid of <li> elements and the <nav> element.
* {
margin: 0;
}
.container {
text-align: center;
}
a {
text-decoration: none;
display: block;
background-color: orange;
}
a:hover {
background-color: green;
}
<div class="container">
HOME
ABOUT
WORK
CONTACT
</div>
https://jsfiddle.net/pfvf10g5/
* {
margin: 0;
padding: 0;
}
html {
background: #76787a;
font-family: Arial, sans-serif;
font-weight: bold;
}
.container {
text-align: center;
list-style-type: none;
background-color: #c67b3d;
max-width: 100%;
}
a {
text-decoration: none;
background-color: #c67b3d;
}
a:hover {
background-color: green;
}
.menu li a {
color: yellow;
font-size: 160px;
}
<div class="container">
<nav class="menu">
<li>HOME</li>
<li>ABOUT</li>
<li>WORK</li>
<li>CONTACT</li>
</div>
colour effect need to be apply on .menu li instead of .menu li a.
snippet of this code is
here.
Related
There is a navigation menu that I developed in <header>. However, the <p> element I use after the <header> element and the <header> components overlap. Why does this issue occur and how do I fix this issue?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
position: fixed;
top:0px;
padding: 0 30px;
background: transparent;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
<body>
<!-- Navigation Menu -->
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<!-- Content -->
<p>test</p>
</body>
This issue occurs in the .navbar class style position: fixed; caused by its use. In this case, the navigation menu remains fixed when the scrollbar is opened. So you can enclose other elements after the <header> element in a <div> element; apply a margin-top style to this element and you will see all other content scroll.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: cabin, sans-serif;
}
header {
display: block;
}
.primary {
color: blue;
font-weight: bold;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 70px;
/* This style applied causes the <p> element to render above. */
position: fixed;
top:0px;
padding: 0 30px;
background: yellow;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar a {
text-decoration: none;
margin: 0 5px;
padding: 10px 20px;
font-weight: bolder;
}
.navbar a:hover{
border-bottom: 2px blue solid;
}
.navbar a:visited{
color: blue;
}
/* The following style has been applied to the <div> element that encloses other elements. */
.container {
margin-top: 70px; /* To avoid shifting caused by the "position: fixed" class style */
height: 1500px; /* To make the scrollbar pop up */
}
p {
height: 200px;
border: 1px solid red;
background-color: lightgray;
}
<body>
<header>
<div class="navbar">
<h1 class="logo"><span class="primary">benj</span>.codes</h1>
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</header>
<div class="container">
<p>Content</p>
</div>
</body>
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 have two id's that I am using for a <ul> tag in my website. The id .a works and doesn't have any bullet points. The id .b does not work when I use
list-style-type: square; tag. Basically, I want id .b to have bullet points and I don't want id .a to have bullet points. Both of them don't show any bullet points. My question is what am I doing wrong with my id .b because I want it to have bullet points and it doesn't.
I will post the section of the code below.
#navbar { margin-right: auto;
margin-left: auto;}
.a { list-style-type: none;
margin: 0;
padding: 0;
overflow:0;
}
.b { list-style-type: square;
text-align: center;
}
Here are my full <li> and <ul> html tags
<div id="navbar">
<ul class="a">
<li>Home</li>
<li>About</li>
<li>Auctions<li>
<li>Contact<li>
<li>Pictures<li>
</ul>
</div>
Here is my full CSS code
#navbar { margin-right: auto;
margin-left: auto;}
.a { list-style-type: none;
margin: 0;
padding: 0;
overflow:0;
}
.b { list-style-type: square;
text-align: center;
}
a:link, a:visited { display: block;
font-weight: bold;
color: white;
background-color: black;
padding: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a:hover, a:active { background-color: red;}
li { display:inline-block; margin-right:15px;}
html { background-color: #262626;}
body { margin: auto;
margin-left: 199px;
margin-right: 185px;
text-align: center;
background-color: white;}
Your class="b" list items are getting the square, but its getting swallowed up by this line of css: li { display:inline-block; margin-right:15px; }
You may need to be more specific with your css selectors to get it working, something like ul.a li { display:inline-block; margin-right:15px; } might achieve what you're trying to do, depending on your markup.
You haven't shared what your markup is for the class="b" items, but you can see its working in this JS fiddle with that change to the css: https://jsfiddle.net/52e5Lsm5/5/
This css should work:
#navbar { margin-right: auto;
margin-left: auto;}
.a { list-style-type: none;
margin: 0;
padding: 0;
overflow:0;
}
.b { list-style-type: bullets;
text-align: center;
}
a:link, a:visited { display: block;
font-weight: bold;
color: white;
background-color: black;
padding: 6px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a:hover, a:active { background-color: red;}
li { margin-right:15px;}
html { background-color: #262626;}
body { margin: auto;
margin-left: 199px;
margin-right: 185px;
text-align: center;
background-color: white;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="navbar">
<ul class="a">
<li>Home</li>
<li>About<li>
<li>Auctions<li>
<li>Contact<li>
<li>Pictures</li>
</ul>
<ul class="b">
<li>Home</li>
<li>About</li>
<li>Auctions</li>
<li>Contact</li>
<li>Pictures</li>
</ul>
</div>
</body>
</html>
I am trying to make a basic site with HTML & CSS, with a navigation bar, but I have a problem with it [below]:
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<div id="navigation_button_1", class="navigation_button"> Home </div>
<div id="navigation_button_2", class="navigation_button"> About </div>
<div id="navigation_button_3", class="navigation_button"> Services </div>
<div id="navigation_button_4", class="navigation_button"> Contact </div>
</div>
<!-- More DIVs in the container -->
</div>
The problem is - all my navigation buttons are stacked up ontop of each other, not on a row. What am I doing wrong?
Instead of making them divs, use anchor tags inside lists. Here's the image and the complete working code for you:
<html>
<head>
<style>
body
{
background-color: #666;
}
.font_title
{
font-family: "Segoe UI";
font-weight: bold;
font-size: 60px;
text-align: center;
}
#title
{
width: 800px;
}
#container
{
position: relative;
margin: auto;
width: 800px;
height: 995px;
background-color: #CCCCCC;
}
#navigation_holder
{
position: relative;
margin: auto;
width: 800px;
}
.navigation_button
{
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
.navigation_button:hover
{
background-color: #09F;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:200px;
font-family: "Segoe UI";
text-align: center;
font-size: 26px;
width: 200px;
height: 40px;
background-color: #09C;
}
a:hover,a:active
{
background-color: #09F;
}
</style>
</head>
<body>
<div id="container"> <!-- The main container -->
<div class="font_title", id="title"> Our Site</div>
<div id="navigation_holder">
<ul>
<li id="navigation_button_1" > Home </li>
<li id="navigation_button_2" > About </li>
<li id="navigation_button_3" > Services </li>
<li id="navigation_button_4" > Contact </li>
</ul>
</div>
<!-- More DIVs in the container -->
</div>
</body>
</html>
The problem is that divs are block elements, thus they naturally position themselves on top of each other. You can use several methods to get them to behave. Applying a display: inline-block to your .navigation_button class is what I would prefer in most cases. In this case, however, a float: left will work just as well.
The two methods have their benefits and drawbacks, but floats can become problematic because they essentially become unrecognizable to non-floated elements (in the same way position: absolute does).
As an aside, if I were you, I'd pull the height off your container, change #navigation_holder to a <nav>, and perhaps even pull the ids (and possibly even the classes!) off of your individual navigation elements. Heck, you could even take out the inner divs entirely, and replace them with a ul whose li were display: inline (it would be more semantic).
You could then reference them like this:
.navigation_holder ul li {
display: inline;
padding-left: 40px; /* or whatever */
}
And if you need to target only the first or last:
.navigation_holder ul li:first-of-type {
// styles
}
.navigation_holder ul li:last-of-type {
// styles
}
To pop the default styles off the ul:
.navigation_holder ul {
list-style-type: none;
}
A reply to your question, and a question to your question...
What are you looking for?
Here are 3 examples:
1 Providing you wanted a normal left hand horizontal inline-list you would do:
HTML
<div id="navigation_holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_left ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation_left ul li { display: inline; }
#navigation_left ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_left ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
2 Providing you want to center your li elements.
HTML
<div id="navigation_center">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navigation_center ul li { display: inline; }
#navigation_center ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
3 Providing you want to center your li elements with a solid background.
HTML
<div id="navigation_center_full">
<ul class="full">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
CSS
#navigation_center_full ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
}
#navigation_center_full ul li { display: inline; }
#navigation_center_full ul li a
{
font-family:"Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
text-decoration: none;
padding: .2em 1em;
color: #DDD;
background-color: #0099CF;
border-radius: 4px;
}
#navigation_center_full ul li a:hover
{
color: #FFF;
background-color: #00BEF9;
}
Pretty sure this should help you.
Why you dont use <ul> and <li> tags? I think is better. Then in CSS you must use:
display: inline
One example in: http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
I've never seen anything stupid like that, or may be it's 2:30 am and I am hallucinating. I've made simple anchor links within the header and I am completely unable to click on them. They are just plain text and are completely non-clickable.
I'll be thankful if you can give me a hint as what/where I am not obeying the HTML/CSS daemon.
HTML
<header>
<div class="confine">
<div class="complete-head-content">
<div class="left-width-less logo-width">
<img src="./imgs/twit-logo.png" />
</div>
<div class="right-width-less">
<div class="top-header-content">
<h1 class="pres-title">Defining Twisted Strategy</h1>
</div>
<div class="lower-header-content">
<div id="navcontainer">
<ul>
<li>Meet the Hobos</li>
<li>Why me?</li>
<li>Our Work in Oblivion</li>
<li>Our Perspective</li>
<li>Our Approach</li>
</ul>
</div>
</div>
</div>
<div class="c"> </div>
</div>
</div>
</header>
<div id="contend">
... ... ...
CSS
a {
color: #EA2E49;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #EA2E49;
cursor: pointer;
}
header {
height: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
z-index: 1;
}
.complete-head-content {
width: 100%;
background-color: #a0c654;
height: 130px;
}
.left-width-less {
float: left;
background-color: #fff;
width: 15%;
text-align: center;
height: 130px;
vertical-align: middle;
}
.left-width-less img {
width : 76px;
height: 100px;
margin-top: 10px;
}
.right-width-less {
float: right;
width: 85%;
}
.top-header-content {
width: 100%;
height: 70px;
background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}
.lower-header-content {
width: 100%;
height: 70px;
}
.logo {
cursor: pointer;
}
/* Navigation */
#navcontainer {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
text-transform: uppercase;
margin-top: 19px;
}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1.7em;
color: #fff;
}
#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}
EDIT
Thanks to Nikhil, the had a Z-index:1 which when removed fixed the bug.
Thanks.
Unless you left something out. it is working for me with and without css.
Tested in IE 8
How did you include the CSS btw?
The <div id="contend"> right next to tag had a z-index:1. This made every link in <header> tag non-clickable.
The solution was to remove the z-index property.
Hope it helps someone.