Problemas de diseño de página

The Apostle of God
Beginner
Registrado: Oct 28, 2003
Mensajes: 54
Loc: SDSU, SD, USA
Status: Offline

Febrero 23rd, 2004, 11:04 am

Im tratando de hacer esta página XHTML 1.0 Transitional. Básicamente, Im ejecuta en un problema con las barras de menú, se expanden con el tamaño del texto en ellos. Im tratando para controlar su ancho con una hoja de estilo, y lo puso a 130px, pero Im haciendo algo mal. Lo siento por otra Lamo pregunta gif "alt =": oops: "title =" avergonzado "/>

Aquí está el código de las páginas:

Código: [ Select ]

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "tester.css";
</style>
</head>

<body>
<table class="banner">
<tr>
  <td> <img src="/images/logo.jpg" alt="Logo" width="750" height="115" /></td>
</tr>
</table>
<table class="body">
<tr>
  <td class="130" valign="top"><br /> <table class="130">
    <tr>
     <td class="top"> Navigation</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">
              - <a href="http://www.theapostleofgod.com" >Home</a> <br />
       - <a href="/tos">Original Series</a> <br />
       - <a href="/tng/index.html"> Next Generation</a> <br />
       - <a href="/ds9">Deep Space 9</a> <br />
       - <a href="/voy">Voyager</a> <br />
       - <a href="/ent">Enterprise</a> <br />
       - <a href="/mov">Movies</a> <br />
       - <a href="/forums/">Forums</a> <br />
       - <a href="/store/">Store</a> <br />
       - <a href="/about/">FAAQ</a></p></td>
    </tr>
   </table>
   <br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
       31</a> <br />
       - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
       Project</a> <br />
       - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
       Today</a> <br />
       - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
       </a><br />
       - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
      </p></td>
    </tr>
   </table>
  </td>
  <td width="482" valign="top">
<br />
   <table class="article">
    <tr>
     <td class="top"><p class="bold">Insert Title</p></td>
    </tr>
    <tr>
     <td>
      <p class="main">Insert Tex</p>
      </td>
    </tr>
   </table>
     <br />
   <table align="center" width="480" border="1" bordercolor="#3399cc" cellspacing="1" cellpadding="1" valign="top">
    <tr>
     <td valign="center">
            <p class="disclaimer"> All articles on this site Copyright 2003 (Matthew L. Nowlin), All Rights Reserved.
       All other material is copyright its respective owners. This is a
       fan site; Star Trek is the property of Paramount Pictures. We respect
       copyrights: <a href="mailto:copyright@theapostleofgod.com?subject=COPYRIGHT RELATED">
        Report
       Copyright Issues/Violations.</a>

         </td>
    </tr>
   </table>
   <br />

  <td width="130" valign="top"><br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
       31</a> <br />
       - <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
       Project</a> <br />
       - <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
       Today</a> <br />
       - <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
       </a><br />
       - <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
      </p></td>
    </tr>
   </table>
   <br /> <table class="130">
    <tr>
     <td class="top"> Recommended</td>
    </tr>
    <tr>
     <td class="topmenu"> <p class="menu">- <a href="/aboutus.html">Synopsis
       Project</a></p></td>
    </tr>
   </table>
   </tr></table>
</body>
</html>

<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "tester.css";
</style>
</head>
<body>
<table class="banner">
<tr>
<td> <img src="/images/logo.jpg" alt="Logo" width="750" height="115" /></td>
</tr>
</table>
<table class="body">
<tr>
<td class="130" valign="top"><br /> <table class="130">
<tr>
<td class="top"> Navigation</td>
</tr>
<tr>
<td class="topmenu"> <p class="menu">
- <a href="http://www.theapostleofgod.com" >Home</a> <br />
- <a href="/tos">Original Series</a> <br />
- <a href="/tng/index.html"> Next Generation</a> <br />
- <a href="/ds9">Deep Space 9</a> <br />
- <a href="/voy">Voyager</a> <br />
- <a href="/ent">Enterprise</a> <br />
- <a href="/mov">Movies</a> <br />
- <a href="/forums/">Forums</a> <br />
- <a href="/store/">Store</a> <br />
- <a href="/about/">FAAQ</a></p></td>
</tr>
</table>
<br /> <table class="130">
<tr>
<td class="top"> Recommended</td>
</tr>
<tr>
<td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
31</a> <br />
- <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
Project</a> <br />
- <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
Today</a> <br />
- <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
</a><br />
- <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
</p></td>
</tr>
</table>
</td>
<td width="482" valign="top">
<br />
<table class="article">
<tr>
<td class="top"><p class="bold">Insert Title</p></td>
</tr>
<tr>
<td>
<p class="main">Insert Tex</p>
</td>
</tr>
</table>
<br />
<table align="center" width="480" border="1" bordercolor="#3399cc" cellspacing="1" cellpadding="1" valign="top">
<tr>
<td valign="center">
<p class="disclaimer"> All articles on this site Copyright 2003 (Matthew L. Nowlin), All Rights Reserved.
All other material is copyright its respective owners. This is a
fan site; Star Trek is the property of Paramount Pictures. We respect
copyrights: <a href="mailto:copyright@theapostleofgod.com?subject=COPYRIGHT RELATED">
Report
Copyright Issues/Violations.</a>
</td>
</tr>
</table>
<br />
<td width="130" valign="top"><br /> <table class="130">
<tr>
<td class="top"> Recommended</td>
</tr>
<tr>
<td class="topmenu"> <p class="menu">- <a href="http://www.section31.com" title="Section 31 appears to be down.">Section
31</a> <br />
- <a href="http://www.omegaproject.net/forums" title="Formerly the greatest Trek board on the internet">Omega
Project</a> <br />
- <a href="http://www.trektoday.com" title="The leading news source for Star Trek">Trek
Today</a> <br />
- <a href="http://www.upn.com/shows/enterprise/" title="UPN's official website">UPN
</a><br />
- <a href="http://www.trekweb.com/" title="Trekweb is a classic news source for Trek fans">Trekweb</a>
</p></td>
</tr>
</table>
<br /> <table class="130">
<tr>
<td class="top"> Recommended</td>
</tr>
<tr>
<td class="topmenu"> <p class="menu">- <a href="/aboutus.html">Synopsis
Project</a></p></td>
</tr>
</table>
</tr></table>
</body>
</html>

Aquí está la hoja de estilos:

Código: [ Select ]

/* CSS Document */
/* CSS Document */
BODY
    {
    BACKGROUND-COLOR: #000000;
    }
p.main
    {
    text-align: justify;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #bccbdc;
    }
p.disclaimer
    {
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: #bccbdc;
    }
p.menu
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #bccbdc;
    }

    }
td.title
    {
    background-color: #336699;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;

    }
td
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
td.episode
    {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
td.shots
    {
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10;
    color: #bccbdc;
    font-weight: strong;
    padding: 0 px;
    }
.bold
  {
    text-align: left;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12pt;
    font-color: white;
    font-weight: strong;
    }
A:link
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:active
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:visited
    {
    COLOR: silver; TEXT-DECORATION: underline
    }
A:hover {
    COLOR: #597795; TEXT-DECORATION: underline
    }
A:mailto
    {
    COLOR: #597795; TEXT-DECORATION: underline
    }
.textfont
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    }
table.banner
    {
    width: 710;
    border: 0;
    vertical-align: top;
    }
table.body
    {
    width: 750;
    height: 100%;
    vertical-align: top;
    }
td.top
    {
    text-align: center;
    font size: 20;
    height: 20px;
    vertical-align: top;
    background: #336699;
    border: 1px solid #3388cc;
    }
td.topmenu
    {
    vertical-align: top;
    background: #000000;
    border: 1px solid #3399cc;
    }
td.center
    {
    text-align: center;
    height: 20;
    font-size: 12pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    vertical-align: center;
    }
table.130
    {
    width: fixed 130px;
    padding: 1;
    border: 1px solid #3399cc;
    }
table.article
    {
    width: 480px;
    padding: 1;
    border: 1px solid #3399cc;
    }

/* CSS Document */
/* CSS Document */
BODY
{
BACKGROUND-COLOR: #000000;
}
p.main
{
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #bccbdc;
}
p.disclaimer
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #bccbdc;
}
p.menu
{
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #bccbdc;
}
}
td.title
{
background-color: #336699;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #bccbdc;
font-weight: strong;
padding: 0 px;
}
td
{
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #bccbdc;
font-weight: strong;
padding: 0 px;
}
td.episode
{
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10;
color: #bccbdc;
font-weight: strong;
padding: 0 px;
}
td.shots
{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10;
color: #bccbdc;
font-weight: strong;
padding: 0 px;
}
.bold
{
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-color: white;
font-weight: strong;
}
A:link
{
COLOR: #597795; TEXT-DECORATION: underline
}
A:active
{
COLOR: #597795; TEXT-DECORATION: underline
}
A:visited
{
COLOR: silver; TEXT-DECORATION: underline
}
A:hover {
COLOR: #597795; TEXT-DECORATION: underline
}
A:mailto
{
COLOR: #597795; TEXT-DECORATION: underline
}
.textfont
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
table.banner
{
width: 710;
border: 0;
vertical-align: top;
}
table.body
{
width: 750;
height: 100%;
vertical-align: top;
}
td.top
{
text-align: center;
font size: 20;
height: 20px;
vertical-align: top;
background: #336699;
border: 1px solid #3388cc;
}
td.topmenu
{
vertical-align: top;
background: #000000;
border: 1px solid #3399cc;
}
td.center
{
text-align: center;
height: 20;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
vertical-align: center;
}
table.130
{
width: fixed 130px;
padding: 1;
border: 1px solid #3399cc;
}
table.article
{
width: 480px;
padding: 1;
border: 1px solid #3399cc;
}

La clase Im teniendo problemas con es table.130...I Pensar . Caramba, no sé si Im incluso haciendo de este derecho sobre todo. Me abofeteó en la cabeza si es necesario gif "alt =":(" title =" triste "/>
La página está en mi servidor en http://www.theapostleofgod.com/xhtml.html
Gracias de antemano.

Anonymous
Bot
- www.ozzu.com
Registrado: 25 Feb 2008
Mensajes: ?
Loc: Ozzuland
Status: Online

Febrero 23rd, 2004, 11:04 am

allgoodpeople
Proficient
Registrado: Ene 16, 2004
Mensajes: 379
Loc: here
Status: Offline

Febrero 23rd, 2004, 1:15 pm

Si lo desea, puede considerar el lanzamiento conjunto de mesa y pasar a un modelo de caja utilizando una hoja CSS externa. No sé el problema con seguridad, pero después de mirar. . . si tuviera que adivinar yo diría que se refiere a las tablas se comportan de forma natural. No he dedicado mucho tiempo a la definición de las clases a las tablas, sino una celda de la tabla normal se ampliará para encajar el texto si es demasiado pequeño en lugar del texto se ajuste, que es lo que suena como el problema es.

Si, por ejemplo, que estuvo simplemente a crear una caja utilizando una hoja de estilo y especificar el ancho, usted lograr 2 cosas: 1) eliminar todo lo que el código relacionado con la tabla de la página, y 2) La caja se comportan de la manera usted desea.

El uso de CSS para el posicionamiento es un poco de dolor en primera como se aprende, pero una vez llegue el cuelgue de la misma, su muy agradable.

Hablando de su código en particular, parece que la forma en que ha entrado en las clases, usted está diciendo la mesa en su conjunto que se 130px (que no es un espacio terriblemente grande), y luego decirle a cada celda de la tabla para uso de fuentes 20px , Que es una gran fuente. No hay mucho espacio para trabajar. Pero theres un montón de otras cuestiones también allí, de lo que puedo decir.

Mi consejo para usted es definitivamente ser para empezar de nuevo sin la mesa de diseño, y empezar a aprender a su posición de elementos con CSS. Creo que usted lo encontrará mucho más sencillo que tratar de hacerlo con tablas.

Mark

The Apostle of God
Beginner
Registrado: Oct 28, 2003
Mensajes: 54
Loc: SDSU, SD, USA
Status: Offline

Febrero 23rd, 2004, 1:48 pm

Acordado

conorific
Proficient
Registrado: Ene 12, 2004
Mensajes: 350
Loc: NY
Status: Offline

Febrero 24th, 2004, 2:02 pm

Cuando usted dice "caja", ¿significa "div"?

The Apostle of God
Beginner
Registrado: Oct 28, 2003
Mensajes: 54
Loc: SDSU, SD, USA
Status: Offline

Febrero 24th, 2004, 2:05 pm

Gracias, he resuelto esta cuestión. ¿Podría un mod cierre esto?

b_heyer
Web Master
Registrado: Jun 15, 2003
Mensajes: 4583
Loc: Maryland
Status: Offline

Febrero 24th, 2004, 2:25 pm

¿Podría, por favor envíe su respuesta...

Pixel Acres V2

The Apostle of God
Beginner
Registrado: Oct 28, 2003
Mensajes: 54
Loc: SDSU, SD, USA
Status: Offline

Febrero 24th, 2004, 2:28 pm

La respuesta fue: me abandonó las tablas y se dirigió a las hojas de estilo

conorific
Proficient
Registrado: Ene 12, 2004
Mensajes: 350
Loc: NY
Status: Offline

Febrero 24th, 2004, 3:28 pm

Con permiso, pero que no era mi pregunta. No fue hasta que le dirige - usted no dice nada sobre las cajas. Yo estaba hablando con allgoodpeople. Él dijo algo sobre cajas, y me preguntó si quería decir divs, de modo que pudiera entender lo que estaba sucediendo con mayor claridad. Gracias por la lectura. Realmente.

allgoodpeople
Proficient
Registrado: Ene 16, 2004
Mensajes: 379
Loc: here
Status: Offline

Febrero 24th, 2004, 4:19 pm

conorific escribió:

así, sí y no. Pido disculpas si im "mezclando mi metáforas" por así decirlo. im todavía un poco nuevo en el área de diseño web, así que puede utilizar un término mal de vez en cuando.

un div no siempre es una caja en mi mente, pero ive nunca había visto una caja que no era un div (no significa que no puede ocurrir aunque). el mejor ejemplo de lo que quiero decir puede verse en http://bluerobot.com/web/layouts/layout1.html

No se puede ver muy claramente que la mayoría de los sitios son esencialmente sólo una serie de cajas dispuestas en distintos lugares en una página con contenido en ellos. la mayoría de las personas tienen una cabecera de área horizontal en funcionamiento su sitio (1 "caja"), una especie de menú vertical área o las áreas (otra "caja") y un área de contenido principal (una tercera "caja"). Esta es una muy sencilla, diseño de páginas utilizando las casillas en el sentido que quise decir.

puede haber otros divs en el sitio, pero creo realmente no pensar en ellas como cajas, per se. pero ahora que he de escribir sobre ella y pensar un poco sobre mi comprensión de lo que un div es, tal vez todos los divs son cajas. un div separa una sección del código desde el resto de la página. si se divs nido, supongo que daría lugar a una "caja en una caja" efecto, incluso si no se crean secciones separadas en la página web desde la perspectiva de un diseño.

en la otra cara de eso, me inclino a pensar de una caja como de poder ser colocado, por lo que un div anidados sin una identificación o de la clase en que wouldnt caen en esa categoría.

Creo que puede ser útil para distinguir entre hablar de cajas de una perspectiva de diseño, vs hablando de cajas de un código / diseño así como la perspectiva.

Sé que a algunos de mis conversaciones con digitalmedia y lazyjim, que habla un poco sobre el "modelo de caja", refiriéndose específicamente al diseño de páginas. que puede ser capaz de hablar más definitvely en lo que constituye exactamente una caja.

Así que, después de todo eso, no im seguro de si era más confusa o útil :lol:

Espero que ayude!

Mark

RichB
Guru
Registrado: May 17, 2003
Mensajes: 1121
Loc: Boston
Status: Offline

Febrero 24th, 2004, 4:21 pm

Theyre hablando de la Box Modelo que no se limita necesariamente a divs. El ejemplo en la página que el vínculo que aparece en la frase anterior conduce a una lista de usos, por ejemplo.

Free Programming Resources

conorific
Proficient
Registrado: Ene 12, 2004
Mensajes: 350
Loc: NY
Status: Offline

Febrero 24th, 2004, 4:23 pm

Bueno. Me sale. Thanky.

Página 1 de 1

Para responder a este tema que necesita para ingresar o registrarse. Es gratis.

Publicar Información

Total de mensajes en este tema: 11 mensajes
Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 72 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

Problemas de diseño de página

Publicar Información

Recursos útiles

Otros Idiomas

Desarrollo de Sitios Web

Gráficos

OS y Ferretería

Marketing por Internet

Mercado

Zona Comunidad

Ozzu Mantenimiento

Foro Red

Foro de Socios

Foro de Aficionados