I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
I am creating a website and right now I am stuck.
As of now I am creating the dashboard of the website.
It has a header for the basic settings (Home, Profile and Log out) buttons.
Body which contains the navigation tools on the left and at the main body page which is located beside it.
And of course the footer below it.
It should look like this:
It fine like that but some how when I view it in using the "toggle device toolbar" under the devtools, it look like this:
How can I solve this overshoot.
Here is the code:
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div id="page-container">
<div id="content-wrap">
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div style="text-align: center;">
<div class="leftForm hide-on-med-and-down">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<?php echo '<img src="picture.php?id=' . $user_check . '">';?>
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
this is a problem that can be solved in many ways, the best way to solve footer issues (and header) in my opinion is following this trick: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/
solution:
set a fixed height of your footer{ height: 10px} and set body{ margin-bottom: 10px}
UPDATE BASED ON COMMENTS
I am not able to see if this works as i cannot recreate the code in my environment.
CSS
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
body {
margin-bottom: 81px;
position: relative;
}
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
Another possibily solution (I change php tag for this example, snippet seems not to work, maybe wv and wh doesn't work there, but it does if you try directly saving as html file, or try it here)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,
html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#page-container {
position: relative;
min-height: calc(100% - 64px);
display: flex;
}
#content-wrap {
padding-bottom: 81px;
}
.leftForm {
background-color: #2c384a;
width: 204px;
float: left;
height: 100%;
}
.leftForm img,
.leftForm1 img {
width: 204px;
height: 204px;
border-radius: 200px;
}
.name {
font-size: 26px;
font-family: calibri;
color: white;
margin: 0;
text-align: center;
}
.pageselector li,
.pageselector1 li {
width: 150px;
padding: 10px 0 10px 10px;
text-align: left;
}
.pageselector a,
.pageselector1 a,
.fa-facebook,
.fa-twitter {
color: white;
}
.pageselector li:hover,
.active,
.pageselector1 li:hover,
.active1 {
background-color: rgba(0, 0, 0, 0.7);
}
.contentcon {
width: auto;
display: inline-block;
}
.announcementSlider {
background-color: #323f4f;
border-radius: 10px 10px 3px 3px;
font-size: 24px;
margin: 5px 3px 3px 3px;
height: 400px;
width: 630px;
border: 2px solid black;
color: white;
}
.annocontent {
color: black;
height: 360px;
width: 626px;
border-radius: 0 0 3px 3px;
background: #f1f1f1;
}
.buttons-container {
border-radius: 10px 10px 0 0;
width: 640px;
}
.button {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 153px;
background: #4091e3;
float: left;
color: white;
}
.button-admin {
height: auto;
border-radius: 3px;
border: 2px solid black;
margin: 3px 3px;
width: 312px;
background: #4091e3;
float: left;
color: white;
}
.button img,
.button-admin img {
height: 60px;
margin: 14px 0;
}
#media screen and (max-width: 980px) {
.buttons-container {
width: auto;
height: auto;
}
.announcementSlider {
width: auto;
}
.contentcon {
padding-left: 0;
}
.annocontent {
width: auto;
}
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 81px;
background-color: gray;
text-align: center;
}
.fa {
margin: 15px 0;
padding: 11px;
width: 50px;
height: 50px;
text-decoration: none;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
}
.fa-twitter {
background: #55ACEE;
}
}
</style>
</head>
<body>
<header id="header">
<nav style="background: #2196F3; font-size: 2.1rem; padding: 0 15px;">
Dashboard
<i class="material-icons">menu</i>
<ul class="hide-on-med-and-down right">
<li>Home</li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</nav>
</header>
<div id="page-container">
<div id="content-wrap">
<div style="text-align: center; width: 100vw;">
<div class="leftForm hide-on-med-and-down">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector right">
<a href="Dashboard.php">
<li class="active">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="leftForm1 sidenav" id="slide_out" style="width: auto;background-color: #2c384a;">
<img src="picture.php?id=">
<p class="name">Administrator</p>
<ul class="pageselector1 right">
<a href="Dashboard.php">
<li class="active1">Dashboard</li>
</a>
<a href="profile.php">
<li>Profile</li>
</a>
<a href="">
<li>Subject</li>
</a>
<a href="">
<li>Workspace</li>
</a>
<a href="">
<li>Task</li>
</a>
<a href="">
<li>Messages</li>
</a>
<a href="logout.php">
<li>Log Out</li>
</a>
</ul>
</div>
<div class="contentcon">
<div class="announcementSlider">
Announcements
<div class="annocontent"></div>
</div>
<div class="buttons-container">
<a class="button" href=".php">
<div>
<img src='pictures/Library.png'>
<div class="span"><span>Library</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/Workspace.png'>
<div class="span"><span>Workspace</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/task.png'>
<div class="span"><span>Task</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/message.png'>
<div class="span"><span>Message</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/locker.png'>
<div class="span"><span>Locker</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/teacher.png'>
<div class="span"><span>Teachers</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/student.png'>
<div class="span"><span>Students</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/calendar.png'>
<div class="span"><span>Calendar</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/blogforum.png'>
<div class="span"><span>Blog/Forum</span></div>
</div>
</a>
<a class="button" href=".php">
<div>
<img src='pictures/grades.png'>
<div class="span"><span>Grades</span></div>
</div>
</a>
<a class="button-admin" href=".php">
<div>
<img src='pictures/admin.png'>
<div class="span"><span>Admin</span></div>
</div>
</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
const slide_menu = document.querySelectorAll(".sidenav");
M.Sidenav.init(slide_menu, {});
</script>
</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
I'm currently working on a site for a small business when i ran into a problem, when trying to apply a border radius to a div it only applies it to the left side, i have searched google and stack overflow for a similar answer but haven't found anything.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
background-color: #e0e0e0;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
If anyone has an answer it would be greatly appreciated
The background color is overlapping the header div.
body
{
background-color: #e0e0e0;
}
#banner
{
background-color: #404040;
height: 10em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
}
#bannerimg
{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container
{
margin-left: 20em;
margin-top: -7em;
overflow: hidden;
border-radius: 1em;
}
.list
{
float: left;
padding: 1.5em;
font-size: 2em;
color: #067411;
/*background-color: #e0e0e0;*/
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
<div>
</header>
By adding flexbox styling you can get the result you wish.
body{
background-color: #e0e0e0;
}
#banner{
background-color: #404040;
height: 7em;
border-radius: 1em;
box-shadow: -0.1em 0.3em;
display: flex;
padding: 5px;
}
#bannerimg{
height: 65%;
margin-left: 1em;
margin-top: 1em;
}
#container{
background-color: #e0e0e0;
display: flex;
margin-left: auto;
margin-right: auto;
border-radius: 1em;
align-items: center;
}
.list{
padding: 1.1em;
font-size: 1.2em;
color: #067411;
}
<header id="banner">
<div id="container">
<a class="list">Services</a>
<a class="list">Remote Support</a>
<a class="list">Home</a>
<a class="list">About Us</a>
<a class="list">Contact Us</a>
</div>
</header>
I am trying to replicate the BBC News site and I have this weird styling problem.
Here is the image.
I always get this gap in between two of my divs.
Here is the code I used. Not sure how I am supposed to go about getting rid of that space. tried setting margin and padding to 0 but that didn't work.
Here is the code:
body{
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
#topbar{
height: 40px;
width: 1000px;
margin: 0 auto;
background-color: #FFFFFF;
}
#logo{
float: left;
margin-top: 8px;
margin-right: 8px;
}
.topbarsections{
float:left;
border-left: 1px #CCCCCC solid;
height: 100%;
}
#signin-image{
float: left;
width: 30px;
margin-top: 7px;
margin-left: 8px;
}
#signin-text{
float: left;
font-weight: bold;
font-size: 90%;
color: #333333;
position: relative;
top: 13px;
padding-right: 80px;
}
.topbar-menu{
float: left;
font-weight: bold;
color: #333333;
font-size: 90%;
padding: 13px 15px 0 15px;
height: 27px;
}
#more-arrow{
height: 13px;
margin-left: 15px;
}
#search-box{
background-color: #E4E4E4;
margin: 8px 0 0 10px;
border: none;
font-weight: bold;
font-size: 14px;
padding: 5px;
width: 140px;
float: left
}
#magnifying-glass{
margin-top: 8px;
height: 26px;
}
.clear{
margin: 0;
padding: 0;
}
#news-bar{
background-color: #BB1919;
width: 100%;
height: 70px;
}
#inner-news-bar{
background-color: #BB1919;
margin: 0 auto;
width: 1200px;
height: 70px;
}
#news-bar h1{
color: white;
margin: 0;
padding: 10px;
font-weight: normal;
font-size: 45px;
}
#menu-bar{
background-color: #A91717;
width: 100%;
height: 35px;
}
#inner-menu-bar{
background-color: #A91717;
width: 1200px;
height: 35px;
margin: 0 auto;
}
.menu-bar-sections{
float: left;
border-right: 1px solid #BB4545;
padding-left: 10px;
padding-right:8px;
position: relative;
top: -5px;
}
.menu-bar-sections a{
float:left;
color: white;
text-decoration: none;
}
.menu-bar-sections a:hover{
text-decoration: underline;
}
#menu-bar-more-section{
border-right: none !important;
}
#down-arrow{
float: left;
height: 13px;
position: relative;
top: 2px;
margin-left: 2px;
}
#page-container{
width: 1200px;
margin: 0 auto;
}
h2{
}
<body>
<div id="topbar">
<img id="logo" src="images/bbclogo.png">
<div id="signin-div" class="topbarsections">
<img src="images/singin.PNG" id="signin-image">
<span id="signin-text">Sign in</span>
</div>
<div class="topbarsections topbar-menu">
News
</div>
<div class="topbarsections topbar-menu">
Sports
</div>
<div class="topbarsections topbar-menu">
Weather
</div>
<div class="topbarsections topbar-menu">
Shop
</div>
<div class="topbarsections topbar-menu">
Earth
</div>
<div class="topbarsections topbar-menu">
Travel
</div>
<div class="topbarsections topbar-menu">
More
<img id="more-arrow"src="images/more-arrow.PNG">
</div>
<div class="topbarsections">
<input id="search-box" type="text" placeholder="Search">
<input type="image" id="magnifying-glass" src="images/glass.PNG">
</div>
</div>
<div class="clear"></div>
<div id="news-bar">
<div id="inner-news-bar">
<h1>NEWS</h1>
</div>
</div>
<div class="clear"></div>
<div id="menu-bar">
<div id="inner-menu-bar">
<p class="menu-bar-sections">Home</p>
<p class="menu-bar-sections">Video</p>
<p class="menu-bar-sections">World</p>
<p class="menu-bar-sections">US & Canada</p>
<p class="menu-bar-sections">UK</p>
<p class="menu-bar-sections">Business</p>
<p class="menu-bar-sections">Tech</p>
<p class="menu-bar-sections">Science</p>
<p class="menu-bar-sections">Stories</p>
<p class="menu-bar-sections">Entertainment & Arts</p>
<p class="menu-bar-sections">Health</p>
<p class="menu-bar-sections" id="menu-bar-more-section">More<img src="images/down-arrow.PNG" id="down-arrow"></p>
</div>
</div>
<div class="clear"></div>
<div id="page-container">
<div id="main-article">
<h2>Technology</h2>
</div>
</div>
</body>
If by "gap" you mean the space above the heading "Technology", #Olivier Krull is right: that's the default margin of the h2 header.
You can simply add this CSS rule to set it to zero:
#main-article > h2:first-child {
margin-top: 0;
}
This is NetBeans. I have tried to include an external CSS file but when used externally the images all get really enlarged. Whereas my I use the same styling within the html file using internal styling the images are of correct ratio.
body {
width: 100%;
height: 100%;
margin: 0;
}
.header {
background-color: #000;
color: #fff;
border-color: #080808;
min-height: 50px;
border: 1px solid transparent;
}
.inner header {
width: 80%;
margin: auto;
}
.logo {
float: left;
height: 50px;
padding: 15px;
font-size: 20px;
font-weight: bold;
padding-left: 90px;
}
a {
text-decoration: none;
background-color: transparent;
color: #ededed;
}
.header link {
float: right;
font-size: 14px;
height: 50px;
padding: 15px 15px;
font-size: 16px;
font-weight: bold;
}
#su {
float: right;
height: 50px;
padding: 15px 90px;
}
#l {
float: right;
height: 50px;
padding: 15px 0px;
}
.content {
min-height: 600px;
}
.banner-image {
padding-bottom: 50px;
margin-bottom: 20px;
text-align: center;
color: #f8f8f8;
background: url(image/intro-bg_1.jpg) no-repeat center;
background-size: cover;
}
.inner-banner-image {
padding-top: 12%;
width: 80%;
margin: auto;
}
.banner-content {
position: relative;
padding-top: 6%;
padding-bottom: 6%;
overflow: hidden;
margin-bottom: 12%;
background-color: rgba(0, 0, 0, 0.7);
max-width: 660px;
margin-left: 200px;
}
.button {
color: #fff;
background-color: #c9302c;
border-color: #ac2925;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
padding: 10px 16px;
font-size: 18px;
border-radius: 6px;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
.items {
width: 30%;
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
float: left;
margin-left: 1%;
}
.thumbnail {
display: block;
max-width: 100%;
height: auto;
}
.caption {
color: #000;
padding: 0px 10px 10px;
font-weight: bold;
text-align: center;
}
footer {
background-color: #000;
color: #fff;
font-size: 14px;
text-align: center;
}
<html>
<head>
<title>Lifestyle Store</title>
</head>
<body>
<div class="header">
<div class="inner header">
<div class="logo">
Lifestyle Store
</div>
<div class="header link">
<div id="su">
Sign Up
</div>
<div id="l">
Login
</div>
</div>
</div>
</div>
<div class="content">
<div class="banner-image">
<div class="inner-banner-image ">
<div class="banner-content">
<h1>We sell lifestyle</h1>
<p>Flat 40% OFF on premium brands</p>
<form>
Shop Now
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="items">
<a href="#">
<img src="image/camera.jpg" class="thumbnail">
<div class="caption">
<h2>Cameras</h2>
<p>Choose among the best from the world</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/watch.jpg" class="thumbnail">
<div class="caption">
<h2>Watches</h2>
<p>Original watches from the best brands</p>
</div>
</a>
</div>
<div class="items">
<a href="#">
<img src="image/shirt.jpg" class="thumbnail">
<div class="caption">
<h2>Shirts</h2>
<p>Our exquisite collection of shirts</p>
</div>
</a>
</div>
</div>
<footer>
<div class="container">
<p>Copyright © Lifestyle Store. All Rights Reserved | Contact Us: +91 90000 00000</p>
</div>
</footer>
</body>
</html>
Have you linked the CSS file correctly in this line? Try dragging and dropping the file directly into the HTML to ensure the location and name is correct.
href="assignment1/public_html/style.css"
Edit:
The current link you have is saying that you have the index.html file outside of the 'assignment1' folder. If you have your HTML file inside 'public_html' then the stylesheet link should be the following.
href="style.css"