Combinar Css con Php(especial framework)

[Baldur]

Hola a todos!

Os comento lo que me pasa. Yo soy más desarrollador que diseñador, aunque controlo un poco de todo.
Un amigo ingeniero ha desarrollado una Framework de PHP y yo le estoy haciendo de beta-tester y al mismo tiempo intentado crear un proyecto(una tontería al fin al cabo) que llevo queriendo tiempo hacer.

El tema es que hace muchíiimo que no toco el tema del diseño, ya sea HTML o CSS, aunque de algo me acuerdo.
Pero el problema realmente reside en que lo que nunca he tocado ha sido combinar HTML/CSS con PHP.

Aunque esta Framework el modo de ultilizarla, para ponerlos un ejemplo es:

Código:

<p>[txtLogin]</p>
<p>[txtPassword]</p>
<p>[btnEnviar]</p>

Esa por ejemplo es la paginaCero.ptw, donde defino la posición de la caja de texto Login, la de password y el botón de enviar, aunque hay otros archivos auxiliares para crear la página y añadirle el código php.

Pues bien...yo lo que tengo crudísimo es crearme el diseño, ya que soy más patoso y hortera que un pulpo en un garaje jajaja.
Aunque el código y todo eso ya lo tengo creado, ahora me falta el diseño para acabar de implementar todo el conjunto.

Os explico más o menos lo que quiero hacer:
La web va a consistir en mostrar una serie de eventos(como un registro de Logs).
La página principal va a tener tres pestañas:
-Pasados(de ayer hasta el primer evento de la base de datos)
-Actuales(de hoy hasta el próximo domingo)
-Próximos(del próximo lunes en adelante)

Por defecto la página va a cargar en la pestaña Actuales y mostrar los eventos que se van a suceder desde el día de hoy(p.ej. hoy lunes 21) hasta el próximo domingo(domingo 27).
Esta lógica ya la tengo toda programada, ahora sólo me falta tener el diseño para hacer la página algo vistosa.
Os muestro un esquema, ya que una imagen vale más que mil palabras...jajaja
http://twitpic.com/1ylehi/full

Bueno, pues sencillamente es eso...pero no sé ni como empezar...
Por eso os pido un poquito de ayuda, y si alguien se anima a hecharme una mano os lo agradezco muchísimo...porque estoy bastante pez en el tema del diseño...
Yo a cambio, si alguien necesita ayuda con algo de código me presto a hecharle una mano en lo que pueda(aunque ya digo que no soy un experto...jajaja).

Bueno, pues muchísimas gracias por toda la ayuda que me podais prestar y un Saludo a todos!

Gracias y un Saludo!

[daPhyre]

El esquema es bastante sencillo, y por lo que me explicas comprendo de lo que dices, no tienes idea absolutamente de nada, así que veré como puedo resumir todo lo que necesitas. Para empezar, ¿Ya tienes los divs necesarios para dividir la página en las tres secciones principales?

El código creo que será un poco largo. Si gustas puedo enseñarte en partes, aunque llevará un tanto de tiempo y posiblemente unos cuantos post, aunque bien podrían ayudar también a otra gente en el futuro

[Baldur]

Jajajaja. Pues tienes toda la razón, no tengo absolutamente idea de nada jajaja
No tengo nada hecho del HTML ni de CSS. Bueno tengo una hoja CSS pero es la perteneciente a la framework y sólo afecta a cajas de texto, botones...etc.

Y los divs para las tres secciones principales...pues tampoco...
Es que te comento...todo lo que he hech en HTML y CSS ha sido siempre a partir de alguna plantilla, entonces sí, se ir modificando tanto en HTML como propiedades de los CSS....pero de Cero nunca he hecho nada(es decir...algo sí..pero cosas muy sencillas)... entonces estoy que no sé por donde ni como empezar(de esto que te quedas en blanco...jajaja).
Y es eso, que si me puedes hechar un cable como bien comentas, te lo agradecería muchísimo, pero que muchísimo.

Gracias por todo y un Saludo!

[daPhyre]

Llevo un rato analizándolo. La verdad es que empezar desde el comienzo, es demasiado. Daré por supuesto que tienes la base base de saber como acomodar todo el el HEAD y el BODY, así como usar un DOCTYPE y todo eso. Si no, puedes copiarlo sin problema de cualquier otra página, y es de lo primero que te enseñan cuando encuentras un buen tutorial.

La base

Lo primero, es crear divisores para cada sección, que según puedo ver, son cuatro:

Código HTML:

<body>
<div id="header"></div>
<div id="nav"></div>
<div id="body"></div>
<div id="footer"></div>
</body> 

Para fines prácticos, pondremos los mismos colores que elegiste de fondo, en tonos claros. El CSS sería como sigue:

Código:

#header{background:#99f;padding:0.5em;text-align:center}
#nav{background:#f99;width:60em;margin:0 auto;padding:0.5em;text-align:center}
#body{background:#c9f;width:60em;margin:0 auto;padding:0.5em}
#footer{background:#fc9;width:60em;margin:0 auto;padding:0.5em;text-align:center}

margin:0 auto centra tus divisores ya con su ancho dado, y padding hará un pequeño espacio interno. Cambia los valores a los que mejor acomoden a tus necesidades. Con eso se tendrá la estructura básica.

El header

La parte superior no tiene gran ciencia, tan solo unas líneas como estas en tu HTML:

Código HTML:

<div id="header">
<h1><a href="index.html">Logotipo</a></h1>
<p style="text-align:right"><a href="#">Login</a> <a href="#">Registrarse</a></p>
</div> 

El texto de logotipo puedes cambiarlo con una imagen como <img src="logotipo.jpg" alt="Logotipo" />

[daPhyre]

El menú

El menú tiene un poco de truco. Para empezar, se hace una lista con los enlaces en html de esta forma:

Código HTML:

<div id="nav">
<ul>
<li><a href="pasados.php">Pasados</a></li>
<li class="selected"><a href="index.php">Actuales</a></li>
<li><a href="proximos.php">Próximos</a></li>
</ul>
</div> 

Después, agregas el siguiente CSS:

Código:

#nav li{display:inline}
#nav a{color:#333;background:#f66;text-decoration:none;display:inline-block;width:10em;padding:0.5em}
#nav li.selected a{width:16em;padding:1em}

De esta forma, cada uno estará alineado delante del siguiente.

La clase "selected" se la debes de dar al enlace que actualmente está seleccionado, para que tenga ese efecto diferente. Si tienes alguna duda en el camino, no dudes en preguntar, pero para enseñar estamos en este foro ;)

[Baldur]

Jobá tío....eres (con perdón) la polla...jajajaja.
Muchísimas gracias!! no sabes cuanto me has ayudado!
Lo básico sí, lo conocía, pero mi problema radicaba en que "no sabía por donde empezar" xDD

Muchas gracias por lo aportado, me pongo manos a la obra.

Saludo y muchísimas gracias!

[daPhyre]

Seguro, no hay problema. ¿Podrás manejar las cajas verdes? Aun no he concluido del todo con ellas, tienen su truquillo, dependiendo el método que se use.

Bueno, si te falta cualquier detalle, pregunta con confianza. Mucha suerte =P

[Baldur]

Lo intentaré con las cajas...pero ahí es donde veía el mayor problema.
Creo que si lo hago con TABLE sabré hacerlo, pero css lo veo chunguísimo jajaja.
Y es que hay muchos conceptos de CSS que se me escapan, tales como lo de "flotante" y cosas de esas... y no sé si en este caso haría falta algo por el estilo...

Gracias de nuevo y un Saludo!

[daPhyre]

Bueno, por fortuna, la nueva propiedad display:inline-block facilita bastante el trabajo que antes se tenía que hacer con flotantes, ya que si pueden ser un pequeño dolor de cabeza. El problema es que versiones antiguas de IE no leen de forma correcta ese display... (No se desde que versión :S' )

En tal caso, si se debe usar entonces los flotantes. La forma más fácil de comprenderlos, es con una imagen. ¿Haz visto como en los libros, aparecen fotos las cuales el texto se ajusta a su rededor? Esto se logra en CSS poniendo una imagen antes del texto, y dándole un float:left (o float:right) y un pequeño margin para que no esté pegada la imagen al texto.

Ahora, esto se puede usar también para alinear varias "cajas" como lo son divs, asignándole un ancho a cada una, y luego, la propiedad float:left para que queden alineadas. Por supuesto, el detalle es que tienes que encerrar toda la lista de cajas en una caja mayor con "overflow:hidden" o poner inmediatamente abajo una caja con "clear:both" para que de esta forma, el contenido que va después de los elementos flotantes no tenga "comportamientos extraños".

Suerte

[daPhyre]

Bien se dice que un ejemplo explica más que mil palabras. Prueba esto, espero pueda ayudarte:

Código HTML:

<div class="entry">
<ul>
<li class="titulo">Título</li>
<li class="lugar">Lugar</li>
<li class="fecha">DD/MM/YYY</li>
</ul>
<p class="right">Puntuación</p>
<p>Breve descripción del evento</p>
<p class="right">Leer más/ir al evento.</p>
</div> 

Código:

.entry{background:#cfc;padding:0.5em}
.entry ul{padding:0;list-style:none;overflow:hidden}
.entry li{background:#9f9;padding:0.5em;float:left}
.titulo{width:30em}
.lugar{width:16em}
.fecha{width:10em}
.right{text-align:right}