efecto horver y selec! para que conbine con el color de fondo de container

URL del foro: localhost
Versión del foro: 1.6
Actualización: Ninguna

http://imageshack.us/photo/my-images/853/46164114.jpg/
hola amigos quisiera saber como colocar el efecto selec!

osea

tengo una barra de navegacion donde el fondo es medio negro y las letras blancas!
la cosa es que cuando haga click el fondo del espacio de la letra se combierta en color blanco para que conbine con el color de fondo del container!

y al señalar que sea similar!

espero que me entiendan! hay les deje una imagen!

este es el codigo de la barra de menu que me refiero ( con esos codigos bino el stylo)
espero que me ayuden! ya que eso me esta haciendo sacar humo de la cabesa!

Código:
.menu {

    background: #1D1D1D;

    width: 100%;

    margin: auto auto;

    height: 41px;

}

.menu ul {

    width: 976px;

    color: #000000;

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#cacaca');

    border-left: 1px solid #797979;

    border-right: 1px solid #797979;

    border-bottom: 1px solid #797979;

    text-align: left;

    margin: auto auto;

    margin-top: -0px;

    padding-left: 20px;

    padding-right: 20px;

    margin-bottom: 33px;

    border-bottom-left-radius: 8px;

    border-bottom-right-radius: 8px;

    -moz-border-bottomleft-radius: 8px;

    -moz-border-bottomrightt-radius: 8px;

    font-family: sans-serif;

}

.menu li {

    float: left;

    margin: 0;

    padding: 0 15px 0 0;

    position: relative;

}

.menu ul li {

    padding: 6px;

    margin-left: 20px;

    padding-left: 20px;

    text-shadow: 0 -2px black;

    border-left: ;

}

.menu li a.selected {

}

.menu ul a:link {

    color: #fff;

    text-shadow: 0 -2px black;

    transition: color .2s;

    -webkit-transition: color .2s;

    -o-transition: color .2s;

    -moz-transition: color .2s;

    -khtml-transition: color .2s;

    text-decoration: none;

}

.menu ul a:visited {

    color: #fff;

    text-shadow: 0 -2px black;

    text-decoration: none;

}

.menu ul a:hover {

    background:  url(images/lust/theadd.png);

    color: #000;

    padding-top: -15px;

    text-shadow: 0 -2px black;

    height: 41px;

    text-decoration: none;

}

Elemento activo en la barra de navegación.

Pestaña activa con PHP.

Son dos formas diferentes de hacerlo, solo dale el estilo.

bueno me gustaria , como lo que digo,!

hise lo que me diste pestaña activa con php

y me sale haci!

http://imageshack.us/photo/my-images/341/27867350.jpg/

quisiera que salga como me refiero!

Última modificación: 14 Nov, 2011, 8:06 pm por niz01.

No sabría decirte, no lo e hecho así... supongo que sería:
.menu .active {
background: #fff;
color: #000;
padding: 4px 6px;
}

Dependiendo de entre que etiquetas este. Se me hace mas sencilla la otra forma.

Podrías decirnos que estilo usas y una imagen del como quieres que salga, obviamente debe tener todo como esta por defecto o lo que tienes o enviar algo mediante MP, no se, para revizar tu estilo y ponerlo como quieres mediante una imagen o algo, ya que si son diferentes comandos, pero si quieres hacerlo por ti mismo, verifica que los textos sean puestos de una manera y los fondos de otra para dar el efecto deseado.

http://oi43.tinypic.com/j6tp90.jpg
ya lo hice!

solo quiero que deje de marcar el "forum Home"

2- e notado que hay un ligero espacio que me incomodo , hay esta con una flecha lo marque!

espero que me ayuden para que toda la imagen ocupe todo el espacio

y que solo señale al que hiso click, espero que me entiendan!

1. ¿De que forma lo hiciste?

2. ¿Podrías copiar la plantilla header y por si acaso el código CSS de la barra de navegación?

el codigo lo copie de otro estylo!

Código:
</div>

<div id="navbar">

        <ul id="nav">

<div class="margenizquierda">

            <li><a href="{$mybb->settings['bburl']}/index.php" class="current">Forum Home</a></li>

            <li><a href="{$mybb->settings['bburl']}/search.php" class="search">Search</a></li>

            <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">Member List</a></li>

            <li><a href="{$mybb->settings['bburl']}/calendar.php" class="calendar">Calendar</a></li>

            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">Help</a></li>

        </ul>

</div>

    </div>[/quote]

codigo css.

Código:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help {

background:#ffffff;

    color: #000;

}

 #navbar {

    background: url(images/lust/navx.png) repeat-x;

    width: 100%;

    height: 32px;

    margin: 0;

    padding: 0;

    font-family: Arial, Sans-serif;

    font-size: 12px;

    font-weight: bold;

    line-height: 32px;

    text-align: center;

}

#nav {

    width: 100%;

    list-style: none;

    float: left;

    margin: 0;

    padding: 0;

    text-align: center;

}

#nav a {

    color: #EEE;

    text-decoration: none;

    display: block;

    float: left;

    margin: 0;

    padding: 0 24px 0 24px;

}

#nav a:hover {

background:#fff;

    color: #000;

}

#nav a.current {

background:#fff;

    color: #000;

}

#nav li {

    display: inline;

    margin: 0;

    padding: 0;

}

a u use esa modificacion de esta

http://www.soportemybb.com/tema_Tutorial...aci%C3%B3n

1. Cambia

Código:
class="current"

Por

Código:
class="index"

En la plantilla Índice - Plantillas/index
Cambia:

Código:
<body>

Por:

Código:
<body id="index">

Sustituye:

Código:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help {

Por:

Código:
#index .index, #search .search, #memberlist .memberlist, #calendar .calendar, #help .help {

Elimina:

Código:
#nav a.current {

background:#fff;

    color: #000;

}

2. Copia toda la plantilla en la que tienes la barra y el código css de margenizquierda.

Gracias ya esta! ahora lo que referi sobre el espacio que sobra alguna solucion por faas!