This question already has an answer here:
how to get my navigation button stay active
(1 answer)
Closed 9 years ago.
Can't get my navigation to stay active using html and css. It just light up but does not stay active when pressed. What am I missing?
How do I make it stay active when pressed? Really need the help fast! Im new to coding so please help.
tried changing #menu2 a:hover{ to #menu2 a:hover, #menu2 a:active {.
added #menu2 a:active to the CSS.
#menu2 a:hover,#menu2 a:active{
background-image: url(bildes/apak_navig_green.png);
color:white;
font:14px Arial;
color:black;
text-decoration:none;
display: block;
line-height:30px;
}
But did not work, and when I leave only the active class it just gliches for a seconed in the look I need and then goes back to the old look, I suppose thats because the information is in different html files, but then how can I make it work?
HTML
<div id="apaknavig">
<div id="menu2">
<ul>
<li>Uzņēmums</li>
<li>kontakti</li>
</ul>
</div>
</div>
CSS
#apaknavig {
Width: 200px;
height: 604px;
top:-613px;
position:relative;
font:14px Arial;
color:black;
float:left;
right:35px;
text-indent:12px;
display: block;
line-height:30px;
}
#menu2 ul{
list-style:none;
float: left;
font:14px Arial;
color:black;
right:90px;
text-decoration:none;
text-align:left; width:10px;
display: block;
line-height:30px;
margin-bottom:10px;
}
#menu2 a{
background-image: url(bildes/apak_navig.png);
display:block;
width: 196px;
height:34px;
font:14px Arial;
color:black;
float:left;
right:90px;
text-decoration:none;
display: block;
line-height:30px;
margin-bottom:3px;
}
#menu2 a:hover{
background-image: url(bildes/apak_navig_green.png);
color:white;
font:14px Arial;
color:black;
text-decoration:none;
display: block;
line-height:30px;
}
It's active while clicking, nothing more.
You could use JavaScript to add an "active" class.
Related
I was wondering if anyone could help me with an issue I'm having. I wanted the text "Liam's Digital Portfolio" to be in the centre of the webpage at the top in line with the navigation bar text. In addition, I then wanted the navigation bar to be on the far right hand corner as shown within the codepen link http://codepen.io/ldocherty1/pen/qRowVK.
I have only started programming and this is my second day and really want to improve, apologies if the code is not in the correct structure.
Below is my HTML code, within the codepen is my CSS if needed.
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li><b><center>Liam's Digital Portfolio<center></b></li>
</ul>
</div>
</body>
</html>
Thanks,
Liam.
I wish you all the best with your coding journey :) I will give you an easy solution to get the desired effect. First off, cut the padding-top from the body in the css:
padding-top: 180px;
Now from your html, remove
<li><b><center>Liam's Digital Portfolio<center></b></li>
Since this is your page title, it is standard practice to have it inside of h1 tags. Then we can center it with simple css. The html will look like this:
<h1 class="title">Liam's Digital Portfolio</h1>
<div id="Navagationbar">
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
</ul>
</div>
And now we can simply add this to the css
.title{text-align:center;}
With the padding-top removed and this added, the title will be in the center of the page inline with the navigation bar. I see you have a lot of issues with your css so I suggest you go through a good tutorial, like this one from w3schools http://www.w3schools.com/css/ . I hope this helps, and good luck!
Make the HTML changes as below
<ul>
<li><b>HomePage</b></li>
<li><b>Portfolio</b></li>
<li><b>Contact Us</b></li>
<li style="position:absolute;right:45%"><b>Liam's Digital Portfolio</b></li>
</ul>
CSS changes as below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
h1 {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
li a:hover:not(.active) {
background-color:grey;
}
#Navagationbar {
font-family:Arial;
color:white;
font-size:10pt;
text-align:center;
}
#Navagationbar ul {
list-style:none;
float:right;
margin:0;
padding:0;
}
#Navagationbar ul li {
display:block;
list-style:none;
margin:0;
padding:0;
}
#Navagationbar ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:white;;
text-decoration:none;
line-height:1.3em;
}
#Navagationbar ul li a:hover {
color:white;
}
#Navagationbar ul li a.active,
#Navagationbar ul li a.active:hover {
color:white;
}
body {
margin:0;
}
.page{
min-height:-590px;
background:linear-gradient(45deg, #999, #FFF);
}
#footer{
list-style:none inside none;
margin:0;
padding:0;
position:fixed;
right:0;
bottom:0;
left:0;
height:50px;
background-color:#1f1f1f;
font-size:0;
}
#footer li {
font-family:Arial;
float: right;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li {
font-family:Arial;
float: left;
color:white;
font-size:10pt;
display:inline-block;
text-align:center;
height:50px;
padding:0 20px;
line-height:3.3;
border-right:1px solid #000;
border-left:1px solid #333;
}
#footer li:last-child {
border-right:0;
}
body {
background:url('https://static.pexels.com/photos/34088/pexels-photo.jpg');
position:static;
height:400px;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
}
Can't get my navigation to stay active using html and css. It just light up but does not stay active when pressed. What am I missing?
How do I make it stay active when pressed? Really need the help fast! Sorry for my bad code, I'm new to coding.
How do I type the active class? I tried to, but it did not work.
HTML
<div id="apaknavig">
<div id="menu2">
<ul>
<li>Uzņēmums</li>
<li>kontakti</li>
</ul>
</div>
</div>
CSS
#apaknavig {
Width: 200px;
height: 604px;
top:-613px;
position:relative;
font:14px Arial;
color:black;
float:left;
right:35px;
text-indent:12px;
display: block;
line-height:30px;
}
#menu2 ul{
list-style:none;
float: left;
font:14px Arial;
color:black;
right:90px;
text-decoration:none;
text-align:left; width:10px;
display: block;
line-height:30px;
margin-bottom:10px;
}
#menu2 a{
background-image: url(bildes/apak_navig.png);
display:block;
width: 196px;
height:34px;
font:14px Arial;
color:black;
float:left;
right:90px;
text-decoration:none;
display: block;
line-height:30px;
margin-bottom:3px;
}
#menu2 a:hover{
background-image: url(bildes/apak_navig_green.png);
color:white;
font:14px Arial;
color:black;
text-decoration:none;
display: block;
line-height:30px;
}
Just change #menu2 a:hover{ to #menu2 a:hover, #menu2 a:active {.
You just have to add #menu2 a:active to the CSS.
#menu2 a:hover,#menu2 a:active{
background-image: url(bildes/apak_navig_green.png);
color:white;
font:14px Arial;
color:black;
text-decoration:none;
display: block;
line-height:30px;
}
I tried it but it just does not work. It continues to just hover, but does not stay active when I press it.
I'am trying to make this in css. Trying to make this navigation bar. Any help would be great.
This is what iam trying to do:
So the first pic is how it should look like when the user enter the website. Then if they hover over the any of the tabs it should just change color. Any help on trying to make this would be great. I tried this but wont work.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
Just need to see what the css would look like. Thanks again
EDIT what i have done as people want 2 see:
div.horizontal
{
width:809px;
height:63px;
position:relative;
top: -1046px;
left: 104px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
display: inline-block;
margin-left: 5px;
}
div.horizontal a
{
display:block;
width:809px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#000000;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#999999;
}
Like i said this is not right but this is all i can do atm. Thanks
Using your HTML, you can do something like this:
CSS
ul{
list-style:none;
}
li{
float:left;
width:100px;
height:50px;
background:black;
border:2px solid gray;
text-align:center;
}
a{
color:white;
text-decoration:none;
font-size:24px;
font-weight:bold;
line-height:50px;
font-style:italic
}
li:hover{
background:gray;
}
JSFiddle.
Just change the colors.
I'm designing a navigation bar. The code looks like this:
<nav class="menu">
<ul class="topnav">
<li>Overview</li>
...
</ul>
</nav>
In css I have the following code for the li elements:
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
background-clip:padding-box;
text-align:center;
width:139px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-color:#CC33CC;
font-size:14px;
padding:9px 0 8px 0;
margin:0;
color:#6F5270;
text-shadow:#FCF 0 1px;
}
ul.topnav li a{
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
It generates this following button:
The problem is the link-clickable area (shown in blue above) doesn't cover the entire surface of the button. So when I click on the edges of the button, it doesn't work. I tried to play with padding value but couldn't solve the problem. Is there an easy and efficient way to make the link cover the whole area of the button so that it works wherever on the button the user might click?
Try setting display: block; in the CSS for ul.topnav li a.
Make the <a> tag display:block and add the padding, width etc to the anchor.
ul.topnav li{
cursor:pointer;
list-style-type:none;
display:inline;
float:left;
margin:0;
}
ul.topnav li a{
display: block;
color:#6F5270;
text-shadow:#FCF 0 1px;
background-repeat:repeat-x;
background-image:url(images/nav_normal.png);
background-clip:padding-box;
background-color:#CC33CC;
text-align:center;
width:139px;
font-size:14px;
padding:9px 0 8px 0;
font-size:15px;
font-weight:bold;
padding:auto;
color:#FFFFFF;
text-shadow:#903 0 1px;
text-decoration:none;
}
Try this:
ul.topnav li a{
font-size:15px;
font-weight:bold;
color:#FFFFFF;
display:block;
height:17px;
line-height:17px;
text-align:center;
text-shadow:#903 0 1px;
text-decoration:none;
}
i use only this
ul.topnav li a{
display:inline-block;
}
I am working on a dropdown meenu, which is disappearing in IE 8. Works fine in firefox and chrome, but not in IE8. i googled for two days and made many changes but still not working in IE. Here is the code for CSS.
.dropdownmenu li, .dropdownmenu li ul
{
display: block;display:inline;float:none;
}
dropdownmenu ul:hover , .dropdownmenu ul li:hover
{
display: block;display:inline; float:none;
}
.dropdownmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 37.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
color:#ffffff;
}
.dropdownmenu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.dropdownmenu li a.top_link span {color:#ffffff;font-size:11px;}
.dropdownmenu li{
color: #FFFFFF;
font-size:11px;
float:left;
padding:0px;
}
.dropdownmenu li a{
background:#333333 url("dropdown/seperator.gif") bottom right no-repeat;
color:#ffffff;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 11px;
text-align:center;
text-decoration:none;
}
.dropdownmenu li a:hover{
background: #2580a2 url("dropdown/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.dropdownmenu li ul{
color:#ffffff;
font-size:10px;
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:auto;
z-index:200;
/*top:1em;
left:0;*/
}
.dropdownmenu li:hover ul{
display:block;
float:left;
}
.dropdownmenu li li {
background:url('dropdown/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:auto;
}
.dropdownmenu li ul a{
display:block;
height:35px;
font-size:12px;
color:#ffffff;
font-style:normal;
margin:0px;
padding:0px 10px 0px 17px;
text-align:left;
}
.dropdownmenu li ulli a:hover{
display:block;
background:#2580a2;
color:#ffffff;
text-decoration:none;
}
Here is the php code, I have used <?include ('dropdown.php')?> on my site to include this in the CMS built website.
<link rel="stylesheet" href="dropdown/dropdown3.css" type="text/css" />
<ul class="dropdownmenu">
<li ><span>Home & Garden <img src="dropdown/down.gif"></span>
<ul class="sub">
<li>ArtWork</li>
<li>Bedding & Bath</li>
<li>Kitchen & Dining</li>
<li>Patio, Lawn & Garden</li>
<li>Pet Supplies</li>
<li>Sewing, Craft & Hobbies</li>
<li>Vacuum, Cleaning & Storage </li>
</ul>
</li>
</ul>
What else can i do to fix it in IE?
Also, when the dropdown menu is hovered, it shows a background color of #2580a2, which can be seen at .dropdownmenu li a:hover This particular thing is not being shown in chrome. What could be the reason?
Using Internet Explorer Compatibility View on that website may help it display properly. Try it.
I'm using jQuery Dropdown for this with no errors at any browser.
If your menu will work well Explorer Compatibility View as "Sagotharan" suggested you can override IE rendering engine by setting it to render as IE7 always, like so
<meta http-equiv="X-UA-Compatible" content="IE=7" />