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>
Related
I'm learning HTML and CSS, and now i'm willing to learn how to make it responsive. I've already tried, and in chrome, where you can test in multiple devices, is works, but when i expand / model the browser, it gets strange.
.back {
background-color: turquoise
}
.center {
width: 100%;
height: auto;
max-height: 25vw;
max-width: 100vw;
object-fit: cover;
padding-top: 1em;
}
.perfil {
position: relative;
height: auto;
margin: -8.5em 0em 0.5em 1.25em;
float: left;
}
.text {
float: right;
padding-top: 6em;
padding-left: 1em;
}
.nd {
text-align: left;
}
.avatar {
height: auto;
}
#name {
float: left;
font-family: sans-serif;
padding-top: 0.4em;
font-size: 3em;
font-weight: bold;
}
#par {
text-align: center;
font-family: Cambria;
color: black;
font-size: x-large;
padding-top: 5em;
}
#link {
font-size: x-large;
padding-left: 28em;
margin-top: 40em;
padding-right: 5em;
white-space: nowrap;
}
<head>
<title> Profile </title>
<link href="style.css" rel="stylesheet">
</head>
<body class = "back">
<div>
<img src = "images/d8cztm9-a4047ab4-db23-4e70-9c6f-757d5d2b0d36.png" alt = "Lelouchao" class="center" >
</div>
<div class = "perfil">
<img src = "images/119191.png" alt = "avatar" class = "avatar">
<div class = "text">
<p id ="name"> Lelouch Vi Britania </p>
</div>
</div>
<a href="https://code-geass.fandom.com/pt-br/wiki/Lelouch_vi_Britannia" target="_blank" id = "link" >Link Interesses</a>
<div>
<p id="par"> Lelouch Lamperouge (ルルーシュ・ランペルージ, Rurūshu Ranperūji?)
é o protagonista e anti-herói da série de anime da Sunrise, <span style = "text-decoration: overline;" >Code Geass: Lelouch of the Rebellion. </span> Seu sobrenome é um pseudônimo; seu nome real é <span style = "font-weight: bold">Lelouch vi Britannia</span> (ルルーシュ・ヴィ・ブリタニア, Rurūshu vi Buritania?),
11° príncipe do Santo Império Britanniano e filho do 98° imperador da Britannia, Charles zi Britannia. Lelouch é o líder da Ordem dos Cavaleiros Negros, onde ele expõe sua identidade como <strike>Zero </strike>
e tem como objetivos vingar-se de seu pai pela misteriosa morte de sua mãe, do seu exílio no Japão e recriar um mundo melhor para sua irmã Nunnally. Seu seiyū japonês é Jun Fukuyama, e sua versão criança é dublada por Sayaka Ohara.
Lelouch foi projetado pelo grupo de artistas da CLAMP que ajudaram a criar um personagem atraente devido ao seu estilo e apelo visual. <span class = "nd"><br><br>Ele tem sido reconhecido como um dos personagens mais populares do Japão e desde a sua estreia em Code Geass tem aparecido no topo de diversas pesquisas. As publicações de anime e mangá viram Lelouch como um personagem interessante, embora ele queira destruir um império usando métodos cruéis, ele ainda possui um lado humano que entra em conflito com seus ideais o que o faz um personagem simpático. Jun Fukuyama tem sido elogiado e reconhecido por seu trabalho na interpretação de Lelouch. </span>
Jun Fukuyama tem sido elogiado e reconhecido por seu trabalho na interpretação de Lelouch.
</p>
</div>
</body>
The avatar image is 250x250 pixels and the banner one is 900x300 pixels.
Thank you very much for your time and help!
you must use media queries for controlling the screen size behavior and I recommend you to use Flexbox
I want to know how can I move this text next to an image! I don't know how I made it with the first pic, but I couldn't with the second.
p.mytext {
color: aliceblue;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
padding-bottom: 15px;
border: 2px solid;
border-color: whitesmoke;
margin-left: 90px;
margin-right: 750px;
margin-bottom: 150px;
font-family: Lucida Sans Unicode;
}
p.secondtext {
color: white;
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
margin-left: 90px;
margin-right: 500px;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<img class="clip" src="../images/clip.png" width="300">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="../images/juli.JPG" width="400">
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="../images/china.JPG" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</body>
</html>
i suppose you want to this.
.flex {
display:flex;
margin: 20px 0;
}
.flex img {
margin:0 20px 0 0;
}
.flex p {
border: 2px solid;
border-color: whitesmoke;
padding:20px;
margin:0;
}
<img class="clip" src="https://picsum.photos/300/100">
<body id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<div class="flex">
<img class="picofme" src="https://picsum.photos/300/300" width="400" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps every day"</p>
</div>
<div class="flex">
<img class="china" src="https://picsum.photos/300/300" width="450">
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
A couple of pointers to mention:
The body tag does not need an id, the id should be added to a
div tag within the body
Your first image is above the body tag, remember to include all of
your content html within the body
Your paragraphs have many similar style property values, consider
making a class for these. You can add more than one class to a tag.
Avoid adding inline css: your img widths are very similar in width.
For demo purposes, I have created a class with width of 425 (midway) and
removed the 400/425 inline style
I commented out margins that were throwing out position, and changed the color text to black for the paragraphs (just so I could see it!)
The bottom img classes (in my code) that are commented out are examples of css that you could use for your images. The img css that affects the snippet is in the second line.
#aboutme{float:left;}
p{color:#000000; width:60%; display:inline-block; float:right;}
img{max-width:32%; padding:30px 25px; float:left; height:auto; vertical-align:middle;}
p, img{ display:inline-block; vertical-align:top;}
.mytext {
/*color: aliceblue;*/
padding: 15px;
border: 2px solid;
border-color: whitesmoke;
/*margin-left: 90px;
margin-right: 75px;
margin-bottom: 150px;*/
font-family: Lucida Sans Unicode;
}
.secondtext {
/*color: #ffffff;*/
border: 2px solid;
border-color: whitesmoke;
font-family: Lucida Sans Unicode;
padding-left: 15px;
padding-right: 15px;
/*margin-left: 90px;
margin-right: 500px;*/
/*float: left;*/
}
/*.picofme{width:400px;height:auto;}
.china{width:450px;height:auto;}*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>About me</title>
<link href="../CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="clip" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<div id="aboutme">
<h1 class="titulo">About me</h1>
<h2>INFORMATION</h2>
<img class="picofme" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="mytext"> First of all, thank you for visiting my website. My name is Julian, I am 24 years old and I was born in Bogota, Colombia; a beautiful country in South America. I consider myself a person that is really passionate for the art. Sometimes people ask me
what's my favorite field, and I never have a concrete answer. This world is full of many incredible things, that is really hard to choose what I love the most. I wanted to be a singer before, but I realized my talent didn't exist. Even though my singing
is horrible, I consider myself a music lover (I can play the guitar). After so many years trying to figure what my passion was, I found the film as the perfect way to express what I feel. There are days in which I wish I knew everything about the
film, but then I think everything is a process. I love traveling to different places, and taking pictures of everything. Right now, I am enjoying this stage of my life, where I learn new things every day. "Life is like a ladder where you give steps
every day"</p>
<img class="china" src="https://ec.europa.eu/education/sites/education/files/styles/news_promo_img/public/questions-image.png?itok=6LsRlXS4" >
<p class="secondtext">A lo largo de 1808, las presiones de Napoleón desencadenaron una serie de acontecimientos que empeoraron aún más la ya comprometida situación española, el rey Carlos IV de España abdicó el trono a favor de su hijo Fernando el 19 de marzo de 1808 después
de los sucesos del motín de Aranjuez, y más tarde, el 5 de mayo de 1808 se terminó de consumar el desastre para España cuando Carlos IV y su hijo fueron obligados a ceder el trono a Napoleón Bonaparte en Bayona para designar a su hermano, José, como
nuevo rey de España. Esto provocó una gran reacción popular en España que desencadenó lo que hoy se conoce como la guerra de la Independencia española y tanto en América como en España, se formaron juntas regionales que fomentaron la lucha contra
los invasores franceses para restablecer en el trono al monarca legítimo.</p>
</div>
</body>
</html>
Good luck
So I need to create a website for school and i want to add alot of information, but when i add alot of information this happends (I want like an auto height like, when i add more information it ajusts automatly. ps I want to use the same css for all my pages and i have some big pages and some small pages thats why i want that auto ) i tried all Can someone send me the correct code to fix this?
Here is my code:
<html>
<head>
<title>Markus Persson</title>
<link rel="icon" href="NotchIcon.png" type="image/x-icon" />
<meta charset=UTF-8 />
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper">
<div id="columnLeft">
</div>
<div id="columnRight">
</div>
<div id="content">
<div id="banner">
<ul class="menu">
<li class="dropdown ">Markus Persson
<div class="dropdown-content">
Onde Nasceu
Onde Vive
</div>
</li>
<li>Mojang</li>
<li>Minecraft</li>
<li style="float:right"><a class="active" href="SobreMim.html">Sobre Mim</a></li>
</ul>
</div>
<font face="Modern" size=3>
<center><h1>Markus Persson</h1></center>
<center><img title="Markus Persson" align=midle src="MarkusPersson.png" width=500 height=380></center>
<p class="legenda" align="justify">Img.1 Markus Persson</p>
<br>
<p align="justify"> <b>Markus Persson</b> mais conhecido como <b>Notch</b> nasceu no dia 1 de junho de 1979 em Estocolmo (Suécia). Markus Persson aos 30 anos de idade fundou a Mojang AB
na qual desenvolveu o jogo mais conhecido da empresa o Minecraft. Markus Persson em novembro de 2014 deixou a Mojang pois foi vendida para a Microsoft por 2.5$ Bilhões de dólares.
Como Markus Persson tinha 70% d` Mojang, assim ao vender a sua empresa tornou-se bilionário. Ainda em 2014 comprou uma mansão por 70$ Milhões em Los Angeles nos EUA.</p>
<p align="justify"> Markus Persson iniciou a sua carreira de programador em um<i> Commodore 128 <sup>(Img.2)</sup></i> com um computador pessoal quando tinha 7 anos de idade. Trabalhou até 2009 na<i><a href=https://king.com/> King.com </a></i>
Trabalhou como programador em um software de gerenciamento de fotografias<i> Jalbum</i>, Markus Persson também foi um dos fundadores do MMOWurm Online (um MMORPG desenvolvido pela Code Clube AB).</p>
<p align="justify"> Atualmente Markus Persson não tem trabalho mas também não pretende arranjar um.
<br><br><br><br>
<img title="Commodore 128" align=midle src="Commodore128.png" width=300 height=300>
<br> Img.2 Commodore 128
<br><br><br>
<font face="Modern" size=3>
<!-- <hr width=100% color=black size=3 align=center> -->
<h3>Trabalhos de Markus Persson</h3>
<!-- <hr width=100% color=black size=3 align=center> -->
</font>
<ul type=circle>
<li><b>Jogos</b>
<ol><p align="justify">Markus Persson criou muitos jogos pequenos, muitos deles para competições e ainda tem muitos jogos inacabados.</p></ol></li>
<li><b>Minecraft</b>
<ol><p align="justify">O jogo que teve mais sucesso que Markus Persson criou. Acabou por vender o jogo para a Microsoft porque já não conseguia lidar com a pressão de ter criado um jogo tão grande
(O Terceiro jogo mais jogado do mundo). As pessoas da Mojang ficaram chateadas com ele por te-lo feito.</p></ol></li>
<li><b>Wurm Online</b>
<ol><p align="justify">Co-criado com Rolf Jansson há muitos anos atrás. Terminou por deixar o projeto quando Rolf se afastou e tornou-se mais difícil trabalharem juntos.</p></ol></li>
<li><b>Drowning in Problems</b>
<ol><p align="justify">Feito para uma competição de desenvolvimento de jogos de 48 horas com o tema "sob a superfície". Completou o jogo em menos de dez horas.</p></ol></li>
<li><b>Shambles</b>
<ol><p align="justify">Uma entrada para a competição de fps (First Person Shoter) onde o objetivo é tentar fazer um jogo de tiros em primeira pessoa em uma semana. Fez em Unity.
O jogo não é muito mau mas, como é um jogo de ataque de pontuação onde o jogador inevitavelmente será invadido pelo acúmulo de zumbis, isso definitivamente causa fadiga nos jogadores.</p></ol></li>
</ul>
<br><br>
<fieldset class="field_set">
<legend align="center">Opinião</legend>
<center><textarea cols=170 rows=20 maxlength="10000" placeholder="Deixe aqui a sua opinião..."></textarea></center>
<center><input type=submit value=Enviar action=""></center>
</fieldset>
<br>
<center><button type=Cima>VOLTAR PARA O TOPO</button></center>
</font>
<br>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
My css code:
/* Layout */
#wrapper {
width: 100%;
overflow: auto;
background-color: #FFFFFF;
}
#columnLeft {
width: 20%;
overflow: auto;
background-color: #FFFFFF;
float: left;
min-height: 100%;
}
#columnRight {
width: 20%;
height: %;
background-color: #FFFFFF;
float: right;
min-height: 100%;
}
#banner {
width: 100%;
height: 46px;
background-color: #000000;
}
#content {
width: 100%;
height: %;
background-color: lightblue;
}
#footer {
width: 100%;
height:75px;
background-color: #2EFE2E;
}
/* Menu */
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: #FE2E64;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
min-width: 135px;
}
.dropdown-content a {
color: white;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #000000}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #FE2E64;
}
/* Formatos */
p.legenda {
font-style: italic;
color: #FE2E64;
}
and this is what happends on my website:
top page
Middle page
bottom page
In the CSS for the images you can add
img{
max-widht: 100%; //avoid to overflow the page;
object-fit: contain; //keep proportion;
width: 100%; //Change for each of the images how much you want them to fill the page
float: left; //fit them with other blocks to left/right
}
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>
So,I'm struggling to solve a strange thing that happens in my html code.
I've been trying to do this for 3 days or maybe more but I simply cannot find out the 'problem'.
.variola {
max-width: 100%;
margin-top: 0.5em;
margin-bottom: 1em;
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 0px 20px;
background: white;
border: 1px solid #CCC;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
padding: 8px;
"
}
</style> <style> .cerculet {
display: block;
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
}
</style> <style> .introducere {
display: table-cell;
vertical-align length: 5;
padding-left: 3em;
padding-top: 0.1em;
}
<!DOCTYPE html>
<html>
<head>
<!-- Aici va fi scris orice cod CSS pentru ca ulterior sa fie "preluat" intr-un
mod indirect de catre codul HTML pentru imbogatirea paginii web. -->
<title>10 cele mai periculoase boli care au facut istorie</title>
</head>
<body>
10 cele mai periculoase boli care au facut istorie
<!-- Tot codul de la tag-ul "body" deschis pana la "body" inchis este strict
codul pentru pagina web.Cei in head sub tag-ul "style" este cod in CSS si
nu va aparea in pagina web,ci va "imbogati" intr-un mod indirect codul html -->
<p style="text-align: left">
<img align="absmiddle" src="http://s2.postimg.org/6zkw8piph/Time.png">26-Martie-2015
<!-- " " este un cod important folosit pentru a crea un blank(spatiu alb)
intre 2 caractere -->
<img align="absmiddle" src="http://s29.postimg.org/tkzbm9nwz/Domeniu.png">Biologie
<br>
<img align="absmiddle" src="http://s22.postimg.org/k7tec39x9/Tags.png">Tags: Pandemii, cele mai periculoase</p>
<hr noshade size="2" style="text-align: left" width="47%">
<br>
<!-- Cu ajutorul tag-ului "hr" se pot introduce linii in pagina web.
"noshade" inseamna ca linia nu o sa aiba contur. -->
<h2></h2>
<div class="cerculet">
<div>
<h2>1 </h2>
<div>
<h2>
<big style="font-weight: bold">A ucis mai mult de 300 de
milioane de oameni<br>
din intreaga lume in secolul al XX-lea si pe cei<br>
mai multi locuitori nativi ai Americii.</big>
<!-- Exact ceea ce spuneam mai sus:codul CSS va fi "preluat" indirect din "head"
si va fi introdus in codul html,combinand cele 2 limbaje. -->
<!-- :-) --></h2>
</div>
</div>
</div>
<br>
<div>
Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa
<br>unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola
<br>minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma
<br>mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare
<br>de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale
<br>includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</div>
<!-- Tag-ul "br" sectioneaza textul nostru din pagina web in paragrafe. -->
<br>
<br>
<div>
<b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi
<br>care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5
<br>ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</div>
<br>
<br>
<div>
Cat despre tarile din America,dupa primul contact cu europenii si africanii,unii au crezut ca rata
<br>de mortalitate de 90-95% a populatiei native din Lumea Noua a fost cauza de boala Lumii Vechi.
<br>Se suspecteaza ca variola a fost principalul vinovat si raspunzator pentru uciderea a aproape toti
<br>locuitorii nativi ai Americii.In Mexic,cand aztecii s-au angajat in rascoala impotriva lui Cortés,
<br>depasiti numeric,spaniolii au fost fortati sa fuga.In timpul luptei,un soldat spaniol purtator de
<br>variola a murit.Dupa lupta,aztecii au contractat virusul din cadavrele invadatorilor.Cand Cortés
<br>s-a intors in capitala,variola a devastat populatia azteca.A ucis o mare parte din armata azteca,
<br>imparatul si 25% din populatia normala.Ulterior,Cortés a infrant cu usurinta aztecii si a intrat in
<br>Tenochtitlán unde a aflat ca variola a ucis mai multi azteci decat au ucis tunurile.
</div>
<br>
<br>
<div>
Variola a fost responsabila pentru aproximativ 300-500 de milioane de decese in secolul al XX-lea.
<br>Nu mai tarziu de 1967, Organizatia Mondiala a Sanatatii (OMS) a estimat ca 15 milioane de persoane
<br>au contractat virusul si ca alte doua milioane au murit in acel an.Dupa campanii de vaccinare incheiate
<br>cu succes in timpul secolelor XIX si XX,OMS-ul a oficializat eradicarea variolei in 1979.Pana in ziua de
<br>astazi,variola este singura boala infectioasa care a fost complet eradicata din natura.
</div>
<img class="variola" src="http://s3.postimg.org/cb0l49sw3/Variola.jpg" style="position:absolute; left:150px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="cerculet">
<div style="font-family: Cambria; font-size: 120%">
2
</div>
</div>
<!-- Aici am folosit CSS-ul pentru a da un stil imaginii urmat de codul
html specific imaginii "style="position...." pentru a aseza imaginea in pozitia
dorita de mine -->
</body>
</html>
As you can see, after the number 1(colored in black,in a circle),there's a LOT of space that I don't want.
The alignment is not good too.I used lots of   and <br>'s just because I can't find a way to put the text immediately after the number 1. I'm trying to make a "site" for a school project and I am allowed to see other sites to "inspire" myself.You can check http://www.oddee.com/item_90608.aspx
and see what I'm trying to "copy" in some kind of way.
Please help.
In short, you want to float: left the number/circle so that the content wraps around it. You also have several unnecessary elements and, like you mentioned, unnecessary elements - below, I've cleaned the example down to a bare-bones working example.
.cerculet {
display: block;
}
.cerculet:after {
display: block;
clear: both;
content: ' ';
}
.cerculet p{
font-weight: bold;
}
.cerculet h2{
font-size: 120%;
line-height: 145%;
width: 1.6em;
height: 1.6em;
text-align: center;
border-radius: 50%;
background-color: black;
color: white;
white-space: nowrap;
float: left;
margin-right: 15px;
}
<div class="cerculet">
<h2>1 </h1>
<p>A ucis mai mult de 300 de milioane de oameni din intreaga lume in secolul al XX-lea si pe cei mai multi locuitori nativi ai Americii.
</p>
</div>
<p>Variola(cunoscuta si sub numele latin "Variola" sau "Variola vera") este o boala contagioasa unica oamenilor.Variola este cauza fie de virusul numit Variola Major,fie de cel numit Variola minor.Forma mai letala,V. Major,are o mortalitate de 30-35%,pe cand V. Minor este o forma mai usoara a bolii numita alastrim si ucide ~1% din victimele sale.Efectele secundare de termen lung pentru supravietuitori includ cicatrici pe piele.Alte efecte secundare ocazionale includ orbire datorita ulcerului de cornee si infertilitate la persoanele de sex masculin.
</p>
<p><b>Variola a ucis aproximativ 60 de milioane de europeni,</b> incluzand cinci monarhi care conduceau Europa in secolul al XVIII-lea.Pana la 30% din cei infectati,80% fiind copii sub 5 ani,au murit datorita acestei boli si inca o treime din supravietuitori au devenit orbi.
</p>