1

Tengo dos archivos principales, el contenido lo copié de un sitio anterior (por que no tengo mucho conocimiento en PHP).

Tengo un php principal llamado "localizatusucursal.php" que es la página front-end de una búsqueda de una BD.

Eliges un estado, después una ciudad y se despliega el listado de sucursales. Además, aparece: "Ver Mapa" y al dar clic, aparece el mapa correspondiente en Google Maps, dentro de un div.

Hasta ahí, todo bien, el problema es que dicha lista me aparece de la siguiente manera:

introducir la descripción de la imagen aquí

Lo cual no es una buena opción, ya que el usuario no puede distinguir entre cada sucursal, porque todo está amontonado, lo ideal es que se viera así:

introducir la descripción de la imagen aquí

Pero a pesar de agregar los estilos, no logro hacer que cambien.

El PHP tiene parte del código como en comentarios:

 <div id="sucursales" class="sucursales col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding: 2%">
    <br /><br />
              Seleccione un estado y una ciudad.
             <ul >

           <li>          
              <span><b>1. Av. México </b></span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
               <br /></li>
              <li>          
              <span>1. Av. México </span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b>Ver Mapa</b>
              <br /></li>
           <li>          
              <span>1. Av. México </span><br />
               Prolongación Av. México, Plaza las Lomas Local No. 8<br />
               Col. Plaza Villarhermosa, C.P.76179 Villahermosa Tabasco<br />
               01 (993) 1-39-35-54                      <b><a href="#">Ver Mapa</a></b>
              <br /></li>




            </ul>


     <script type="text/javascript" src="js/libs/simplyscroll/re_.js"></script>
    <script type="text/javascript" src="js/libs/simplyscroll/common.js"></script>
    <script type="text/javascript" src="js/libs/simplyscroll/jquery.simplyscroll.js"></script>
    <link rel="stylesheet" href="js/libs/simplyscroll/jquery.simplyscroll.css" media="all" type="text/css">


     -->

Le he agregado estilos dentro del mismo php pero no aplican para ese div :/ Lo que debería cambiarse (Las direcciones de las sucursales) están en el archivo que hace funcionar la consulta de los estados y las sucursales llamado "p_citys.php", pero no sé si puedo agregar estilos para que me quede como lo que yo deseo, porque ya lo intenté y me muestra errores de sintaxis.

 $res .= "<ul id='sucs'>";
      foreach( $regs as $r){ 
         $cont++;
         $res .= "<li> 
                    <span> <b> ".$cont.". $r->denominacion ($r->clave) <b></span><br /> 
                    $r->vialidad #$r->no_ext, Col. $r->colonia, C.P. $r->cp, 
                    $r->localidad $r->estado.<br />
                    $r->tel  &nbsp; <b><a href=\"javascript:NajaxJq('p_citys','loadMap&lt=$r->latitud&lg=$r->longitud','showMap');\"  >Ver Mapa</a></b>
                    <br /></li>"; 
       }
3
  • Si estas son tus reglas de estilo: <link rel="stylesheet" href="js/libs/simplyscroll/jquery.simplyscroll.css" media="all" type="text/css"> las mismas deben estar antes del HTML, no después. Como lo tienes ahora las reglas de estilo se cargan después del HTML y por lo tanto no se aplican a lo que ya ha sido cargado. La C de css significa cascada, pues el agua cae a lo que está por debajo de la cascada, no a lo que está por encima de ella. También, si los archivos .js que aparecen debajo son relativos a los estilos, deben ir encima, antes del contenido HTML.
    – A. Cedano
    Commented el 1 ago. 2018 a las 22:03
  • Esas estaban solamente como comentario, de hecho lo que hice fue implementar el estilo en la parte del head porque en la hoja de estilos externa (que se encuentra en el head) no me leía los estilos. Pero muchas gracias, ya me funcionó! Commented el 1 ago. 2018 a las 22:06
  • Correcto, por lo general las reglas de estilo van en el head precisamente para que se carguen antes que el contenido del <body>, pues de lo contrario no se aplicarían.
    – A. Cedano
    Commented el 1 ago. 2018 a las 22:07

2 respuestas 2

0

puedes darle el siguiente estilo con css para resolver tu problema

 #sucursales{

     text-align:left;

    }
   #sucursales li{

     border-bottom:solid 1px green;

    }

o simplemente agrega directamente los estilos en tu html

 <div id="sucursales" class="sucursales col-lg-6 col-md-6 col-sm-12 col-xs-12" style="padding: 2%  text-align:left;">
    <li style="border-bottom: solid 1px green; padding: 5px text-align:left;">

esto ara que el texto se coloque siempre a la isquierda y las etiquetas li tengan el borde de abajo verde espero ayudarte

1
  • ¡Ya había intentado el CSS pero no me funcionaba, lo puse en el head y me funcionó! ¡Muchas gracias! Commented el 1 ago. 2018 a las 21:10
0

lo puedes solucionar agregándole estilos directamente en el código php de esta forma

$res .= "<ul id='sucs'>";
  foreach( $regs as $r){ 
     $cont++;
     $res .= "<li style="border-bottom: solid 1px #000000; padding: 5px"> 
                <span> <b> ".$cont.". $r->denominacion ($r->clave) <b></span><br /> 
                $r->vialidad #$r->no_ext, Col. $r->colonia, C.P. $r->cp, 
                $r->localidad $r->estado.<br />
                $r->tel  &nbsp; <b><a href=\"javascript:NajaxJq('p_citys','loadMap&lt=$r->latitud&lg=$r->longitud','showMap');\"  >Ver Mapa</a></b>
                <br /></li>"; 
   }
3
  • Esta es la opción que intenté, pero después de agregar el style, deja de reconocerme los valores del resultado y ya no lee el php :( Commented el 1 ago. 2018 a las 21:07
  • Agregar estilos directamente en el HTML es una mala práctica. Se recomienda hacerlo mediante clases y aplicar el estilo aparte, en un archivo CSS, de ese modo el HTML y las reglas de estilo son independientes. Si quieres cambiar algo, cambias la clase en el CSS. Imaginemos que tienes miles de páginas y luego quieres cambiar algo, tendrás que modificar el HTML de esas mil páginas. Si lo tienes separado, sólo cambias lo que tengas que cambiar en el CSS y listo.
    – A. Cedano
    Commented el 1 ago. 2018 a las 22:00
  • prueba con comillas simples style='border-bottom: solid 1px #000000; padding: 5px' si funciona de esa forma agrega esto a una pagina de estilos css y usa una class para que lo hagas de la forma correcta como dice @A.Cedano Commented el 2 ago. 2018 a las 14:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.