Foros Club Delphi - Estructura de una página

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)

- HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)

- - Estructura de una página (https://www.clubdelphi.com/foros/showthread.php?t=56767)

ixMike

27-05-2008 12:08:26

Estructura de una página

Hola a todos :)

Veréis, me gustaría dar a mi página un estilo similar al que tienen, por ejemplo, los blogs de blogger, en el texto en una columna y al lado otra columnita más estrecha.

El caso es que ahora mismo lo hago con una tabla sin borde y con márgenes, pero me parece toda una chapuza :o, así que me gustaría saber si hay alguna forma más elegante de hacerlo, y por supuesto que cumpla con la W3C ;) (mi DOCTYPE! es HTML 4.01 Transicional :))

Pues eso era,

gracias, y salu2 ;)

dec	27-05-2008 13:38:40

Hola,

Ignoro si será la forma más elegante o eficaz de conseguirlo, pero, yo suelo usar "capas flotantes". ¿Capaz flotantes? Mejor una especie de ejemplo:

Código PHP:


		
			
<html>



 <head>

  <title>ClubDelphi.com</title>

    

    <style type="text/css">

     

     div#content {

       width: 70%;

         float: left;

         border: #000 solid 1px;

     }

     

     div#sidebar {

       width: 20%;

         float: left;

         margin: 0 0 0 1em;

         border: red solid 1px;

     }     

     

     div#footer {

       clear: both;

         padding: 1em 0 0 0;

     }

     

    </style>

    

 </head>



 <body>

 

  <div id="content">

     Content of content :P

    </div>

    

    <div id="sidebar">

     Sidebar content :)

    </div>

    

    <div id="footer">

     Footer content :D

    </div>

 

 </body>

 

</html>

Espero haberte ayudado en algo. :)

ixMike

27-05-2008 14:55:47

Así sin probarlo muy a fondo tiene buena pinta :D

Creo que tendré que aprender CSS para poder currarme al máximo la web ;)

Gracias, David :)

AzidRain

27-05-2008 19:20:20

Puedes usar hacer los tutoriales de w3schools Son gratuitos, no hay que registrarse y puedes hacer ejercicios en línea.

de un site. El ejemplo de Dec es bueno pero seguramente te ha confundió un poco.

ixMike

28-05-2008 12:42:11

Hola, Azid.

Sin duda ver algo que desconoces siempre confunde un poco, por eso he empezado con el cursillo de CSS de www.desarrolloweb.com :)

Luego visitaré ese enlace que me has puesto, parece interesante. Pero de todas formas, tampoco quiero tratar el tema en demasiada profundidad, no es algo a lo que en un futuro quiera dedicarme, tan sólo es un hobbie más y una actividad para mantener la sesera funcionando ;)

Salu2.

ixMike

02-06-2008 23:02:16

Hola. :)

Bien, he estado leyendo, probando...

Lo que quiero hacer es esto: arriba, una barra de menú (de alto fijo); debajo de esta: a la izquierda, un panel con cositas (de ancho fijo), y el resto del espacio, el contenido de la página. Lo conseguí con esto:

Código PHP:


		
			
<html>

<head>
<title>Pagina de prueba de capas</title>

<style type="text/css">

body {...}

div#menu {
  float: top;
  margin: 1 0em;
  padding: 1em;
  ...}

div#panel {
  width: 150px;
  float: left;

  padding: 1em;
  margin: 1em;
  ...}

div#cuerpo {
  float: left;
  width: auto;
  padding: 1em;
   ...}

</style>

</head>

<body>


<div id="menu">
Texto del menu.
</div>


<div id="panel">
Panel.<br>
Izquierdo<br>
</div>


<div id="cuerpo">
Contenido de la pagina en cuestion.
</div>


</body>

</html>

Todo muy bien y muy bonito... pero si el texto del cuerpo excede del ancho de que dispone entre el panel y la parte derecha del navegador, pues todo el bloque de "cuerpo" salta y se queda por debajo del panel. Ejemplo

¿Dónde está el fallo?

Seguro que es una tontería de nada, pero es que soy nuevo en esto :o

Salu2.

Caral

02-06-2008 23:16:10

Hola
Si la web tiene base de datos podrias usar Mambo, es facil, lo hace todo solito solo hay que adecuarlo a lo que uno quiere.
Saludos

ixMike

02-06-2008 23:26:54

Cita:

Empezado por Caral (Mensaje 290823)

Hola
Si la web tiene base de datos podrias usar Mambo, es facil, lo hace todo solito solo hay que adecuarlo a lo que uno quiere.
Saludos

¿Eiñ? :confused:

Caral

02-06-2008 23:33:45

Hola
No se que significa el signo, pero por si acaso revisa esta pagina.
Saludos

ixMike

02-06-2008 23:39:28

Cita:

Empezado por Caral (Mensaje 290826)

Hola
No se que significa el signo, pero por si acaso revisa esta pagina.
Saludos

jeje, vale, ok.

No, no es eso lo que busco. El servirdor (que no web) sí tiene MySQL y PHP, pero yo estoy haciendo la web maquetándola en HTML y CSS, para aprender principalmente. Además, ya tengo muchas cosas hechas y no me conviene (ni quiero) ponerme ahora a hacerla con otra cosa. Lo que tengo ahora es tan sólo una pequeña duda de CSS, nada más.

Pero igualmente gracias :)

Caral

02-06-2008 23:48:19

Hola
Bueno, trate de hacerlo por las buenas, pero veo que te gusta la acción.:D:D
CSS es un simple archivo que controla mas que nada las fuentes, pero ya lo veras, hay mucha información y Dec se las sabe todas en esto.
Mambo tiene de todo esto y como ya esta hecho es mas fácil ver y modificar, así se aprende mejor, pero repito, te gusta la acción.:D
Saludos

roman

03-06-2008 00:06:09

Cita:

Empezado por Caral (Mensaje 290829)

CSS es un simple archivo que controla mas que nada las fuentes

Hombre, no quiero ser pesado pero las fuentes es algo así como el 1% de lo que se puede hacer con CSS ;)

// Saludos

enecumene

03-06-2008 02:16:37

Cita:

Empezado por roman (Mensaje 290833)

Hombre, no quiero ser pesado pero las fuentes es algo así como el 1% de lo que se puede hacer con CSS ;)

// Saludos

Vale amigo Roman, tienes toda la razón, CSS es muy extenso y se puede hacer muchas cosas con ella, soy testigo de ello.

Saludos.

ixMike

03-06-2008 13:06:36

Cita:

Empezado por Caral (Mensaje 290829)

CSS es un simple archivo que controla mas que nada las fuentes, pero ya lo veras...

Cita:

Empezado por roman (Mensaje 290833)

Hombre, no quiero ser pesado pero las fuentes es algo así como el 1% de lo que se puede hacer con CSS ;)

Cita:

Empezado por enecumene (Mensaje 290845)

Vale amigo Roman, tienes toda la razón, CSS es muy extenso y se puede hacer muchas cosas con ella, soy testigo de ello.

Efectivamente, lo que yo intento hacer con CSS es maquetar la página :)

Cita:

Empezado por Caral (Mensaje 290829)

hay mucha información y Dec se las sabe todas en esto.

¿A quién te crees que estoy esperando que aparezca por aquí? :D;)

dec	03-06-2008 14:52:35

Hola,

La verdad es que no estoy muy puesto en este asunto, lejos de lo que pudiera parecer, según decís. Echando un vistazo por encima descubro que si el "contenido" no tiene un ancho definido, toma el cien por cien del disponible, y pudiera ser por esto por lo que, en un momento dado, tras redimensionar la página, por ejemplo, el contenido queda por debajo del "menú".

Si das al contenido un ancho, un 60%, por ejemplo, verás que ya no ocurre eso, al menos, si no se redimensiona la página hasta cierto punto. Y es que, lo natural, es que los elementos de la web "fluyan", y eso es lo que parece que ocurre en tu caso, aunque no sea lo que tú esperas. Siempre que he usado este tipo de estructura he dado medidas (anchos) porcentuales, tanto al menú como al contenido.

De este modo se adaptan ambos al ancho disponible, ya digo, salvo que "reduzamos" mucho el ancho de la página, momento en que el navgador decide que el contenido quede debajo del menú, en este caso, antes de que el primero "no se vea" y quede fuera de la página. Otra solución podría ser dar tamaño y posición absolutas, tanto al menú como al contenido, de este modo creo que "fuerzas" al que el navegador los muestre tal como quieres, aunque a veces no quede tal como esperas.

No sé si he dicho algo curioso o qué...

PD. Prueba a dar un ancho al menú del 20 por ciento, y, al contenido, un ancho del 65 por ciento.

ixMike

03-06-2008 16:34:55

Hola.

La verdad es que toda duda que he tenido con PHP, CSS y HTML me la has resuelto tú :), así que modestias fuera ;)

Al final me he quedado con la posición absoluta, porque el panel de la izquierda debía contener una imagen y por eso debía tener ancho fijo:

Código PHP:


		
			
div#cuerpo {
  position: absolute;
  left: 170px;
  top: 40px;
  width: auto;
  ...}

Salu2 :)

Edito: parece ser que con el width: auto; el text-align: justify; no surge efecto :mad:

La franja horaria es GMT +2. Ahora son las 22:10:51.