Retroceder   Foros del Web > Diseño de Sitios web > (X)HTML

Respuesta
 
Herramientas Desplegado
Antiguo 08-may-2008, 06:44   #1 (permalink)
n3ptun3r ha deshabilitado la reputación
 
Fecha de Ingreso: mayo-2008
Mensajes: 2
¿Cómo puedo abrir los links en una pestaña nueva?

Buenas ;)

Después de dos meses peleándome por montar www.moriremostodos.net, ahora tengo todo listo, pero me falta una cosichuela... Los enlaces de abren en la misma ventana y, como es una web llena de enlaces, eso supone que las visitas se marchan porque, click que hacen, click que les saca de la página.

Por suerte, el template que uso lleva una hola CSS (bastante clara, por cierto). Pero sin embargo no logro acertar qué tengo que cambiar/añadir/quitar para darle a <a> la propiedad necesaria para que se abran los enlaces en una ventana o pestaña (si es posible).

Como veréis, he hecho un poco el vikingo añadiendo
Código:
div p a {target-new: tab;}
a lo bestia.

Os cuelgo la hoja CSS tal como la tengo ahora y, si os es posible, ayudadme. ¡Gracias de antemano!


Código:
/*  
Theme Name: WP Spicy Web 2.0
Theme URI: http://www.wordpressthemed.com/
Description: Brought to you by <a href="http://www.wordpressthemed.com">http://www.wordpressthemed.com</a>. 
Version: 1.0
Author: WordpressThemed
Author URI:http://www.wordpressthemed.com/
*/



/* Begin Typography & Colors */
div p a {target-new: tab;}
body {
	font-size: 11px; 
	font-family: verdana, Arial, Helvetica, Sans-Serif;
	color: #969696;
	text-align: center;
	}


.widecolumn .entry p {
	font-size: 1.05em;
	}

.narrowcolumn .entry, .widecolumn .entry {
	line-height: 1.4em;
	}

.widecolumn {
	line-height: 1.6em;
	}

.narrowcolumn .postmetadata, .narrowcolumn .postmetadata1 {
	text-align: left;
	}

.alt {
	
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	margin-top:10px;
	}


small {
	font-family: verdana, Arial, Helvetica, Sans-Serif;
	font-size: 0.9em;
	line-height: 1.5em;
	}

h1, h2, h3 {
	font-family:verdana, Arial, Helvetica, Sans-Serif;
	font-weight: bold;
	}

h1 {
	font-size: 4em;
	text-align: center;
	}

#headerimg .description {
	font-size: 1.2em;
	text-align: center;
	}

h2 {
	font-size: 18px;
	}

h2.pagetitle {
	font-size: 1.4em;
	}

#sidebar h2, #sidebar2 h2{
	font-family: Arial;
	font-size: 1.2em;
	}
#sidebar ul li h2, #sidebar2 ul li h2 {
	font-family: tahoma, arial, verdana;
	background-image:url(images/icon.gif);
	font-size: 12px;
	padding-bottom: 3px;
	height:15px;
	color: #d00000;
	line-height:15px;
	text-transform:uppercase;
	text-indent:22px;
	padding-top:0px;
	background-repeat:no-repeat;
	}


h3 {
	font-size: 1.3em;
	}

h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description {
	text-decoration: none;
	color: white;
	}

h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
	color: #fff;
	}

h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2,#sidebar2 h2, #wp-calendar caption, cite {
	text-decoration: none;
	}
.entry{
	padding-top:10px;
	}
.entry p a, .entry p a:visited {
	color: #99FF00;
	
	}
.entry p a:hover {
	color: #CCFF33;
	
	}
.editpost a:link, .editpost a:visited {
	color: #969696;
	text-decoration:underline;
	}
.editpost a:hover {
	color: #969696;
	}
.commentlist li, #commentform input, #commentform textarea {
	font: 0.9em verdana, Arial, Helvetica, Sans-Serif;
	}

.commentlist li {
	font-weight: bold;
	}

.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 1.1em;
	}

.commentlist p {
	font-weight: normal;
	line-height: 1.5em;
	text-transform: none;
	}

#commentform p {
	font-family:verdana, Arial, Helvetica, Sans-Serif;
	}

.commentmetadata {
	font-weight: normal;
	color:#333;
	}


small, #sidebar ul ul li, #sidebar ul ol li,#sidebar2 ul ul li, #sidebar2 ul ol li, .nocomments, blockquote, strike {
	color: #969696;
	}

code {
	font: 1.1em verdana,Arial, Helvetica, Sans-Serif;
	}

acronym, abbr, span.caps
{
	font-size: 0.9em;
	letter-spacing: .07em;
	}

a, h2 a:hover, h3 a:hover {
	color: #ffffff;
	text-decoration: none;
	}

a:hover {
	color: #ffffff;
	text-decoration: underline;
	}

#wp-calendar #prev a, #wp-calendar #next a {
	font-size: 9pt;
	}

#wp-calendar a, #wp-calendar a:visited {
	text-decoration: none;
	color: #969696;
	text-decoration:underline;
	}

#wp-calendar caption {
	font: bold 1.3em 'Lucida Grande', verdana, Arial, Helvetica, Sans-Serif;
	text-align: center;
	}

#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
	}
/* End Typography & Colors */



/* Begin Structure */


.narrowcolumn {
	padding: 0px 10px 15px 20px;
	margin: 5px 0px 0px 0px;
	width: 400px;
	}

.widecolumn {
	float: left;
	padding: 0px 10px 15px 20px;
	margin: 5px 0px 0px 0px;
	width: 400px;
	}

.post {
	margin: 0px 0px 0px 0px;
	text-align: justify;
	}
.post hr {
	display: block;
	}
.widecolumn .post {
	margin: 0;
	}

.narrowcolumn .postmetadata, .narrowcolumn .postmetadata1 {
	padding-top: 5px;
	}

.widecolumn .postmetadata, .widecolumn .postmetadata1 {
	margin: 30px 0;
	}

.widecolumn .smallattachment {
	text-align: center;
	float: left;
	width: 128px;
	margin: 5px 5px 5px 0px;
}

.widecolumn .attachment {
	text-align: center;
	margin: 5px 0px;
}

.postmetadata {
	clear: left;
	color:#d00000;
	line-height:30px;
	
}

/* End Structure */



/*	Begin Headers */
h1 {
	padding-top: 70px;
	margin: 0;
	}

h2 {
	margin: 0px 0 0;
	}

h2.pagetitle {
	margin-top: 10px;
	text-align: center;
}

#sidebar h2 ,#sidebar2 h2{
	margin: 0px 0 0;
	padding: 0;
	}

h3 {
	padding: 0;
	margin: 22px 0 0;
	}

h3.comments {
	padding: 0;
	margin: 40px auto 20px ;
	
	}
/* End Headers */



/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;


	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

div.alignright, div.alignright2{
	float: right;
	color:#fff;
	
	}

div.alignleft, div.alignleft2{
	float: left;
	color:#fff;
	}
.alignleft a, .alignleft a:visited {
	color:#fff;
	}	
.alignright a, .alignright a:visited {
	color:#fff;
	}	
.spacer{
	float:left;
	}
/* End Images */



/* Begin Lists */

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	} 

html>body .entry li {
	margin: 7px 0 8px 10px;
	}
Continuaré pegando el código...
n3ptun3r está desconectado   Responder Citando
Antiguo 08-may-2008, 08:42   #2 (permalink)
Moderata
JavierB llegará a ser famoso muy prontoJavierB llegará a ser famoso muy prontoJavierB llegará a ser famoso muy prontoJavierB llegará a ser famoso muy prontoJavierB llegará a ser famoso muy pronto
 
Avatar de JavierB
 
Fecha de Ingreso: noviembre-2002
Ubicación: Madrid
Mensajes: 18.715
Re: ¿Cómo puedo abrir los links en una pestaña nueva?

Hola n3ptun3r. Bienvenido al foro.

Eso no tiene nada que ver con Css, sino con HTML. Tienes que poner así los enlaces:

Código:
<a href="tupagina.html" target="_blank">
Se abrirá en una nueva pestaña, o una nueva ventana, dependiendo de cómo tenga configurado el usuario su navegador.

Mensaje movido al foro de (X)HTML desde Css.

Saludos,
__________________
Lee las Políticas de los foros y escribe correctamente.
JavierB está desconectado   Responder Citando
Antiguo 08-may-2008, 09:07   #3 (permalink)
n3ptun3r ha deshabilitado la reputación
 
Fecha de Ingreso: mayo-2008
Mensajes: 2
Re: ¿Cómo puedo abrir los links en una pestaña nueva?

No, lo que quiero hacer es que la hoja de CSS de a cada enlace esa propiedad, en vez de tener que estar configurando cada enlace a mano.

Gracias.
n3ptun3r está desconectado   Responder Citando
Antiguo 08-may-2008, 10:33   #4 (permalink)
daPhyre está en el buen camino
 
Avatar de daPhyre
 
Fecha de Ingreso: marzo-2008
Ubicación: 127.0.0.1
Mensajes: 276
Re: ¿Cómo puedo abrir los links en una pestaña nueva?

No creo que sea posible; al menos no tengo conocimiento de ello. Tendrás que darle a cada link esa propiedad manualmente...

Suerte!
__________________
>> daPhyre <<

Se agradecen comentarios y aportaciones:
http://www.forosdelweb.com/f1/http-m...heaven-586889/
daPhyre está desconectado   Responder Citando
Antiguo 08-may-2008, 11:14   #5 (permalink)
pateketrueke ha deshabilitado la reputación
 
Avatar de pateketrueke
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 786
Enviar un mensaje por MSN a pateketrueke
Re: ¿Cómo puedo abrir los links en una pestaña nueva?

o usa alguna libreria de javascript como jQuery, con ello seleccionas los <a> y agregas el atributo target=""

$('a').attr('target', '_blank');

seria casi como si fueran CSS xD
pateketrueke esta en línea ahora   Responder Citando
Respuesta
Califica este Tema - ¿Cómo puedo abrir los links en una pestaña nueva?.


Herramientas
Desplegado Califica este Tema
Califica este Tema:

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La zona horaria es GMT -6. Ahora son las 17:36.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93