Resaltar pestaña de página actual en unas falsas-frames hechas con php

jplazavidaurre · #1 (**permalink**) 08/02/2009, 15:36

Hola,

Lo primero decir que no soy muy experto en esto de hacer webs. Por ello os ruego un poco de paciencia. Hace un par de semanas me ayudasteis a montar una web en vez de usando en vez de frames unos trozos de código que juntos constituyen una web y que se ensamblan por medio de php del tipo:

cabeza.php
navegacion.php
menus_izda.php
index.php ahí he puesto al código que son los textos una <div id="inicio">
pie.php

Y el index.php tiene las opciones include que montan los otros trozos, cada uno con su parte de código. Y así otras páginas que fuese montando en la parte del centro montarían código de la cabeza, navegación, menus_izda y pie dando el efecto que antes obtenía con frames.

La cosa es que la parte de navegación la he hecho con pestañas a base de tablas ul y elementos li y cuando quiero hacer con una web normal sin php que la pestaña de la parte actual se mantenga con el efecto como de activada usaba:

#navegacion a:hover,
#inicio #pestaña01 a, (donde "inicio" era el id del body de la página inicio.html)
#otraparte# pestaña02 a (sin coma donde otraparte era el id de la pag. otraparte.html)
etc...

(NO SÉ SI ME EXPLICO BIEN)

La cosa es que ahora no sé como se haría ese efecto cuando en mi caso ya no tengo muchos "bodys" uno por página html, sino uno solo, que está en cabeza.php y por ello no sé que dos selectores debo usar para que el efecto rollover se me muestre en cada pestaña (son 4 pestañas).

Vaya, no sé si se entiende algo... ¡snif!

El código css en esa parte es:

#navegacion a:hover,
#somos #navi01 a,
#estamos #navi02 a
#localizarnos #navi03 a
#preguntenos #navi04 a
{
text-decoration: none;
color: black;
background-color: white;
padding-bottom: 5px;
border-bottom: none;
}

Donde #somos es el selector del id del index.php y navi01 el de la pestaña que va a la presentación (somos tal grupo y eso). La coma se la he puesto solo a ese que es el que quiero que tenga activado en la pestaña el efecto rollover mientras la página que se presente sea la principal a la que he llegado con esa pestaña.

A ver si alguien me puede ayudar.

Gracias de antemano.

Rafael · #2 (**permalink**) 09/02/2009, 00:05

Hum... cierto...
Bueno, existe la pseudo clase a:active revisa si te funciona.
Si no, probablemente lo que tengas que hacer sería redistribuir el contenido de los includes, ya que una pestaña activa es una pestaña local. Por lo menos el estilo de la pestaña activa.

(Aquí voy a decir unas barbaridades)
Tal vez haga falta un script php o javascript que identifique el link en el que estás para que asigne un estilo localmente. Tal vez con active será suficiente pero si no habrá que reafirmarlo.

willyfc · #3 (**permalink**) 09/02/2009, 07:33

si vas a usar includes, como dice Rafael necesitas un script para poder hacer que se quede activo un vínculo cuando estes viendo la pagina correspondiente y tambien tienes que utilizar la clase current, mas o menos de esta manera:

Código:

#menu{
	width:95%;
	height:2.19em;
	margin:8px auto;
	font-family:Arial, Helvetica;
	background:#3F3E30;
}
#menu ul{ list-style:none; padding:6px 0 0 0; }
#menu ul li{display:inline;}
#menu ul li a{ font-size:0.8em; color:#FFF; text-decoration:none; font-weight:bold; padding:0 7px 0 7px;}
#menu ul li a:hover,a:focus,a:active{border-bottom:2px solid #98AD21;}
#menu ul li a.current{border-bottom:2px solid #98AD21;}

Código PHP:

  <div id="menu">
     include ("menu.php");
</div>

y en menú.php

Código PHP:

  $menu = array( 
    "cont 1" => "cont1.php", 
    "cont 2" => "cont2.php", 
    "cont 3" => "cont3.php",
); 
 
function menu($menu) {
    $str = "<ul>\n"; 
    $esta_pagina = basename($_SERVER['SCRIPT_NAME']);
    foreach($menu as $title=>$url) 
    { 
        if(!is_array($url)) 
        { 
            $str.= "<li><a href=\"$url\"";
            if($esta_pagina == $url) 
            {
                # Es la página actual, por lo que aplicamos la clase
                $str.= " class=\"current\"";
            }
            $str.= ">$title</a></li>\n"; 
        } 
    } 
    $str.= "</ul>\n"; 
    return $str;
} 
echo menu($menu);

espero no haber entendido mal

PD:por cierto se que lo del código php no debería ir aquí pero quería dar la ayuda completa

jplazavidaurre · #4 (**permalink**) 09/02/2009, 09:57

Hola,

Os agradezco mucho la ayuda. Con gente así da gusto aprender. En breve recupero el trabajo (estoy en paro) y la verdad es que estoy aprendiendo mucho, aunque esto de las webs nada tiene que ver conmigo.

Os quiero hacer otra pregunta. Mi código css es este que os paso, y los menús de la izda. (div= menus_izda) no sé porqué me quedan debajo del centro donde van los textos (div= centro) en vez de a la izquierda. Este css lo he sacado de un ejemplo para estudiar y no sé que hago mal. Lo he modificado un poco e igual me he cargado algo. No sé.

Tengo un encabezamiento, un espacio central, uno a la izquierda del central (estos dos bajo el encabezamiento) y un pie.

Si me pudieseis ayudar os lo agradeceré mucho.

Código:

body{

margin: 10px 0 10px 0;

padding:0;

text-align:center;

background: #003300 url(images/bg.jpg) repeat-x;

background-attachment: fixed;

letter-spacing: 1px;

}



#pagewidth{

width:800px;

background-color: #fff;

border: 4px solid #fff;

text-align:left;

margin-bottom: 10px;

margin-left:auto;

margin-right:auto;

font-family: Arial, Lucida Grande, Verdana, Helvetica, sans-serif; /* Lucida Grande para Macs, Tahoma para PCs */

font-size: 13px;

line-height: 1.6em;

color: #000;

}

#header{

position: relative;

height: 150px;

width: 100%;

background: url(images/banner.jpg) no-repeat 0% 0%;

}



.title {

margin: 0;

padding: 32px 0 0 78px;

color: #fff;

font-size: 26px;

font-weight: bold;

letter-spacing: 1px;

}



#menus_izda{

width:200px;
position: relative;
float:left;

background-color:#fff;

}

/* NAVEGACIÓN IZQUIERDA */

#menu1 {

width: 200px;

float: left;

}

#menu1title {

margin: 0;

background-image: url(images/bg_green.gif);

padding: 2px 0 0 10px;

width: 180px;

height: 18px;

color: #fff;

font-size: 14px;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 1px;

line-height: normal;

}



#menu1 ul {

list-style: none;

margin: 0;

padding: 0;

}



#menu1 li a:link, #menu1 li a:visited {

width: 164px;

\width: 190px;

w\idth: 164px;

display: block;

color: #000;

margin-left: 0px;

padding: 5px 0 0 26px;

font-weight: bold;

outline: none;

background: url(images/bg_nav.gif) repeat-y;

}



#menu1 li a:hover {

color: #000;

padding: 5px 0 0 26px;

text-decoration: none;

background: #fff url(images/bg_nav_over.gif);

background-repeat: no-repeat;

}



/* COMIENZO DE SUB-LINKS */



#menu1 ul ul li {margin: 0;padding: 0;}



#menu1 ul ul a:link,#menu1 ul ul a:visited

{

display: block;

padding: 5px 0 0 40px;

width: 150px;

color: #cc0000;

text-decoration: underline;

font-size: 11px;

}



#menu1 ul ul a:hover

{

background-image: none;

color: #eb9999;

text-decoration: none;

background: url(images/bg_nav.gif) repeat-y;

}



/* FINAL DE SUB-LINKS */



/* NAVEGACION SUPERIOR */



#menu2 {

margin: 0 0 12px 0;

float:right;

width:100%;

font-size:93%;

line-height:normal;

border-bottom: 1px solid #598C01;

}



#menu2 ul {

margin:0;

padding:10px 0 0 50px;

list-style:none;

}



#menu2 li {

display:inline;

margin:0;

padding:0;

}



#menu2 a {

float:right;

background:url("images/tab_left.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

width: 100px;

}



#menu2 a span {

float:right;

display:block;

background:url("images/tab_right.gif") no-repeat right top;

padding:5px 8px 4px 6px;

color:#fff;

text-align: center;

}



/* Commented Backslash Hack hides rule from IE5-Mac \*/

#menu2 a span {float:none;}

/* End IE5-Mac hack */

#menu2 a:hover span {

color:#FFF;

}



#menu2 a:hover {

background-position:0% -42px;

}



#menu2 a:hover span {

background-position:100% -42px;

}



#menu2 #current a {

background-position:0% -42px;

}

#menu2 #current a span {

background-position:100% -42px;

}



a {

color: #235000;

text-decoration: underline;

font-weight: bold;

outline: none;

}



a:hover {

color: #9EC630;

text-decoration: none;

}



#list

{

margin-left: 20px;

padding-left: 0;

list-style: none;

}



#list li

{

position: relative;

padding-left: 16px;

background-image: url(images/list.gif);

background-repeat: no-repeat;

background-position: 0 .5em;

}



.borders {

border: 1px solid #000000;

}



#centro{

background-color: #fff;

float: right;

display:inline;

position: relative;

width:580px;

height: 100%;

}



h1,h2,h3 {

margin: 0 20px 5px 20px;

font-size: 22px;

font-weight: normal;

color: #598C01;

letter-spacing: 3px;

line-height: normal;

}



h4 {

margin: 10px 0 0 0;

padding: 4px 0 4px 6px;

font-size: 14px;

font-weight: normal;

color: #000;

letter-spacing: 2px;

line-height: normal;

background: #DCF4C2 url(images/arrow.gif) no-repeat;

background-position: right;

}



#text{

padding: 0 20px 20px 20px;

}



#footer {

padding: 20px 0 20px 0;

background-color:#fff;

clear: both;

text-align: center;

}



.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}



.clearfix{display: inline-table;}



/* Hides from IE-mac \*/

* html .clearfix{height: 1%;}

.clearfix{display: block;}

/* End hide from IE-mac */