Reemplazar tablas por divs

[seinkraft]

Hola a todos, no se si va aqui el post o en html...

Bueno la cosa es que me desperte con un odio profundo hacias las tablas en el dia de hoy y ya habia echo un template basado en tablas pero lo quiero volcar todo a divs y algo eh logrado...

en el diseñador:

Código HTML:

<div style="background:url(../styles/images/bg_header.png); height:140px; width:804px;" align="center"></div>
<div style="background:url(../styles/images/bg_wrap.png); width:804px; padding-top:6px; padding-bottom:6px;" align="center" >
<div style="background:url(../styles/images/box_top.png); width:780px; height:10px;"></div>
<div style="background:url(../styles/images/box_wrap.png); width:780px; height:1px; text-align:left">
<img src="{T_THEME_PATH}/images/icon_faq.png" width="16" height="16" alt="*" /> <a href="{HREF_FAQ}">{FAQ_TEXT}</a>
<img src="{T_THEME_PATH}/images/icon_user.png" width="16" height="16" alt="*" /> <a href="{HREF_USER}">{PANEL_TEXT}</a> 
<img src="{T_THEME_PATH}/images/icon_members.png" width="16" height="16" alt="*" /> <a href="{HREF_MEMBERS}">{MEMBERS_TEXT}</a>
</div>
<div style="background:url(../styles/images/box_bottom.png); width:780px; height:10px;"></div>
</div>
<div style="background:url(../styles/images/bg_footer.png); height:7px; width:804px;" align="center"></div>

Alguien me puede ayudar o orientar?

Saludos

en el explorador:

[hades87]

ahora la capa donde andan los textos la tendrias que alinear verticalmente, y si todos llevan la misma imagen podrias usar listas.

[seinkraft]

ahap, puede ser...aun no lo pude probar....pero tambien necestito que un link se alinea a la izquierda y el resto a la derecha....eso con tablas lo hacia con dos columnas y la alineacion....se puede con los divs u otra cosa que no sean tablas?

[hades87]

puedes hacer un div que englobe al link de la izquierda, y meterle un float eft, luego ahces un div que englobe a lso toros y hace un float right, a ver si funciona ^^

[seinkraft]

El vertical align no funciona. Lo resolvi poniendole altura al div que contiene el texto :S.

La alineacion de los float funcionan perfecto.

Gracias!

[seinkraft]

Estube tratando de minimizar el codigo del template y poniendo los estilos de los divs en un css. Pero luego al poner la clase en el div para que tome los valores del css no hace caso :S.

Código HTML:

<div class="navleft">
<img src="{T_THEME_PATH}/images/icon_home.png" alt="*" height="16" width="16"> <strong><a href="">Índice general</a></strong>
</div>
<div class="navright">
<img src="{T_THEME_PATH}/images/icon_faq.png" alt="*" height="16" width="16"> <a href="">FAQ</a>
<img src="{T_THEME_PATH}/images/icon_user.png" alt="*" height="16" width="16"> <a href="">Panel de Control de Usuario</a> 
<img src="{T_THEME_PATH}/images/con_members.png" alt="*" height="16" width="16"> <a href="">Miembros</a>
</div> 

Código:

navleft
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	float:left;
	padding-left:10px;
}

navright
{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	float:right;
	padding-left:10px;
}

Sin embargo el css esta asignado correctamente a la pagina.

Nota: Estoy usando un sistema de templates .tpl (FastTemplate).

[hades87]

pos un punto delante de navlef y navright ^^

[seinkraft]

Ahhhhh! ahora si me siento como un estupido x3.

Gracias hades87.

[hades87]

de nada, si tienes mas dudas solo dilas ^^