Foros del Web » Diseño web » HTML »

¿Cómo puedo abrir los links en una pestaña nueva?

Estas en el tema de ¿Cómo puedo abrir los links en una pestaña nueva? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/05/2008, 06:44
 
Fecha de Ingreso: mayo-2008
Mensajes: 2
Antigüedad: 6 años, 5 meses
Puntos: 0
¿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...
  #2 (permalink)  
Antiguo 08/05/2008, 08:42
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 8 meses
Puntos: 767
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,
  #3 (permalink)  
Antiguo 08/05/2008, 09:07
 
Fecha de Ingreso: mayo-2008
Mensajes: 2
Antigüedad: 6 años, 5 meses
Puntos: 0
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.
  #4 (permalink)  
Antiguo 08/05/2008, 10:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.405
Antigüedad: 6 años, 7 meses
Puntos: 142
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!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 08/05/2008, 11:14
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 22.299
Antigüedad: 6 años, 6 meses
Puntos: 2107
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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:31.
SEO by vBSEO 3.3.2