This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 5 months ago.
I am having trouble. There is a whitespace between the two pages of content. Also I have tried applying margin: auto; and text-align: center; but to no avail I don't know what to do. Also what other things are wrong with the way I implemented my design?
Also I tried to add a gray border around the avatar so that it fits into the navbar but stays exactly where it is.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, intial-scale=1.0"/>
<title>Johnson's Personal Portfolio</title>
</head>
<body>
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3"/>
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
</body>
</html>
body{
width: 100%;
height: 100%;
margin: 0;
}
#navbar li, a{
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black; font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav{
width: 100%;
display:block;
background-color:red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection{
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1{
margin: auto;
}
#welcomesection p{
text-align: center;
}
.avatar img{
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects{
width: 100%;
height: 150vh;
background-color:blue;
}
#projects h2{
text-decoration: underline;
text-align: center;
}
Is the h2 margin you can remove it and add a padding
body {
width: 100%;
height: 100%;
margin: 0;
}
#navbar li,
a {
list-style-type: none;
display: inline-block;
padding: 4px;
float: right;
color: black;
font-weight: normal;
font-style: Helvetica, sans-serif;
font-size: 15px;
vertical-align: center;
}
nav {
width: 100%;
display: block;
background-color: red;
position: fixed;
height: 50px;
top: 0;
left: 0;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
#welcomesection {
float: clear;
display: flex;
align-items: center;
width: 100%;
height: 120vh;
text-align: center;
background-color: teal;
z-index: 1;
}
h1 {
margin: auto;
}
#welcomesection p {
text-align: center;
}
.avatar img {
width: auto;
height: 50px;
float: left;
left: 15px;
top: 0;
padding: 15px solid grey;
}
#projects {
width: 100%;
height: 150vh;
background-color: blue;
}
#projects h2 {
text-decoration: underline;
text-align: center;
margin-top: 0;
padding-top: 20px;
}
<nav id="navbar">
<div class="avatar">
<img alt="LordYamanouchi" src="https://avatars.githubusercontent.com/u/20011297?v=3" />
</div>
<ul>
<li>Alias</li>
<li>About</li>
<li><a href="#">Contacts<a/></li>
<li>Works</li>
</ul>
</nav>
<header id="welcomesection">
<div id="welcome-section">
<h1>
Welcome to Johnson Oluwaseun Adeleke's
</h1>
<h1>
<>Portfolio Page
<>
</h1>
<p style="color: blue"><i>I am an aspiring Web Developer</i></p>
</div>
</header>
<section id="projects">
<h2>Here are some of my Projects</h2>
<p></p>
</section>
Related
So I have a code for a website that uses HTML and CSS but I have a problem with CSS.
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: #222222;
width: 100%;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
This is my result:
Result Image
It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.
Any ideas? Appreciated if you explain it to me as well.
Most major browsers apply a margin on the body, thus causing the footer not expanding to the viewport's full width.
To get rid of the margin, applying margin: 0 to body:
body {
background-color: #222222;
width: 100%;
margin:0;
}
img {
width: 50px;
height: 50px;
}
a {
cursor: pointer;
}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar a {
color: #f2f2f2;
text-align: center;
display: inline-block;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0px auto;
}
.navbar a:hover {
background: #222222;
color: black;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h2>TEST</h2>
<div class="navbar">
<div class="navbar-inner">
<img src="todo.png">
<img src="home.png">
<img src="info.png">
</div>
</div>
</body>
</html>
Just add left : 0;
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can also reduce that type of error by just adding this code at the top.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
I'm trying to place 3 images on the same row using flexbox. I also want to change the size of the first image as it is too big. However, my CSS rules are not being applied properly. I have the images each inside their own div with a class of flex-item-3 to indicate that they are flex items inside my flex container. However, I can't seem to override the default CSS rules.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
font-family: 'Lato', 'sans-serif', 'arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
max-width: 100%;
margin: 0 auto;
}
section {
padding: 80px 0;
}
h2 {
margin: 0;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("img/truck.jpg");
background-size: cover;
background-position: center;
}
.flex-item {
padding-top: 15px;
height: 100vh;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color: orange;
}
.hero {
position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
padding: 10px;
border-radius: 10px;
}
.btn {
background-color: orange;
}
.flex2 {
display: flex;
justify-content: center;
align-items: center;
}
.flex-item-2 {
color: #312c2c;
width: 100%;
text-align: center;
}
.second-flex-item p {
margin-top: 20px;
margin-bottom: 40px;
font-size: 19px;
color: #312c2c;
}
.second-flex-item h2 {
font-weight: 900;
font-size: 25px;
}
.flex-3 {
display: flex;
justify-content: center;
max-width: 100%;
}
.flex-3-items {
display: flex;
width: 100%;
height: auto;
}
<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li>Our Story</li>
<li>Locations</li>
<li>Menu</li>
<li>Order now</li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2 second-flex-item">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> moBurgerz was founded in 2017 by owner Mahamed Ibrahim.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
<img src="Resources/img/white_truck.jpeg" class="truck-img">
</div>
</section>
<section class="flex-3">
<div class="flex-3-item meal-photos photo-1">
<img src="Resources/img/cheeseSteak.jpg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/goodMoanin.jpeg">
</div>
<div class="flex-3-item meal-photos">
<img src="Resources/img/moGul.jpeg">
</div>
</section>
</body>
.flex-3-item img { max-width:100%; } should do the trick.
Also, look at this: Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
Try this
.logo {
width: 100%;
height: auto;
}
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
I can't seem to find a way to center the images inside the div.. any tips ? Pretty basic stuff I know, just recently got into it again. I hope anybody gets what I'm trying to do here ?
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-color: grey;
background-attachment: fixed;
background-size: 100% auto;
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
width: 100%;
height: 100%;
background-image: url("img/bg/background1.png");
background-color: grey;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.body {
/*height: 100%;*/
width: 100%;
background-color: white;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
}
.content {
margin: auto;
width: 100%;
background-color: white;
color: black;
border-right: double;
border-left: double;
text-align: justify;
font-size: 20px;
font-family: arial;
padding-top: 10%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
.social {
margin: auto;
position: absolute;
}
.social a {
}
.footer {
height: 50px;
width: 100%;
background-color: black;
color: white;
margin: auto;
vertical-align: middle;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<div class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="header">
</div>
<div class="body">
<div class="content">
<div class="social">
<a href="https://www.facebook.com/" style="color:black; text-decoration:none">
<img src="img/fb.png" alt="Facebook">
</a>
<a href="http://www.instagram.com/" style="color:black; text-decoration:none" >
<img src="img/ig.png" alt="Instagram">
</a>
<a href="http://www.snapchat.com/" style="color:black; text-decoration:none" >
<img src="img/snapchat.png" alt="Snapchat">
</a>
</div>
</div>
</div>
<div class="footer" id="copyright" style="text-align:center">
<div id="cpy">©)</div>
</div>
</body>
</html>
As I understand the main trouble is an absolute position of .social block. If this position is really necessary use:
left: 50%;
transform: translateX(-50%);
In other case you can remove position: absolute; and add
display: flex;
justify-content: center;
I'm working on a little something and I'm trying to make it so the footer is always getting pushed down when the screen shrinks. I'm struggling to do this as my content instead goes under the footer. Can anyone help?
I'm also open to any things I can improve on or clean up, I know the CSS is a bit un-neat but I'm getting used to not using bootstrap so I'm working on it :)
Many thanks,
Conner.
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
min-height: 100%;
}
#image-wrap {
background-color: #2E2E2E;
}
#wrapper-image {
height: calc(100vh - 135px);
background: url(../images/background-image.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.6;
}
.full-view {
width: 100%;
}
/* Fonts */
.title-color {
color: #FF1A1A;
}
#font-face {
font-family: titleText;
src: url("../fonts/Typo_Round_Regular_Demo.otf") format("opentype");
}
.page-font {
font-family: titleText;
}
/* Header Handler */
#header-container {
position: absolute;
top: 0;
background-color: #2E2E2E;
}
#site-title {
display: inline-block;
margin-left: 175px;
margin-top: 25px;
margin-bottom: 20px;
font-size: 20px;
}
#navbar-handle {
float: right;
display: inline-block;
margin-right: 90px;
margin-top: 25px;
}
.navi-bar {
display: inline-block;
list-style: none;
}
.navi-bar li {
display: inline-block;
text-decoration: none;
}
li a {
text-decoration: none;
color: white;
padding: 20px;
font-size: 25px;
}
.nav-item {
background-color: #4A4A4A;
border-radius: 5px;
margin-top: 10px;
margin-left: 15px;
padding: 5px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
text-align: center;
}
#footer {
background-color: #2e2e2e;
position: relative;
bottom: 0;
height: auto;
clear: both;
}
#footer-title {
margin-left: 10px;
}
#footer-text {
text-align: center;
}
#footer-subtext {
color: white;
}
#discord-icon {
font-size: 60px;
padding: 10px;
}
#discord-item-container {
margin-top: 5px;
border: solid 1px red;
border-radius: 5px;
display: inline-block;
width: auto;
background-color: #494949;
text-align: center;
padding: 5px;
}
#builder,
#builder a {
color: white;
text-align: left;
text-decoration: none
}
/* Content */
#content {
position: absolute;
top: 275px;
width: 100%;
height: auto;
}
.grid-container-1 {
display: grid;
grid-template-columns: auto;
text-align: center;
height: auto;
}
#image-container {
height: auto;
margin: 0 auto;
position: relative;
}
#logo {
height: 125px;
width: 125px;
}
#content-subtext {
color: white;
}
#media screen and (max-width: 420px) {
.grid-container {
grid-template-columns: auto;
}
#discord-item-container {
margin-top: 10px;
margin-bottom: 5px;
}
#site-title {
display: block;
margin-top: 10px;
text-align: center;
margin-left: 0;
font-size: 20px;
}
#navbar-handle {
display: block;
text-align: center;
margin-left: 0;
margin-right: 0;
float: none;
padding-bottom: 5px;
}
li a {
padding: 5px;
font-size: 20px;
}
}
#media screen and (max-width: 770px) and (min-width: 421px) {
#site-title {
margin-left: 60px;
}
li a {
padding: 5px;
font-size: 25px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0 viewport-fit=cover, user-scalable=no">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/page-style.css">
<!-- Icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
<div id="image-wrap">
<div id="wrapper-image">
</div>
</div>
<div class="full-view" id="header-container">
<div class="title-color page-font" id="site-title">
<h1>Voltunix's Services</h1>
</div>
<div id="navbar-handle">
<ul class="navi-bar page-font">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Services
</li>
</ul>
</div>
</div>
<div id="content">
<div class="grid-container-1">
<div class="grid-row" id="image-container">
<img src="./images/logo.png">
<h1 class="page-font title-color">Voltunix's Services</h1>
<p class="page-font" id="content-subtext">Quality work fitting your personal budget</p>
</div>
</div>
</div>
</div>
<footer class="full-view" id="footer">
<div id="footer-title">
<div class="grid-container">
<div class="grid-item" id="footer-text">
<h2 class="title-color page-font">Voltunix</h2>
<p class="page-font" id="footer-subtext">Freelance Manager,<br> Server Owner,<br> Middleman
</p>
</div>
<div class="grid-item">
<div id="discord-item-container">
<i class="fab fa-discord title-color" id="discord-icon"></i>
<p class="page-font" style="color: white;">Voltunix#0033</p>
</div>
</div>
<div class="grid-item" style="border: solid 1px red;">
<p id="builder">Website developed by Conner Murphy</p>
</div>
</div>
</div>
</footer>
</body>
</html>
This is taken from here https://css-tricks.com/couple-takes-sticky-footer/ and only one solution but you can use flexbox and do the following
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper{
flex: 1 0 auto;
}
.footer{
flex-shrink: 0;
}
hey guys i want to move the .mission-banner to the vertical centre of the .mission div. but margin: auto 0; wont work and also flex-box isnt. so what am i not seeing here ?
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 1200px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tea Cozy | Home</title>
<link rel="stylesheet" href="./resources/css/style.css">
</head>
<body>
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
</body>
</html>
this is what it looks like rn:
The issue is you have fixed height/width for the mission and relative positioning. You'll also need a fixed height set for the mission-banner to position it in the center of the page.
There is probably a more technical explanation for all this but playing around with quickly I was able to achieve what I believe you're looking for with the following css. You might need to fiddle a bit to get it exactly how you need, particularly the height of the mission banner when you add more content:
.mission {
background-image: url(../images/img-mission-background.jpg);
position: absolute;
top: 70px;
width: 100%;
height: 100%;
}
.mission-banner {
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
height: 200px;
background-color: black;
}
margin:auto will center the div horizontally, use flex box
.mission{
display: flex;
justify-content: center;
flex-direction: column;
}
flex-direction lets you decide whether to align your content vertically with column or horizontally with row
https://www.w3schools.com/css/css3_flexbox.asp
i added background:red so it will be more clear that the div ( mission-banner ) is in the center vertically
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
height: 180px;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
.mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 0 auto;
top: 70px;
width: 100%;
height: 400px;
display: flex;
background: red;
display: flex;
justify-content: center;
flex-direction: column;
}
<header>
<img src="./resources/images/img-tea-cozy-logo.png" alt="our logo">
<nav>
<span>Mission</span>
<span>Featured Tea</span>
<span>Locations</span>
</nav>
</header>
<!-- main-content -->
<div class="mission">
<div class="mission-banner">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>