<!-- ============================================ -->
<!-- Final : Sustituir objetos FULL COLOR estandar -->
<!-- ============================================ -->
En mi pc, que puedo tocar lo que quiera... Funciona perfectamente: Aquí se ve la foto de como queda en una pantalla de 1280X800.
Para lograr que funcione en el host de PWG necesito que ALGUIEN ME AYUDE a resolver lo siguiente:
1º - Necesito sustituir la imagen: Esta de 521px por esta de 671px.
No puedo hacerlo con CSS porque no es un background en un elemento de tabla, ni pertenece a una clase.
2º - Hay dos tablas con width="1000" que necesito cambiar a width="1150"
Estos dos últimos problemas puedo resolverlos con CSS porque no están en el background de un <td> con una "clase id"
El "width" de las dos tablas de 1000px. de antes, tampoco puedo resolverlo por CSS porque tampoco son tablas con una "clase id".
Seguramente habrá alguna manera, pero no doy con ella. Espero que a alguno de vosotros se le ocurra algo.
Gracias.
Ojo:
Si alguien quiere usar las imagenes, por favor, que se la copie a su pc y se las suba a su propio hosting. No respondo, si mas adelante decido eliminarlas, cambiarles el nombre, el tamaño o lo que sea.
Ultima edición por studiowebbackstage el Sab Ene 05, 2013 9:03 pm; editado 16 veces
¿Es un aporte o exactamente tienes algun problema con el diseño? No entendi bien el post, lo que veo es que el header es demasiado ancho y sobra un espacio largo, deberia achicarlo.
Pon imagenes de lo que quieres lograr y enseguida te lo solucionamos
s??
Animales y naturaleza
sobre tu codigo tienes esto...
?
<!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 100%px; position: relative; margin-left: 55px; margin-right: auto;">
lo que te puse en color rojo no lo necesitas eso borralo
y no entiendo porque dice
<!-- DESDE AQUI: CENTRAR LA WEB -->
si lo que te marque en negritas esta diciendo que le de espacio a la derecha?
eso no esta centrado nada
para centrarlo debe ser asi..
<div style="width 100%px; position: relative; margin-left: auto; margin-right: auto; >
luego si especificas relative? pero no le asignas valores...
porque?
Ahora que mi idea para centrar la web sin tantos lios ni codigos es
para centrar la web usa esto... pegalo en un box
Código:
body div{width 100%px; margin-left: auto; margin-right: auto; }
deberia de centrar la web sin tanto codigo
Ultima edición por skulldarknight el Dom Abr 14, 2019 5:53 am; editado 7 veces
Pon imagenes de lo que quieres lograr y enseguida te lo solucionamos
Hay imágenes. Revisa los enlaces.
skulldarknight escribió:
sobre tu codigo tienes esto...
<!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 100%px; position: relative; margin-left: 55px; margin-right: auto;">
lo que te puse en color rojo no lo necesitas eso borralo
y no entiendo porque dice
<!-- DESDE AQUI: CENTRAR LA WEB -->
si lo que te marque en negritas esta diciendo que le de espacio a la derecha?
eso no esta centrado nada
Lo rojo no existe. Es un error de copy/paste. Pero gracias.
skulldarknight escribió:
para centrarlo debe ser asi..
<div style="width 100%px; position: relative; margin-left: auto; margin-right: auto; >
No me funciona. Abajo pongo lo que si me funciona y como lo voy a dejar hasta que haya una solución mejor.
skulldarknight escribió:
luego si especificas relative? pero no le asignas valores...
porque?
Error por mi parte. Tienes toda la razón. "position: relative" ELIMINADO. Gracias.
skulldarknight escribió:
Ahora que mi idea para centrar la web sin tantos lios ni codigos es
para centrar la web usa esto... pegalo en un box
Código:
body div{width 100%px; margin-left: auto; margin-right: auto; }
deberia de centrar la web sin tanto codigo
Lo he probado en mi local host pero no funciona. Deja la web alineada a la izquierda a margen cero.
A parte de los puntos en problema aún sin resolver lo que ya está resuelto queda así:
<!-- ====================================================== -->
<!-- DESDE AQUI: ALINEAR LA WEB AL MARGEN IZQUIERDO DE 50px -->
<!-- ====================================================== -->
<!-- ====================================================== -->
<!-- HASTA AQUI: ALINEAR LA WEB AL MARGEN IZQUIERDO DE 50px -->
<!-- ====================================================== -->
<!-- ======================================== -->
<!-- DESDE AQUI: CENTRAR LA PUBLICIDAD DE PWG -->
<!-- ======================================== -->
<center>
<!-- ======================================== -->
<!-- HASTA AQUI: CENTRAR LA PUBLICIDAD DE PWG -->
<!-- ======================================== -->
Gracias por la ayuda. Por favor trata de concentrarte en los puntos en problema pendientes de resolver. Gracias.
Feliz Año.
Ultima edición por studiowebbackstage el Mar Ene 01, 2013 10:17 am; editado 2 veces
¿Es un aporte o exactamente tienes algun problema con el diseño? No entendi bien el post, lo que veo es que el header es demasiado ancho y sobra un espacio largo, deberia achicarlo.
Saludos.
Hola, gracias por interesarte en el asunto. En parte, mi post es un aporte (solo en la parte que digo que ya está resuelta y funciona en PWG).
En parte, necesito ayuda, con los puntos que digo faltan por resolver.
En los enlaces del post hay fotos. Si puedes revisa y por favor, concentrate en los puntos pendientes de resolver, que aunque a mi me funcionan en local host, solo porque yo aqui puedo tocar html, pero sería imposible hacerlo con el kit de construcción a menos que demos con alguna maera mediante CSS o javascript para cambiar el ancho de una tabla de 1000px a 1150px, una imagen por otra (hay dos) que no están ni en un background de una tabla ni tiene una class id...
te mande imbox pero lo podemos resolver tambien por aqui r.r
el unico problema que le encontre fue el de que sis e hace la web al 100 para todas las resoluciones fallara engrandes y solo se vera a mi parecer perfecta en una dee 1024
te mande imbox pero lo podemos resolver tambien por aqui r.r
el unico problema que le encontre fue el de que sis e hace la web al 100 para todas las resoluciones fallara engrandes y solo se vera a mi parecer perfecta en una dee 1024
pero no se sigo probando r.r
te dejo una captura de lo que logre
Recibido el inbox, respondo por aquí, así los progesos le servirán a todo el mundo.
Esta es la foto de lo que yo he conseguido en mi local host.
Incluye lo que he citado que puse en texto por encima de página y además resueltos los problemas pendiente pero solo en mi PC "PROVISIONALMENTE" tocando HTML.
LA CAPTURA DE LO QUE CONSEGUI YO <-- visto en un Laptop de 1280px X 800px
BIEN, LO QUE SE NECESITA RESOLVER para que además funcione en PWG es:
1º - Hay que modificar el width de las dos tablas de 1000px a 1150px (no sé, si con CSS o con un script o como... )
2º Mediante CSS (supongo) o un script, las dos imágenes que dije:
2º.1 - Sustituir: - La línea de separación que se llama originalmente "http://theme.webme.com/designs/colourful/images_gelb/line.gif "
por la imagen - que cité en tercer lugar y que se llama: "http://img.webme.com/pic/s/studiowebbackstage/line.png"
2º.2 - Sustituir - La subcabecera del bloque izquierdo que se llama originalmente: "http://theme.webme.com/designs/colourful/images_gelb/cat_bg.gif"
por la imagen - que cité en cuarto lugar que se llama: "http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"
3º - Cambiar en las cuatro lineas de código que sale la linea de separación el width de la imagen de 521px a 671px
Si la plantilla se ve en monitores superiores a 1280px obviamente quedará mas espacio a la derecha. En tal caso, para que la solución sirva para todas las pantallas, seguramente habría que incluir CSS con propiedades en las imagenes y/o en los background, "repeat: no-repeat".
También posiblemente habría que procurar colocar el diseño centrado con los margenes auto... Pero eso son problemas que se pueden resolver fácilmente con CSS.
Los problemas, para los que pido ayuda, porque me estoy rompiendo la cabeza, buscando la manera, son:
La sustitución automatica de esas dos imagenes .gif, de 521px por las otras dos imagenes.png ampliadas a 671px
El cambio automático de esas dos tablas de 1000px a 1150px
y el cambio automático de esas cuatro lineas de imagen width=521, por width=671, que están dentro de un TD.
Si conseguimos esto, ya iremos solucionando, mejorando, perfeccionando, mas cosas para que los cambios a la plantilla Colourfull queden disponibles a todos los usuarios en todos los colores y para todas las resoluciones.
Este primer intento es solo eso, el primer intento.
Gracias, por tu ayuda.
Ultima edición por studiowebbackstage el Lun Dic 31, 2012 10:53 pm; editado 3 veces
Si me equivoque en algo dimelo y enseguida lo revizo :D
le agregue unas pequeñas modifiaciones
Edito: aclaro que lo hize funcionar para 1024 pero el cuadrod e las paginas se veia cortado por la publicidad y lo modifique para mas pixeles que se ve mejor
ahh y le agregue los espaciados a los lados tambien aunque a mi me agrada mas sin espacios xD
Ultima edición por skulldarknight el Lun Dic 31, 2012 11:10 pm; editado 2 veces
Si me equivoque en algo dimelo y enseguida lo revizo :D
le agregue unas pequeñas modifiaciones
Edito: aclaro que lo hize funcionar para 1024 pero el cuadrod e las paginas se veia cortado por la publicidad y lo modifique para mas pixeles que se ve mejor
ahh y le agregue los espaciados a los lados tambien aunque a mi me agrada mas sin espacios xD
Hola,
He aplicado ese code directamente en PWG y no funciona.
Mira esta captura
PROBLEMAS QUE VEO:
1º - La cabecera del bloque izquierdo se repite un poco
2º - El título del bloque izqueirdo no sale en su sitio alineado a a izquierda
3º - La imagen de fondo del titulo del bloque izquierdo sale mas corta que el ensanchado izquierdo
4º - El bloque derecho (boxes) está un poco mas ancho de lo que debería
5º - No salen las cuatro líneas de separación
6º - - Sale un scroll horinzontal (abajo a la izquierda) en el bloque izquierdo de la web
7º - Si escalas las web con Control- o con el scroll del ratón, se desproporciona y se repiten imagenes.
No se si el problema es que debería haber mantenido algo del code que puse yo y a eso añadir el tuyo, integrar ambos o que...
Voy a hacer pruebas.
No entiendo el último div por encima de página,de tu aporte:
Código:
<div class="color" id="ferchi">
¿De donde sale, donde se aplica, donde mas se usa ese div?
Sigo haciendo pruebas. Ya te diré si avanzo algo...
Ultima edición por studiowebbackstage el Mar Ene 01, 2013 2:18 pm; editado 3 veces
1º - La cabecera del bloque izquierdo se repite un poco
esto si pasa porque estaba manejando porcentajes del 100 y se estiraba
2º - El título del bloque izqueirdo no sale en su sitio alineado a a izquierda
esa fue una modificacion que hize porque no me gusto en la izquierda y lo centre
puedes dejarlo como estaba quitando este codigo
.edit_content_header table tbody tr td.headline{text-align: center;}
3º - La imagen de fondo del titulo del bloque oizquierdo sale mas corta que el ensanchado izquierdo
si por el porcentaje y el tamaño que le asigne a las lineas cortas
4º - El bloque derecho (boxes) está un poco mas ancho de lo que debería
si tambien era porque la web estaba al 100%
5º - No salen las cuatro líneas de separación
aqui no entendi cuales 4 lineas :s
sustitui las de la plantilla por las negras que me diste
6º - - Sale un scroll horinzontal (abajo a la izquierda) en el bloque izquierdo de la web
si esto era por el tamaño que le asigne se cambiaba en resolucion y afectaba por el padding de la izquierda pero le modique un poco aber si ahora ya no afecta
7º - Si escalas las web con Control- o con el scroll del ratón, se desproporciona y se repiten imagenes.
sii al ser la web al 100% y los elementos no sean fijos sucede eso pero ya lo cambie
No entiendo el último div por encima de página,de tu aporte:
Es para estilizar unas cosas mas rapido agregando una class especial
como aqui
.color table tbody tr td table{width:100%;}
lo cambie porque no me agrado ahorita agregue 2 divs mas para otras modificaciones
...
Prueba estas modificaciones ahora le agregue une stilo para el copyright y otras cosillas r.r
De momento voy probando por mi cuenta y mas o menos lo tengo. Aún no he revisado esta aultima aportación tuya. Pero bueno, con lo anterior me he apañado bastante.
· Ya no me sale el scroll de abajo
· En vez de sustituir las lineas las he escalado
Ahora el problema es que con el editor de páginas, aunque el cuerpo es mas ancho, los textos siguen saliendo al ancho de el principio...
¿Tienes tu versión en linea en alguna URL para verla ?
Me gustaría revisar tu code sin tener que cambiar el mío por el tuyo. Es que vamos cada uno por su idea y sería mejor poder ver la de cada cual por separado.
vale perdon pero me canse un poco en ese tema porque tengo proyectos en mente de otras cosillas ademas de mi web y otros pequeños proyectos superficiales y aportes para webme pero me pondre a trabajar para que se solucione eprfecamente esto
solo lo digo porsi me tardo, es poreso no te vayas a desesperar
Y ahora ya entendi lo que dijiste de las lineas, pasa eso porque les habia dado un tamaño ajustalas al 100% pero como el contenido se ve mal quitale el porcentaje y ponle lo del otro
vale perdon pero me canse un poco en ese tema porque tengo proyectos en mente de otras cosillas ademas de mi web y otros pequeños proyectos superficiales y aportes para webme pero me pondre a trabajar para que se solucione eprfecamente esto
solo lo digo porsi me tardo, es poreso no te vayas a desesperar
Y ahora ya entendi lo que dijiste de las lineas, pasa eso porque les habia dado un tamaño ajustalas al 100% pero como el contenido se ve mal quitale el porcentaje y ponle lo del otro
Ahora el siguiente problema es que los contenidos de las páginas en el bloque izquierdo siguen saliendo al ancho original. Por tanto el siguiente objetivo a conseguir es:
¿COMO HACER QUE EL DIV DEL CONTENIDO SE AMPLIE EN 250px. MAS
Para esto, me está ayudando también buzzdungeon, con este aporte para ensanchar el contenido de las páginas del bloque izquierdo:
RESULTADO
Bien, colocado por encima de página, o algo hice mal, o no me funciona. Colocado al principio de cada página, usando el editor de html, funciona perfectamente.
De momento, si no hay otra solución, mejor, esta me vale.
SIGUIENTES PASOS
1º - Que esto último, funcione colocado una sola vez en texto por encima de página (lo ideal) y no haya que colocarlo editando html en cada página.
2º - Buscar solución para todos los anchos de pantalla (+ de 1280px)
3º - Ampliar la solución para que funcione con todos los demás colores de la plantilla (rojo,magenta, azul y verde).
4º - Hacer un tutorial del aporte
5º Publicarlo en PWG para uso de quienes quieran usarlo
Gracias anticipadas a los que colaboraron y a los que ayuden en mejorarlo.
Ultima edición por studiowebbackstage el Mie Ene 02, 2013 6:54 pm; editado 9 veces
substituyes los codigos que tienes por los mios o los encimas?
Mi pantalla es pequeña pero con scroll se ve bien y el del contenido me sale igual bien como lo tengo, uso Mozilla y solo coloco los codigos que te di, solo eso nada mas.
lo que mencionaste del contenido lo corregi probando agregar texto e imagenes extra largas para que no salga la barra ni se sobreexponga o se ponga atraz.
y segun lo use se ve perfecto.
aca esta una preview
Al codigo que te di le agregue algunas modificaciones especiales como:
- El centrado del titulo de la web (antes era a la izquieda)
- Modificacion del campo copyright (borde de color y fondo visible, centrado y pegado a las paginas)
- Copyright alineado a las paginas
- Tipo de fuente usada (Solo en el contenido) antes aplicaba toda
- Centrado de titulo de los box (antes era a la izquieda)
- Substituidas imagenes de lineas (antes eran gris ahora son negras)
- Mejora la vista de la descripcion en la pagina "header" (alargado y con colores de sombra azul) pensado tambien para textos largos
- El campo de contenido tiene espacio automatico a la izquierda <-- nose junta con la orilla
- El campo de contenido puede seguir aumentando y ajustarse a la resolucion del navegador e caso de usar mas pixeles y no se vera la barra
- Bordes en la publicidad (grueso y de color para combinar)
- Centrado para campo de hora y fecha (se habia modificado por el tamaño)
- Campo de titulo de box mas grande (Altura ya que era mas pequeña y no lucia perfecta)
Todo probado y funcionando ademas a prueba de contenido extra grande, muchos nombres de paginas en el box, contenido de los box, textos largos y atributos especiales.
Usa solamente mi codigo y veras que funciona todo como deberia pegalo donde dice y nada mas.
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
<-- visto en un Laptop de 1280px X 800px
- La línea de separación que se llama originalmente "
- que cité en tercer lugar y que se llama: "
- La subcabecera del bloque izquierdo que se llama originalmente: "
- que cité en cuarto lugar que se llama: "
