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.
Related
I have a bunch of inline-blocks which I want to wrap when the browser window is shrunken. They look like this:
[nav element 1] [nav element 2] [nav element 3] [nav element 4]
This is a {h1} header.
When the browser is resized, I want them to wrap, which they do. But they overwrite the header on the next line:
[nav element 1] [nav element 2] [nav element 3]
[nav element 4]eader.
I've tried separating the header with paragraphs and linebreaks. Nope.
I've tried putting a "clear:both" on the {h1} style. Nope.
I've tried putting a {div} around the {h1} with a "display:block" and/or a "clear:both". Nope.
I want the page content to move down when the nav bar wraps.
Any hints?
My code and its results can be seen at criv.com/test
EDIT
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
position: absolute;
top: -1px;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone 603.837.9800.</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>
Remove position absolute from it. If you want nav to push 1px to top then you can use margin-top:-1px
Here is working code.
body {
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: #FFFFFF;
}
h1 {
display:inline-block;
background:#FF0000;
border:2px solid black;
clear:both;
}
.nav {
display: block;
float: left;
overflow: auto;
}
.nav a {
display:inline-block;
width:88px;
height:50px;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#FFFFFF;
background-color:#008000;
text-align:center;
padding:0px;
margin:0px;
border-style:solid;
border-color:#FFFFFF;
border-width:1px;
text-decoration:none;
}
.nav a:visited {
color:#CCCCCC;
}
.nav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
.nav a#here {
color:#008000;
background-color:white;
}
ul.subnav {
background-color:#009000;
padding:0px;
margin:0px;
border:1px solid #009000;
width:618px;
height:18px;
position:absolute;
top:72px;
left:220px;
}
ul.subnav li {
display:block;
width:123px;
height:18px;
background-color:#009000;
list-style-type:none;
margin:0px;
padding:0px;
border-width:0px;
overflow:hidden;
float:left;
}
ul.subnav a {
display:block;
width:123px;
height:18px;
font-family:"Comic Sans MS", Arial, Sans-serif;
font-size:75%;
font-weight:bold;
color:#FFFFFF;
background-color:#009000;
text-align:center;
padding:0px;
border-width:0px;
margin:0px;
text-decoration:none;
}
ul.subnav a:visited {
color:#CCCCCC;
}
ul.subnav a:hover, a:active {
color:#008000;
background-color:#CCCCCC;
}
ul.subnav a#here {
color:#008000;
background-color:white;
}
.note {
background-color:#7A991A;
}
.text {
background-color:white;
font-family:"Comic Sans MS", Arial, Sans-serif;
color:#008000;
width:80%;
left:10%;
}
.text a:link {
color:#008000;
}
.text a:visited {
color:#999999;
}
<div class="nav">
2014 peony list
bloom calendar
photo gallery
peony<br />how-to's
peony<br />tales
<br />visit
<span class="clearfix">contact/ order</span>
</div>
<br />
<div class="notreally"><h1>peonies of the coos riviera</h1></div>
<span class="text">
Just above the Connecticut River in New Hampshire's Coos County,
more than a hundred varieties of herbaceous peonies, tree peonies,
and intersectional-hybrid peonies bloom from late May to early July.
<p>The display garden has closed for the season. To order peonies for fall planting,
email peonies#criv.com, or phone 603.837.9800.</p>
<p>Review <b>the 2014 bloom season</b> in pictures!</p>
</span>
i want to make a navigation bar similar the one found here.
I tried but I couldn't :D
Here's what I did:
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
CSS
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
or you can try the fiddle that i created
http://jsfiddle.net/uYd9u/
I believe this is what you are looking to do.
http://jsfiddle.net/cornelas/uYd9u/11/
In order to achieve what you are wanting to create.
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
border-bottom: 4px solid #98bf21;
text-align: right; //ADD
}
li
{
display: inline-block; //REMOVE FLOAT:right;
vertical-align: bottom; //ADD to align to bottom
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
li.active,li.active a:link{//ADD so you can have one box have a background.
background-color:#98bf21;
color:#FFFFFF;
}
a:hover,a:active
{
background-color:#7A991A;
}
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.
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 trying to create a simple menu using li elements, but it only works on IE7, in FF and Chrome, the alignment get weird.
Also the :hover and :Active only works on IE7.
Could anybody give me a hit on this?
I would really appreciate it.
CSS:
#heading{
width: 700px;
height:auto;
margin: 0 auto;
background-color:#FFFFFF;
margin-top:5px;
margin-bottom:5px;
display:block;
}
#imglogo{
float:left;
}
#barDescription{
float:right;
}
#navigation{
text-align: right;
margin-top: 70px;
}
#navigation li{
float: right;
display: block;
text-align: center;
list-style-type: none;
}
#navigation li a{
color:#A08019;
background-image: url('Images/Menu1.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bold;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
navigation li a:hover{
color:white;
background-image: url('Images/Menu2.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bolder;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
navigation li a:active{
color:#B39A48;
background-image: url('Images/Menu2.png');
background-repeat:repeat-x;
background-position: center center;
text-decoration:none;
font-weight:bolder;
display: block;
height:25px;
vertical-align:middle;
padding-right:10px;
padding-left:10px;
}
HTML:
<div id="heading" >
<div id="imglogo">
<img id="logo" src="Images/logo.png" alt="logo" />
</div>
<div id="barDescription">
<h4>Especialidad en tapas,vinos y menus</h4>
<h5>Restaurante de cocina creativa tradicional. Vinos y tapas</h5>
</div>
<ul id="navigation">
<li>Contacto</li>
<li>Ubicacion</li>
<li>Reservas</li>
<li>Menus</li>
<li>Local</li>
</ul>
</div>
Suns of Suckerfish teaches how to get there. (Example.)
edit: Now that you posted the :active and :hover CSS, I can see you're missing a # in the beggining of the rule. So it is being applied to the "navigation" tags instead of the tags with "navigation" id. Change your CSS to add the # before "navigation":
#navigation li a:hover{
/* ... */
}
#navigation li a:active{
/* ... */
}