Cómo mostrar paradas de autobús con un listado en CSS

  • Autor Autor ramonjosegn
  • Fecha de inicio Fecha de inicio
ramonjosegn

ramonjosegn

Sigma
Verificación en dos pasos activada
¡Usuario popular!
Hola chicos/as

Buscando ideas para uno de mis blogs me topé con esta página donde muestran un listado de paraderos a base de puro CSS (una línea roja con un formato de Divs y viñetas)

Me parece un trabajo excelente y ligero y quisiera saber cómo replicarlo en mi sitio, ya que parece un CSS bastante complejo la verdad (ojalá hubiera alguna herramientas online para hacer algo así).

¿Me podéis ayudar a conseguir algo parecido

El sitio web es

http://www.infotuc.es/index.php/es/horarios-y-recorridos/linea/4
 
Hola,
no le veo la complejidad, pero talvez no entiendo bien lo que expones.

Doy a entender que quieres mostrar los estilos del borde rojo de las paradas:

Simplemente esta añadiendo un border-left a los li, sin margin entre ellos y un icono en cada uno que eso lo puedes realizar simplemente con el content: ""

repito, no se si estoy opinando realmente sobre lo que buscas.

saludos.
 
Sí, eso es, pero me gustaría saber cuál es el código, gracias [MENTION=125431]asesor[/MENTION]
 
Espero te sirva, cualquier duda a las ordenes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codigos</title>
<style media="screen">
ul {
width: 250px;
height: 500px;
background-color: #fff;
list-style: none;
}
ul li{
border-left: 6px solid #E1091F;
padding: 2px 0px 2px 5px;
}
.icon{
width: 12px;
height: 7px;
background-color: #E1091F;
float: left;
margin-left: -5px;
margin-top: 3px;
}
ul li a{
margin-left: 10px;
text-decoration: none;
color: #666;
}
</style>
</head>
<body>

<ul>
<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>
</ul>

</body>
</html>
 
condor285 dijo:
Espero te sirva, cualquier duda a las ordenes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codigos</title>
<style media="screen">
ul {
width: 250px;
height: 500px;
background-color: #fff;
list-style: none;
}
ul li{
border-left: 6px solid #E1091F;
padding: 2px 0px 2px 5px;
}
.icon{
width: 12px;
height: 7px;
background-color: #E1091F;
float: left;
margin-left: -5px;
margin-top: 3px;
}
ul li a{
margin-left: 10px;
text-decoration: none;
color: #666;
}
</style>
</head>
<body>

<ul>
<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>

<li>
<div class="icon"></div>
<a href="#">Barañáin, Avda. el Valle (Iglesia)</a>
</li>
</ul>

</body>
</html>
Hacer clic para expandir...

vaya tela

ramonjosegn dijo:
Sí, eso es, pero me gustaría saber cuál es el código, gracias [MENTION=125431]asesor[/MENTION]
Hacer clic para expandir...

solucionastes? he estado con trabajo pero si no lo tienes te lo preparo con mucho gusto.

saludos.
 
Gracias [MENTION=146987]condor285[/MENTION]

No he me he puesto a ello aún [MENTION=125431]asesor[/MENTION] aunque me pregunto si no sería más fácil una simple imagen cambiando los boliches de la lista??
 
ramonjosegn dijo:
No he me he puesto a ello aún [MENTION=125431]asesor[/MENTION] aunque me pregunto si no sería más fácil una simple imagen cambiando los boliches de la lista??
Hacer clic para expandir...

el boliche no te va a dejar que le des la separacion que gustes con la linea de texto.

Esto es tan simple como decirle al:

HTML: 
li {
margin: 0; /*si vas a darle algun espacion con el lado izquierdo cambias a margin: 0 0 0 1em; ejemplo*/
border-left: 6px solid #codigo_color;
}

con esto tendras todos los "li" pegados y la linea lateral continua, ya es cuestion de jugar con el padding top y bottom para el espacio que desees.

Imagino que esto ya lo sabes y a la vez facil de entender, recuerda que si el "li" esta dentro de un especifico "ul" indicarselo para que no te realice cambios en otrso que no deseas.

¿hasta ahi todo bien?
 
Estoy en el notebook quedándome ciego (y sordo porque la música se corta), cuando tenga acceso al pc reviso, pero mi idea es complementarlo en Wordpress [MENTION=125431]asesor[/MENTION]
 
eso es css, buscas la linea correspondiente y listo.

Con la propiedad content haces el resto

Insertar CODE, HTML o PHP: 
li a:before {
         content: "\u203e";
         display: inline-block;
         color:#color_codigo;
         width: .5em; /*medidas orientativas*/
         heigth: .5em; /*medidas orientativas*/
         margin-rigth: 1em;/*distancia con el texto "a"*/
         vertical-alling: center;
}

deberia salir lo que necesitas, si tienes algun problema te ayudo, es bastante sencillo y rapido de hacer.
 
lo que te ha pasado asesor es practicamente la parte del css de lo que te pase. Si quieres ver como queda el mio, crea un archivo index.html copia y pega lo que te pase y mira en el navegador.
 
Hola [MENTION=1576]ramonjosegn[/MENTION], esto tal vez es lago distinto a lo que buscas, pero hace unos días en el repertorio de wordpress me encontré con éste plugin: https://wordpress.org/plugins/transport-and-business-locator/ que lo que hace a grandes rasgos descriptivos es trazar las rutas de los transportes.

screenshot-4.png

screenshot-5.png
 
Gracias por el dato [MENTION=114489]Menorah[/MENTION] es raro que no lo hubiera visto antes, aunque se ve bastante limitado, nosotros trabajamos con Ikimap, una empresa de mi tierra (Galicia) y ya nos han colaborado con algún script. Igualmente le ecaré un vistazo, quizás me sirva para ciertas ideas que tengo en mente, gracias.
 
Fijate que si examinas con FIREBUG en mozilla o haces F12 en Chrome o IE, tenes una herramienta para examinar el DOM de la página.

Si observas como está armado, vas a ver que es la unión de 2 cosas, un LI con una linea verical izquierda y dentro de cada li, tenes lo que sería la linea que sale a la derecha. Una linea horizontal roja

La unión de ambas cosas da como resultado el efecto que ves.

Aqui el fuente de la página que pusiste de ejemplo. Es muy facil de hacer

<li><div class="iconlistaparadatrayectos">&nbsp;</div><div class="namelistaparadatrayectos" id="namelistaparadatrayectos"><a href="javascript:cambiarPopUpMini(1,114);">Barañáin, Avda. Central (frente nº 34)<span class="correspondencia"></span></a></div></li>
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

ramonjosegn
¿Cómo mostrar un listado de paradas de bus de forma lógica y agradable?
Respuestas
5
Visitas
228
ramonjosegn
ramonjosegn
Atrás
Arriba