Autor Tema: CSS y HTML aplicar Visibility, scroll, hidden, collapse y Overflow (CU01038D)  (Leído 1937 veces)

Jack_F

  • Visitante
Citar
EJERCICIO CU01038D del programa formativo en programación web con CSS
Crea un contenedor div con las siguientes características definidas a través de CSS: ancho y alto 200 píxeles, color de fondo amarilo, borde color azul de 2 píxeles de ancho tipo sólido, un texto de tamaño 30 píxeles y con un largo suficiente para exceder la capacidad del div contenedor, y mediante la propiedad overflow haz que aparezcan scrolls horizontal y vertical que permitan visualizar todo el texto.

Código HTML:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title>Portal web - aprenderaprogramar.com</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="estilos.css">
    </head>
    <body>
            <h1>Albert Einstein</h1>
            <div id="logo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxq1aynZ5LoMB8cMl3sF5YwLY9BuRgcKnAYaoRQ2t1mLv9w_JjeED_sSeB" alt="albert" width="200px" /></div>
            <br />
        <div id="contenedor">
              <p>Albert Einstein (en alemán [ˈalbɛɐ̯t ˈaɪnʃtaɪn]; Ulm, Imperio alemán, 14 de marzo de 1879-Princeton, Estados Unidos, 18 de abril de 1955) fue un físico alemán de origen judío, nacionalizado después suizo, austriaco y estadounidense. Es considerado como el científico más conocido y popular del siglo XX.1 2

En 1905, cuando era un joven físico desconocido, empleado en la Oficina de Patentes de Berna, publicó su teoría de la relatividad especial. En ella incorporó, en un marco teórico simple fundamentado en postulados físicos sencillos, conceptos y fenómenos estudiados antes por Henri Poincaré y por Hendrik Lorentz. Como una consecuencia lógica de esta teoría, dedujo la ecuación de la

física más conocida a nivel popular: la equivalencia masa-energía, E=mc². Ese año publicó otros trabajos que sentarían algunas de las bases de la física estadística y de la mecánica cuántica.
En 1915 presentó la teoría de la relatividad general, en la que reformuló por completo el concepto de gravedad.3 Una de las consecuencias fue el surgimiento del estudio científico del origen y la evolución del Universo por la rama de la física denominada cosmología. En 1919, cuando las observaciones británicas de un eclipse solar confirmaron sus predicciones acerca de la curvatura de la luz, fue idolatrado por la prensa.4 Einstein se convirtió en un icono popular de la ciencia mundialmente famoso, un privilegio al alcance de muy pocos científicos.5

Por sus explicaciones sobre el efecto fotoeléctrico y sus numerosas contribuciones a la física teórica, en 1921 obtuvo el Premio Nobel de Física y no por la Teoría de la Relatividad, pues el científico a quien se encomendó la tarea de evaluarla no la entendió, y temieron correr el riesgo de que luego se demostrase errónea.6 7 En esa época era aún considerada un tanto controvertida.

Ante el ascenso del nazismo, Einstein abandonó Alemania hacia diciembre de 1932 con destino a Estados Unidos, donde se dedicó a la docencia en el Institute for Advanced Study. Se nacionalizó estadounidense en 1940. Durante sus últimos años trabajó por integrar en una misma teoría la fuerza gravitatoria y la electromagnética.

Aunque es considerado por algunos como el «padre de la bomba atómica», abogó por el federalismo mundial, el internacionalismo, el pacifismo, el sionismo y el socialismo democrático, con una fuerte devoción por la libertad individual y la libertad de expresión.8 9 10 11 Fue proclamado como el «personaje del siglo XX» y el más preeminente científico por la revista Time.12
</p>
        </div>
    </body>
</html>

Código CSS:
Código: [Seleccionar]
/*Curso CSS - aprenderaprogramar.com*/
*{
font-family: arial;
}
body{
background-color: purple;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHoAegMBIgACEQEDEQH/xAAZAAADAQEBAAAAAAAAAAAAAAACAwQBAAb/xAA1EAACAQMDAgUBBQcFAAAAAAABAgMAESEEEjFBURMiMmFxgRQjQlKRBSQzcrHB4TRTkqHR/8QAFwEBAQEBAAAAAAAAAAAAAAAAAAEEA//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APTjzE4/SiAJICgk+1CDY3qyXUSiKJla24WNu4rM7OlfYirqAJGPIBsR2zS/3bnZIT/MKnJPNGvF6Crc0kJEHlZb3W+StRjqDgjvWliDdSQRxaq1nk+zuzte7bVxxQTehwRytqI6mYn+I1LY3JtQZvQOkleQAOb24NCBQ3vVOikIcx48wxfvQdpQ4LWIEQ9W4YrmeBzdkcE9jf8ArS5Jnk9bGw6dKDg0FMbQxyDaGtwST0oNQHDgObgek9LUCG9PR5FIVWwSBY5FBPW2FFq5N8zW4XApN6AoomkuQQFHLHgU9ljEUSNIQPMQQvOax0LSeEPLDCPM3v1+tJmlEkl1FlAso7Cg2WEoodSHQ8MKWuadpCWaSOxKshx7ilrDJcXR7YztNAxISyb3YInc9fimbYmg2rL5Q1ySp5+aXrGJmZfwrgDtQQuqkrJ/DcWPt2NBzRNEdr2ueCODQsPLeqo0ZY3gfIC7ozUrk8UGKpqrTwmOVGkIBGdnUCxotPZY2ktcrgfJpcn3CMGN5pOfYf8AtAKwrIPuZQzW9JwT8UogjB57UNtouMHpT9QGkaKRVJLoC1h1qgYwWYBRcniqECJIu6YbweAL0EW6OCRwNrYXOCKSMZqBsuna7MhDgZIHI+lT1YxYgTx+tfUP705YNNIocixYXtagknL6iMSxsWj5ZB+FutTW5NZE7xtuRip9qp1kshhhjdr3G5v7UCI5ZIySh2k4uKIzS8+K9/5jSwbmu5qgpHZzuc3NdzixrLi1VQzyDRsEaxjI/Q0DIy8UF5eD6Ubr7+1IZ9OWzHIPZXxSi7MSWYk0NQXQSoSY4vu75Uk9allDCQ7wd3W9BftVeknluQzEoqlrGglcXW1EZ5iAPEYAC1lNqwsXJZjk5olAtVHePIVKs5IPfNbGdxtU7evFP00hjlDdL5oHKkm+8Vwe9NaWAEglCepEf+aHUyuGZC2B2qbHaoOMCRgfaZdjHOxRc02SJZvDKy2JUBQ4tuA96iZmLMWNyTe9UQkTxeA2GBvGT36igSysjFWBBHIruWqmUM+nDSA+LG21r826VKpwe9UHGjSPsjF2/pVKRJFDLukBDbVYqODeujRxAiRAlpvMx9u1K1TqFWFPMq8n8xqDWgBjLwOJAORaxH0pN8VuicpOpHO4fUU2aB/GcJG20E2xQDFC0pO2wUZZjwKohSJd6JKSWXJCUue8cESWIDAs1+ppEUhjlVx0oGyQmNQykPGfxKb/AK9qUx7VUo8OUMvm00xsfb5qWVfDkZT+E2qjLU+OAlQ7EID6b8t8Ch0yCSYBvSPMfgU8Md32mbH+2vegKZY3mb73a17WIxxS/ss35L/WpyxLE9zTRK4GHb9agkyemaNI3Y7VRie1qDmrNTqJjDCyyMA6kMB3FUFJJ4SpHLtmb8V+ntelGTTLxA3/ADNTLzXG55oLkc6jTlYRtdfwA8r0/SpGR9xBRrjpahGLEEgjgirBqJfsTFnLFm2i/a2agljJQhl9Q4pgmlLZle/81JvitXv1qg5JZJAA7FtvF6xBi9jQrVWgkZZGRTbcDb5tQbpRKm6Qnw4uu4YP0oTLA5vJCQTyVekySyS5kYsfeg6UFUc0CSArGyjhiWvcVmpSQPuclgeGHBFT3p2lll8RUikKhiLigWRbmtpmqkMs7G5sDYUrFB0WnaQF2YRxry7cfFPkWFYoUkd9tiykDoT2+lFNGHk2vdNNDi/c9fqajnkM0he1ugHYUDJYNiCRHEkZPqHT5pVP0N38aLlWjJsO9d9lmuA0T2uL4oMSAeEJZ38ND6epb4FNVIH0+1ZHCK3qZRyaTrmLapweFNlA6Cu0sioWWT+G4s3t70GTwNC3myDww4NLBqwRuIpIJCGXaXjYcE1IBioNsSQq5J4Heq9NB4MwLuN6gkoOgt1pemukUkqAl7hEsOCa5v3eIx3vM/rN72HaqOWCOUAQy+e3pYWv8GkWIYqwsRisv2uD7VTqYpJTHIiElowWKjrQJjjaV9qC5qiNYIpV+9LSA42Li9YiPDpZSQVZmC5FsVNyb0FMmnuXMT7yOVtZhU2fb9aqu0u3URH71PWvf3qpYdPIocqLsL0EWoV9Uomhuwt5ox+E9cVK0cii7owHuKBWKNdSQe4qvXSNshjZibIGJJ5JoERyPHfYxUnkjFcJH3X3m/zS6Kg13Z2uxueLmiWOQgWjax48ppZqyKVxoWCMVMbDg9D/AJoCG7SwWka5Y4iORb3FLM8FhfTC5/K5Aqc3JuTcmu+agshmRt0SgQgjykE855/WkSQyq3nja/wTelVZopZF3kuxVEJ2k4v0qiRgVNiCD70bTStzI/tmguTk8nk1lA3xn2ld7FT0JoEBJsoLfFYKZAxinRx0OaA9NDKWDLdAOXOAKoOqQEiwPv4a5pGseXxnRnYgHqantQOaGCDGodmk6rHbH1ps0cU3hnxGRnXyb7EG2ORUJyb9TT3z+z09pSB7YqBUkbxOUkFmHShqrV502jY5JQ3NSdaobDE0zWWwCi7MeBVQWGKCSzs6MyqSBa5GTalHH7Nxi8uffFFqABpNLbGGP/dQYYY5ELaZy23LIw81Tc07QkjWQ2J9dqXJiR7fmNUNggMil3YJEvLEU+Each44jMdwybLkClajGi01sXvWaQ21Mdu9B0sG1PEicSRcEgZHzSaq0v8Aq51/DsbHSpTzQdVK6awXxm2s/oS2TSdNnVQg/nH9apgJP7Sck3szWv8AFBs/2eSd90jo+626117UP2GbptI735qPr9aIuwNgxA+ag//Z);
}
h1{
text-decoration: underline;
  text-align: center;
}
#logo{
width: 200px;
  margin: auto;
}
#logo img{
border: solid 2px blue;
}
#contenedor{
width: 200px;
  height: 200px;
     background-color: yellow;
        border: solid 2px blue;
          overflow: scroll;
              margin: auto;
}
p{
font-size: 30px;
}

Un saludo para todos. :D
« Última modificación: 14 de Mayo 2017, 19:55 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Visibility, scroll, hidden, collapse y Overflow (CU01038D)
« Respuesta #1 en: 21 de Marzo 2017, 00:07 »
Buenas.

El ejercicio está bien resuelto.

Saludos. ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".