Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje27-10-2011, 09:14 (UTC)    
Título del mensaje: [Resuelto] AUMENTAR PLANTILLA ICE BLUE A UN ??%

Saludos a todos,

Ya resolvimos como poner ICE BLUE al 100% del ancho de pantalla.

Cita:


(Resuelto)PONER MAS ANCHO LA COLUMNA CENTRAL DE ICE BLUE

http://www.paginawebgratis.es/forum/viewtopic.php?t=44005



Ahora las preguntas son:

01ª - ¿Como ensanchar la plantilla solo a un cierto porcentaje del ancho de pantalla (un 90%, 80%, 70%...), para que queden dos columnas libres a ambos lados del diseño, de modo que:

· 01.01 - LA PLANTILLA QUEDE CENTRADA
· 01.02 - MAS ANCHO QUE LA PLANTILLA ORIGINAL PERO NO AL 100%


02ª - ¿Como hacer para que el Header (banner superior de ICE BLUE) ocupe el mismo % de pantalla que las tres columnas: "Menu - Caja Central - Boxes" ?
   Me refiero a este objeto: http://theme.webme.com/designs/iceblue/images/header.jpg


MIS PRIMERAS REFLEXIONES:

Creo que en cada caso hay que estirar a la medida equivalente al porcentaje de ancho de pantalla elegido, los objetos siguientes:


· http://theme.webme.com/designs/iceblue/images/header.jpg
· http://theme.webme.com/designs/iceblue/images/footer.gif
· http://theme.webme.com/designs/iceblue/images/cont_bg.gif
· http://theme.webme.com/designs/iceblue/images/footer.gif
· http://theme.webme.com/designs/iceblue/images/header.jpg


Creo que hay que cambiar 100% por el % de ancho de pantalla elegido este código:

Código:



<!-- --------------------------------------------------- -->
<!-- Inicio: Ensanchar plantilla ICE BLUE   -->
<!-- --------------------------------------------------- -->

<style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;
background-position:center;background-repeat:no-repeat; }
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>
<!-- --------------------------------------------------- -->
<!-- Final : Ensanchar plantilla ICE BLUE   -->
<!-- --------------------------------------------------- -->



ME FALTA SABER ¿ Como hacer que el header: http://theme.webme.com/designs/iceblue/images/header.jpg

... ocupe el mismo ancho y lugar que estos tres objetos?

· Menu: http://theme.webme.com/designs/iceblue/images/heading_left.gif
· Caja central: http://theme.webme.com/designs/iceblue/images/cont_top.gif
· Boxes: http://theme.webme.com/designs/iceblue/images/heading_right.gif


Si solucionamos esto, el siguiente paso es editar los objetos, cambiarles el color y poner a disposición de todos los usuarios del foro la plantilla ICE BLUE, escalable, y en colores a elegir.

Empiezo a hacer pruebas, pero de todas maneras: Ayuda por favor.


Ultima edición por webmicro el Jue Oct 27, 2011 10:10 pm; editado 1 vez
Mensaje27-10-2011, 12:13 (UTC)    
Título del mensaje:

Simplemente tienes que cargar una imagen de cabecera con el tamaño deseado. Mi web es iceblue también y ya hice todos los cambios que mencionas, puedes pasarte a verla si quieres y acceder al código por si te sirve de ayuda.


Ultima edición por euridicecabanes el Jue Oct 27, 2011 8:15 am; editado 1 vez
Mensaje27-10-2011, 12:27 (UTC)    
Título del mensaje:

euridicecabanes escribió:
Simplemente tienes que cargar una imagen de cabecera con el tamaño deseado. Mi web es iceblue también y ya hice todos los cambios que mencionas, puedes pasarte a verla si quieres y acceder al código por si te sirve de ayuda.


Muchas Gracias euridicecabanes. Te ha quedado bien esa modificación de ICE BLUE. Ya revisaré el código despacio.

De momento estoy currándome el cambio de color de ICE BLUE. Había mas objetos ".gif " de los inicialmente vistos, que hay que cambiar de color (seguro) y de tamaño (depende).

Cuando tenga progresos los publicaré aquí.

Saludos,


Ultima edición por webmicro el Jue Oct 27, 2011 8:29 am; editado 1 vez
Mensaje27-10-2011, 12:43 (UTC)    
Título del mensaje:

Gracias y mucha suerte con tu web!
Mensaje27-10-2011, 20:25 (UTC)    
Título del mensaje:

euridicecabanes escribió:
Gracias y mucha suerte con tu web!


De nada y gracias a ti por los buenos deseos.


A ver, de momento he alcanzado objetivo, combinando una solución a base de CSS y tablas html colocadas por encima de página.., para cerrar tablas, colocando los cierres por debajo de página.


El resultado parece bueno (revisad aquí): <b> http://www.webmicro.es.tl </b> pero se descuadra y se repiten algunos objetos al achicar pantalla si se utiliza:

· Cntrl- o bien..,
· Ctrl y scroll del mouse.


Probaré a sustituir las tablas por contenedores div a ver si así no se descuadran los objetos por agrandar o achicar la pantalla.


Los objetos que se descuadran son estos cinco:

· http://img.webme.com/pic/w/webmicro/cont2_bg.png
· http://img.webme.com/pic/w/webmicro/cont_bg.png
· http://img.webme.com/pic/w/webmicro/cont_bottom.png
· http://img.webme.com/pic/w/webmicro/cont_top.png
· http://img.webme.com/pic/w/webmicro/footer.png
· http://theme.webme.com/designs/iceblue/images/navi_ende.gif

Si podeis ayudarme con el código CSS a aplicar a esos cinco objetos para que no se repitan cuando se achica la pantalla, con eso, estaría solucionado.

Pido disculpas, ya se que tengo que estudiarme a fondo un buen Tutorial de CSS y dejar de hacer preguntas pero es que no saco tiempo...

Un saludo,


Ultima edición por webmicro el Jue Oct 27, 2011 4:30 pm; editado 3 veces
Mensaje28-10-2011, 00:42 (UTC)    
Título del mensaje:

webmicro escribió:

· Cntrl- o bien..,
· Ctrl y scroll del mouse.

Probaré a sustituir las tablas por contenedores div a ver si así no se descuadran los objetos por agrandar o achicar la pantalla.


Hola,
los botones Ctrl y scroll del mouse o mas bien ctrl + (aumentar) y - (disminuir)

Estas funciones, no te visualizará las resoluciones de cada pc, estas funciones son acercamiento (zoom) en lo cual no te confundas que son las resoluciones, usted puede darte cuenta que la resolucion nunca va a cambiar tras esas funciones que estes haciendo, sin tener cambiar cada rato las medidas de las imagenes. Mira aqui => http://master-nemesis.es.tl/Resolucion.htm

y visualiza esta página donde se verá correctamente el resultado de las resoluciones => http://browsershots.org/

Sobre las medidas, usted la puede ajustar atraves del código dado para agrandar la web. te lo marcaré en rojo, será lo que tienes y puedes modificar sobre los anchos de los header , botones etc..

Cita:
<!-- --------------------------------------------------- -->
<!-- Inicio: Ensanchar plantilla ICE BLUE -->
<!-- --------------------------------------------------- -->

<style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;
background-position:center;background-repeat:no-repeat; }
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>
<!-- --------------------------------------------------- -->
<!-- Final : Ensanchar plantilla ICE BLUE -->
<!-- --------------------------------------------------- -->


Lo cambias por otros numeros.

Saludos.
______________
Mensaje28-10-2011, 01:54 (UTC)    
Título del mensaje:

Un millón de gracias master-nemesis

En tu web: http://master-nemesis.es.tl/Centrar-Plantilla.htm ví este code que me faltaba:

Código:


Para que qede centrada nuestra plantilla iceblue, necesitaremos colocar un codigo en la parte de Editar Diseño => Configuraciónes Avanzadas => Texto por encima de la página.

Colocaremos el siguiente código.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http:/www.w3.org/1999/xhtml">
<div style="width:900px; position: relative; margin-left: auto; margin-right: auto;">


Luego de haber puesto el codigo, damos en Guardar y nos vamos a nuestra página para visualizar el cambio.



He cambiado el ancho de 900px a 1230px así

<div style="width:1230px; position: relative; margin-left: auto; margin-right: auto;">

eliminé las tablas que puse... et vóilà..!

Plantilla ampliada a un ??% centrada y escalable !!! FUNCIONA.

Hay que tener en cuenta que yo buscaba poder escribir mas texto en horizontal para la caja central; no solo escalar el ancho de la caja y su texto.

Mi código definitivo por encima de página queda así:

Código:



<!-- ------------------------------------------------------ -->
<!-- Inicio: Ocultar la "headline" de la web      -->
<!-- ------------------------------------------------------ -->

<style type="text/css">
td.headline {display:none;}
</style>

<!-- ------------------------------------------------------ -->
<!-- Final : Ocultar la "headline" de la web     -->
<!-- ------------------------------------------------------ -->

<!-- ------------------------------------------------------ -->
<!-- Inicio: Ocultar ea banner ICE BLUE standar     -->
<!-- ------------------------------------------------------ -->

<style type="text/css">

td.edit_header_full{background-image:url(http://img.webme.com/pic/w/webmicro/header.png);background-color:;display:none;}

</style>

<!-- ------------------------------------------------------ -->
<!-- Final : Ocultar ea banner ICE BLUE standar     -->
<!-- ------------------------------------------------------ -->



<!-- ------------------------------------------------------ -->
<!-- Inicio: Ensanchar plantilla ICE BLUE      -->
<!-- ------------------------------------------------------ -->

<style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;
background-position:center;background-repeat:no-repeat; }
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 10% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 10% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>

<!-- ------------------------------------------------------ -->
<!-- Final : Ensanchar plantilla ICE BLUE       -->
<!-- ------------------------------------------------------ -->

<!-- --------------------------------------------------- -->
<!-- Inicio: Ensanchar objetos ICE BLUE   -->
<!-- --------------------------------------------------- -->

<style type="text/css">

td.edit_header_full{background-image:url(http://img.webme.com/pic/w/webmicro/header.png);background-color:;}

td.edit_content_top{background-image:url(http://img.webme.com/pic/w/webmicro/cont_top.png);background-color:;background-repeat:no-repeat;}

td.edit_content{background-image:url(http://img.webme.com/pic/w/webmicro/cont2_bg.png);background-color:;background-repeat:no-repeat;}

td.edit_content_bottom{background-image:url(http://img.webme.com/pic/w/webmicro/cont_bottom.png);background-color:;background-repeat:no-repeat;}

td.edit_rechts_cbg{background-image:url(http://img.webme.com/pic/w/webmicro/cont_bg.png);background-color:;background-repeat:no-repeat;}

td.edit_content_bottom2{background-image:url(http://img.webme.com/pic/w/webmicro/footer.png);background-color:;background-repeat:no-repeat;}

</style>

<!-- --------------------------------------------------- -->
<!-- Final : Ensanchar objetos ICE BLUE   -->
<!-- --------------------------------------------------- -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http:/www.w3.org/1999/xhtml">

<div style="width:1230px; position: relative; margin-left: auto; margin-right: auto; align: center;">

<img src="http://img.webme.com/pic/w/webmicro/headerwebmicro.png" border="0">

<center>





Las imágenes ampliadas a tamaño: width=862px: y declaradas "background-repeat:no repeat;" son:

· http://img.webme.com/pic/w/webmicro/cont2_bg.png (1)
· http://img.webme.com/pic/w/webmicro/cont_bg.png
· http://img.webme.com/pic/w/webmicro/cont_bottom.png
· http://img.webme.com/pic/w/webmicro/cont_top.png
· http://img.webme.com/pic/w/webmicro/footer.png

(1) esta además hubo que ampliarle el height para poder colocarle el no-repeat

Eso fué todo. Pueden comprobar aquí: www.webmicro.es.tl






Tema Resuelto. por mi parte se puede cerrar


Ultima edición por webmicro el Jue Oct 27, 2011 10:11 pm; editado 4 veces
Mensaje28-10-2011, 03:27 (UTC)    
Título del mensaje:

Que bueno que fue todo exitoso, la página se ve en perfecto estado con esos cambios, cualquier otra dudas, sabes que aqui estamos para ayudar en la contrucción de páginas.

Saludos y exitos.
______________
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group