Volver al Foro de Diseño de páginas Web

Edición de Rodajas

  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 12:44 pm

I en rodajas un diseño usando PS. Tuve la oportunidad de editar los botones de ajuste la imagen al cuadro células de fondo. Esto funcionó muy bien, pero cuando fui a editar el cuadro principal, el texto comienza a cabo en el centro de la caja. Quisiera para empezar en la esquina superior izquierda. ¿Qué debo hacer?

Alguien por favor ayuda. Si necesitas el código fuente, captura, o lo que sea, hágamelo saber. Gracias.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Mayo 20th, 2004, 12:44 pm

  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 12:46 pm

Ok heres el código fuente...Trataré de publicar un instantánea en un segundo.

Código: [ Select ]
TML>
<HEAD>
<TITLE>layout</TITLE>
<style type="text/css">

div {text-align: center; font-size: 12pt; font-family: arial}
#one div {text-align: left; font-size: 12pt; font-family: arial; position: absolute; top: 0%; left: 0%; padding: 0; margin: 0}
a:link {text-decoration: none; color: #ffffff}
a:hover {text-decoration: none; color: #999999}


</style>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#333333 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (layout.psd) -->
<center>
<TABLE WIDTH=786 BORDER=0 CELLPADDING=0 CELLSPACING=0>
    <TR>
        <TD COLSPAN=9 ROWSPAN=2>
            <IMG SRC="images/layout_01.gif" WIDTH=608 HEIGHT=98 ALT=""></TD>
        <TD COLSPAN=3 background="images/topright.gif" WIDTH=178 HEIGHT=82><div style="font-size: 8pt; line-height: 20px">Email: qsa1@bellsouth.net<br/> AIM: Sleepy_Graphiks</div></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=82 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3>
            <IMG SRC="images/layout_03.gif" WIDTH=178 HEIGHT=16 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=8>
            <IMG SRC="images/layout_04.gif" WIDTH=25 HEIGHT=602 ALT=""></TD>
        <TD COLSPAN=3 background="images/button1.gif" WIDTH=145 HEIGHT=33><div><a href="profile.html">Profile</a></div></TD>
        <TD COLSPAN=2 background="images/button2.gif" WIDTH=146 HEIGHT=33><div><a href="pics.html">Pics</a></div></TD>
        <TD COLSPAN=2 background="images/button3.gif" WIDTH=147 HEIGHT=33><div><a href="portfolio.html">Portfolio</a></div></TD>
        <TD background="images/button4.gif" WIDTH=145 HEIGHT=33><div><a href="contact.html">Contact</a></div></TD>
        <TD COLSPAN=2 background="images/button5.gif" WIDTH=157 HEIGHT=33><div><a href="misc.html">Misc</a></div></TD>
        <TD ROWSPAN=8>
            <IMG SRC="images/layout_10.gif" WIDTH=21 HEIGHT=602 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=10>
            <IMG SRC="images/layout_11.gif" WIDTH=740 HEIGHT=33 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=6>
            <IMG SRC="images/layout_12.gif" WIDTH=311 HEIGHT=6 ALT=""></TD>
        
   <TD COLSPAN=3 ROWSPAN=4 background="images/mainbox.gif" WIDTH=401 HEIGHT=476></TD>
        <TD ROWSPAN=6>
            <IMG SRC="images/layout_14.gif" WIDTH=28 HEIGHT=536 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=6 ALT=""></TD>
    </TR>
    <TR>
        
   <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="images/layout_15.gif" WIDTH=9 HEIGHT=249 ALT=""></TD>
        
   <TD COLSPAN=2 background="images/top.gif" WIDTH=228 HEIGHT=223>&nbsp;</TD>
        <TD COLSPAN=2 ROWSPAN=5>
            <IMG SRC="images/layout_17.gif" WIDTH=74 HEIGHT=530 ALT=""></TD>
        
   <TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=223 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=2 background="images/layout_18.gif" WIDTH=228 HEIGHT=26></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=26 ALT=""></TD>
    </TR>
    <TR>
        <TD ROWSPAN=3>
            <IMG SRC="images/layout_19.gif" WIDTH=8 HEIGHT=281 ALT=""></TD>
        <TD COLSPAN=3 ROWSPAN=2>
            <IMG SRC="images/bottom.gif" WIDTH=229 HEIGHT=223 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=221 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3 ROWSPAN=2>
            <IMG SRC="images/layout_21.gif" WIDTH=401 HEIGHT=60 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
    </TR>
    <TR>
        <TD COLSPAN=3>
            <IMG SRC="images/layout_22.gif" WIDTH=229 HEIGHT=58 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=58 ALT=""></TD>
    </TR>
    <TR>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=136 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=127 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=145 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
        <TD>
            <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
        <TD></TD>
    </TR>
</TABLE>
</center>
<!-- End ImageReady Slices -->
</BODY>
</HTML>
  1. TML>
  2. <HEAD>
  3. <TITLE>layout</TITLE>
  4. <style type="text/css">
  6. div {text-align: center; font-size: 12pt; font-family: arial}
  7. #one div {text-align: left; font-size: 12pt; font-family: arial; position: absolute; top: 0%; left: 0%; padding: 0; margin: 0}
  8. a:link {text-decoration: none; color: #ffffff}
  9. a:hover {text-decoration: none; color: #999999}
  12. </style>
  13. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
  14. </HEAD>
  15. <BODY BGCOLOR=#333333 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
  16. <!-- ImageReady Slices (layout.psd) -->
  17. <center>
  18. <TABLE WIDTH=786 BORDER=0 CELLPADDING=0 CELLSPACING=0>
  19.     <TR>
  20.         <TD COLSPAN=9 ROWSPAN=2>
  21.             <IMG SRC="images/layout_01.gif" WIDTH=608 HEIGHT=98 ALT=""></TD>
  22.         <TD COLSPAN=3 background="images/topright.gif" WIDTH=178 HEIGHT=82><div style="font-size: 8pt; line-height: 20px">Email: qsa1@bellsouth.net<br/> AIM: Sleepy_Graphiks</div></TD>
  23.         <TD>
  24.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=82 ALT=""></TD>
  25.     </TR>
  26.     <TR>
  27.         <TD COLSPAN=3>
  28.             <IMG SRC="images/layout_03.gif" WIDTH=178 HEIGHT=16 ALT=""></TD>
  29.         <TD>
  30.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
  31.     </TR>
  32.     <TR>
  33.         <TD ROWSPAN=8>
  34.             <IMG SRC="images/layout_04.gif" WIDTH=25 HEIGHT=602 ALT=""></TD>
  35.         <TD COLSPAN=3 background="images/button1.gif" WIDTH=145 HEIGHT=33><div><a href="profile.html">Profile</a></div></TD>
  36.         <TD COLSPAN=2 background="images/button2.gif" WIDTH=146 HEIGHT=33><div><a href="pics.html">Pics</a></div></TD>
  37.         <TD COLSPAN=2 background="images/button3.gif" WIDTH=147 HEIGHT=33><div><a href="portfolio.html">Portfolio</a></div></TD>
  38.         <TD background="images/button4.gif" WIDTH=145 HEIGHT=33><div><a href="contact.html">Contact</a></div></TD>
  39.         <TD COLSPAN=2 background="images/button5.gif" WIDTH=157 HEIGHT=33><div><a href="misc.html">Misc</a></div></TD>
  40.         <TD ROWSPAN=8>
  41.             <IMG SRC="images/layout_10.gif" WIDTH=21 HEIGHT=602 ALT=""></TD>
  42.         <TD>
  43.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
  44.     </TR>
  45.     <TR>
  46.         <TD COLSPAN=10>
  47.             <IMG SRC="images/layout_11.gif" WIDTH=740 HEIGHT=33 ALT=""></TD>
  48.         <TD>
  49.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=33 ALT=""></TD>
  50.     </TR>
  51.     <TR>
  52.         <TD COLSPAN=6>
  53.             <IMG SRC="images/layout_12.gif" WIDTH=311 HEIGHT=6 ALT=""></TD>
  54.         
  55.    <TD COLSPAN=3 ROWSPAN=4 background="images/mainbox.gif" WIDTH=401 HEIGHT=476></TD>
  56.         <TD ROWSPAN=6>
  57.             <IMG SRC="images/layout_14.gif" WIDTH=28 HEIGHT=536 ALT=""></TD>
  58.         <TD>
  59.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=6 ALT=""></TD>
  60.     </TR>
  61.     <TR>
  62.         
  63.    <TD COLSPAN=2 ROWSPAN=2> <IMG SRC="images/layout_15.gif" WIDTH=9 HEIGHT=249 ALT=""></TD>
  64.         
  65.    <TD COLSPAN=2 background="images/top.gif" WIDTH=228 HEIGHT=223>&nbsp;</TD>
  66.         <TD COLSPAN=2 ROWSPAN=5>
  67.             <IMG SRC="images/layout_17.gif" WIDTH=74 HEIGHT=530 ALT=""></TD>
  68.         
  69.    <TD> <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=223 ALT=""></TD>
  70.     </TR>
  71.     <TR>
  72.         <TD COLSPAN=2 background="images/layout_18.gif" WIDTH=228 HEIGHT=26></TD>
  73.         <TD>
  74.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=26 ALT=""></TD>
  75.     </TR>
  76.     <TR>
  77.         <TD ROWSPAN=3>
  78.             <IMG SRC="images/layout_19.gif" WIDTH=8 HEIGHT=281 ALT=""></TD>
  79.         <TD COLSPAN=3 ROWSPAN=2>
  80.             <IMG SRC="images/bottom.gif" WIDTH=229 HEIGHT=223 ALT=""></TD>
  81.         <TD>
  82.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=221 ALT=""></TD>
  83.     </TR>
  84.     <TR>
  85.         <TD COLSPAN=3 ROWSPAN=2>
  86.             <IMG SRC="images/layout_21.gif" WIDTH=401 HEIGHT=60 ALT=""></TD>
  87.         <TD>
  88.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=2 ALT=""></TD>
  89.     </TR>
  90.     <TR>
  91.         <TD COLSPAN=3>
  92.             <IMG SRC="images/layout_22.gif" WIDTH=229 HEIGHT=58 ALT=""></TD>
  93.         <TD>
  94.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=58 ALT=""></TD>
  95.     </TR>
  96.     <TR>
  97.         <TD>
  98.             <IMG SRC="images/spacer.gif" WIDTH=25 HEIGHT=1 ALT=""></TD>
  99.         <TD>
  100.             <IMG SRC="images/spacer.gif" WIDTH=8 HEIGHT=1 ALT=""></TD>
  101.         <TD>
  102.             <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=1 ALT=""></TD>
  103.         <TD>
  104.             <IMG SRC="images/spacer.gif" WIDTH=136 HEIGHT=1 ALT=""></TD>
  105.         <TD>
  106.             <IMG SRC="images/spacer.gif" WIDTH=92 HEIGHT=1 ALT=""></TD>
  107.         <TD>
  108.             <IMG SRC="images/spacer.gif" WIDTH=54 HEIGHT=1 ALT=""></TD>
  109.         <TD>
  110.             <IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
  111.         <TD>
  112.             <IMG SRC="images/spacer.gif" WIDTH=127 HEIGHT=1 ALT=""></TD>
  113.         <TD>
  114.             <IMG SRC="images/spacer.gif" WIDTH=145 HEIGHT=1 ALT=""></TD>
  115.         <TD>
  116.             <IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=1 ALT=""></TD>
  117.         <TD>
  118.             <IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
  119.         <TD>
  120.             <IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
  121.         <TD></TD>
  122.     </TR>
  123. </TABLE>
  124. </center>
  125. <!-- End ImageReady Slices -->
  126. </BODY>
  127. </HTML>
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 12:48 pm

Además, hay alguna manera de que me puede limpiar esa porquería? No me gusta todas las imágenes spacer y otras cosas. Im nuevo a diseño web por cierto. Así, cualquier explainations debe ser lo más simple posible.
  • rtm223
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Mar 24, 2004
  • Mensajes: 1855
  • Loc: Uk
  • Status: Offline

Nota Mayo 20th, 2004, 1:59 pm

Creo que lo que necesita es añadir
Código: [ Select ]
class="aClassNameThatMakesSense"
en las etiquetas de todos los elementos que desea que la alineación para añadir a continuación:

Código: [ Select ]
.aClassNameThatMakesSense{
  text-align:left;
  vertical-align:top;
}
  1. .aClassNameThatMakesSense{
  2.   text-align:left;
  3.   vertical-align:top;
  4. }

en la etiqueta de estilo. Que debe hacer el truco, pero Im no seguro.


En cuanto a la limpieza...Im suponiendo que se genera el código? Para limpiarlo, la respuesta es aprender a código a mano. No creo que hay un generador de por ahí que puede producir un código tan limpio como un ser humano puede.
CSS website design tutorials
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 2:17 pm

rtm223 escribió:
Creo que lo que necesita es añadir
Código: [ Select ]
class="aClassNameThatMakesSense"
en las etiquetas de todos los elementos que desea que la alineación para añadir a continuación:

Código: [ Select ]
.aClassNameThatMakesSense{
  text-align:left;
  vertical-align:top;
}
  1. .aClassNameThatMakesSense{
  2.   text-align:left;
  3.   vertical-align:top;
  4. }

en la etiqueta de estilo. Que debe hacer el truco, pero Im no seguro.


En cuanto a la limpieza...Im suponiendo que se genera el código? Para limpiarlo, la respuesta es aprender a código a mano. No creo que hay un generador de por ahí que puede producir un código tan limpio como un ser humano puede.


Im aprendiendo como código. Este es mi primer intento de HTML / CSS. Ninguno de los vínculos funcionan. Era sólo para la práctica. La enfermedad probablemente termine más tarde.
http://sleepy.[banned domain]/dm/dm_home.html

Intento enfermo de la clase, aunque Ive hecho ya. No creo que lo hice la vertical-align correctamente porque el texto se trasladó a la izquierda, pero no a la parte superior de la división.

Y me estás diciendo que los theres ninguna manera puede deshacerse de todas esas imágenes de espaciador y esas cosas? ¿Se acaba de llegar con el uso de trozos? Fireworks es una mejor opción para cortar de PS?
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 2:30 pm

Vale. Se ha intentado, pero no funcionó. Cuando veo las rebanadas en Dreamweaver y PS, se muestran los principales toda la caja a la rodaja, pero cuando voy a editar usando html, que trata el centro de la caja como si esa es la que empieza el tramo.
  • 360Varial
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Abr 13, 2004
  • Mensajes: 163
  • Status: Offline

Nota Mayo 20th, 2004, 3:14 pm

Puh. No importa. Me imaginé a cabo. He tenido que añadir valign = "top" a la celda de la tabla.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 7 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 81 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC