phpBB España Oficial

phpBB España Oficial, Soporte Internacional Oficial del sistema de foros phpBB en Español, extensiones, estilos, traducciones, guías, tutoriales, videos, redes sociales, webmaster.
https://www.phpbb-es.com/foro/

Cambiar tables por div

https://www.phpbb-es.com/foro/viewtopic.php?t=35739

Página 1 de 1

Cambiar tables por div

Publicado: 21 Abr 2012, 22:48
por Makoto
Foro: http://sistemas.iloveidol.com/index.php

Estilo: http://www.phpbb.com/customise/db/style ... ures/demo/

como puedo cambiar las etiquetas de table por las de div sin estropear el foro ?
las etiquetas de table son las que muestran el borde del foro :nolose:

Re: Cambiar tables por div

Publicado: 22 Abr 2012, 00:47
por Carlos Murillo
Off Topic
mmm, creo que son mis iconos xD
y para que los quieres cambiar?

Re: Cambiar tables por div

Publicado: 22 Abr 2012, 13:12
por Blthazor
No es una modificación que se haga rapidamente, porque hay que trabajar un poco el código. Por ejemplo la parte superior podría hacerse algo como:

overall_header

Código: Seleccionar todo

<div class="outside">
	<div class="top-center">
	<div class="top-left"><div class="top-right"></div></div>
overall_footer

Código: Seleccionar todo

</div>
<!-- fin modif bordures extensible -->
El resto es CSS

forum_borders.css

Código: Seleccionar todo

.outside {
	margin:0 auto;
	width:918px;
}

.top-left, .top-right, .bottom-left, .bottom-right, .bord-left, .bord-right {
	width:34px;
	height: 26px;
}

.top-left {
	background-image:url("{T_THEME_PATH}/images/bg_top.png");
	background-repeat:repeat-x;
	background-position:0 0;
	margin: auto;
	margin-left: 68px;
	width: 816px;
}
.top-right {
	background-image:url("{T_THEME_PATH}/images/border_top_right.png");
	background-repeat:no-repeat;
	background-position:0 0;
	float: right;
        width: 34px;
}
.top-center {
	background-image:url("{T_THEME_PATH}/images/border_top_left.png");
	background-repeat:no-repeat;
	background-position:34px 0;
	height:26px;
}
Te he puesto los códigos tal y como quedarían, supongo que mas o menos veras la idea. Probado en todos los Explorer desde el 7, Firefox, Chrome, Opera 11.5 y Safari 5.1.1

Si quieres puedo desarrollar todo el código restante, pero tardaría un poco

Re: Cambiar tables por div  Tema Solucionado

Publicado: 22 Abr 2012, 19:01
por Makoto
Muchas gracias pero ya lo pude hacer viendo otros estilo que tienen bordes 8-) igualmente gracias

el css usado es

Código: Seleccionar todo

html, body {
	color:#404040;
	background-color:#A0A7AD;
}

#wrap {
	min-width:700px;
	width: 920px;
	margin:0 auto;
	padding:0;
	background-image:url("{T_THEME_PATH}/images/background-scroll.gif");
}


/*     
--------------------------------------------------------------
Borders css for skinBB3 
-------------------------------------------------------------- */

/* Bordures header ================================== */
#menubase_block {
    margin: 0px;
    margin-top: 20px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    clear: both;
}     
.menubase-l {
    background-image: url("{T_THEME_PATH}/images/border_top_left.png");
    background-repeat: no-repeat;
    height: 26px;
    float: left;
    width: 34px;
    padding: 0px;
}

.menubase-m {
    background-image: url("{T_THEME_PATH}/images/bg_top.png");
    background-repeat: repeat;
    height: 26px;
    width: auto;
    margin: 0;
    padding: 0px;
    text-align: center;
}

.menubase-r {
    background-image: url("{T_THEME_PATH}/images/border_top_right.png");
    background-repeat: no-repeat;
    height: 26px;
    float: right;
    margin-top: -26px;
    width: 34px;
    padding: 0px;
}

/* ================================================================================ */


/* ================================================================================ */

/* Bordures externes gauche et droite ================================== */
#border_block {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    padding: 0px;
    width: 100%;
    min-height: 100%;
    height: 100%;
    clear: both;
}
#borderleft {
    background-image: url("{T_THEME_PATH}/images/bg_left.png");
    background-repeat:   repeat-y;
    background-position: left;
}
#borderright {
    background-image: url("{T_THEME_PATH}/images/bg_right.png");
    background-repeat:   repeat-y;
    background-position:right;
}

/* ================================================================================ */

/* Bordures footer ================================== */
#footer_block {
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding: 0px;
	width: 100%;
    clear: both;
}

.foot-l {
	background-image: url("{T_THEME_PATH}/images/border_bottom_left.png");
	background-repeat: no-repeat;
	height: 26px;
	float: left;
	width: 34px;
	padding: 0px;
}
.foot-m {
	background: url("{T_THEME_PATH}/images/bg_bottom.png");
	background-repeat: repeat;
	height: 26px;
	margin: 0;
	width: auto;
	padding: 0px;
}
.foot-r {
	background-image: url("{T_THEME_PATH}/images/border_bottom_right.png");
	background-repeat: no-repeat;
	margin-top:   -26px;
	height: 26px;
	float: right;
	width: 34px;
	padding: 0px;
}

/* ================================================================================ */

/* Content container styles
----------------------------------------*/
#content_main {
   color: #826D4E;
   margin-left: 34px;
   margin-right:  34px;
   clear: both;
   padding: 0px;
   overflow:hidden;
}

.bodyfill {
   background-image:    url("{T_THEME_PATH}/images/background-scroll.gif");
   background-repeat:   repeat;
   background-position: top center;
}
en el overall_header.html
cambiar esto

Código: Seleccionar todo

<!-- debut modif bordures extensible armes et aventures -->
<table class="outside" cellpadding="0" cellspacing="0" border="0">
  <tr>
   <td class="top-left"></td><td class="top-center"></td><td class="top-right"></td>
  </tr>
  <tr>
   <td class="bord-left"></td>
   <td class="bg-inside">
<!-- fin modif bordures extensible armes et aventures -->


<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
por esto

Código: Seleccionar todo

<div id="wrap">
	<a id="top" name="top" accesskey="t"></a>
	<div id="menubase_block">
		<div class="menubase-l"></div>
		<div class="menubase-m"></div>
		<div class="menubase-r"></div>
	</div>
	<div id="border_block">
		<div id="borderleft">
		<div id="borderright">
<div id="content_main" class="bodyfill">
en el overall_footer.html

cambiar esto

Código: Seleccionar todo

</div>
<!-- debut modif bordures extensible -->
 </td>
   <td class="bord-right"></td>
  </tr>
  <tr>
   <td class="bottom-left"></td><td class="bottom-center"></td><td class="bottom-right"></td>
  </tr>
</table>
<!-- fin modif bordures extensible -->
por esto

Código: Seleccionar todo

	</div> <!-- end content -->
	</div> <!-- end border left -->
	</div> <!-- end border right -->
	</div> <!-- end border block -->
	<div id="footer_block">
		<div class="foot-l"></div>
		<div class="foot-m"></div>
		<div class="foot-r"></div>
	</div>
y listo

Re: Cambiar tables por div

Publicado: 23 Abr 2012, 10:09
por Blthazor
Me alegro. En realidad como puedes comprobar es mas aparatoso que difícil. :D

Obstante a modo de comentario, hay una manera mas sencilla aun de hacerlo. Solo necesitarías un DIV por zona.

Me explico.

El tema lo puedes dividir en tres partes, el borde superior, los dos centrales y el inferior.
Necesitas un DIV principal que sustituirá al TABLE y que servirá de contenedor general.
Para el borde superior puedes definir 1 solo DIV quedando algo como esto.

Código: Seleccionar todo

<div class="top"></div>
¿Ahora viene la cosa, con una sola definición de DIV como puedo definir todo el marco? Y la cuestión es echar mano de CSS y definir los atributos :before y :after

Primero definimos el contenido general de la clase "top"

Código: Seleccionar todo

.top{
	margin: auto;
	width: 850px;/* 918px menos 64px (34 x 2)*/
	height:26px;
	background-image:url("{T_THEME_PATH}/images/bg_top.png");
	background-repeat:repeat-x;
}
luego aprobechamos el CSS para definir las características de la clase

Código: Seleccionar todo

.top:before, .top:after {
    content: ""; /* Es importante */
    display: block;
    height: 26px;
    position: relative;
    width: 34px;
}

.top:before {
	background-image:url("{T_THEME_PATH}/images/border_top_left.png");
	background-repeat:no-repeat;
	background-position:0 0;
}

.top:after {
	background-image:url("{T_THEME_PATH}/images/border_top_right.png");
	background-repeat:no-repeat;
	background-position:0 0;
	left: 816px; /* 850px menos 34px porque alineamos a la derecha no a la izquierda */
        top: -26px; /* Por ser posición relativa*/
}
El bloque central ya lo tienes definido en el wrap, así que solo resta adaptar los atributos before y after. Para el bloque inferior solo hay que reproducir el esquema anterior.

Como puedes comprobar es mucho mas simple, pero tiene un inconveniente. No funciona en navegadores anteriores a IE8.

Re: Cambiar tables por div

Publicado: 24 Abr 2012, 00:34
por Makoto
u_u gracias eso del css recien comienzo a explorarlo completamente pero eh visto que con tres div

div top fijo sin repetir
div central que repite todo el largo
div bottom fijo sin repetir

Re: Cambiar tables por div

Publicado: 24 Abr 2012, 09:49
por Blthazor
Si, así es.

En el central (WRAP) tienes la parte central que repetiría la imagen de fondo, que ya está echo. Solo tendrías que definir un .wrap:before y un .wrap:after, con un repeat-y.

En este caso y para foros pequeños no tiene mucho valor, pero cuando empiezas a modificar una pagina entera, la cantidad de datos que te ahorras transmitir puede llegar a ser importante. Mas si tenemos en cuenta que el CSS a no variar, se puede guardar en la caché del ordenador cliente. De echo una manera de ahorrar mucho ancho de banda es definir una caché con las imágenes y elementos que no varían, en el dispositivo cliente. Ya sea mediante una cookie u otros medios.

Aunque eso ya es irse por otros caminos que no son el tema. (Desde que me he quedado en paro tengo demasiado tiempo libre XDD)

Saludos

Re: Cambiar tables por div

Publicado: 24 Abr 2012, 10:10
por Blthazor
Vaya no me ha dado tiempo a editar. XDD

Rectificar, porque no había entendido

En el caso del top y del bottom tienes que repetir la parte central. Poner una imagen entera no es una solución demasiado buena. Una manera de hacerlo también es unir en una sola imagen los extremos y el centro, y variar la posición de la imagen en el background, pues te ahorras llamadas y ancho de banda, y quedando algo por ejemplo:

Imagen

Código: Seleccionar todo

.top{
	background:url("{T_THEME_PATH}/images/top.png") 0 35px repeat-x; (no está a escala es para hacerte una idea)
}

.top:before {
	background:url("{T_THEME_PATH}/images/top.png") left top no-repeat;
}

.top:after {
	background:url("{T_THEME_PATH}/images/top.png") right top no-repeat;
}
Todos los horarios son UTC+02:00
Página 1 de 1

Desarrollado por phpBB® Forum Software © phpBB Limited

Traducción al español por phpBB España