[SOLUCIONADO] Bases de datos y CSS

[sajunt4]

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.

[pzin]

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:

<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á.

[sajunt4]

Iniciado por pzin

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:

<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

[pzin]

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:

<ul>
  <li>
    <a></a>
  </li>
</ul>
 

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

Código CSS:

li{
  float: left;
}
 

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

O también puedes especificarlos como elementos inline:

Código CSS:

li{
  display: inline;
}
 

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.

[sajunt4]

Iniciado por pzin

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:

<ul>
  <li>
    <a></a>
  </li>
</ul>
 

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

Código CSS:

li{
  float: left;
}
 

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

O también puedes especificarlos como elementos inline:

Código CSS:

li{
  display: inline;
}
 

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! :)