Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje31-12-2012, 02:09 (UTC)    
Título del mensaje: [A resolver] Ampliar Plantilla Colourful (Resuelto)

Tengo casi conseguida la ampliación del bloque izquierdo de la plantilla Colourful. :Pero me falta el "casi".

Lo que ya he conseguido:

Colocar en texto por encima de página este código:

Código:


<!-- ====================== -->
<!-- DESDE AQUI: CODIGO CSS -->
<!-- ====================== -->

      <!-- =========================== -->
      <!-- DESDE AQUI: CAMBIO DE STYLE -->
      <!-- =========================== -->

      <style type="text/css">
         <!--
               body { font-family:Verdana; font-size:10px; text-decoration:none; margin: 0% 0% 0% 0%; }
               .headline { font-family:Verdana; font-size:10px; font-style:none; color:white; text-decoration:none; }
               .cont, TD { font-family:Verdana; font-size:10px; font-style:none; color:#818181; text-decoration:none; }
               a { font-family: Verdana; color:#172F47; text-decoration: none;   font-size:10px}
               a:visited { font-family: Verdana; color:#172F47; text-decoration: none;   font-size:10px}
               a:hover { font-family: Verdana; color:#e12e76; text-decoration: none;   font-size:10px}
               #webme_footer_textlink_dont_hide { color: ; background-color: ; }
         //-->
      </style>

      <!-- =========================== -->
      <!-- HASTA AQUI: CAMBIO DE STYLE -->
      <!-- =========================== -->

      <!-- ======================================== -->
      <!-- DESDE AQUI: Ensanchar objetos FULL COLOR -->
      <!-- ======================================== -->

      <style type="text/css">
         <!--
            td.edit_header2 {
            background-image:url(http://theme.webme.com/designs/colourful/images_gelb/header.jpg);
            background-color:;
            background-repeat:no-repeat; }

            td.edit_content_header {
            background-image:url(http://theme.webme.com/designs/colourful/images_gelb/cont_head_bg.gif);
            background-color:;
            background-repeat:no-repeat; }
         //-->
      </style>

      <!-- ======================================== -->
      <!-- HASTA AQUI: Ensanchar objetos FULL COLOR -->
      <!-- ======================================== -->

      <!-- ============================================ -->
      <!-- Inicio: Sustituir objetos FULL COLOR estandar -->
      <!-- ============================================ -->

      <style type="text/css">
         <!--
            td.edit_header2 {
            background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
            background-repeat:no-repeat;
            width: 1150px;
            height: 141px; }

            td.edit_content_header {
            background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
            background-color:;
            background-repeat:no-repeat;
            width: 671px;
            height: 36px; }
         //-->
      </style>

      <!-- ============================================ -->
      <!-- Final : Sustituir objetos FULL COLOR  estandar -->
      <!-- ============================================ -->

<!-- ====================== -->
<!-- HASTA AQUI: CODIGO CSS  -->
<!-- ====================== -->

<!-- ========================== -->
<!-- DESDE AQUI: CENTRAR LA WEB -->
<!-- ========================== -->

<!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;">

<!-- ========================== -->
<!-- HASTA AQUI: CENTRAR LA WEB -->
<!-- ========================== -->



He alargado en 150px las siguientes imagenes:

El banner superior
La cabecera para el titulo del punto de menu en curso
La linea de separación
La subcabecera del bloque izquierdo

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"

en estos dos bloques:

Cita:



<table width="1000" border="0" cellpadding="0" cellspacing="0">


y unas 18 lineas mas abajo...



<table width="1000" border="0" cellpadding="0" cellspacing="0">






3º - Hay cuatro lineas de código en los que se muestra una imagen (la de la linea de separación) con width="521" que tengo que cambiar a width="671"

Las cuatros lineas son como este bloque:

Cita:


<td height="3"><img src="http://theme.webme.com/designs/colourful/images_gelb/line.gif" width="521" height="3"></td>



4º - Además necesito cambiar esa imagen por esta otra

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
Mensaje31-12-2012, 20:34 (UTC)    
Título del mensaje:

Hola,

¿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.
______________
Mensaje31-12-2012, 21:35 (UTC)    
Título del mensaje: ?? ????? ?????? ????? ?? ??? ???

[list=disc][/list], [list=circle][/list], or [list=square][/list].
?? ????? ?????? ????? ?? ??? ??? ????? ???? ?????????, ??́????, ?? ?? ??????? ❤️

    ???
    ᅚᅚ

    ★ ★ ★ ★ ☆




    █▬█ █ ▀█▀



  1. Go to the shops
  2. Buy a new computer
  3. Swear at computer when it crashes


?


  1. The first possible answer
  2. The second possible answer
  3. The third possible answer




  1. The first possible answer
  2. The second possible answer
  3. The third possible answer



Visit phpBB!


https://www.phpbb.com/



no.one@domain.adr

[img]https://wtheme.webme.com/smiles/icon_mrgreen.gif[/img]


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
Mensaje31-12-2012, 22:38 (UTC)    
Título del mensaje:

skulldarknight escribió:
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í:


Texto por encima de página:

Código:


<!-- ====================== -->
<!-- DESDE AQUI: CODIGO CSS  -->
<!-- ====================== -->

      <!-- ========================== -->
      <!-- DESDE AQUI: CAMBIO DE STYLE -->
      <!-- ========================== -->

   <style type="text/css">
   <!--
      body { font-family:Verdana; font-size:12px; text-decoration:none; margin: 0% 0% 0% 0%; }
      .headline { font-family:Verdana; font-size:12x; font-style:none; color:white; text-decoration:none; }
      .cont, TD { font-family:Verdana; font-size:12px; font-style:none; color:#818181; text-decoration:none; }
      a { font-family: Verdana; color:#0000FF; text-decoration: none;   font-size:12px}
      a:visited { font-family: Verdana; color:#0000FF; text-decoration: none;   font-size:12px}
      a:hover { font-family: Verdana; color#0000FF; text-decoration: none; color: #FF0000; font-size:12px}
        #webme_footer_textlink_dont_hide {
color: ;
background-color: ;
}         //-->
   </style>

      <!-- ========================== -->
      <!-- HASTA AQUI: CAMBIO DE STYLE  -->
      <!-- ========================== -->

      <!-- ======================================== -->
      <!-- DESDE AQUI: Ensanchar objetos FULL COLOR -->
      <!-- ======================================== -->

<style type="text/css">

td.edit_header2 {
   background-image:url(http://theme.webme.com/designs/colourful/images_gelb/header.jpg);
   background-color:;
   background-repeat:no-repeat; }

td.edit_content_header {
   background-image:url(http://theme.webme.com/designs/colourful/images_gelb/cont_head_bg.gif);
   background-color:;
   background-repeat:no-repeat; }

</style>

      <!-- ======================================== -->
      <!-- HASTA AQUI: Ensanchar objetos FULL COLOR -->
      <!-- ======================================== -->

      <!-- =========================================== -->
      <!-- DESDE AQUI: Sustituir objetos COLOURFUL estandar -->
      <!-- =========================================== -->

<style type="text/css">

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 1150px;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-color:;
   background-repeat:no-repeat;
   width: 671px;
   height: 36px; }


   </style>

      <!-- =========================================== -->
      <!-- HASTA AQUI: Sustituir objetos COLOURFUL estandar -->
      <!-- =========================================== -->

<!-- ====================== -->
<!-- HASTA AQUI: CODIGO CSS  -->
<!-- ====================== -->

<!-- ====================================================== -->
<!-- DESDE AQUI: ALINEAR LA WEB AL MARGEN IZQUIERDO DE 50px -->
<!-- ====================================================== -->

<div style="width 100%px; margin-left: 55px; margin-right: auto;">

<!-- ====================================================== -->
<!-- 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
Mensaje31-12-2012, 22:42 (UTC)    
Título del mensaje:

master-nemesis escribió:
Hola,

¿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...

Gracias por la ayuda. Feliz Año..!
Mensaje01-01-2013, 01:04 (UTC)    
Título del mensaje:

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

Mensaje01-01-2013, 02:25 (UTC)    
Título del mensaje:

skulldarknight escribió:


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... )

pero son dos líneas de HTML así:

Código:


<table width="1000" border="0" cellpadding="0" cellspacing="0">




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

son lineas así:

Código:


<td height="3"><img src="http://theme.webme.com/designs/colourful/images_gelb/line.gif" width="521" height="3"></td>



En otro órden de cosas.

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
Mensaje01-01-2013, 03:06 (UTC)    
Título del mensaje:

Hola que tal revize la captura y lo mas parecido a lo qu expones es esto..

Esto ponlo por arriba
Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
* {
font-family: 'Aldrich', sans-serif;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{
width 100%;}

body{padding-left: 40px; padding-right: 40px;}

.edit_nav_bg{
min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:671px;}

table tbody tr td.cont div{
padding: 7px;
min-width: 100%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.color table tbody tr td  table{width:100%;}

.edit_rechts_header{width: 193px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:no-repeat;
   width: 671px;
   height: 36px; }

 </style>

<center>
<div class="color" id="ferchi">


y esto debajo de la pagina:

Código:
</div>




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
Mensaje01-01-2013, 15:36 (UTC)    
Título del mensaje:

skulldarknight escribió:
Hola que tal revize la captura y lo mas parecido a lo qu expones es esto..

Esto ponlo por arriba
Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
* {
font-family: 'Aldrich', sans-serif;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{
width 100%;}

body{padding-left: 40px; padding-right: 40px;}

.edit_nav_bg{
min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:671px;}

table tbody tr td.cont div{
padding: 7px;
min-width: 100%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.color table tbody tr td  table{width:100%;}

.edit_rechts_header{width: 193px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:no-repeat;
   width: 671px;
   height: 36px; }

 </style>

<center>
<div class="color" id="ferchi">


y esto debajo de la pagina:

Código:
</div>




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
Mensaje01-01-2013, 19:12 (UTC)    
Título del mensaje:

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

esto por encima...

Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
* {
font-family: 'Aldrich', sans-serif;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{
width 100%;}




.edit_nav_bg{
min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

.color table tbody tr td table tbody tr td.cont div{
padding-left: 7px;
min-width: 98%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.copy{width: 231px;
min-height:25px;
background-color: #000;
border: 6px solid #F79F81;
color:#fff;
text-align:center;
padding-top:10px;}

.headline{ text-align:center;}

.edit_header2 table tbody tr td{padding-top: 40px;min-width: 615px;}

.color table tbody tr td table tbody tr td table tbody tr td table tbody{text-align:left;}

.edit_rechts_header{width: 223px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:repeat;
   width: 671px;
   height: 36px; }
td iframe{border: 6px solid #F79F81;}
 </style>

<center>
<div class="color" id="ferchi">



esto por debajo..
Código:

</div>



y esto ultimo en Advertencia referente a la navegacion
Código:
<div class="copy" id="ferchi">Copyright de la web</div>
Mensaje01-01-2013, 23:00 (UTC)    
Título del mensaje:

Gracias skulldarknight,

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.

Mira aquí http://studiowebbackstage.es.tl/Home.htm

· 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.
Mensaje02-01-2013, 07:28 (UTC)    
Título del mensaje:

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

aber asii..

cambia y ponlo asi
es una prueba

aqui cambio min-width: 772px;
Código:
.color table tbody tr td table tbody tr td.cont div{
padding-left: 7px;
min-width: 772px;
font-size: 105%;
-webkit-font-smoothing: antialiased;}


y aca cambiopadding-left:100%;

Código:

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:100%;}


son dos, note vayasa confundir , no son el mismo

le digo que quiero el contenido en 772px; y que las lines siempre esten al maximo para que no se corten o alarguend e mas

no lo eh probado pero en mi mente deberia de funsionar

(sustituye solo estas partes)

estoy usando solo el mismo codigo que te pase en mi web de pruebas


Ultima edición por skulldarknight el Mie Ene 02, 2013 3:30 am; editado 1 vez
Mensaje02-01-2013, 16:50 (UTC)    
Título del mensaje:

skulldarknight escribió:
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

aber asii..

cambia y ponlo asi
es una prueba

aqui cambio min-width: 772px;
Código:
.color table tbody tr td table tbody tr td.cont div{
padding-left: 7px;
min-width: 772px;
font-size: 105%;
-webkit-font-smoothing: antialiased;}


y aca cambiopadding-left:100%;

Código:

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:100%;}


son dos, note vayasa confundir , no son el mismo

le digo que quiero el contenido en 772px; y que las lines siempre esten al maximo para que no se corten o alarguend e mas

no lo eh probado pero en mi mente deberia de funsionar

(sustituye solo estas partes)

estoy usando solo el mismo codigo que te pase en mi web de pruebas




Hola skulldarknight, Tranquilo, ya me has ayudado muchísimo. Gracias. (revisaré cuando pueda tus últimos codes).

No obstante, no te preocupes:

Lo de la raya ya no es problema.


SOLUCION
Lo solucioné escalando la imagen original de la plantilla, por tanto no es necesario sustituirla por otra de width mas ancho.

Usé este código para arreglarlo:

Texto por encima de página:

Código:


<!-- =================================================== -->
<!-- DESDE AQUI ESCALAR IMAGEN line.gif DE 521px a 771px -->
<!-- =================================================== -->
      <style type="text/css">
      <!--
         img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"]
         {
         background-repeat:no-repeat;height:3px;width:771px;padding-left:0px;
         }
         //-->
      </style>
<!-- =================================================== -->
<!-- HASTA AQUI ESCALAR IMAGEN line.gif DE 521px a 771px -->
<!-- =================================================== -->



Aquí se ve como queda

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:

Código:


<style type="text/css">
      <!--
      .cont>div[style="width: 510; overflow: auto;"]
      {
      width:760px!important;
      }
      //-->
     </style>



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.

Aquí se ve como queda

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
Mensaje02-01-2013, 21:04 (UTC)    
Título del mensaje:

Bueno ahi que ir por pasos xD
Que navegador usas?

Que editor usas para modificar los codigos?

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.
Mensaje02-01-2013, 21:06 (UTC)    
Título del mensaje:

las imagenes eran los resultados y bueno pues Aca esta el codigo:

Pega esta parte por encima


Código:
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>

<style type="text/css">
.color table tbody tr td table tbody tr td.cont div {
font-family: 'Aldrich', sans-serif;}

.edit_content_header2{background: url("http://img.webme.com/pic/s/studiowebbackstage/cat_bg.png"); height:55px; }

body div{width 100%;}




.edit_nav_bg{min-width:243px;}

img[src="http://theme.webme.com/designs/colourful/images_gelb/line.gif"] { background-image:url(http://img.webme.com/pic/s/studiowebbackstage/line.png);background-repeat:no-repeat;height:0px;width:0px;padding-left:772px;}

.color table tbody tr td table tbody tr td.cont div{
overflow: hidden;
padding-left: 7px;
padding-top: 7px;
min-width: 99%;
font-size: 105%;
-webkit-font-smoothing: antialiased;}

.copy{width: 231px;
min-height:25px;
background-color: #000;
border: 6px solid #F79F81;
color:#fff;
text-align:center;
padding-top:10px;
padding-bottom:2px;
position: relative; left: -3px;top: -10px;}

.headline{padding:13px 5px; text-align:center;}
.headline strong{position: relative; left: -7px; }

.headline strong{position: relative; left: -7px; }


.edit_content_header table tbody tr .headline strong{text-transform:uppercase;}
.edit_content_header table tbody tr td.headline{position: relative; left: -7px; min-width: 185px; }

.edit_header2 table tbody tr td{padding-top: 20px;min-width: 615px;min-height: 150px;}

.color table tbody tr td table tbody tr td table tbody tr td table tbody{text-align:left;}

.edit_rechts_header{width: 223px;}

.edit_nav_header{width: 243px;}

.edit_content_header table tbody tr td.headline{text-align: center;}

.edit_header2 table tbody tr td font{
text-transform:capitalize;
line-height:200%;
text-shadow: 1px 1px 2px #000;
letter-spacing: 5px;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00B6EF, 0 0 30px #00B6EF, 0 0 40px #00B6EF, 0 0 50px #00B6EF, 0 0 75px #00B6EF;}

td.edit_header2 {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/header.png);
   background-repeat:no-repeat;
   width: 100%;
   height: 141px; }

td.edit_content_header {
   background-image:url(http://img.webme.com/pic/s/studiowebbackstage/cont_head_bg.png);
   background-repeat:repeat;
   width: 671px;
   height: 36px; }
td iframe{border: 6px solid #F79F81;}
 </style>

<center id="centrarribayabajo" >
<div class="color" id="ferchi">



esta por debajo:
Código:
</div>



esto en el campo de copyright
Código:
<div class="copy" id="ferchi">
Copyright de la pagina</div>



No edites nada pruebalo tal cual lo pongo driectamente en pwg.


Ultima edición por skulldarknight el Mie Ene 02, 2013 5:07 pm; editado 2 veces
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group