problemas con colores de links de menu. Menu embebido con php include

eybel · #1 (**permalink**) 26/09/2011, 18:10

Tengoun top_menu.php que es embebido en el html con <?php include() ?> y le puse #FFFFFF blanco a tods los estados a:link, a:visited, a:hover y a:active tanto en el index.html como en el top_menu.php pero me doy por vencido siguen estando azules y cuando los hago click se ponen blanco.. pero no hay manera de que haga que se queden siempre blancos... que puedo hacer?? al incluir links con php se anulan estos parametros?? gracias..

emprear · #2 (**permalink**) 26/09/2011, 18:13

Probaste de poner sencillamente

a {
color: #FFF;
}

Saludos

eybel · #3 (**permalink**) 26/09/2011, 18:17

uso dreamweaver que me genera todo el codigo. En index.php donde esta el php include, tengo en style a:link, a:hover, a:visited, a:active en #FFFFFF a:link seria como a {...} cierto?

eybel · #4 (**permalink**) 26/09/2011, 18:23

Este es mi index.php que tiene un menu embebido con php include... aca tiene ya a:link #FFFFFF y los demas tmb en blanco... pero siguen apareciendo en azul

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Chic Magazine - Home</title>
<link href="template.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>

<style type="text/css">
a:link {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
body {
	background-image: url(pics_content/bg.png);
}
</style>
</head>

eybel · #5 (**permalink**) 26/09/2011, 18:26

ya probe y no funciono con a {
color: #FFF;
}

emprear · #6 (**permalink**) 26/09/2011, 18:27

Que haya un include() para el menu, no es relevante, lo que importa es el c´digo html generado que te muestra el navegador, El que uses dreamweaver no significa que no puedas manualmente hacerle ajustes a tu gusto,

borrá todo lo que de estilos (pseudoclases incluidas, active, link, visited, ect)
y poné lo que te indiqué

Saludos

emprear · #7 (**permalink**) 26/09/2011, 18:28

Fijate

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #000;
}
a{
color: #FFF;
}
/*]]>*/
</style>
</head>
<body>
<a href="#">link</a>
</body>
</html>

eybel · #8 (**permalink**) 26/09/2011, 18:47

No funciono, me saca todo el contenido del lado Design...

eybel · #9 (**permalink**) 26/09/2011, 18:52

ok este es mi index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Chic Magazine - Home</title>
<link href="template.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:382px;
	top:235px;
	width:118px;
	height:301px;
	z-index:1;
}
#apDiv2 {
	position:absolute;
	left:25px;
	top:273px;
	width:480px;
	height:350px;
	z-index:1;
}
#apDiv3 {
	position:absolute;
	left:382px;
	top:273px;
	width:128px;
	height:421px;
	z-index:2;
}
#apDiv4 {
	position:absolute;
	left:24px;
	top:589px;
	width:351px;
	height:104px;
	z-index:3;
}
</style>
<script src="file:///C|/Webserver/www/Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">

a:link {
	color: #FFF;
	text-decoration: none;
}
a:hover {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
body {
	background-image: url(pics_content/bg.png);
}
</style>
</head>

<body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<div class="container">
  <div class="header">
      
    <div class="logo"><img src="logo.png" width="200" height="140" alt="The Chic Magazine" /></div>
    <div class="mag_counter"><?php include('mag_counter.php'); ?></div> 
  <div class="login">
    <form action="login_script.php" method="post" enctype="multipart/form-data" name="form1" id="form1">
      <input name="email" type="text" id="email" />
      &nbsp;&nbsp;
<input name="password" type="password" id="password" />
&nbsp;<span class="sign_up">&nbsp;<span class="sign_up"><span class="sign_up"><a href="login_script.php" class="sign_up"><span class="login_signup">Log In</span></a></span></span></span> |<span class="login_signup">&nbsp;<a href="register.php" class="sign_up"><span class="login_signup">Sign Up</span></a></span>
    </form>
</div>
  <div class="mainbanner"> 
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="755" height="105" id="FlashID2" title="top_banner">
      <param name="movie" value="top_banner.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
      <param name="expressinstall" value="file:///C|/Webserver/www/Scripts/expressInstall.swf" />
      <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="top_banner.swf" width="755" height="105">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="file:///C|/Webserver/www/Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
  </div>
  <div class="menu"><?php include("topmenu.php");?>
  </div>
  </div>

..........

    <div class="footer"><?php include('copyright.php'); ?></div>
<script type="text/javascript">
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID");
</script>
</div></body>
</html>

emprear · #10 (**permalink**) 26/09/2011, 18:52

Probaste mi ejemplo?, porque si funciona.Si en tu página no, entonces el problema no se limita a la etiqueta <a>, hay que ver todo tu código generado (no el php)

SAludos

eybel · #11 (**permalink**) 26/09/2011, 18:53

Este es mi topmenu.php que es embebido en index.php

Código HTML:

<style type="text/css">
.top_menu {
	color: #FFF;
}
a:link {
	color: #FFF;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: #FFF;
}
a:active {
	text-decoration: none;
	color: #FFF;
}
body,td,th {
	color: #FFF;
}
</style>
<a href="index.php" class="top_menu">home</a> | <a href="news.php" class="top_menu">news</a> |<a href="photos.php" class="top_menu"> photos</a> | <a href="videos.php" class="top_menu">videos</a> | <a href="radio.php" class="top_menu">radio</a> | <a href="contest.php" class="top_menu">contest</a> | <a href="events.php" class="top_menu">events</a> | <a href="vendors.php" class="top_menu">vendors</a> | <a href="contact.php" class="top_menu">contact</a>

eybel · #12 (**permalink**) 26/09/2011, 18:55

Si lo probe y no me funciona la verdad

eybel · #13 (**permalink**) 26/09/2011, 18:57

Por ultimo y no se si es importante aclarar, pero este menu esta embebido en un DIV que lo llame "menu" y en mi template.css este es el codigo que controla ese DIV "menu"

Código HTML:

.menu {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #B82531;
	color: #FFF;
	clear: left;
	float: left;
	width: 959px;
	height: 26px;
	margin-bottom: 1px;
	text-decoration: none;
}

No entiendo que pasa, se que Dreamweaver genera archivos automaticamente, en mi caso me genero una carpeta Scripts y una Spry Assets pero es para la validacion de los campos de formularios...

Gracias por la ayuda hasta ahora igualmente

emprear · #14 (**permalink**) 26/09/2011, 19:06

Estas haciendo una gran mezcla, los estilos definilos en el head, no en el include, ahi solo pone los links, vi un par de rutas con file://.... pone las rutas de tu web.
saca de la etiqueta body todos los atributos de links, te paso tu código algo más limpio, le puse un color de fondo al body para que contraste. Por ultimo cuando pases código en los posts, usa el "Highlight" del editor, asi es más facil de analizar.
guarda este código y ejecutalo, mucha más indicación no es necesaria

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The Chic Magazine - Home</title>
<link href="template.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
#apDiv1 {
 position:absolute;
 left:382px;
 top:235px;
 width:118px;
 height:301px;
 z-index:1;
}
#apDiv2 {
 position:absolute;
 left:25px;
 top:273px;
 width:480px;
 height:350px;
 z-index:1;
}
#apDiv3 {
 position:absolute;
 left:382px;
 top:273px;
 width:128px;
 height:421px;
 z-index:2;
}
#apDiv4 {
 position:absolute;
 left:24px;
 top:589px;
 width:351px;
 height:104px;
 z-index:3;
}
body {
 background-color: #000;
}
 
body,td,th {
 color: #FFF;
}
 
a {
color: #FFF;
}
/*]]>*/
</style>
 
<script src="file:///C|/Webserver/www/Scripts/swfobject_modified.js" type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"><img src="logo.png" width="200" height="140" alt="The Chic Magazine" /></div>
 
<div class="mag_counter"><?php include('mag_counter.php'); ?></div>
<div class="login">
<form action="login_script.php" method="post" enctype="multipart/form-data" name="form1" id=
"form1"><input name="email" type="text" id="email" /> &nbsp;&nbsp; <input name="password" type=
"password" id="password" /> &nbsp;<span class="sign_up">&nbsp;<span class="sign_up"><span class=
"sign_up"><a href="login_script.php" class="sign_up"><span class="login_signup">Log
In</span></a></span></span></span> |<span class="login_signup">&nbsp;<a href="register.php" class=
"sign_up"><span class="login_signup">Sign Up</span></a></span></form>
</div>
<div class="mainbanner"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="755"
height="105" id="FlashID2" title="top_banner"><param name="movie" value="top_banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="file:///C|/Webserver/www/Scripts/expressInstall.swf" />
 
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="top_banner.swf" width="755" height="105">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="file:///C|/Webserver/www/Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src=
"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
"Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>--></object> <!--<![endif]--></object></div>
<div class="menu"><a href="index.php" class="top_menu">home</a> | <a href="news.php" class=
"top_menu">news</a> | <a href="photos.php" class="top_menu">photos</a> | <a href="videos.php"
class="top_menu">videos</a> | <a href="radio.php" class="top_menu">radio</a> | <a href=
"contest.php" class="top_menu">contest</a> | <a href="events.php" class="top_menu">events</a> |
 
<a href="vendors.php" class="top_menu">vendors</a> | <a href="contact.php" class=
"top_menu">contact</a></div>
</div>
..........
<div class="footer"><?php include('copyright.php'); ?></div>
<script type="text/javascript">
//<![CDATA[
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID");
//]]>
</script></div>
</body>
</html>

Y todo esto sin saber que hay en el "template.css"

eybel · #15 (**permalink**) 26/09/2011, 19:20

Por lo que veo estas poniendo en mi index.php el menu, y yo solo tenia en index.php el "php include" y los links en otro lado... Eso lo hice mas que nada porque si el dia de manana necesito cambiar algun link de menu, voy al topmenu.php lo cambio y se cambia en todas mis paginas, por lo que veo en tu ejemplo perderia esa facilidad y tendria que cambiar uno por uno...

Yo tenia

Cita:

y en topmenu.php tenia mis links... Igualmente probe tu script y funciona, gracias por eso!! pero tenes alguna idea de como podria mantenerlo asi:

Cita:

eybel · #16 (**permalink**) 26/09/2011, 19:25

Por ahi con Firefoxbug ayuda... el web es http://thechicmagazine.com/

emprear · #17 (**permalink**) 26/09/2011, 19:26

NO hombre, eso lo hice porque es la unica forma de probarlo

vos tenes que hacer esto
tu index.php

Código PHP:

Ver original<html>
<head>
<style>
/* Aca van los estilos */
body {
background-color: #000;
}
a{
color: #FFF;
}
</style>
</head>
<body>
<p>Contenido</p>
 
y donde quieras el menu
<?php
include('menu.html');
?>
 
 
</body>
</html>

y tu menu.html

Código HTML:

Ver original<a href="index.php" class="top_menu">home</a> | 
<a href="news.php" class="top_menu">news</a> |
<a href="photos.php" class="top_menu"> photos</a> | 
<a href="videos.php" class="top_menu">videos</a> | 
<a href="radio.php" class="top_menu">radio</a> | 
<a href="contest.php" class="top_menu">contest</a> | 
<a href="events.php" class="top_menu">events</a> | 
<a href="vendors.php" class="top_menu">vendors</a> | 
<a href="contact.php" class="top_menu">contact</a>

Se entiende ????

PD: dejá el firebug donde esta.... no te compliques

eybel · #18 (**permalink**) 26/09/2011, 19:34

Lo solucione! te agradezco mucho el tema era que le di una clase .menu entonces el codigo quedaria asi:

Cita:

.menu a:link {color:#fff;}

eybel · #19 (**permalink**) 26/09/2011, 19:38

Lo voy a analizar a tu propuesta de vuelta, creo que ya lo habia probado y no me funciono pero lo quiero volver a hacer y sacarme todas las dudas.. Pero es asi como tengo el codigo yo, hice algunos cambios a lo ultimo que lo ensuciaron pero como vos me lo mandaste asi tenia yo el codigo originalmente, el tema es que al darle una clase, no me aplicaba (por alguna razon el codigo "a {color: #FFF;}" no me funcionaba. Creo que al darle una clase ya la cosa cambiaba y tenia que ponerle como la ruta a los links .menu a:link {color:#FFF;} y ahi si me funciono.. Tengo dreamweaver CS5 y la verdad que no se si sera cosa del programa o que pero voy a seguir investigando, a este arreglo lo tuve que hacer manualmente y no encontre nada en DW que me permita hacerlo asi... GRACIAS!

emprear · #20 (**permalink**) 26/09/2011, 19:38

Exactamente, como era desde un principio, es cierto que vos tenes el menu dentro de
<div class="menu"></div>
pero es lo mismo si no pones una clase, al igual que tenes class="top_menu" en los <a>, podes usasr
a.top_menu {
color: #FFF;
}

Son todas variantes posibles y correctas

Saludos

eybel · #21 (**permalink**) 26/09/2011, 19:42

Claro! ahora voy a eliminar la class="top_menu" y solo dejar la del DIV controlarlo desde ahi gracias capo un abrazo