Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Bases de datos y CSS

Estas en el tema de Bases de datos y CSS en el foro de CSS en Foros del Web. Muy buenas, me presento, son sajunt4, recientemente registrado. Tengo entre manos mi primera página web (De carácter personal) seria, por lo que quiero añadir por ...
  #1 (permalink)  
Antiguo 01/07/2013, 04:01
 
Fecha de Ingreso: julio-2013
Mensajes: 5
Antigüedad: 11 años, 5 meses
Puntos: 0
Pregunta Bases de datos y CSS

Muy buenas, me presento, son sajunt4, recientemente registrado.
Tengo entre manos mi primera página web (De carácter personal) seria, por lo que quiero añadir por primera vez alguna base de datos, con lo que me surgen varias dudas:

Antes de nada, ¿Que base de datos me recomendáis? Yo pensaba en SQL ya que es de la que mas he oído hablar, pero acepto recomendaciones.

Después se me plantea la duda de como modificar un archivo CSS mediante la base de datos, me explico: Mi pagina web dispone de un tablón gráfico en el borde izquierdo, mas que un tablón, una barra vertical con mini-iconos sobre los cuales al pasar el ratón se aumentan para hacer legible su información. Todo esto esta definido en una base de datos y animados con "transition:", pero en ese código específico la posición absoluta del mini-icono, con lo que al añadir varios estos se sobreponen y únicamente se ve uno de ellos. Mi idea sería que el valor de la posición y (Puesto que la x quiero que sea constante), se multiplicara por la id del elemento de la base de datos, así el primero seria val*1, el segundo val*2, etc, siendo val la posición Y. También se me ocurrió hacerlo mediante algún bucle for en el CSS, pero ¿Es esto posible?

Y mi última duda, puesto que el "tablón" es gráfico, supongo que podré guardar la dirección de la imagen de cada elemento de la base de datos en una variable de la misma, es posible con esto cambiar el background del elemento con la dirección de esa imagen? ¿Como?

Perdonad por estas preguntas tan novatas, supongo, pero recientemente empiezo a hacer webs seriamente y me queda mucho por aprender.
Si estoy en el foro equivocado, por favor que algún administrador lo traslade, lo siento.

Y ante todo, muchas gracias de antemano a todos!
Saludos, Sajunt4.
  #2 (permalink)  
Antiguo 01/07/2013, 04:12
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Bases de datos y CSS

Bienvenido al foro sajunt4.

Normalmente cuando se necesita aplicar un valor de la base de datos al CSS, lo que se hace es inyectarlo en el HTML, de tal modo que quede algo como:

Código HTML:
Ver original
  1. <p style="color: red"></p>

En CSS no pueden hacerse bucles. Tendrías que usar algún framework, como Sass, less o Stylus.

Pero bueno, creo que te estás complicando mucho por haber cometido un error muy de novato, el cual es hacer uso de posiciones absolutas cuando no hacen falta. A priori son muy fáciles y cómodos de usar ese tipo de posicionamientos, pero no lo verás en muchas webs profesionales porque crean muchos problemas que se evitarían usando un método más robusto de maquetación.
Ten una cosa en cuenta de forma general, que es algo que casi siempre se cumple; si necesitas usar posiciones absolutas en tu maquetación general —en la estructura— es que algo estás haciendo mal.

Entonces, antes de meterte en todo eso que comentas de usar bases de datos para hacer lo que quieres, yo te recomendaría publicar tu código HTML y CSS para ver si existe una solución más limpia a lo que quieres hacer.

Y ya de paso, en librosweb.es tienes manuales en castellano, bastante buenos, sobre HTML y CSS.

Tal vez el tema hubiese encajado en el foro de CSS. A ver si te lo mueven para allá.

Última edición por pzin; 01/07/2013 a las 04:18
  #3 (permalink)  
Antiguo 01/07/2013, 04:33
 
Fecha de Ingreso: julio-2013
Mensajes: 5
Antigüedad: 11 años, 5 meses
Puntos: 0
Respuesta: Bases de datos y CSS

Cita:
Iniciado por pzin Ver Mensaje
Bienvenido al foro sajunt4.

Normalmente cuando se necesita aplicar un valor de la base de datos al CSS, lo que se hace es inyectarlo en el HTML, de tal modo que quede algo como:

Código HTML:
Ver original
  1. <p style="color: red"></p>

En CSS no pueden hacerse bucles. Tendrías que usar algún framework, como Sass, less o Stylus.

Pero bueno, creo que te estás complicando mucho por haber cometido un error muy de novato, el cual es hacer uso de posiciones absolutas cuando no hacen falta. A priori son muy fáciles y cómodos de usar ese tipo de posicionamientos, pero no lo verás en muchas webs profesionales porque crean muchos problemas que se evitarían usando un método más robusto de maquetación.
Ten una cosa en cuenta de forma general, que es algo que casi siempre se cumple; si necesitas usar posiciones absolutas en tu maquetación general —en la estructura— es que algo estás haciendo mal.

Entonces, antes de meterte en todo eso que comentas de usar bases de datos para hacer lo que quieres, yo te recomendaría publicar tu código HTML y CSS para ver si existe una solución más limpia a lo que quieres hacer.

Y ya de paso, en [URL="http://librosweb.es"]librosweb.es[/URL] tienes manuales en castellano, bastante buenos, sobre HTML y CSS.

Tal vez el tema hubiese encajado en el [URL="http://forosdelweb.com/f53"]foro de CSS[/URL]. A ver si te lo mueven para allá.
El código CSS de ese tramo es el siguiente:

Código:
nav{
	
	padding: 0px;
	width: 40px;
	height: 100%;
	left:0%;
	position: absolute;
	background-image:url(header.gif);
	position:fixed;
	z-index: 9999;
	
}
nov a{
	position: absolute;
	height: 34px;
	width: 34px;
	margin-left: 2px;
	margin-top: 2px;
	background-image: url(images/bar.png);
	border-radius: 1px;
	border: solid 1px;
	text-decoration: none;
	color: #0000;
		transition:all 1s;
 	-moz-transition:all 1s;
 	-ms-transition:all 1s;
 	-o-transition:all 1s;
 	-webkit-transition:all 1s;
	font-size:6px;
	text-align:center;
}
nov a:hover{
	height: 170px;
	width: 170px;
	background-image: url(images/bar.png);
	border-radius: 1px;
	border: solid 1px;
		transition:all 1s;
 	-moz-transition:all 1s;
 	-ms-transition:all 1s;
 	-o-transition:all 1s;
 	-webkit-transition:all 1s;
	font-size:20px;
	text-align: center;
}
Nav se refiere a la barra de navegación vertical y Nov es la abreviatura de novedades, correspondiente a cada uno de los iconos.

En cuanto al código que domina esto en el html, es simplemente <nav><nov></nov></nav>, lo cual añade un elemento a la barra (Puesto que con mi código no se pueden añadir mas).

Muchas gracias por la ayuda y disculpa por mi "novatez" jeje
  #4 (permalink)  
Antiguo 01/07/2013, 04:57
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Bases de datos y CSS

Bueno, lo primero que haces mal es usar <nov>. Es un elemento que no existe en la especificación. No puedes crear los elementos que quieras, aunque funcionen en algunos navegadores, luego seguramente se puedan ver mal entre ellos.

Entonces reconvierte esos nov en otro elemento válido. Ya dependerá si quieres usar un elemento en linea o bloque, o inline-block. Siempre puedes añadirles una clase para referenciarlos. Aunque si quieres hacer una lista de enlaces, que es lo que suele ser un menú, entonces usa ul y li:

Código HTML:
Ver original
  1. <ul>
  2.   <li>
  3.     <a></a>
  4.   </li>
  5. </ul>

¿Cómo necesitas posicionar esos elementos? ¿Uno al lado de otro? Entonces flótalos, usando float:

Código CSS:
Ver original
  1. li{
  2.   float: left;
  3. }

Ejemplo: http://jsfiddle.net/5UW5m/

O también puedes especificarlos como elementos inline:

Código CSS:
Ver original
  1. li{
  2.   display: inline;
  3. }

Ejemplo: http://jsfiddle.net/5UW5m/1

El caso es que, haciéndolo de esta forma más robusta, no vas a necesitar todo eso que dices, porque los elementos siguen siendo y formando parte del flujo natural del HTML. Entonces se posicionarán en el lugar donde aparezcan y dependiendo del CSS, de una forma u otra. Pero sigue habiendo una relación física entre los elementos, cosa que no ocurre con el posicionamiento absoluto, porque salen de ese flujo natural.
  #5 (permalink)  
Antiguo 01/07/2013, 05:07
 
Fecha de Ingreso: julio-2013
Mensajes: 5
Antigüedad: 11 años, 5 meses
Puntos: 0
De acuerdo Respuesta: Bases de datos y CSS

Cita:
Iniciado por pzin Ver Mensaje
Bueno, lo primero que haces mal es usar <nov>. Es un elemento que no existe en la especificación. No puedes crear los elementos que quieras, aunque funcionen en algunos navegadores, luego seguramente se puedan ver mal entre ellos.

Entonces reconvierte esos nov en otro elemento válido. Ya dependerá si quieres usar un elemento en linea o bloque, o inline-block. Siempre puedes añadirles una clase para referenciarlos. Aunque si quieres hacer una lista de enlaces, que es lo que suele ser un menú, entonces usa ul y li:

Código HTML:
Ver original
  1. <ul>
  2.   <li>
  3.     <a></a>
  4.   </li>
  5. </ul>

¿Cómo necesitas posicionar esos elementos? ¿Uno al lado de otro? Entonces flótalos, usando float:

Código CSS:
Ver original
  1. li{
  2.   float: left;
  3. }

Ejemplo: [url]http://jsfiddle.net/5UW5m/[/url]

O también puedes especificarlos como elementos inline:

Código CSS:
Ver original
  1. li{
  2.   display: inline;
  3. }

Ejemplo: [url]http://jsfiddle.net/5UW5m/1[/url]

El caso es que, haciéndolo de esta forma más robusta, no vas a necesitar todo eso que dices, porque los elementos siguen siendo y formando parte del flujo natural del HTML. Entonces se posicionarán en el lugar donde aparezcan y dependiendo del CSS, de una forma u otra. Pero sigue habiendo una relación física entre los elementos, cosa que no ocurre con el posicionamiento absoluto, porque salen de ese flujo natural.
Muchas gracias, de verdad. Pese a que no había tratado nunca con los elementos de los que me hablas parecen muy simples de utilizar. Ahora me pongo a intentar re-configurar todo el código.

Dejaré correr pues el tema de las bases de datos en este aspecto. Muchas gracias, saludos! :)

Etiquetas: for(), html, posicionamiento, sql
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 03:37.