I want my menu to stay highlighted when I press on it. How could I do that? I am only a begginer html and CSS programer and I don't know how could I do this, I tried as others have said, didn't work.....
HTML:
<div id="menu">
<ul>
<li>Domov</li>
<li>Igre</li>
<li>Robotika</li>
<li>O nas</li>
<li>Kontakt</li>
<li>Forum</li>
</ul>
</div>
CSS:
#menu {
width: 950px;
height: 60px;
margin: 0 auto;
background: #6AA2FD url(images/img04.gif);
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
text-transform: uppercase;
}
#menu a {
display: block;
float: left;
background: url(images/img15.gif) no-repeat right 100%;
padding: 18px 30px 0 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
height: 60px;
background: url(images/img16.gif) repeat-x right 30%;
color: #000000;
}
#menu .current_page_item {
}
#menu .current_page_item a {
color: #FFFFFF;
background: url(images/img16.gif) repeat-x right 30%;
}
I don't know how to make that, pls help. And sorry for bad English i'm from Slovenia.
Is this what you are looking for http://jsfiddle.net/rYAGY/5/
If yes, please add this jQuery code to your bottom of page
var elements = $('#nav li a');
elements.on('click', function(e){
debugger;
e.preventDefault();
var th = $(this);
if(!th.hasClass('selected')){
elements.removeClass('selected');
th.addClass('selected');
}
});
Related
my problem is that i have styled my navigation bar with a block/button style graphic. that works just fine it's just when i put any tags it resorts to that styling? is there a way on the css style sheet to stop that style and having a different one. i've had this problem on other pages too, but it didnt end up being a problem. can anyone help?
css:
nav {
position:relative;
z-index:3;
position: absolute;
margin-left: 420px;
margin-top: -15px;
float: right;
}
ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
li {
float: left;
margin-top: 0px;
}
a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
html: just an unordered list
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
<li>services</li>
<li>contact</li>
</ul>
</nav>
It's not clear what your question is, but I'm sure what you want to do is easy enough. Sounds like you need to add a class or ID to your elements, or to make your CSS more specific. E.g.
nav ul {
list-style-type: none;
margin-top: 2px; padding: 0;
overflow: hidden;
}
nav li {
float: left;
margin-top: 0px;
}
nav a:link,a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
Simply make your CSS selector more specific by making it only select <a> elements that are descendants of <nav>:
nav a:link,
nav a:visited {
display: block;
width: 100px;
height: 25px;
font-weight: bold;
font-size: 12px;
color: #000000;
background-image: url(images/buttonreg.png);
text-align: center; padding-top: 5px;
text-decoration: none;
font-variant: small-caps;
}
nav a:hover,
nav a:active {
color: #FFAA50;
background-image: url(images/buttonhover.png);
}
I've gotten my navbar to work like I wanted, mostly, but now, again, I am having the problem, that when I minimize the window, the navbar with all its links collapses, and it almost looks quite decent, but it covers over my content area and some of the link text runs over the navbar area and I have to hide that and etc. So the simplest way I thought was to have navbar not move at all, and just be scrollable with the entire page.
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: fixed;
top: 0;
background-color: #000000;
left: 0;
}
#navBar ul{
margin: 0 auto;
height: 65px;
list-style:none;
min-width:760px;
}
#navBar li{
float: left;
height: 65px;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #ffffff;
color: #000000;
text-decoration: none;
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
</body>
</html>
Would appreciate some help, my first real webpage that I am working on, been trying quite a few things, but cannot seem to find a compromise, always one thing works and then the other thing wont work as intended..
You should remove position:absolute; and float:left; on #navBar like this :
FIDDLE
CSS :
#navBar {
width: 100%;
background-color: #000000;
left: 0;
overflow: hidden;
}
#navBar ul {
margin: 0 auto;
height: 65px;
list-style:none;
}
#navBar li {
float: left;
height: 65px;
}
#navBar li a:link, a:visited {
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px"open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover {
background-color: #ffffff;
color: #000000;
text-decoration: none;
}
I am trying to have a horizontal menu, but the ul is aligned to the right instead of in the middle.
Here are my CSS and HTML:
CSS:
#menu
{
clear: both;
float: left;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: right;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
float: left;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
}
HTML:
<div id="menu">
<ul>
<li>
<a href="http://www.tahara.es/">
<span>HOME</span>
</a>
</li>
<li>
<a href="http://www.tahara.es/shop/">
<span>SHOP</span>
</a>
</li>
</ul>
</div>
Thanks in advance for any suggestion!
You can remove your float properties.
Just add a width to your #menu ul and add margin : 0 auto; to make it centered.
Example :
#menu ul {
width: 300px;
margin: 0 auto;
}
Live demo here : http://codepen.io/joe/pen/uAaHo
Change #menu ul - use float: left instead of float: right
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
float: left;
}
I fixed your problem.
The html code is alright and i changed the css code:
#menu
{
clear: both;
width: 830px;
display: inline;
position: relative;
z-index: 1;
border-top: 1px solid #e9e6d9;
border-bottom: 1px solid #e9e6d9;
margin: 0 auto;
background-color:#FFFFFF;
padding: 0;
}
#menu ul {
margin: 0;
display: block;
text-align: center;
padding: 0;
}
#menu li {
/*font-family: Georgia, "Times New Roman", Times, serif;*/
font-family: sans-serif, Helvetica, Arial;
font-size: 13px;
font-weight: normal;
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0;
I basically deleted any occurrency of float:right;. Fixing your problem is as simple as this.
Here's a DEMO.
If you need further assistance i can help you.
I also suggest you a few link that you can find useful for building css menus:
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
The simplest code to position Your menu, is quite simple.
This code works correctly, tested on latest Safari, Chrome, Opera, Firefox. Also on IE11 and IE8.
http://jsfiddle.net/5ZrEx/
#menu
{
width: 830px;
margin: 0 auto;
display: inline;
}
#menu ul {
text-align: center;
}
#menu li {
display: inline-block;
}
Someone asked me to improve his CSS to prevent the navigation menu from changing position when the browser gets smaller, but I can't figure out why it won't work. See the jsFiddle: http://jsfiddle.net/gtvTY/10/
The HTML:
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
This is the original menu:
ul.menu {
position:absolute;
left:18%;
right:18%;
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 64%;
z-index: 3;
}
ul.menu li {
float: left;
margin: 0;
padding: 0;
}
ul.menu a {
background: #333;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
ul.menu a:hover {
background: #666;
color: #fff;
padding-bottom: 8px;
}
I have redesigned it a bit to this. But it doesn't work at all...
#menu ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin: 0 0.15em;
}
#menu li a
{
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
Why doesn't this menu stay centered at all times?
Maybe it is something like this you are looking for - jsFiddle in comment
You need to put the menu in a wrapping container. Give it a width and set the margin: 0 auto;
See fiddle here: http://jsfiddle.net/AndrewHenderson/gtvTY/7/
HTML:
<div class="container">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
</div>
CSS:
.container{
margin: 0 auto;
width: 800px;
}
Is that what you want? jsfiddle
Menu canter aligned in the bowoser.
Menu Items will not go in the second row.
if this is so the solution is
You have to use position:relative; instead of position:absolute;
<div class="center">
<div id="menu">
<ul>
<li>HOME</li>
<li>VIRAGE</li>
<li>RAPIDE</li>
<li>DBS</li>
<li>DB9</li>
<li>CYGNET</li>
</ul>
</div>
and define a width to your menu css
.center
{
width:auto;
}
#menu
{
width:900px;
margin:0 auto;
position:relative;
}
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin: 0 0.15em;
}
#menu li a {
background-color: #333;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
}
#menu ul a:hover {
background: #666;
color: #fff;
padding-bottom: 2px;
}
So I have a menu from ul and li, and it looks something like this at page load:
but when i click each menu and executed the code this happens:
what should i do? here's my CSS:
#menu-centered {
padding: 0px;
margin-bottom: 0px;
}
#menu-centered ul {
margin: 0;
padding: 0;
height: 99px;
width: 603px;
}
#menu-centered li {
display: inline;
list-style: none;
padding: 0px;
background: url(images/menu1.png) no-repeat right top;
}
#menu-centered a {
border-style: none;
border-color: inherit;
border-width: medium;
display: block;
margin-right: 0;
padding: 20px 30px 0px 30px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
height: 68px;
width: 130px;
text-align: center;
}
#menu-centered a:hover {
background: url(images/menu2.png) no-repeat right top;
}
and here's my html code for the menus:
<div id="menu-centered">
<ul>
<li> <a href="javascript:Clikbtn1()" >MENU1</a></li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</div>
Please help. Thanks
Your menus need some LoVe and HAte. In other words you need to create all four of the important link pseudoselectors to avoid letting browsers destroy your layout by applying the default active pseudoslector.
Define a:link, a:visited, a:hover and a:active for your menu, in that order exactly.