This question already has answers here:
Removing extra white space when using first-letter
(3 answers)
Closed 1 year ago.
I am just trying to layout some type of information page that has the question and then there is a it's answer. I have applied some indentation and make the first letter bigger of the paragraph. The problem is that there is a extra space under the first line. I don't want the extra space that is appeared after using ::before-letter pseudo selector. have any idea or trick...
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
I don't know if this solution is neat enough, but you can fix it by adjusting its line-height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
line-height: 0.8;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
Related
Just starting out on html, how do I center the 'Webpage' Logo and remove margin to the right of that logo so the 'Home' can be in line to perform like a nav-bar. I added an image at the end of the code so you can look at the margin I'm trying to get rid of (don't know if that's even possible!).
……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet"/>
<style>
body{
margin:0;
background-color: rgb(36, 37, 37);
}
.container{
padding-top:3px;
padding-bottom:3px;
width: 100%;
background-color:#003333;
height: 50px
}
.title-box{
margin-left: 20px;
}
.title-box label{
margin: 5px;
width: 130px;
text-align: center;
color:#E0E0E0;
border-color:rgb(11, 107, 19);
border-style:double;
border-width: medium;
width: fit-content;
}
.tasks{
float: right;
}
.para{
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p{
margin: 0%;
color: #e1f2f7;
}
</style>
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991.
It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee.
It ran on a NeXT computer at the European Organization for Nuclear Research, CERN.
The first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html.
A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br>
A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a website, like our Computer Hope website.
<br><br>
When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
Add flex and align-items: center; to .container.
Remove the height on .container and use padding instead.
Remove float from .tasks and use margin-left: auto;.
Then you can adjust spacing between the a's using margin-right: on .tasks a
body {
margin: 0;
background-color: rgb(36, 37, 37);
}
.container {
padding-top: 3px;
padding-bottom: 3px;
width: 100%;
background-color: #003333;
padding: 25px 0;
display: flex;
align-items: center;
}
.tasks {
margin-left: auto;
}
.tasks a {
color: #fff;
text-decoration: none;
margin-right: 1em;
}
.title-box {
margin-left: 20px;
}
.title-box label {
margin: 5px;
width: 130px;
text-align: center;
color: #E0E0E0;
border-color: rgb(11, 107, 19);
border-style: double;
border-width: medium;
width: fit-content;
}
.para {
padding-left: 8px;
margin: 0%;
background-color: #515253;
padding-top: 10px;
padding-bottom: 10px;
width: fit-content;
}
.para p {
margin: 0%;
color: #e1f2f7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Design</title>
<link href="q1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="title-box">
<label>Webpage</label>
</div>
<div class="tasks">
HOME
HOME
HOME
HOME
</div>
</div>
<div class="para">
<p>The first web page went live on August 6, 1991. It was dedicated to information on the World Wide Web project and was made by Tim Berners-Lee. It ran on a NeXT computer at the European Organization for Nuclear Research, CERN. The first web page address
was http://info.cern.ch/hypertext/WWW/TheProject.html. A web page or webpage is a document, commonly written in HTML, that is viewed in an Internet browser. A web page can be accessed by entering a URL address into a browser's address bar. A web
page may contain text, graphics, and hyperlinks to other web pages and files.
<br><br> A web page is often used to provide information to viewers, including pictures or videos to help illustrate important topics. A web page may also be used as a method to sell products or services to viewers. Multiple web pages make up a
website, like our Computer Hope website.
<br><br> When you click a link provided by a search engine, you are accessing a web page. The Internet consists of millions of web pages, with more being added every day.
</p>
</div>
</body>
</html>
I'm having this problem, when I added a background image to a flexbox column, I can see that there is a big blank space at the bottom at the bottom. I tried to inspect the page but could not find the problem. I have no idea how to fix the problem, what I want to do is remove the blank space or make the picture go down all the way.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(earth.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
It's a bit hard to see because of the image not being there but I will add a picture as well:
The issue is here:
.row {
flex: 50%;
padding: 3em; <---- This line
padding-left: 15em;
}
You're adding additional padding all around the row element, including the bottom. After removing this padding, the space at the bottom of the screen is gone.
Here's a working demo: https://codepen.io/Lissy93/pen/yLvBJLe
Tip: I recommend using the developer tools, with the element selector you can hover over the space, and it will show exactly which element is causing it, and show whether it is (green for) padding and (orange for) margin.
View this snippet fullscreen. The dashed red border is the limit of your flexbox. The space below the image (based on your image) is elsewhere.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
border: 5px dashed red;
}
.row {
flex: 50%;
padding: 3em;
/* padding-left: 15em;*/
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://picsum.photos/id/1/200/300);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security. Experts agree that climate
change threatens to set back development efforts by decades, placing least developed countries and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority of climate change since the 1950s. It predicts global
surface temperature to continue to rise, along with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant transformation in our development patterns. It requires not only a shift in awareness and accountability for our own individual choices but in a social,
political and economic shift towards enabling conditions for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
I dont see any space on the bottom. I using firefox on linux.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://via.placeholder.com/200);
background-size: cover;
}
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
This question already has answers here:
How can I get rid of margin around my HTML content?
(5 answers)
How can I remove space (margin) above HTML header?
(8 answers)
Remove padding beneath heading tag
(6 answers)
Closed 3 years ago.
I am trying to remove the spacing around the teal box in the header. I want the bottom line to match up with the bottom of the teal box. Here is a picture of what I am trying to achieve what my goal is, followed by my code:
.
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<div id="wrap">
<header>
<h1 id="firstName">
Rob Connolly
</h1>
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<hr>
<body>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
First, you should move your <header> to inside your <body>. Second, you can remove the margin for #firstName by adding margin: 0 to the selector:
#firstName {
margin: 0;
}
Then, you can use Flexbox on #menu to center your menu vertically:
#menu {
/* Adds Flexbox to element */
display: flex;
/* Aligns the menu's children horizontally, putting equal
spacing between each child */
justify-content: space-between;
/* Aligns the menu's children vertically */
align-items: center;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
/* Remove margin from the div */
margin: 0;
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
/* Add Flexbox to your menu*/
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<body>
<div id="wrap">
<header>
<h1 id="firstName">Rob Connolly</h1>
<div id="menu">
<span>About </span>
<span>Portfolio </span>
<span>
Contact
</span>
</div>
</header>
</div>
<hr>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
I have watched tutorials and checked on this site but no matter what I do I
can't get my page to be responsive for mobile. I want the image on top and
the text in a nice paragraph below. I am new to html and css, I don't know
any others. The code I'm adding is the original before I tried to make it
responsive.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="merchandise.css"
</head>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
</style>
<body>
<img src="british-shorthair-3055340_1920.jpg" width:"400" height="400"
class="float-img">
<style>
p {margin-left: 250px; margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
</style>
<font size="5" color="#00b8e6" font-align: center >
<p>
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time
playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.
</p>
</text>
</body>
</head>
</html>
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color:#ffb6c1;
color:#ffffff
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav> li > a {
text-decoration: none;
color: #ffffff
}
.nav > li > a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner > .bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav{
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right}
p {
padding-top: 25px;
text-align: left;
}
Fixing your HTML first!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="merchandise.css">
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
p {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
#media (max-width: 1024px) {
body img {
max-width: 100px;
height: 100px;
}
body div img {
max-width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<div class="header">
<img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400">
<div class="float-img">
<p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.</p>
</div>
</body>
</html>
Now for the right solution without framework use #media Queries. Do your homework here .
Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.
You're gonna have to fix your code (html stuff) first and then learn to use media queries.
With media queries, you can target different devices and write specific css that applies to only those devices.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DO NOT LEARN A FRAMEWORK JUST YET
You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework
Like a previous answer
You're gonna have to fix your code (html stuff) first
But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.
I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.
In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.
Try the following:
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
display: block;
}
Explanation:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.
You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.
I created a file "index.html" and opened it on google chrome but a page doesn't show anything. I think that the problem is with my browser settings because that code worked before the system update. However, I can't find a solution. Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The page presents TOP 5 TV serials. Check them out!"/>
<meta name="keywors" content="TOP 5, serials, the best, the most interesting, watch, share">
<title>The best serials - TOP 5!</title>
<style>
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
background-color: black;
color: white;
text-align: center;
}
#nav
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#content
{
float: left;
width: 640px;
padding: 20px;
}
#ad
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#footer
{
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1>The best serials - TOP 5!</h1>
</div>
<div id="nav">
Dr House<br/>
True Detective<br/>
Breaking Bad<br/>
Big Bang Theory<br/>
The X Files<br/>
</div>
<div id="content">
House (also called House, M.D.) is an American television medical drama that originally ran on the Fox network for eight seasons, from November 16, 2004 to May 21, 2012. The show's main character is Dr. Gregory House (Hugh Laurie), a pain medication-dependent, unconventional, misanthropic medical genius who leads a team of diagnosticians at the fictional Princeton–Plainsboro Teaching Hospital (PPTH) in New Jersey.
<br/><br/>
The show's premise originated with Paul Attanasio, while David Shore, who is credited as creator, was primarily responsible for the conception of the title character. The show's executive producers included Shore, Attanasio, Attanasio's business partner Katie Jacobs, and film director Bryan Singer. It was filmed largely in Century City.
</div>
<div id="ad">
<img src="ad.jpg"/>
</div>
<div id="footer">
The best serials - TOP 5! © All rights reserved
</div>
</div>
</body>
</html>
Your title tag is broken.
Instead of <title>The best serials - TOP 5!</title=""> you should have <title>The best serials - TOP 5!</title>.
For more details: http://devdocs.io/html/element/title
And your doctype is also broken. Use <!DOCTYPE HTML> instead of <!DOCTYPE>.
For more details: https://developer.mozilla.org/en-US/docs/Glossary/Doctype
At the very top it has to be
<!DOCTYPE html>
<html>
not
<!DOCTYPE>
<html>