So im just learning to make a webpage with super basic CSS thats supposed to look like this:
i put the class name in red
But when i typed the code,wich is this:
<!DOCTYPE html>
<html lang="es-ES">
<html>
<head>
<title>2do parcial PROYECTO</title>
<style>
h1{
text-align:center;
background-color:violet;
border-width: 2px;
}
p.cul{
text-align: center;
font-family: Aharoni;
font-size: 35px;
background-color:violet;
border-style: dotted;
border-width: 2px;
width: 1050px;
}
div{
float:left;
background-color: lightcyan;
width: 200px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img{
float:middle;
}
div.one{
float:right;
background-color: lightcyan;
width: 330px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
p{
float:left;
background-color:lightcyan;
width:782px;
}
img.one{
float:right;
}
p.dep{
text-align:center;
font-family:Aharoni;
font-size:35px;
width:1050px;
background-color:violet;
border-style: dotted;
border-width: 2px;
}
div.cuadrote{
float:left;
position: absolute;
right: %100;
bottom: 800px;
background-color: lightcyan;
width: 200px;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img.batorojo{
position: absolute;
right:570px;
bottom: -394px;
}
}
div.cuadrito{
vertical-align:middle;
background-color: lightcyan;
border: 15px solid red;
padding: 25px;
margin: 15px;
}
img.caribe{
float:right;
position: absolute;
right:35px;
bottom:-360px;
}
p.blueboxie{
background-color:lightcyan;
float:left;
width: 1000px;
}
</style>
</head>
<body>
<h1>Evaluacion 2</h1>
<p class="cul">Eventos culturales</p>
<div>¡NUEVOS CURSOS CULTURALES EN CEART DISPONIBLES!Se cuentan con clases de:
*Artes plasticas(Lunes,miercoles y viernes de 5:00 a 6:30pm)
*Ballet(Lunes,miercoles y viernes de 7:30 a 9:00pm)
*Violin(Martes y jueves de 9:00 a 11:00am)</div>
<img src="http://mexicali.org/wp-content/uploads/2012/08/Centro-Estatal-de-las-Artes.jpg" alt="x" width=300 height=200>
<div class="one">Se anuncian proximamente funciones de teatrales de obras de shakespeare en el teatro del estado,
entre ellas se encuentran desde clasicos como Hamlet o Romeo y Julieta hasta los escritos mas recónditos del autor ya mencionado.Puedes conseguir entradas en ticketmaster.com o comprarlas en la taquilla del teatro a partir del 10 de abril.Informes o dudas al (686)111-1111</div class="one">
<p>Con un festival artístico-cultural el Instituto Municipal de Arte y Cultura de Mexicali (IMACUM) conmemorará el 42 aniversario luctuoso del legendario compositor y cantante José Alfredo Jiménez.
El evento tendrá lugar en las instalaciones de la Casa de la Cultura de la Juventu (CREA Cultura) este sábado 21 de noviembre, y para ello se han organizado una serie de actividades gratuitas para el goce de los mexicalenses.
A las 7:00 p.m. en la Galería-Vestíbulo se inaugurará la exposición colectiva “Nomás nuestro amor”, en la que participan artistas gráficos, plásticos e ilustradores, entre ellos Gabriela Badilla, Odette Barajas, Gabriela Buenrostro, Luis Felipe Vargas Brownell, Fernando Corona, Aída Corral, Carlos Cortez, Mara Leticia Dorantes, Roberto Figueroa, Gloria Gachuz, Marco Manríquez, Pablo Martínez, Rogelio Pérezcano, Natalia Rojas, Karla Sánchez, y Karina Venegas.
Estos artistas tomaron el nombre de una canción de José Alfredo para de ahí generar su pieza con libertad de creación, lo que el público mexicalense podrá observar una gran variedad de propuestas en cuanto a trabajo, técnica y colorido.</p>
<img class="one" src="http://www.zonalider.com/sites/default/files/styles/scale_max_width_auto_height/public/article/image/jose_alfredo_jimenez.jpg?itok=9cZnT7Ir" alt="x" width=250 height=200></img>
<p class="dep">Eventos deportivos</p class="dep">
<div class="cuadrote">¿SABÍAS QUE?...El juego de béisbol más Largo tuvo lugar en el año 1981,
en las Ligas Menores donde se jugaron 33 entradas. Se enfrentaban Rochester (NY) Red Wings contra Pawtucket (RI) Red Sox. Al entrar en la entrada número 21 el juego seguía empatado 2-2 y fue suspendido. Dos meses después el juego se reasignó
y en 18 minutos el Pawtucket anotó la carrera del gane.</div>
<img class="batorojo" src="http://allswalls.com/images/boston-red-sox-baseball-mlb-k-wallpaper-1.jpg" alt="x" width=200 height=170></img>
<div class="cuadrito">Respecto al base ball se encuentra proximamente la variedad de juegos de la serie del caribe, incluyendo duelos epicos como el de CUBA vs HAITI , ¡No te los puedes perder!</div>
<img class="caribe" src="" alt="x" width=200 height=170></img>
<p class="blueboxie">¡SE LE CHISPOTEO!GUADALAJARA, JALISCO (02/ABR/2017).- El Zorro es de los pocos animales capaces de tropezar con la misma piedra dos veces.
Anoche, Matías Alustiza había tenido una noche de ensueño. Dos goles suyos tenían al Atlas en la pelea en el partido y en el Clausura 2017.
A dos minutos del final el argentino puso la pelota en el manchón penal por segunda vez en el juego. En sus pies tenía la victoria que colocaba a los tapatíos en zona de Liguilla.
Alustiza cobró el penalti que representaba la victoria igual que el penalti que representó en su momento el empate a tres. Un disparo con mucha dosis de humillación al arquero.
Gibrán Lajud adivinó la intención del argentino y no se dejó sobajar una segunda vez. Recostó a su derecha y se quedó con la pelota y con el punto para su equipo.
Sí, Alustiza hizo un “Ponchito” González y el Atlas empató 3-3 un juego que debía y tenía que ganar.</p>
</body></html>
Everything looks ok on the top but the bottom part of the page has a the textbox "cuadrote" missing and the images are reallocated .Also i used the command poistion (googled it , i dont really know how it works)to fix the images yesterday but they got messed up again.
Heres what the bottom part of the page looks like in my pc
Pretty pretty please help me its a school project due today :P
Something messy about your code, this may sound unrelated but it may speed up with anyone offering help.
Why are you closing your tags with the class in it?
just to name a few:
<p class="dep">...</p class="dep">
<div class="cuadrote">....</div class="cuadrote">
<img class="caribe" src="" alt="x" width=200 height=170></img class="caribe">
Use:
<p class="dep">...</p>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a button within a div?
(16 answers)
Closed 1 year ago.
Why can I align this button on html, you normally put a text-align: center a tat all. I don't know if I'm doing anything wrong or what.
<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<button href="https://mediassegur.com/proteger-para-progresar" style="text-align:center;">Leer mas</button>
</div>
Thx.
Just use margin to achieve this.
button {
width: auto;
display: block;
margin: auto;
}
<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<button href="https://mediassegur.com/proteger-para-progresar">Leer mas</button>
</div>
Add button in one <div> and add text-align:center in div
<div style="background-color:rgba(129,180,30, 0.9); width: 40%; margin-top: 50px; padding-left:10px; padding-right:10px; padding-top:10px; text-align:justify">
<h2>Proteger para progresar</h2>
<h5>La condición humana está muy ligada al progreso. En mayor o menor medida, todos queremos progresar en aquellos ámbitos en los que nos centramos en nuestro día a día. Los padres quieren que sus hijos estudien y sean buenas personas para que les vaya bien en la vida.</h5>
<div style="text-align:center;"><button href="https://mediassegur.com/proteger-para-progresar">Leer mas</button></div>
</div>
this might be a stupid question but I'm stuck and need some help. I'm practicing float and div, and I managed to create this simple page but when I zoom out to 90% the box on the far right falls down to below. I tried to debug but I can't figure out what is causing this problem--could anyone help me? Below is the link to the mentioned page.
http://ratiayson.dothome.co.kr/day14_0225/coffeebeans2.html
I noticed you have given width: 876px on the .container.
Bump it up to 900px and it will work.
PIECE OF ADVICE
Hellow #Ratia, using float is a good idea, but using grid and flex based layouts is the best idea.
Float will require you to put lots of code to do a basic thing, Grid and Flex will do everything for you. Even auto responsiveness(Which is what you asked there above)
I urge you to use grid or flex...
Try This:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Layout</title>
<style>
*{margin: 0; padding: 0;}
a{ text-decoration: none; color:#333;}
li{list-style: none;}
img{border: none;}
body{font-size: 12px; font-family: 'sans-serif';}
.header{
margin:auto;
width:876px;
}
h1{
font-size: 30px;
font-weight: 900;
width:876px;
}
h2{
font-size: 30px;
font-weight: 900;
font-family: sans-serif;
color:saddlebrown;
padding-bottom: 30px;
text-align: center;
}
.container {
display: table;
border-spacing: 10px;
margin:auto;
width: 876px;
clear:both;
}
.container div{
border: 1px dotted brown;
padding: 15px;
}
.Column {
display: table-cell;
}
.container img{
padding-bottom: 30px;
/*overflow:hidden;*/
}
p{
font-size:14px;
font-weight: 600;
padding-bottom: 50px;
}
.container span{
font-size:16px;
background-color:goldenrod;
}
.bottomBox{
background-color: #333;
clear:both;
margin:auto;
width:874px;
height:50px;
color:azure;
text-align: center;
font-size: 16px;
padding-top:30px;
width:874px;
}
</style>
</head>
<body data-new-gr-c-s-check-loaded="8.871.0" data-gr-ext-installed="">
<div class="header">
<h1>coffee beans</h1>
</div>
<div class="container">
<div class="liberica Column">
<h2>Coffee Liberica</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="arabica Column">
<h2>Coffee Arabica</h2>
<img src="https://minisoft.com.bd/uploads/portfolios/minisoft.png" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<div class="robusta Column">
<h2>Coffee Robusta</h2>
<img src="http://ratiayson.dothome.co.kr/day14_0225/images/bean1.jpeg" alt="">
<p>Desde 1835 se comenzó a cultivar comercialmente <span>el grano de café en Colombia13</span> en Salazar de las Palmas, Norte de Santander. Gran parte del incentivo a la producción se le atribuye a Francisco Romero, sacerdote de la época que imponía a los feligreses de la población, durante la confesión, la penitencia de sembrar café. Esto fue un gran impulso para la propagación del cultivo del grano en esa zona del país. </p>
</div>
<!--<div class='bottomBox'>
<span class='bottomText'><p>유명하고 비싼 커피보다 신선한 커피가 맛있습니다</p></span>
</div>-->
</div>
<div class="bottomBox">
coffee beans
</div>
</body>
</html>
I am creating a website that has a header, a sidebar on the left, a main content at the center, where information will be displayed, a right side-bar, and a footer that will contain an image or something. The header and footer were left out of the grid template.
For this question I am focusing only on the following classes: .sidebar(left-sidebar aka a table of content or index), .contenido-carrera(information displayed), and .publicidad(right-sidebar)
All the sections were defined by using this piece of CSS
.carrera-grid {
margin: 120px 12px;
display: inline-grid;
grid-template-columns: 230px fit-content(80ch) 170px;
grid-gap: 10px;
}
You can tell the content in the center is by far the largest. First sidebar will contain a list of elements like "Table of contents" on Wikipedia, and the one with 170px will be kept for publicity.
.sidebar {
display: inline-block;
position: relative;
top: 50px;
}
.publicidad {
border: 1px solid black;
text-align: center;
display: inline-block;
position: relative;
display: flex;
justify-content: start;
align-items: center;
left: 10px;
top: 50px;
flex-flow: column;
}
.publicidad > div {
height: 200px;
border: 1px solid blue;
width: 120px;
margin: 6px;
}
I tried to set display:flex just on the centered element, .contenido-carrera but this makes a undesired/unwanted layout/design, makes all items to lose their width and space between them while not using the fixed space that was intended on the grid.
.contenido-carrera {
text-align: justify;
display: inline-block;
position: relative;
bottom: 90px;
}
https://streamable.com/b6itn
As you can see, the item on the centered element is affected by an overflow within itself. So how can I make this as responsive as possible? Thought of using media-queries but am currently running bootstrap on this page, so I wouldn't like to get in the way of that.
Like previously mentioned the header and footer were left out of the grid-template.
<main class="carrera-grid">
<div class="sidebar">
<ol>
<label>Tabla de Contenidos</label>
<li>¿Qué es la Mercadotecnia?</li>
<li>Objetivos de la Mercadotecnia</li>
<li>Tipos de Mercadotecnia</li>
<li>Importancia de la Mercadotecnia</li>
<li>Para qué nos Sirve la Mercadotecnia</li>
<ul> <!-- Inicio de PRIMERA subdivision de lista-->
<li>Crear una imagen corporativa</li>
<li>Atraer clientes</li>
<li>Mejora la estrategia de publicidad</li>
<li>Tomar decisiones</li>
</li>
</ul> <!-- Fin de PRIMERA subdivision de lista-->
<li>Ejemplos de Mercadotecnia</li>
<ol> <!-- Inicio de SEGUNDA subdivision de lista-->
<li>Uber</li>
<li>Whirlpool</li>
<li>Andes Bar 45</li>
<li>Netflix</li>
<li>Walmart</li>
</ol> <!-- Fin de SEGUNDA subdivision de lista-->
<li>Cuáles son los elementos de un Plan de Mercadotecnia o Plan de Marketing</li>
<ol> <!-- Inicio de TERCERA subdivision de lista-->
<li>Investigación</li>
<li>Producto</li>
<li>Análisis de la competencia</li>
<li>Presupuesto</li>
<li>Precio, posicionamiento y marca</li>
<li>Traza objetivos reales</li>
<li>Monitorea y analiza los resultados</li>
</ol> <!-- fIN de TERCERA subdivision de lista-->
<li>Cómo definir una estrategia de Marketing Online</li>
<li>Conclusión</li>
</ol>
</div>
<div class="contenido-carrera">
<h1>¿Qué es la Mercadotecnia?</h1>
<p style="font-weight: bold;">La mercadotecnia es un conjunto actividades que se realizan para identificar las necesidades de un
público determinado con el objeto de brindarle productos o servicios para satisfacerlos de la forma más adecuada.</p>
<p>La mercadotecnia se encarga del proceso de planificación de las actividades de la empresa en relación con: el precio, la promoción,
distribución y venta de bienes y servicios que ofrece.</p>
<p><strong>Ayuda a definir el producto o servicio de acuerdo con las preferencias de los consumidores con el fin de acelerar el proceso de compras.</strong>
De esta manera se podrá crear un intercambio entre las empresas y consumidores que satisfaga los objetivos de ambas partes.<br>
<br>Philip Kotler, el gurú del marketing, dice que la mercadotecnia es:
<div class="frase">
<p>“El proceso social y administrativo por el cual los grupos e individuos<br>
satisfacen sus necesidades al crear e intercambiar bienes
y servicios”</p>
</div><br>
Según la Asociación Americana de Marketing (AMA, por sus siglas en inglés)<br>
<br>
<div class="frase-lg">
<p>“la actividad, el conjunto de instituciones y los procesos para crear,
comunicar, entregar e intercambiar ofertas que tienen valor para los
clientes, clientes, socios y la sociedad en general.”
</p>
</div><br>
Por su parte, William J. Stanton dice que la mercadotecnia se refiere:<br>
<br><div class="frase">
<p>“al desarrollo de las actividades del negocio que dirigen el flujo de
mercancías y servicios del productor hacia el consumidor o usuario.”</p>
</div><br>
Finalmente, Martin L. Bed conceptualiza la mercadotecnia como aquellas “actividades integradas de una empresa, dirigidas hacia la satisfacción de las necesidades
de los clientes con un margen de utilidad.”
<br>En resumen, la mercadotecnia implica la incorporación de una serie de técnicas, estrategias y prácticas cuyo objetivo principal es agregar valor a las diferentes marcas o productos a fin de satisfacer las necesidades de los consumidores.
</p>
</div>
<div class="publicidad">
<div class="publicidad-1">Publicidad</div>
<div class="publicidad-2">Publicidad</div>
</div>
</main>
I am trying to make different website animations and using responsive design.
The problem is when I try to apply this changes to my header and affects also to my .heading element. I realized that something is happening with the height in the #main where apparently its height is 0.
Its probably bacuse the structure is not well made.
Could you help me with that? Hope my explanation is clear.
I share with you my code:
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
100% {
opacity: 1;
transform: translate(0);
}
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
/* Esto es para las animaciones */
header {
float: left;
top: 0;
left: 0;
width: 100%;
animation-name: moveInLeft;
animation-duration: 2s;
animation-timing-function: 1s;
overflow: hidden;
}
#container {
overflow: hidden;
}
html {
font-size: 62.5%;
font-family: 'Ubuntu', sans-serif;
}
body {
font-size: 2rem;
box-sizing: border-box;
}
.options {
background-color: #777;
width: 100%;
display: block;
z-index: 1;
height: 3.5rem;
margin-bottom: 3rem;
}
.select-active {
background: green;
}
.options ul {
list-style-type: none;
}
.options ul li {
float: left;
transition: all 1000ms;
}
.options ul li a {
display: block;
padding: 0.55rem;
color: white;
text-decoration: none;
}
.special {
word-spacing: 0px;
}
.submenu {
width: 15%;
float: left;
background-color: white;
margin-top: 1.3rem;
}
.body {
width: 80%;
float: left;
padding: 1.5rem;
}
.heading {
color: black;
text-align: center;
font-size: 5rem;
padding: 0.6rem;
background-image: linear-gradient( to right bottom, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)), url(/images/logo.png);
margin-left: 5rem;
width: 95%;
}
.text {
text-align: left;
text-align: justify;
padding-top: 5.5rem;
padding-right: 1rem;
margin-top: 3rem;
margin-left: 5rem;
font-size: 1.5rem;
}
h2 {
text-align: left;
padding-right: 1rem;
margin-top: 4rem;
}
.footer {
background-color: grey;
float: left;
width: 100%;
color: white;
padding: 4.2rem;
margin-top: 7rem;
}
.submenu ul li {
list-style-type: none;
border: solid 2px white;
padding: 1rem;
background-color: rgb(220, 220, 220);
margin-left: 2rem;
font-size: 1.5rem;
transition: all 1000ms;
}
ul li {
cursor: pointer;
}
.submenu ul li:hover {
background-color: rgb(0, 150, 255);
border-radius: 30px;
}
.options ul li:hover {
background: black;
transform: translate(5px, 5px);
}
.picture {
float: right;
position: relative;
top: -6.5rem;
left: -11rem;
}
.logo {
width: 2.5rem;
}
.footer .bg-video__content {
object-fit: fill;
height: 15rem;
opacity: .5;
}
#media screen and (max-width:992px) {
header,
.submenu {
display: none;
}
}
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<div id=container>
<header id="header">
<nav class="options">
<ul>
<li class="select-active">CSS</li>
<li>
<a href="">
SASS
</a>
</li>
<li>Javascript</li>
<li span style="word-spacing: 0px">Front End vs Back End</li>
</ul>
</nav>
<div class="picture">
<img class="logo" src="https://seeklogo.com/images/C/css3-logo-8724075274-seeklogo.com.png" alt="">
</div>
</header>
<main id="main">
<aside class="submenu">
<ul>
<li>Introducción</li>
<li>Styling block</li>
<li>Selectores</li>
<li>Propiedades</li>
<li>Cascada y herencia</li>
<li>The Box Model</li>
<li>Responsive</li>
</ul>
</aside>
<section class="body">
<header class="heading">CSS
</header>
<article class="text">
<h2>Styling Blocks</h2><br><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p> <br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,
como las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web,y GUIs para muchas aplicaciones móviles
(como Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
Firefox OS).</p><br>
<p>CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para
establecer el diseño visual de los documentos web, e interfaces de usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También permite aplicar estilos no visuales,como
las hojas de estilo auditivas. Junto con HTML y JavaScript, CSS es una tecnología usada por muchos sitios web para crear páginas visualmente atractivas, interfaces de usuario para aplicaciones web, y GUIs para muchas aplicaciones móviles (como
Firefox OS).</p><br>
</article>
</section>
</main>
<footer class="footer">
<div class="bg-video">
<video class="bg-video__content" autoplay muted loop>
<source src="vid.mp4" type="video/mp4">
<source src="vid.webm" type="video/webm">
Your browser is not supported!
</video>
</div>
</footer>
</div>
You're using floats inside your #main div, which is why the height is 0. You need a 'clearfix' (see What is a clearfix?). Specifically:
#main:after {
content: "";
display: table;
clear: both;
}
Resource
You'd be better off using flexbox for your layouts (as my first link mentions), floats are becoming out of date for page layouts and are no longer best practice.
I'm supposed to reproduce the image below, and I was doing great so far, but can't seem to align my images well, and can't set up the top menu properly.
I should also be able to "paint" the image background green, but have no idea how to do so.
How can I achieve that?
body {
background-color: #dff0d8;
}
h1 {
background-color: green;
}
#outros {
background-color: black;
}
#texto1 {
float: left;
width: 30%;
}
#texto2 {
float: left;
width: 30%;
}
#texto3 {
float: left;
width: 30%;
}
img {
border-radius: 10%;
}
#preto {
background-color: green;
}
<link href="//www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<h2 id="outros">
<font color="white">
<div id="preto">Home</div>Museus <br/> Monumentos <br/> Restaurantes </font>
</h2>
<h1>
<font color="white"> A cidade de Lisboa </font>
</h1>
<div id="texto1">
<h3> Introdução </h3>
<p>
Lisboa GCTE é a capital de Portugal e a cidade mais populosa do país. Tem uma população de 506 892 habitantes, dentro dos seus limites administrativos. Na Área Metropolitana de Lisboa, residem 2 821 697 pessoas (2011), sendo por isso a maior e mais populosa
área metropolitana do país. Lisboa é o centro político de Portugal, sede do Governo e da residência do chefe de Estado. É o "farol da lusofonia" (Daus): a Comunidade dos Países de Língua Portuguesa (CPLP) tem a sua sede na cidade. É ainda a capital
mais a ocidente do continente europeu na costa atlântica.
</p>
</div>
<div id="texto2">
<h3> Globalidade </h3>
<p>Lisboa é considerada como cidade global devido à sua importância em aspectos financeiros, comerciais, mediáticos, artísticos, educacionais e turísticos. É um dos principais centros económicos do continente europeu, graças a um progresso financeiro crescente
favorecido pelo maior porto de contentores da costa atlântica da Europa e mais recentemente pelo Aeroporto Humberto Delgado, que recebe mais de 20 milhões de passageiros anualmente (2015). Lisboa conta com uma rede de auto-estradas e um sistema de
ferrovias de alta velocidade (Alfa Pendular), que liga as principais cidades portuguesas à capital.
<br/> A cidade é a sétima mais visitada do sul da Europa, depois de Istambul, Roma, Barcelona, Madrid, Atenas e Milão, com 1 740 000 de turistas em 2009, tendo em 2014 ultrapassado a marca dos 3,35 milhões. A nível global, Lisboa foi a 35.ª cidade
com maior destino turístico em 2015, cerca de 4 milhões de visitantes. Em 2015, foi considerada a 11.ª cidade turística mais popular, à frente de Madrid, Rio de Janeiro, Berlim e Barcelona.
</p>
</div>
<div id="texto3">
<h3> Riqueza </h3>
<p>
A região de Lisboa é a mais rica do país, com um PIB PPC per capita de 26 100 euros (4,7% maior do que o PIB per capita médio da União Europeia). A sua área metropolitana é a vigésima mais rica do continente, com um PIB-PPC no valor de 58 mil milhões
de euros, o que equivale a cerca de 35% do PIB-PPC total do país. Lisboa ocupa o 122.º lugar entre as cidades com maiores receitas brutas do mundo.
</br> A maioria das sedes das multinacionais instaladas em Portugal encontram-se na região de Lisboa, a nona cidade do mundo com maior número de conferências internacionais.
</p>
</div>
<div id="zonafoto">
<div id="img1" style="float:left">
<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg/800px-Torre_de_Bel%C3%A9m_-_Lisboa_Portugal.jpg width=479px height=330px></div>
<div id="img2" style="float:center">
<img src=http://municipiosefreguesias.pt/files/20141111021430_vascodagama.jpg width=479px height=330px></div>
<div id="img3" style="float:right">
<img src=http://turismo.culturamix.com/blog/wp-content/gallery/praca-do-comercio/praca-do-comercio-11.jpg width=479px height=330px></div>
</div>
For the menu try this:
HTML:
<div id="outros">
<ul>
<li id="preto"><h2>Home</h2></li>
<li><h2>Museus</h2></li>
<li><h2>Monumentos</h2></li>
<li><h2>Restaurantes</h2></li>
</ul>
</div>
CSS:
#outros {
background-color: black;
color: white;
margin-left: -40px;
}
#outros li {
display: inline-block;
padding: 5px 20px;
}