¿Cómo organizaría mejor y codificaría este HTML y CSS básicos? -- html campo con css camp codereview Relacionados El problema

How would you better organize/code this basic HTML and CSS?


6
vote

problema

Español

Tengo curiosidad por ver lo que alguno de los programadores más experimentados haría en lugar de métodos que tomé como herramienta de aprendizaje. Cualquier consejo / trucos / correcciones y razonamiento es apreciado!

http://www.jacobweyer.com

Este es el resultado del código hasta ahora:

  add_student5  

css

  add_student6  
Original en ingles

I'm curious to see what any of the more experienced programmers would do instead of methods I took as a learning tool. Any tips/tricks/fixes and reasoning is appreciated!!

http://www.jacobweyer.com

This is the result of the code so far:

<!DOCTYPE html>  <html> <head> <title>Alpha Tau Omega | Theta Omega</title> <link rel="stylesheet" type="text/css" href="ATOStyle.css" />  </head>   <body> <div id="header">     <div id="innerheader">         <div id="banner">         </div>         <div id="title">             <!--<p>Alpha Tau Omega</p>             <p>Theta Omega</p>-->         </div>         <div id="navbar">             <ul>                 <li><a href="index.html">Home</a></li>                 <li><a href="rush.html">Rush</a></li>                 <li><a href="history.html">History</a></li>                 <li><a href="alumni.html">Alumni</a></li>                 <li><a href="calendar.html">Calendar</a></li>                 <li><a href="media.html">Media</a></li>             </ul>         </div>      </div> </div> <div id="pagecenter"> </div> <div id="footer"> <div id="footercontent"> <div id="footerbanner"> </div> </div> </div> </body> </html> 

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0px; padding:0px; border:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; }  #navbar ul { list-style-type: none; margin: 0px; padding: 0px; }  #navbar ul li a { text-decoration: none; color: black;   } #navbar ul li a:hover { color: white; }  #navbar ul li { font-family: Arial, Helvetica, sans-serif;  text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; }  #banner { background:url(./pieces/banner.png); position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat }  #title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; }  #navbar { position: relative; top: 80px; left: 210px; margin-left: inherit; } #social ul li{ display: inline-block; width: 35px; height: 35px; margin: 5px; } #social { position: absolute; float: left; right: 180px; top: -5px; } #social ul { list-style-type: none; }  #innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; }  #header { background:url(./pieces/headerBar.png); position: static;     width:100%; height:139px; padding:0; border:0; z-index: 10000; }  #pagecenter { position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px; background:url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-top: -19px; z-index:50 } body { width: 100%; margin: 0px 0px 0px 0px; background-color: #808080 } #footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto; clear: both; bottom: 0px; position: static; }  #footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; } 
     

Lista de respuestas

6
 
vote
vote
La mejor respuesta
 

Mucha de este tipo de cosas es solo estilo personal, o si está trabajando en un equipo, el diseño se define por delante del proyecto.

El uso de clases VS ID también es personal. He visto a la gente decir que siempre usan clases. He intentado tanto las clases como las ID en muchas páginas, y encuentro que me pongo en menos problemas con las clases en su mayoría, reservando ID para elementos verdaderamente individuales.

He leído que las cosas en la parte superior de su CSS pueden disminuir las cosas bastante reducidas y pueden no ser necesarias en muchos casos.

Formateé las últimas dos partes de tu CSS un poco diferente. Hago eso mucho con PHP, pero he visto recientemente en CSS, y creo que podría funcionar bien en algunas situaciones.

pero por diversión ...

  <!DOCTYPE html> <html> <head>   <title>Alpha Tau Omega | Theta Omega</title>   <link rel="stylesheet" type="text/css" href="ATOStyle.css" /> </head>  <body> <div id="header">   <div id="innerheader">     <div id="banner"></div>        <div id="title"><!--<p>Alpha Tau Omega</p> <p>Theta Omega</p>--></div>        <div id="navbar">          <ul>            <li><a href="index.html">Home</a></li>            <li><a href="rush.html">Rush</a></li>            <li><a href="history.html">History</a></li>            <li><a href="alumni.html">Alumni</a></li>            <li><a href="calendar.html">Calendar</a></li>            <li><a href="media.html">Media</a></li>          </ul>        </div><!--end navbar-->     </div><!--end banner-->   </div><!--end  innerheader--> </div><!--end header-->  <div id="pagecenter"></div>  <div id="footer">   <div id="footercontent">     <div id="footerbanner"></div>   </div> </div><!--end footer-->  </body> </html>   

css

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video {   margin: 0px;   padding: 0px;   border: 0px;   outline: 0px;   font-size: 100%;   vertical-align: baseline;   background: transparent; } #navbar ul {   list-style-type: none;   margin: 0px;   padding: 0px; } #navbar ul li a {   text-decoration: none;   color: black;   } #navbar ul li a:hover {   color: white; } #navbar ul li {   font-family: Arial, Helvetica, sans-serif;    text-decoration: none;   color: #000000;   display: inline-block;   width: 70px;   height: 40px;   margin: 10px; } #banner {   background:url(./pieces/banner.png);   position: absolute;   margin-left: 0px;   min-height: 193px;   min-width: 183px;   background-repeat: no-repeat }  #title {   position: absolute;   background: url(./pieces/name.png);   margin-left: 190px;   min-height: 75px;   min-width: 285px; } #navbar {   position: relative;   top: 80px;   left: 210px;   margin-left: inherit; } #social ul li{   display: inline-block;   width: 35px;   height: 35px;   margin: 5px; } #social {   position: absolute;   float: left;   right: 180px;   top: -5px; } #social ul {   list-style-type: none; }  #innerheader {   height: 139px;   width: 750px;   margin-right: auto;   margin-left: auto;   position: relative; }  #header {   background:url(./pieces/headerBar.png);   position: static;       width:100%;   height:139px;   z-index: 10000; }  #pagecenter {   position: static;   margin-right: auto;   margin-left: auto;   height: 50px;   width: 750px;   min-height: 1000px;   background: url(./pieces/mainBG.png);   background-position: center;   background-repeat: no-repeat;   background-attachment: fixed;   margin-top: -19px;   z-index:50 } body {   width: 100%;   margin: 0px 0px 0px 0px;   background-color: #808080 } #footer {   margin-top:   20px;   padding-top:  30px;   background:   url(./pieces/footerbar.png);   height:       77px;   width:        100%;   margin-right: auto;   margin-left:  auto;   clear:        both;   bottom:       0px;   position:     static; } #footerbanner {   background:        url(./pieces/footerbanner.png);   position:          absolute;   min-height:        95px;   min-width:         90px;   background-repeat: no-repeat;   margin-top:        -30px; }   
 

A lot of this type of stuff is just personal style, or if you're working on a team, the layout is defined ahead of the project.

The use of classes vs id's is also personal. I've seen people say that they ALWAYS use classes. I've tried both classes and id's on many pages, and I find that I get into fewer problems with mostly classes, reserving id's for truly individual elements.

I've read that the stuff at the top of your CSS can slow things down quite a bit and may not be necessary in many cases.

I formatted the last two parts of your CSS a bit differently. I do that a lot with PHP, but have seen in recently in CSS, and I think it might work nicely in some situations.

But for fun...

<!DOCTYPE html> <html> <head>   <title>Alpha Tau Omega | Theta Omega</title>   <link rel="stylesheet" type="text/css" href="ATOStyle.css" /> </head>  <body> <div id="header">   <div id="innerheader">     <div id="banner"></div>        <div id="title"><!--<p>Alpha Tau Omega</p> <p>Theta Omega</p>--></div>        <div id="navbar">          <ul>            <li><a href="index.html">Home</a></li>            <li><a href="rush.html">Rush</a></li>            <li><a href="history.html">History</a></li>            <li><a href="alumni.html">Alumni</a></li>            <li><a href="calendar.html">Calendar</a></li>            <li><a href="media.html">Media</a></li>          </ul>        </div><!--end navbar-->     </div><!--end banner-->   </div><!--end  innerheader--> </div><!--end header-->  <div id="pagecenter"></div>  <div id="footer">   <div id="footercontent">     <div id="footerbanner"></div>   </div> </div><!--end footer-->  </body> </html> 

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video {   margin: 0px;   padding: 0px;   border: 0px;   outline: 0px;   font-size: 100%;   vertical-align: baseline;   background: transparent; } #navbar ul {   list-style-type: none;   margin: 0px;   padding: 0px; } #navbar ul li a {   text-decoration: none;   color: black;   } #navbar ul li a:hover {   color: white; } #navbar ul li {   font-family: Arial, Helvetica, sans-serif;    text-decoration: none;   color: #000000;   display: inline-block;   width: 70px;   height: 40px;   margin: 10px; } #banner {   background:url(./pieces/banner.png);   position: absolute;   margin-left: 0px;   min-height: 193px;   min-width: 183px;   background-repeat: no-repeat }  #title {   position: absolute;   background: url(./pieces/name.png);   margin-left: 190px;   min-height: 75px;   min-width: 285px; } #navbar {   position: relative;   top: 80px;   left: 210px;   margin-left: inherit; } #social ul li{   display: inline-block;   width: 35px;   height: 35px;   margin: 5px; } #social {   position: absolute;   float: left;   right: 180px;   top: -5px; } #social ul {   list-style-type: none; }  #innerheader {   height: 139px;   width: 750px;   margin-right: auto;   margin-left: auto;   position: relative; }  #header {   background:url(./pieces/headerBar.png);   position: static;       width:100%;   height:139px;   z-index: 10000; }  #pagecenter {   position: static;   margin-right: auto;   margin-left: auto;   height: 50px;   width: 750px;   min-height: 1000px;   background: url(./pieces/mainBG.png);   background-position: center;   background-repeat: no-repeat;   background-attachment: fixed;   margin-top: -19px;   z-index:50 } body {   width: 100%;   margin: 0px 0px 0px 0px;   background-color: #808080 } #footer {   margin-top:   20px;   padding-top:  30px;   background:   url(./pieces/footerbar.png);   height:       77px;   width:        100%;   margin-right: auto;   margin-left:  auto;   clear:        both;   bottom:       0px;   position:     static; } #footerbanner {   background:        url(./pieces/footerbanner.png);   position:          absolute;   min-height:        95px;   min-width:         90px;   background-repeat: no-repeat;   margin-top:        -30px; } 
 
 
 
 
6
 
vote

html:

  • Con el conjunto de DocType HTML5, no necesita el atributo 99887766655544332 en sus etiquetas de enlace, estilo y script. Usted puede expresarlos con seguridad.
  • Solo una nota: es posible Omitar el / en las etiquetas HTML de cierre automático como link o 9988777665544335
  • . >
  • Debe agregar las etiquetas Meta Charset y viewPort. El primero garantiza que su sitio utiliza la codificación de caracteres correcta y la segunda es relevante para dispositivos móviles.

      <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">   
  • Estás usando una identificación para todo. Puedes pensar que estas cosas solo ocurrirán una vez en mi página y una identificación está perfectamente bien. En mi opinión, no lo es. Puede haber múltiples encabezados y pies de página en una página.

    También una identificación tiene un valor de especificidad de CSS más alto y sobrescribiéndolo con una clase es casi imposible. No uso la identificación como ganchos de estilo en absoluto y confíe completamente en las clases.

    Algunos de sus nombres de identificación también tienen un mal nombramiento. Su encabezado es su encabezado en todo el sitio, debe tener un nombre como site-header o site-head . De lo contrario, no está claro de su marcado lo que realmente está mirando.

css:

  • i Por mi parte evitaría estos reinicios de CSS exzesivos. Solo hace que su trabajo sea más difícil configurar los valores necesarios para todos esos elementos nuevamente. Eliminar el valor predeterminado margin y html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; } #navbar ul { list-style-type: none; margin: 0px; padding: 0px; } #navbar ul li a { text-decoration: none; color: black; } #navbar ul li a:hover { color: white; } #navbar ul li { font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; } #banner { background:url(./pieces/banner.png); position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat } #title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; } #navbar { position: relative; top: 80px; left: 210px; margin-left: inherit; } #social ul li{ display: inline-block; width: 35px; height: 35px; margin: 5px; } #social { position: absolute; float: left; right: 180px; top: -5px; } #social ul { list-style-type: none; } #innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; } #header { background:url(./pieces/headerBar.png); position: static; width:100%; height:139px; z-index: 10000; } #pagecenter { position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px; background: url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-top: -19px; z-index:50 } body { width: 100%; margin: 0px 0px 0px 0px; background-color: #808080 } #footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto; clear: both; bottom: 0px; position: static; } #footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; } 0 de algunos elementos de nivel de bloque es suficiente en casi todos los casos:

      html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video {   margin: 0px;   padding: 0px;   border: 0px;   outline: 0px;   font-size: 100%;   vertical-align: baseline;   background: transparent; } #navbar ul {   list-style-type: none;   margin: 0px;   padding: 0px; } #navbar ul li a {   text-decoration: none;   color: black;   } #navbar ul li a:hover {   color: white; } #navbar ul li {   font-family: Arial, Helvetica, sans-serif;    text-decoration: none;   color: #000000;   display: inline-block;   width: 70px;   height: 40px;   margin: 10px; } #banner {   background:url(./pieces/banner.png);   position: absolute;   margin-left: 0px;   min-height: 193px;   min-width: 183px;   background-repeat: no-repeat }  #title {   position: absolute;   background: url(./pieces/name.png);   margin-left: 190px;   min-height: 75px;   min-width: 285px; } #navbar {   position: relative;   top: 80px;   left: 210px;   margin-left: inherit; } #social ul li{   display: inline-block;   width: 35px;   height: 35px;   margin: 5px; } #social {   position: absolute;   float: left;   right: 180px;   top: -5px; } #social ul {   list-style-type: none; }  #innerheader {   height: 139px;   width: 750px;   margin-right: auto;   margin-left: auto;   position: relative; }  #header {   background:url(./pieces/headerBar.png);   position: static;       width:100%;   height:139px;   z-index: 10000; }  #pagecenter {   position: static;   margin-right: auto;   margin-left: auto;   height: 50px;   width: 750px;   min-height: 1000px;   background: url(./pieces/mainBG.png);   background-position: center;   background-repeat: no-repeat;   background-attachment: fixed;   margin-top: -19px;   z-index:50 } body {   width: 100%;   margin: 0px 0px 0px 0px;   background-color: #808080 } #footer {   margin-top:   20px;   padding-top:  30px;   background:   url(./pieces/footerbar.png);   height:       77px;   width:        100%;   margin-right: auto;   margin-left:  auto;   clear:        both;   bottom:       0px;   position:     static; } #footerbanner {   background:        url(./pieces/footerbanner.png);   position:          absolute;   min-height:        95px;   min-width:         90px;   background-repeat: no-repeat;   margin-top:        -30px; } 1  
  • Si está configurando un valor de propiedad a cero, no necesita agregar la unidad. Cero es cero. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; } #navbar ul { list-style-type: none; margin: 0px; padding: 0px; } #navbar ul li a { text-decoration: none; color: black; } #navbar ul li a:hover { color: white; } #navbar ul li { font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; } #banner { background:url(./pieces/banner.png); position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat } #title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; } #navbar { position: relative; top: 80px; left: 210px; margin-left: inherit; } #social ul li{ display: inline-block; width: 35px; height: 35px; margin: 5px; } #social { position: absolute; float: left; right: 180px; top: -5px; } #social ul { list-style-type: none; } #innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; } #header { background:url(./pieces/headerBar.png); position: static; width:100%; height:139px; z-index: 10000; } #pagecenter { position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px; background: url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-top: -19px; z-index:50 } body { width: 100%; margin: 0px 0px 0px 0px; background-color: #808080 } #footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto; clear: both; bottom: 0px; position: static; } #footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; } 2 es suficiente más fácil de escribir

  • Selección de un elemento de lista dentro de una lista es innecesario. Un elemento de lista siempre es parte de una lista, por lo general, solo necesita 99887766555443313 o html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 100%; vertical-align: baseline; background: transparent; } #navbar ul { list-style-type: none; margin: 0px; padding: 0px; } #navbar ul li a { text-decoration: none; color: black; } #navbar ul li a:hover { color: white; } #navbar ul li { font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; } #banner { background:url(./pieces/banner.png); position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat } #title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; } #navbar { position: relative; top: 80px; left: 210px; margin-left: inherit; } #social ul li{ display: inline-block; width: 35px; height: 35px; margin: 5px; } #social { position: absolute; float: left; right: 180px; top: -5px; } #social ul { list-style-type: none; } #innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; } #header { background:url(./pieces/headerBar.png); position: static; width:100%; height:139px; z-index: 10000; } #pagecenter { position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px; background: url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed; margin-top: -19px; z-index:50 } body { width: 100%; margin: 0px 0px 0px 0px; background-color: #808080 } #footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto; clear: both; bottom: 0px; position: static; } #footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; } 4
  • también (de nuevo, diciendo) Tengo la intención de las declaraciones dentro de una regla de CSS (ver más arriba), porque es más fácil distinta entre los bloques separados.
 

HTML:

  • With the HTML5 doctype being set, you don't need the type attribute on your link, style and script tags anymore. You can safely ommit them.
  • Just a note: It's possible to ommit the / on self-closing html tags like link or img as well.
  • You should add the meta charset and viewport tags. The first one ensures your site uses the correct character encoding and the second one is relevant for mobile devices.

    <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  • You're using an ID for everything. You may think these things will only occur once on my page and a ID is perfectly fine. In my opinion, it's not. There may be multiple header and footers on a page.

    Also an ID has a higher CSS specificity value and overwriting it with a class is almost impossible. I don't use ID's as styling hooks at all and completely rely on classes.

    Some of your ID names also have a bad naming. Your header is your site wide header, it should have a name like site-header or site-head. Otherwise it's not clear from your markup what you're actually looking at.

CSS:

  • I for my part would avoid these exzessive CSS resets. It just makes your work harder setting the necessary values for all those elements again. Removing the default margin and padding from some block-level elements is enough in almost all cases:

    h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, form, fieldset, legend, table, th, td, caption, hr {     margin: 0;     padding: 0; } 
  • If you're setting a property value to zero, you don't need to add the unit. Zero is zero. margin: 0; is enough easier to write

  • Selecting a list-item inside a list is unnecessary. A list-item is always part of a list, you usually only need #navbar li or #navbar a
  • Also (again opinionated) I intend the declarations inside a CSS rule (see above), because it's easier to distinct between the seperate blocks.
 
 
         
         
5
 
vote

Tu HTML es bueno. Tu CSS es bueno. Una vez que comience a codificar más, averiguará la forma en que le gusta diseñar su CSS y HTML y luego otros idiomas. Sin embargo, si está trabajando con otras personas o con una empresa, es probable que usted pueda estar de acuerdo en ciertos estilos de codificación.

Así es como prefiero hacer mi CSS.

No se muestra exactamente correctamente visualmente aquí, ya que el ancho es limitado. Pero si copia la pegarlo a un libreta completo, verá un mejor visual de cómo realmente está bastante organizado.

El reinicio es solo una línea en la parte superior.

Los artículos similares no tienen espacio entre ellos. Como NAVBAR UL, LI, LI A, LI A: Hover.

Si un estilo de elementos va a ser más ancho que la visión de NotedPad, entonces solo presiono Enter y iniciar una nueva línea. Un ejemplo de esto es #pagecenter.

El beneficio para este estilo de codificación es que no tiene que desplazarse hacia arriba y hacia abajo tanto.

En realidad, me quedo en la pantalla, así que no tengo que desplazarse hacia arriba o hacia abajo. No tengo que desplazarse bien, ya que lo único a la derecha es el reinicio.

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video {   margin: 0px;   padding: 0px;   border: 0px;   outline: 0px;   font-size: 100%;   vertical-align: baseline;   background: transparent; } #navbar ul {   list-style-type: none;   margin: 0px;   padding: 0px; } #navbar ul li a {   text-decoration: none;   color: black;   } #navbar ul li a:hover {   color: white; } #navbar ul li {   font-family: Arial, Helvetica, sans-serif;    text-decoration: none;   color: #000000;   display: inline-block;   width: 70px;   height: 40px;   margin: 10px; } #banner {   background:url(./pieces/banner.png);   position: absolute;   margin-left: 0px;   min-height: 193px;   min-width: 183px;   background-repeat: no-repeat }  #title {   position: absolute;   background: url(./pieces/name.png);   margin-left: 190px;   min-height: 75px;   min-width: 285px; } #navbar {   position: relative;   top: 80px;   left: 210px;   margin-left: inherit; } #social ul li{   display: inline-block;   width: 35px;   height: 35px;   margin: 5px; } #social {   position: absolute;   float: left;   right: 180px;   top: -5px; } #social ul {   list-style-type: none; }  #innerheader {   height: 139px;   width: 750px;   margin-right: auto;   margin-left: auto;   position: relative; }  #header {   background:url(./pieces/headerBar.png);   position: static;       width:100%;   height:139px;   z-index: 10000; }  #pagecenter {   position: static;   margin-right: auto;   margin-left: auto;   height: 50px;   width: 750px;   min-height: 1000px;   background: url(./pieces/mainBG.png);   background-position: center;   background-repeat: no-repeat;   background-attachment: fixed;   margin-top: -19px;   z-index:50 } body {   width: 100%;   margin: 0px 0px 0px 0px;   background-color: #808080 } #footer {   margin-top:   20px;   padding-top:  30px;   background:   url(./pieces/footerbar.png);   height:       77px;   width:        100%;   margin-right: auto;   margin-left:  auto;   clear:        both;   bottom:       0px;   position:     static; } #footerbanner {   background:        url(./pieces/footerbanner.png);   position:          absolute;   min-height:        95px;   min-width:         90px;   background-repeat: no-repeat;   margin-top:        -30px; } 5  
 

Your HTML is good. Your CSS is good. Once you start coding more you will find out the way you like to style your CSS and HTML and then other languages. However, if you're working with other people or for a company, then you all likely would agree on certain coding styles.

This is how I prefer to do my CSS.

It doesn't show exactly visually correct on here since the width is limited. But if you copy paste it to a full notepad, you will see a better visual of how it really is pretty organized.

The reset is just one line at the top.

Similiar items don't have any line spacing between them. Like navbar ul, li, li a, li a:hover.

If a elements styling is going to be wider than the notedpad view, then I just hit enter and start a new line. An example of this is #pagecenter.

The benefit to this coding style is that you don't have to scroll up and down so much.

I actually fit all your CSS on the screen, so I don't have to scroll up or down at all. I don't have to scroll right , since the only thing to the right is the reset.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }  #navbar { position: relative;top: 80px;left: 210px; margin-left: inherit; } #navbar ul { list-style-type: none; margin: 0px; padding: 0px; } #navbar ul li { font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: #000000; display: inline-block; width: 70px; height: 40px; margin: 10px; } #navbar ul li a { text-decoration: none; color: black; } #navbar ul li a:hover { color: white; }  #banner { background:url(./pieces/banner.png);position: absolute; margin-left: 0px; min-height: 193px; min-width: 183px; background-repeat: no-repeat; }  #title { position: absolute; background: url(./pieces/name.png); margin-left: 190px; min-height: 75px; min-width: 285px; }  #social { position: absolute; float: left; right: 180px; top: -5px; } #social ul { list-style-type: none; } #social ul li{ display: inline-block;width: 35px; height: 35px;margin: 5px; }  #innerheader { height: 139px; width: 750px; margin-right: auto; margin-left: auto; position: relative; }  #header { background:url(./pieces/headerBar.png); position: static; width:100%; height:139px; padding:0; border:0; z-index: 10000; }  #pagecenter {position: static; margin-right: auto; margin-left: auto; height: 50px; width: 750px; min-height: 1000px;                  background:url(./pieces/mainBG.png); background-position: center; background-repeat: no-repeat; background-attachment: fixed;                    margin-top: -19px; z-index:50; }  body { width: 100%;margin: 0px 0px 0px 0px;background-color: #808080}  #footer { margin-top: 20px; padding-top: 30px; background: url(./pieces/footerbar.png); height: 77px; width: 100%; margin-right: auto; margin-left: auto;              clear: both; bottom: 0px; position: static; }  #footerbanner { background: url(./pieces/footerbanner.png); position: absolute; min-height: 95px; min-width: 90px; background-repeat: no-repeat; margin-top: -30px; } 
 
 
4
 
vote

No me importa todo lo que yo mismo. Prefiero dejar divos vacíos en una sola línea así:

  <div id="footer"></div>   

Puse la etiqueta de cierre en una línea separada solo donde hay contenido, y en cualquier caso, por supuesto, sangrar según corresponda para facilitar la lectura.

Puede reducir su CSS Restablecer un trozo usando un selector más universal. En lugar de esto:

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0px; padding:0px; border:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; }   

Intente esto con sus selectores, y coloque todos sus CSS en una línea por declaración:

  html, html * { padding:0px; border:0px; margin:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; }   
 

I don't care for all that whitespace myself. I prefer to leave empty divs on a single line like so:

<div id="footer"></div> 

I put the closing tag on a separate line only where there is content, and in either case, of course, indent as appropriate for ease of reading.

You can reduce your CSS reset chunk by using a more universal selector. Instead of this:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header,&nbsp;hgroup, menu, nav, section, menu, time, mark, audio, video { margin:0px; padding:0px; border:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; } 

Try this with your selectors, and put all your CSS on one line per declaration:

html, html * { padding:0px; border:0px; margin:0px; outline:0px; font-size:100%; vertical-align:baseline; background:transparent; } 
 
 
   
   
4
 
vote

Hay un mensaje de error si comprueba esto contra el el servicio de validación de marcas W3C . Sugiere que agregue un elemento como,

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >   

o, para html5 , simplemente:

  <meta charset="utf-8">   

Tal vez este "error" particular no es un error importante en esta etapa.

Pero quería mencionarlo porque quiero que lo sepa http://validator.w3.org/ existe: le recomiendo que use esto para "validar" su HTML terminado antes de publicarlo.

 

There's an error message if check this against the The W3C Markup Validation Service. It suggests you add an element such as,

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 

Or, for HTML5, simply:

<meta charset="utf-8"> 

Maybe this particular 'error' isn't an important error at this stage.

But I did want to mention it because I want you to know that http://validator.w3.org/ exists -- I recommend you use this to 'validate' your finished HTML before you publish it.

 
 
   
   
-7
 
vote

No veo problemas con eso. Sin embargo, en la sección HTML, intente agregar tal vez 2 líneas de espacio en blanco entre los todos los DIV. Un ejemplo se encuentra abajo.

  <div id="pagecenter">   </div>   <div id="footer">   <div id="footercontent">   <div id="footerbanner">   </div>   </div>   </div>   </body>   </html>    

Esto podría ayudar a que su código se vea más limpio, separado y más fácil de mantener con el tiempo. Espero haberme ayudado!

 

I see no problems with it. However, at the HTML section, try adding maybe 2 lines of blank space in between the all of the divs. An example lies below.

<div id="pagecenter">   </div>   <div id="footer">   <div id="footercontent">   <div id="footerbanner">   </div>   </div>   </div>   </body>   </html>  

This could help your code look more clean, separate, and easier to maintain over time. I hope I helped!

 
 
       
       

Relacionados problema

5  CSS & JS PIECHART  ( Css js piechart ) 
Hice un public class Question { public static void main(String[] args) { //A hypothetical list of tasks to run asynchronously List<Call...

2  Limpiando una galería de imágenes rotativas  ( Cleaning up a rotating image gallery ) 
He creado una pequeña galería de imágenes para la web. Me propuse querer 3 cosas. 1. Toda la galería tenía una capacidad de respuesta a nivel básica. 2. La ga...

1  Sube y arrastra la imagen dentro de una imagen de máscara  ( Upload and drag the image inside a mask image ) 
Estoy permitiendo a los usuarios subir y arrastrar imágenes con este código. Dame una revisión de esto. Codepen $part = '@CRC := MD5(CONCAT_WS('#', COA...

1  Sitio web construido con HTML y CSS  ( Website built with html and css ) 
Por favor revise esto: 99887766555443312 ...

8  Div en la lista desordenada - buena práctica?  ( Div in unordered list good practice ) 
Quiero hacer un formulario que se parece a esto: public interface IAds { void ShowVideoAd(); void PreLoadVideoAd(); bool IsAdAvailable(); } 3...

3  Estructuración simple HTML5 / CSS3 / Javascript Math Aplicación web  ( Structuring simple html5 css3 javascript math web app ) 
Soy nuevo en las aplicaciones web y estoy teniendo dificultades para estructurar mis aplicaciones. Puse una aplicación web de matemáticas muy simple que deseo...

2  Abriendo una navegación  ( Opening a navigation ) 
El objetivo de esta función es abrir un menú con una clase CSS (la animación se realiza a través de la transición CSS), llame a una superposición en la parte ...

6  ¿Cómo optimizar mi página web CSS / HTML?  ( How to optimize my css html webpage ) 
Estoy trabajando en un sitio web (HTML / CSS) para mejorar mis habilidades, pero no estoy seguro de si lo estoy haciendo de la manera correcta, porque tengo m...

3  Inclinación en la imagen de flores  ( Tilt on hover image ) 
Estoy solicitando una revisión de este código para ver si estoy siguiendo las mejores prácticas comunes o si hay una mejor manera de realizar el objetivo esta...

4  Desplazamiento horizontal receptivo en la posición del mouse  ( Responsive horizontal scroll on mouse position ) 
Estoy haciendo un Responsive Scroll Horizontal Ui . La posición de desplazamiento horizontal se calcula de acuerdo con la posición horizontal del mouse: ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos