johan bautista web pre-work Bcn#42
johan bautista web pre-work Bcn#42johanBautista wants to merge 3 commits intoironhack-labs:masterfrom johanBautista:master
Conversation
| </nav> | ||
|
|
||
| <header id="fondo" > | ||
| <div id="barraSuperior"> |
There was a problem hiding this comment.
Acostúmbrate a escribir todas las clases e ids en inglés.
| </div> | ||
|
|
||
| <div id="informacion"> | ||
| <h1 class="espacio">Build amazing things</h1> |
There was a problem hiding this comment.
También intenta que las clases sean más atómicas. Es decir, que puedas reutilizarlas para otros elementos. No estoy diciendo que esta en concreto esté mal.
| <p>npm is the package manager for javascript and the world's largest </br> | ||
| software registry. Discover packages of reusable code -- and</br> | ||
| assemble them in powerful new ways</p> | ||
| <button class="boton informa">Sign up for npm</button> |
There was a problem hiding this comment.
Muy bien estas dos clases a mi parecer. Una que le da un estilo de botón y otra que le da estilo a un botón de información. Estas clases en inglés ya sería paerfecto.
| <div id="colaboracion"> | ||
| <div id="imagenCol"> | ||
| <!-- <img src="images/collaboration.svg" alt="Find"> por que no puedo poner la imagen y el texto al mismo | ||
| nivel la imagen me da un salto de bloque?? --> |
There was a problem hiding this comment.
Un tag img es un elemento inline, y un texto (a no ser que esté dentro de un tag span) será un elemento en bloque, por lo que siempre empezará en una nueva linea ocupando el 100% en ancho de su padre. Para cambiar el tipo de elemento de un tag, con css podemos especificarle la propiedad display: con el valor que nos interese (dentro de los disponibles, inline, block, inline-block, none, etc.)
There was a problem hiding this comment.
En este caso la imagen (inline) está dentro de un tag div (en bloque) por lo que estás intentando poner dos elementos en bloque uno al lado del otro, y esto no se puede a no ser que cambies su display, ya que un elemento en bloque siempre empezará en una nueva linea.
| </div> | ||
| </body> | ||
| <!-- la configuracion imagen y texto al lado lo dispongo por medio de layouts o utilizo la propiedad | ||
| text-alling y derivados? --> |
There was a problem hiding this comment.
Dependerá con que tipo de elementos estés trabajando. Un text-align: center centrará su contenido hijo en el caso que padre sea block e hijo inline. Si esto mismo lo hacemos sobre un padre block con un hijo block, no tendrá ning'un efecto.
| body{ | ||
| font-family: 'avenir'; | ||
| } | ||
| nav { |
There was a problem hiding this comment.
Como buena práctica, no se suele seleccionar por tag, sólo en algún caso específico.
| background:url(images/forklift.svg) no-repeat right; | ||
| background-size: cover; | ||
| } | ||
| #informacion3{ |
There was a problem hiding this comment.
Los ids se suelen dejar para seleccionar los elementos en javascript. En css se suele seleccionar por clase.
| } | ||
| /*por que el tercer article me queda unos px mas abajo | ||
| que los demas | ||
| - tambien la imagen del header se queda pequeña y no se redimension |
There was a problem hiding this comment.
cuando pones un background-image, casi siempre será necesario especificarle como se va a comportar esa imagen con la propiedad background-size. Échale un vistazo a esta propiedad que te comento.
| /*por que el tercer article me queda unos px mas abajo | ||
| que los demas | ||
| - tambien la imagen del header se queda pequeña y no se redimension | ||
| -los textos se solapan con la imagen.. |
There was a problem hiding this comment.
Cuando hay solapamiento suele ser porque los margins y/o paddings de elementos inline y en bloque colapsan. Habría que verlo con algo más de detenimiento para ver todas las propiedades que te afectan.
| color: rgb(135, 145, 156); | ||
| } | ||
| /*por que el tercer article me queda unos px mas abajo | ||
| que los demas |
There was a problem hiding this comment.
No te preocupes de momento, cuando veamos html y css, no te pasará
AlexBHdez
left a comment
AlexBHdez
left a comment
There was a problem hiding this comment.
Muy bien en general. Míra los comentarios que te he hecho en alguna de las lineas.
2 participants
No description provided.