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

Es mi código desordenado?

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 5th, 2008, 12:39 pm

En primer lugar, Hola a todos, nuevo en el foro. En segundo lugar, soy 100% auto educado en HTML, así que no podría hacer las cosas de manera correcta.

Con la esperanza de que yo era alguien podría darme un poco de conocimiento acerca de si o no mi código está estructurado correctamente o si se podría escribir de manera más eficiente. Yo no necesito a alguien para reescribir el código completo para mí, ya que iría contra el objetivo de aprender. Tal vez un simple "sí" que está haciendo el bien, o si no se ve horrible sería suficiente. Si su el segundo que un punto en la dirección correcta sería muy apreciada.

Heres mi HTML:
Código: [ Select ]
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>BorgBand.com We Are Borg!</title>
    <link href="style.css" rel="stylesheet" type="text/css" />    
    <script src="js.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
</head>
<body onLoad="loadContent('page_home.html', 'content');">
    <div id="horizon">
        <div id="inset">    
            <div id="imghorizon">
                <div id="imginest">
                    <img src="images/background.jpg" id="bgimage" />
                </div>
            </div>
            <div id="container">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <td rowspan="2">
                            <div id="content"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="navbar">
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_home.html', 'content');">Home</a></p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_events.html', 'content');">Upcoming Events</a> </p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_about.html', 'content');">About The Band</a> </p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
                                <p>-----------</p>
                                <p><a href ="#" onClick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
                                <p>-----------</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5.     <title>BorgBand.com We Are Borg!</title>
  6.     <link href="style.css" rel="stylesheet" type="text/css" />    
  7.     <script src="js.js" type="text/javascript"></script>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  9. </head>
  10. <body onLoad="loadContent('page_home.html', 'content');">
  11.     <div id="horizon">
  12.         <div id="inset">    
  13.             <div id="imghorizon">
  14.                 <div id="imginest">
  15.                     <img src="images/background.jpg" id="bgimage" />
  16.                 </div>
  17.             </div>
  18.             <div id="container">
  19.                 <table cellspacing="0" cellpadding="0">
  20.                     <tr>
  21.                         <td rowspan="2">
  22.                             <div id="content"></div>
  23.                         </td>
  24.                     </tr>
  25.                     <tr>
  26.                         <td>
  27.                             <div id="navbar">
  28.                                 <p>-----------</p>
  29.                                 <p><a href ="#" onClick="loadContent('page_home.html', 'content');">Home</a></p>
  30.                                 <p>-----------</p>
  31.                                 <p><a href ="#" onClick="loadContent('page_events.html', 'content');">Upcoming Events</a> </p>
  32.                                 <p>-----------</p>
  33.                                 <p><a href ="#" onClick="loadContent('page_about.html', 'content');">About The Band</a> </p>
  34.                                 <p>-----------</p>
  35.                                 <p><a href ="#" onClick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
  36.                                 <p>-----------</p>
  37.                                 <p><a href ="#" onClick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
  38.                                 <p>-----------</p>
  39.                             </div>
  40.                         </td>
  41.                     </tr>
  42.                 </table>
  43.             </div>
  44.         </div>
  45.     </div>
  46. </body>
  47. </html>


y Heres mi CSS:

Código: [ Select ]
*{
    margin: 0;
    padding: 0;
    z-index: 1;
}
 
body{
    background-color:#000066;
    color: #CCCCCC;
    overflow: hidden;
}
 
a{
    color: #CCCCCC;
}
 
a:hover{
    color: #CC6633;
}
 
#horizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
}
 
#inset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    overflow: visible;
}
 
#bgimage{
    overflow: visible;
    z-index: -1;
    width: 800px;
    height: 600px;
}
 
#imghorizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
    z-index: -3;
}
 
#imginset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    z-index: -2;
}
 
#container{
    width: 800px;
    height: 100%;
    padding-left: 30px;
    padding-top: 190px;
    margin-left: 0px;
    margin-top: 10%;
}
 
#content{
    padding-left: 10px;
    margin-top: 40px;
    width: 510px;
    height: 400px;
    margin-right: 30px;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
 
.contentcell{
    margin-top: 20px;
    overflow: scroll;
    height: 235px;
    width: 500px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    background-color: transparent;
}
 
#navbar{
    padding-left: 10px;
    padding-top: 0px;
    width: 180px;
    margin-left: 10px;
}
 
#navbar a:link, a:visited{
    color:#CCCCCC;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
 
#navbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
}
 
#aboutnavbar a:link, a:visited{
    color:#CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
 
#aboutnavbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
    text-align: center;
}
 
#abouttext{
    padding-top: 15px;
}
 
.abouttextcell{
    height: 233px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    padding-left: 15px;
}
 
.aboutpics{
    height: 234px;
    width: 124px;
    border: #B4B4B4 medium solid;
}
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     z-index: 1;
  5. }
  6.  
  7. body{
  8.     background-color:#000066;
  9.     color: #CCCCCC;
  10.     overflow: hidden;
  11. }
  12.  
  13. a{
  14.     color: #CCCCCC;
  15. }
  16.  
  17. a:hover{
  18.     color: #CC6633;
  19. }
  20.  
  21. #horizon{
  22.     position: absolute;
  23.     top: 50%;
  24.     width: 100%;
  25.     height: 1px;
  26.     overflow: visible;
  27. }
  28.  
  29. #inset{
  30.     width:800px;
  31.     height: 200px;
  32.     position: absolute;
  33.     left: 50%;
  34.     margin-left: -400px;
  35.     top: -400px;
  36.     overflow: visible;
  37. }
  38.  
  39. #bgimage{
  40.     overflow: visible;
  41.     z-index: -1;
  42.     width: 800px;
  43.     height: 600px;
  44. }
  45.  
  46. #imghorizon{
  47.     position: absolute;
  48.     top: 50%;
  49.     width: 100%;
  50.     height: 1px;
  51.     overflow: visible;
  52.     z-index: -3;
  53. }
  54.  
  55. #imginset{
  56.     width:800px;
  57.     height: 200px;
  58.     position: absolute;
  59.     left: 50%;
  60.     margin-left: -400px;
  61.     top: -400px;
  62.     z-index: -2;
  63. }
  64.  
  65. #container{
  66.     width: 800px;
  67.     height: 100%;
  68.     padding-left: 30px;
  69.     padding-top: 190px;
  70.     margin-left: 0px;
  71.     margin-top: 10%;
  72. }
  73.  
  74. #content{
  75.     padding-left: 10px;
  76.     margin-top: 40px;
  77.     width: 510px;
  78.     height: 400px;
  79.     margin-right: 30px;
  80.     padding-top: 0px;
  81.     font-family: Arial, Helvetica, sans-serif;
  82.     background-color: transparent;
  83. }
  84.  
  85. .contentcell{
  86.     margin-top: 20px;
  87.     overflow: scroll;
  88.     height: 235px;
  89.     width: 500px;
  90.     overflow: scroll;
  91.     overflow-x: hidden;
  92.     overflow-y: inherit;
  93.     background-color: transparent;
  94. }
  95.  
  96. #navbar{
  97.     padding-left: 10px;
  98.     padding-top: 0px;
  99.     width: 180px;
  100.     margin-left: 10px;
  101. }
  102.  
  103. #navbar a:link, a:visited{
  104.     color:#CCCCCC;
  105.     font-weight: bold;
  106.     font-family: Arial, Helvetica, sans-serif;
  107.     font-size: small;
  108. }
  109.  
  110. #navbar a:hover{
  111.     background-color: #993300;
  112.     border: dashed thin #FF0000;
  113.     color: #CCCCCC;
  114. }
  115.  
  116. #aboutnavbar a:link, a:visited{
  117.     color:#CCCCCC;
  118.     font-family: Arial, Helvetica, sans-serif;
  119.     font-size: 12px;
  120.     text-align: center;
  121. }
  122.  
  123. #aboutnavbar a:hover{
  124.     background-color: #993300;
  125.     border: dashed thin #FF0000;
  126.     color: #CCCCCC;
  127.     text-align: center;
  128. }
  129.  
  130. #abouttext{
  131.     padding-top: 15px;
  132. }
  133.  
  134. .abouttextcell{
  135.     height: 233px;
  136.     overflow: scroll;
  137.     overflow-x: hidden;
  138.     overflow-y: inherit;
  139.     padding-left: 15px;
  140. }
  141.  
  142. .aboutpics{
  143.     height: 234px;
  144.     width: 124px;
  145.     border: #B4B4B4 medium solid;
  146. }
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 5th, 2008, 12:39 pm

  • suzie
  • Guru
  • Guru
  • Avatar de Usuario
  • Registrado: Feb 07, 2004
  • Mensajes: 1127
  • Loc: England
  • Status: Offline

Nota Agosto 5th, 2008, 12:57 pm

Mejor forma de comprobar a través de W3C es entonces hacer preguntas sobre cualquier error encontrado aquí en Ozzu,

HTML Validator:

http://validator.w3.org/

CSS Validator:

http://jigsaw.w3.org/css-validator/
http://jungaling.com/katecorner/
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 5th, 2008, 1:26 pm

Usted fondo de roca. No tenían ni idea de algo como esto existe a menos que usted había software de fantasía y qué no.

Sweet Deal. Gracias
Use your words like arrows to shoot toward your goal.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Agosto 5th, 2008, 1:27 pm

No entiendo lo que está en <table>, parece que usted debería ser capaz de manejar la <table> s contenidos con un <ul> y el <div> thats en la parte superior <tr>.

No entiendo bien esta sección.
Código: [ Select ]
<div id="imghorizon">
    <div id="imginest">
        <img src="images/background.jpg" id="bgimage" />
    </div>
</div>
  1. <div id="imghorizon">
  2.     <div id="imginest">
  3.         <img src="images/background.jpg" id="bgimage" />
  4.     </div>
  5. </div>


imginest Parece un exceso. ¿Por qué no puede mover los estilos aplicados a ella, en lugar de la figura <img>, la <div> no pare, o se divide entre los dos?
Strong with this one, the sudo is.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 5th, 2008, 1:58 pm

wow, buen ojo joebert. "imginest" fue un error tipográfico en mi código, debería haber sido "imginset". Después de que la fijación de la posición fue completamente bonkers a mí. Dividendo eliminado :)

la razón por la que tiene una imagen con los estilos dentro de un div con estilos es centro de la imagen vertical y horizontalmente en la pantalla por la que debería ser mucho más fácil que es, ridículas cantidades de búsqueda, Google, referencias, y de la lectura sólo para poner un div en medio de una página frickin. Buena gentil por qué?
Use your words like arrows to shoot toward your goal.
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Agosto 5th, 2008, 2:04 pm

¿Cuáles son algunos otros validadores? ¿Hay alguna para javascript? PHP? TEC...
Use your words like arrows to shoot toward your goal.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Agosto 5th, 2008, 5:37 pm

Nunca he oído hablar de [acronym=Javascript] JS [/acronym] o [acrónimo = Hypertext Preprocessor: vudi4x04] PHP [/acronym] validadores por decir.

Para [acrónimo = Hypertext Preprocessor: vudi4x04] PHP [/acronym] por lo general se reduce a como perfiladores XDebug , Como benchmarkers Apache Benchmark , El local aplicaciones, y sabiendo las personas en cualquier lugar a su público objetivo vidas.

Con [acronym=Javascript] JS [/acronym] theres cosas como Firebug , Operas herramientas para desarrolladores , Y sea cual sea Microsoft está utilizando en estos días. No se reduce a tener acceso al mayor número de navegador y sistema de combinaciones posibles a probar cosas aunque en.
Strong with this one, the sudo is.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 7 mensajes
  • Usuarios navegando por este Foro: grinch2171 y 179 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