Foros del Web » Creando para Internet » CSS »

2 estilos de links en una misma linea

Estas en el tema de 2 estilos de links en una misma linea en el foro de CSS en Foros del Web. 2 Links distintos en una misma linea... ¿Me ayudan a ver como lo hago? Como se ve ahora los links en cuestion es así... Yo ...
  #1 (permalink)  
Antiguo 14/10/2008, 09:54
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
2 estilos de links en una misma linea

2 Links distintos en una misma linea...

¿Me ayudan a ver como lo hago?

Como se ve ahora los links en cuestion es así...



Yo quisiera que se vean así

Zendoku Sin Comentarios

Si bien se me ocurre que la solucion sería crearle 2 nuevos divs, no estoy seguro...

Les dejo los códigos de todo lo que entra en juego para mostrar eso en pantalla...

Esto en el sidebar que lo presenta en pantalla
Código PHP:
<div id="tab1" class="tabcontent">
<ul>
<?php query_posts('showposts=5&orderby=date'); ?>
<?php 
while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> &bull; <?php comments_popup_link('Sin Comentarios''1 Comentario''% Comentarios'); ?></li>
<?php endwhile; ?>
</ul>
</div>
Y en style.css lo relacionado con ese div estaría aca
Código PHP:
.tabcontent {
    
displaynone;
    
background#FFF url(images/tabtop.gif) no-repeat top;
    
border1px solid #eee;
    
border-top0;
    
padding-top15px;
    
padding-left10px;
    
padding-right10px;
    
padding-bottom5px;
    
overflowhidden;
    
font-size11px;
}

.
tabcontent a, .tabcontent a strong {
    
color#2c78b9;
    
line-height1.4em;
    
font-size14px;
}

.
tabcontent a:hover, .tabcontent a:hover strong {
    
color#5ea2e7;
}

.
tabcontent ul li {
    
displayblock;
    
backgroundurl(images/bullet.gifno-repeat;
    
background-positionleft 5px;
    
border-bottom1px dotted #ddd;
    
padding-bottom5px;
    
margin-bottom5px;
    
padding-left20px;
    
color#999;
    
line-height1.4em;
    
font-size11px
}

.
tabcontent ul li a {
    
color#2c78b9;
    
line-height1.4em;
}

.
tabcontent ul li a:hover {
    
color#5ea2e7;
}

.
tabcontent ul li span {
    
displayblock;
    
color#999;
}
/***************** CSS For TAB Content *******************/
@media print {
    .
tabcontent {
    
displayblock !important;
    }

  #2 (permalink)  
Antiguo 14/10/2008, 11:31
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: 2 estilos de links en una misma linea

mira:
puede ser una solución, en vez de poner en el css .tabcontent a por que no le creas mejor una clase a cada vinculo, es decir:

Código:
.vinculo1 a{ color:#FF0000; text-decoration:none;}
.vinculo2 a{ color:#00FF00; text-decoration:none;}
y en tu codigo html pones cada vinculo entre span:

Código PHP:
<div id="tab1" class="tabcontent">
<ul>
<?php query_posts('showposts=5&orderby=date'); ?>
<?php 
while (have_posts()) : the_post(); ?>
<li>
     <span class="vinculo1>
              <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
              </a>
     </span
      &bull; 
     <span class="vinculo2">
             <?php comments_popup_link('Sin Comentarios''1 Comentario''% Comentarios'); ?></li>
<?php endwhile; ?>
    </span
</ul>
</div>
espero te sirva..
  #3 (permalink)  
Antiguo 14/10/2008, 13:31
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
De acuerdo Respuesta: 2 estilos de links en una misma linea

Gracias...

Me sirvió muchísimo...

Les muestro como quedó la solución... (Bueno, solución no, saber como se hacen las cosas, cosa que yo no sabía porque todo esto lo toco de oído y meto mano de caradura que soy simplemente)



El CSS lo dejé así
Código PHP:
.tabcontent {
    
displaynone;
    
background#FFF url(images/tabtop.gif) no-repeat top;
    
border1px solid #eee;
    
border-top0;
    
padding-top15px;
    
padding-left10px;
    
padding-right10px;
    
padding-bottom5px;
    
overflowhidden;
    
font-size11px;
}

.
tabcontent ul li {
    
displayblock;
    
backgroundurl(images/bullet.gifno-repeat;
    
background-positionleft 5px;
    
border-bottom1px dotted #ddd;
    
padding-bottom5px;
    
margin-bottom5px;
    
padding-left20px;
    
color#999;
    
line-height1.4em;
    
font-size11px;
}
.
tabcontent1 a, .tabcontent1 a strong {
    
color#2c78b9;
    
line-height1.4em;
    
font-size14px;
}

.
tabcontent1 a:hover, .tabcontent1 a:hover strong {
    
color#5ea2e7;
}

.
tabcontent1 ul li a {
    
color#2c78b9;
    
line-height1.4em;
}

.
tabcontent1 ul li a:hover {
    
color#5ea2e7;
}

.
tabcontent1 ul li span {
    
displayblock;
    
color#999;
}



.
tabcontent2 a, .tabcontent2 a strong {
    
color#636363;
    
line-height1.4em;
    
font-size10px;
}

.
tabcontent2 a:hover, .tabcontent2 a:hover strong {
    
color#999;
}

.
tabcontent2 ul li a {
    
color#636363;
    
line-height1.4em;
}

.
tabcontent2 ul li a:hover {
    
color#999;
}

.
tabcontent2 ul li span {
    
displayblock;
    
color#999;

y el sidebar así

Código PHP:
<div id="tab1" class="tabcontent">
<ul>
<?php query_posts('showposts=5&orderby=date'); ?>
<?php 
while (have_posts()) : the_post(); ?>
<li><span class="tabcontent1"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></span> &bull; <span class="tabcontent2"><?php comments_popup_link('Sin Comentarios''1 Comentario''% Comentarios'); ?></span></li>
<?php endwhile; ?>
</ul>
</div>
Gracias nuevamente por la ayuda...
  #4 (permalink)  
Antiguo 14/10/2008, 22:14
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: 2 estilos de links en una misma linea

Hola American2010, cual es la página para la cual están implementando todo esto ?

de curioso nomas, porque parece linda en formato y colores
  #5 (permalink)  
Antiguo 15/10/2008, 07:53
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: 2 estilos de links en una misma linea

Cita:
Iniciado por Jamati Ver Mensaje
Hola American2010, cual es la página para la cual están implementando todo esto ?

de curioso nomas, porque parece linda en formato y colores
Bueno te comento, es un sitio que estoy armando donde hago mis análisis de juegos PSP.
No me parece usar el Foro para dar promoción (bueno, si me parece) pero como aún está en desarrollo y estoy modificando mucho el tema utilizado, prefiero dejarte el link al mismo para que lo investigues...

Es un tema de Wordpress llamado Blue-Dream (entre algunos cambios, le modifiqué el alto de la barra superior, también hice 100 pix más ancho el espacio para los posts y 100px menos al sidebar, modifique la zona de los ads, etc. Se que son cosas que suenan fáciles, pero para alguien sin experiencia como yo es todo una aventura)

Este link para descargarlo
http://wordpress.org/extend/themes/blue-dream#post-411

La preview aca
http://wp-themes.com/blue-dream/

  #6 (permalink)  
Antiguo 15/10/2008, 19:26
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: 2 estilos de links en una misma linea

Están muy lindos y suaves los colores que implementó.

La verdad que para adaptarlo da gusto, ya que lo que me había parecido muy importante era la combinación de colores.

Muy lindo, avisa cuando la tengas terminada.
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 09:31.