Why is indicated distance so long? Here is an image:
Here is the full code:
body {
margin: 10px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
background-color: #ffffff;
}
.footer {
font-size: 2vw;
width: 100%;
padding: 10px 0 10px 0;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ddd;
color: #333;
text-indent: 0px;
text-align: center;
}
.footer0 {
font-size: 16px;
width: calc(100%-80px);
height: 230px;
margin: 0px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 0em;
margin-bottom: 0em;
background-color: #960017;
color: #eee;
text-indent: 20px;
}
.footer0 a:link,
.footer0 a:hover,
.footer0 a:visited,
.footer0 a:active {
color: #eee;
text-decoration: none;
}
.main {
text-indent: 50px;
margin: 5%;
text-align: justify;
}
a:link,
a:hover,
a:visited,
a:active {
color: blue;
text-decoration: underline;
}
#media screen and (min-width: 1205px) {
.code0 {
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
padding: 20px;
padding-bottom: 0px;
border: 1px solid #4a3728;
/* here is the place to define the border color, the box shadow is gray anyway */
width: 1200px;
box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.0), 0 7px 20px 0 rgba(100, 100, 100, 0.3);
}
}
.r {
border-radius: 6px;
}
<body class="code0">
<div class="main">
Welcome to the site.
</div>
<br>
<div class="footer r" style="margin-top: 20px; margin-bottom: 0px;">
<p style="margin-top: 0px; margin-bottom: 0px;">Copyright <b>Institutum Latinum Romae</b> © 2022-2022</p>
</div>
My attempt: play with the margin-bottom of the internal element, padding-bottom of the external element. It didn't work out.
I use a nice trick called code0. It enables displaying on huge screens with a nice look. It creates a rectangle on huge screens where the page is inside of it.
You don't have enough content. So you need to give the body a min-height: 100vh and apply flexbox + flex-direction: column to it. Then you can push the footer to the bottom by using margin-top: auto. That will consume all remaining space and place the footer at the bottom even when the content is insufficient to fill the viewport.
body {
margin: 10px;
font-size: 28px;
font-family: 'Open Sans', sans-serif;
background-color: #ffffff;
min-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
}
.footer {
font-size: 2vw;
width: 100%;
padding: 10px 0 10px 0;
margin-top: 0px;
margin-bottom: 0px;
background-color: #ddd;
color: #333;
text-indent: 0px;
text-align: center;
}
.footer0 {
font-size: 16px;
width: calc(100%-80px);
height: 230px;
margin: 0px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 0em;
margin-bottom: 0em;
background-color: #960017;
color: #eee;
text-indent: 20px;
}
.footer0 a:link,
.footer0 a:hover,
.footer0 a:visited,
.footer0 a:active {
color: #eee;
text-decoration: none;
}
.main {
text-indent: 50px;
margin: 5%;
text-align: justify;
}
a:link,
a:hover,
a:visited,
a:active {
color: blue;
text-decoration: underline;
}
#media screen and (min-width: 1205px) {
.code0 {
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
padding: 20px;
padding-bottom: 0px;
border: 1px solid #4a3728;
/* here is the place to define the border color, the box shadow is gray anyway */
width: 1200px;
box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.0), 0 7px 20px 0 rgba(100, 100, 100, 0.3);
min-height: calc(100vh - 100px);
}
}
.r {
border-radius: 6px;
}
<body class="code0">
<div class="main">
Welcome to the site.
</div>
<br>
<div class="footer r" style="margin-top: auto; margin-bottom: 0px;">
<p style="margin-top: 0px; margin-bottom: 0px;">Copyright <b>Institutum Latinum Romae</b> © 2022-2022</p>
</div>
</body>
Related
I am making a sidebar for my site and I want the side bar to fill the rest of the screen but also scroll separate to the right of the screen when it overflows with other elements inside. When I use 100% for the height the element only goes to the height of the last element inside of it.
I am trying to get it to fill the rest of the screen as I stated previously but it only goes to not all the way.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
margin-left: 345px;
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
Your leftmain IS taking up 100% of the space available to it, leftmain stops when it reaches . You have leftmain set to flex-direction: column;
when only the .main should have it. Also don't use the tag, it is no longer supported in HTML5 and is display: block; when it should be inline-block.
I would change just to and set display to inline-block and set a width so the leftmain has room to go past it.
I hope this solves your problem.
.leftmain {
height: 100%;
width: 325px;
padding: 0px 10px;
align-content: center;
background-color: #333333;
overflow: scroll;
}
#nameOfCenterDiv {
position: absolute;
left: 300px;
display: inline-block;
}
Give to the sidebar a position fixed so it always stays there wherever you scroll and and a margin-left to your content on the right (the width of the margin-left must be the same of sidebar width)
.leftmain{
position: fixed
}
.main{
margin-left: 345px;
width: 450px //remove this so it's 100%
}
You have to wrap the left sidebar and right panel within the same container.
Using the display: flex on the container, you no longer need to specify a 100% height for the left sidebar since it will automatically fill in the remaining space.
You also need to remove the margin-left rule for the right content so that it lays nicely with the sidebar.
You can optionally set a max-height of 100vh to the sidebar so that it scrolls when its content exceeds the viewport height.
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.main {
border: 0px solid #ffffff;
padding: 0px 0px;
flex-direction: column;
align-content: center;
text-align: center;
width: 450px;
}
.card {
display: inline-block;
width: 400px;
height: 160px;
background-color: #404040;
border: 1px solid #404040;
border-radius: 4px;
margin: 0px;
margin-top: 20px;
text-decoration: none;
}
.toptext {
display: inline-block;
width: 400px;
height: 45px;
color: #ffffff;
background-color: #ffffff;
border: 1px solid #ffffff;
border-radius: 4px;
margin: 0px;
margin-top: 5px;
text-decoration: none;
text-align: left;
}
.toptext h1 {
font-size: 20px;
margin-left: 0px;
margin-top: 1px;
color: #404040;
}
.toptext p {
font-size: 12px;
margin-left: 0px;
margin-top: -10px;
color: #404040;
}
.flexcolumn {
flex-direction: column;
}
.container {
display: flex;
}
.leftmain {
width: 325px;
padding: 0px 10px;
flex-direction: column;
align-content: center;
background-color: #333333;
overflow: scroll;
}
.leftmain p {
float: left;
color: #ffffff;
text-align: left;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
line-height: 25px;
border-radius: 4px;
background-color: #333333;
width: 300px;
}
.leftmain p:hover {
background-color: #404040;
color: #ffffff;
}
.header {
overflow: hidden;
background-color: #404040;
padding: 10px 10px;
height: 36px;
text-align: center;
}
.header-right {
float: right;
padding: 0px 0px;
}
.header a {
float: left;
color: #ffffff;
text-align: center;
padding: 5px 10px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
align-content: center;
}
.header a:hover {
background-color: #333333;
color: #ffffff;
}
<div class="header">
📄 My Paper Company
<div class="header-right">
Settings
Contact
Donate
<div class="flexcolumn">
</div>
</div>
</div>
<div class="container">
<div id="leftmain" class="leftmain">
<p id="button" div="leftmain" onclick='show("htpmain")'>📢 How To Play</p>
</div>
<center>
<div id=htpmain class="main">
<div class="toptext">
<h1>
📢 How To Play
</h1>
<p>This guide will get you start the game and will be helpful to grasp everything you need to do.
</p>
</div>
<div class="card" />
</div>
</center>
</div>
Here is the HTML, the thing is the nav bar on my first main page works fine but all the other pages have a gap in between the top and the nav bar, its really annoying.
* {box-sizing: border-box;}
body {
margin: 0px;
}
.purchback {
background-image: url(../IMAGES/egg.png);
background-size: auto;
background-repeat: no-repeat;
}
.aboutback {
background-image: url(../IMAGES/farm.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.indexback {
background-image: url(../IMAGES/potato.jpg), url(../IMAGES/chipsf.jpg);
background-size: contain, contain;
background-repeat: no-repeat, repeat;
}
.hap {
height: 280px;
width: 300px;
}
html {
margin-top: 0;
padding: 0;
}
head{
}
h2 {
color: white;
background-color: rgba(0,0,0, 0.9);
border: solid white 3px;
display: inline-block;
padding: 5px 50px 300px 5px;
font-family: cursive;
font-weight: lighter;
margin: 0;
text-align: left;
}
p {
color: black;
vertical-align: top;
}
.logo {
height: 30px;
width: 30px;
padding:-10px -10px -10px -10px;
float: right;
}
.heading {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 200px;
border-bottom: solid white 4px;
padding-bottom: 17px;
}
.information {
text-align: center;
color: white;
font-family: impact;
font-weight: lighter;
font-size: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
.chips {
width: 400px;
height: 550px;
padding-top: 40px;
padding-left: 20px;
}
.carbless {
padding-bottom: 20px;
height: 300px;
width: 230px;
padding-top: 60px;
margin-left: -15px;
position: sticky;
}
.carbless:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg {
padding-bottom: 20px;
height: 330px;
width: 250px;
padding-top: 60px;
margin-left: -9px;
position: sticky;
}
background-image {
width: 800px;
height: 500px;
background-repeat: no-repeat;
}
nav {
background-color: rgb(200,180,90);
padding: 10px;
width: 100%;
margin: 0 auto;
position: fixed;
display: block;
}
.purchase {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
}
nav > ul > li {
display: inline-block;
margin-left: 11px;
color: white;
font-family: impact;
font-size: 30px;
padding: 5px 40px 5px 40px;
font-weight: lighter;
}
ul {
list-style-type: none;
}
nav > ul > li > a {
text-decoration: none;
color: white;
}
nav > ul {
margin: 0px;
padding: 0px;
}
nav > ul > li > a:hover {
color: grey;
border: -5px white solid;
}
section {
margin-left: 500px;
margin-top: -330px;
color: white;
font-family: impact;
font-weight: 600;
font-size: 55px;
}
nav > ul > li > ul {
background-color: rgb(200,180,90);
list-style: none;
padding: 0;
display: none;
position: absolute;
}
nav > ul > li:hover > ul {
display: block;
border: -5px white solid;
}
.abouttext {
margin: 10px 10px 10px 10px;
padding: 100px 0px 100px 40px;
font-family:consolas;
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
nav > ul > li:hover {
border: -5px solid white;
}
footer {
color: white;
padding-top: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/master.css">
</head>
<body class="purchback">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PURCHASE</li>
<li>VIDEOS</li>
<li>CONTACT</li>
<li><img class="logo"src="IMAGES/logo.png" alt="logo"></li>
</ul>
</nav>
<h1 class="purchase" style="padding-top: -30">purchase our products</h1>
</body>
</html>
And here is the CSS, sorry if it is messy/bad this is my first time making a website.
Remove margin for .purchase
.purchase {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
margin:0; /*Add this*/
}
* {box-sizing: border-box;}
body {
margin: 0px;
}
.purchback {
background-image: url(../IMAGES/egg.png);
background-size: auto;
background-repeat: no-repeat;
}
.aboutback {
background-image: url(../IMAGES/farm.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.indexback {
background-image: url(../IMAGES/potato.jpg), url(../IMAGES/chipsf.jpg);
background-size: contain, contain;
background-repeat: no-repeat, repeat;
}
.hap {
height: 280px;
width: 300px;
}
html {
margin-top: 0;
padding: 0;
}
head{
}
h2 {
color: white;
background-color: rgba(0,0,0, 0.9);
border: solid white 3px;
display: inline-block;
padding: 5px 50px 300px 5px;
font-family: cursive;
font-weight: lighter;
margin: 0;
text-align: left;
}
p {
color: black;
vertical-align: top;
}
.logo {
height: 30px;
width: 30px;
padding:-10px -10px -10px -10px;
float: right;
}
.heading {
text-align: center;
font-family: impact;
color: white;
font-weight: lighter;
padding-right: 10px;
padding-top: 200px;
border-bottom: solid white 4px;
padding-bottom: 17px;
}
.information {
text-align: center;
color: white;
font-family: impact;
font-weight: lighter;
font-size: 20px;
padding-right: 10px;
padding-bottom: 20px;
}
.chips {
width: 400px;
height: 550px;
padding-top: 40px;
padding-left: 20px;
}
.carbless {
padding-bottom: 20px;
height: 300px;
width: 230px;
padding-top: 60px;
margin-left: -15px;
position: sticky;
}
.carbless:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg:hover {
border: solid white 3px;
background-color: rgba(100, 0, 100, 0.5);
}
.bigg {
padding-bottom: 20px;
height: 330px;
width: 250px;
padding-top: 60px;
margin-left: -9px;
position: sticky;
}
background-image {
width: 800px;
height: 500px;
background-repeat: no-repeat;
}
nav {
background-color: rgb(200,180,90);
padding: 10px;
width: 100%;
margin: 0 auto;
position: fixed;
display: block;
}
.purchase {
text-align: center;
font-family: impact;
color: #000;
font-weight: lighter;
padding-right: 10px;
padding-top: 80px;
border-bottom: solid white 4px;
padding-bottom: 10px;
margin:0;
}
nav > ul > li {
display: inline-block;
margin-left: 11px;
color: white;
font-family: impact;
font-size: 30px;
padding: 5px 40px 5px 40px;
font-weight: lighter;
}
ul {
list-style-type: none;
}
nav > ul > li > a {
text-decoration: none;
color: white;
}
nav > ul {
margin: 0px;
padding: 0px;
}
nav > ul > li > a:hover {
color: grey;
border: -5px white solid;
}
section {
margin-left: 500px;
margin-top: -330px;
color: white;
font-family: impact;
font-weight: 600;
font-size: 55px;
}
nav > ul > li > ul {
background-color: rgb(200,180,90);
list-style: none;
padding: 0;
display: none;
position: absolute;
}
nav > ul > li:hover > ul {
display: block;
border: -5px white solid;
}
.abouttext {
margin: 10px 10px 10px 10px;
padding: 100px 0px 100px 40px;
font-family:consolas;
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
nav > ul > li:hover {
border: -5px solid white;
}
footer {
color: white;
padding-top: 30px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="CSS/master.css">
</head>
<body class="purchback">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PURCHASE</li>
<li>VIDEOS</li>
<li>CONTACT</li>
<li><img class="logo"src="IMAGES/logo.png" alt="logo"></li>
</ul>
</nav>
<h1 class="purchase" style="padding-top: -30">purchase our products</h1>
</body>
</html>
I have this website with a showcase div, within the div I have a "Get Started" button. I am able to vertically align the button with the margin attribute. However I do not want to horizontally align the button with margin as this will lead to some trouble for me in the future, I've tried align: center; and align="center" but the button sticks to the left side of the showcase. How can I unstick this button and horizontally align it without having to use a margin attribute?
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verdana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start {
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
You can wrap your button in a div with the style text-align: center; to horizontally center your button. Example:
html, body, header{
position:absolute;
left:0;
top:0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1{
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2{
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight{
color: #45d845;
}
.heading{
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet{
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase{
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
}
.showcase h2{
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-align: center;
text-shadow: 1px 3px #000;
}
#start{
align: center;
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
text-align: center;
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#start:hover{
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen.
Interested has all devonshire difficulty jay
assistance joy. Unaffected at ye </h2>
<div style="text-align: center;">
<button id="start">Get Started</button>
</div>
</div>
You can consider using a flexbox. Documentation in the CSS source.
/* Global Sets */
html,
body,
header {
position: absolute;
left: 0;
top: 0;
width: 100%;
margin: 0;
margin-top: 0;
margin: auto;
padding: 0;
}
/*Heading*/
h1 {
display: inline-block;
font-family: Trebuchet MS;
font-size: 75px;
letter-spacing: 3px;
margin: 10px 0px 0px 20px;
}
h2 {
display: inline-block;
flex-direction: row;
margin: 0px 0px 0px 50px;
font-family: Georgia;
}
.highlight {
color: #45d845;
}
.heading {
background-color: #d84545;
border-bottom: 5px solid black;
padding-top: 20px;
padding-bottom: 20px;
}
#comet {
font-size: 65px;
margin-left: 20px;
}
/*Showcase*/
.showcase {
background: url('background1.jpeg');
border-bottom: 5px solid black;
height: 1000px;
width: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
color: #cccccc;
display: flex; /* Added */
flex-direction: column; /* Added */
align-items: center; /* Added, horizonal alignment */
}
.showcase h2 {
color: #fff;
margin-top: 170px;
font-size: 60px;
font-family: Verndana;
text-shadow: 1px 3px #000;
text-align: center;
}
#start {
/* align: center; Not valid CSS */
margin-top: 130px;
background-color: transparent;
color: #fff;
padding: 20px 30px 20px 30px;
/* text-align: center; No longer required */
font-family: Helvetica;
font-weight: bold;
border-radius: 10px;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
}
#start:hover {
cursor: pointer;
background-color: #fff;
color: #000;
}
<header>
<div class="heading">
<h1>ThumbTac <span id="comet">☄</span> </h1>
</div>
</header>
<div class="showcase">
<h2>He moonlight difficult engrossed an it sportsmen. Interested has all devonshire difficulty jay assistance joy. Unaffected at ye </h2>
<button id="start" align="center">Get Started</button>
</div>
So, I am working on two sites, and the padding seems to change tremendously on different screens, I was wondering if this was potentially due to the units I am using? Or the specific CSS tag? However, I am hoping someone can figure it out for me
Two bits of code that keep changing:
codepen
.divider {
background-color: #3498db;
padding-top: 5%;
padding-bottom: 5%;
font-family: Open Sans;
font-weight: 300;
text-align: center;
}
.divider h1 {
margin-bottom: 10px;
margin-top: 0%;
padding-top: 20%;
font-weight: 500;
color: white;
}
.divider p {
color: white;
margin-bottom: 5px;
font-family: Open Sans;
text-align: center;
}
.divider button {
padding: 10px;
height: 15%;
cursor: auto;
width: 17%;
margin-top: 30px;
border-radius: 50px;
text-align: center;
color: white;
border: white 1px solid;
background-color: #3498db;
}
.divider button:hover {
background-color: white;
color: black;
transition: all 0.3s ease 0s;
}
<div class="divider">
<h1>See Something You Like?</h1>
<p>Feel free to contact us at any time and we’ll have someone reply to you 6 as soon as possible.
<br>industry's standard dummy text ever since the 1500s
<br>
<br>Whenever you’re ready, email us with the details you want on your website, and we will
<br>respond with a rough price.</p>
<a href="mailto:hello#baseframe.co">
<button>Email</button>
</a>
</div>
on this, the top padding gets super big (or sometimes it gets smaller) on different screens.
codepen
* {
margin: 0 auto;
padding: 0;
}
html {
height: 100%;
}
body {
font-family: 'Open Sans';
font-weight: 400;
height: 100%;
background-color: #ddd;
}
.nav {
background: rgba(0, 0, 0, 0);
position: absolute;
width: 100%;
}
.nav ul {
text-align: right;
vertical-align: middle;
margin-right: 15px;
margin-top: 15px;
font-size: 1.1em;
}
.nav li {
padding-top: 5px;
list-style: none;
display: inline-block;
padding: 15px;
}
.nav a {
margin-top: 17px;
bottom: 0;
display: inline-block;
color: white;
text-decoration: none;
}
.nav a:hover {
color: #3498db;
transition: ease 0.5s all 0s;
}
.nav hr {
opacity: 0.2;
width: 95%;
text-align: center;
}
.nav-logo {
vertical-align: middle;
top: 0;
float: left;
width: 5%;
display: inline-block;
}
.nav-logo img {
width: 250%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
/*-------------------Home-Page-------------------*/
.home-page {
background-image: url("http://baseframe.co/getanimus/img/cover1.jpg");
background-size: cover;
background-position: top;
background-attachment: fixed;
padding-bottom: 17%;
text-align: center;
}
.home-page h1 {
color: white;
padding-top: 15%;
font-size: 5em;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.home-page input {
cursor: auto;
}
.home-page p {
font-weight: 300;
color: white;
margin-bottom: 15px;
}
button#infl {
background-color: #3498db;
color: white;
font-size: 1em;
width: 15%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
font-family: montserrat;
padding: 15px;
margin: 5px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border: none;
cursor: auto;
}
button#brands {
background-color: white;
color: #7f8c8d;
font-size: 1em;
width: 15%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
font-family: montserrat;
padding: 15px;
margin: 5px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border: none;
cursor: auto;
}
button#brands:hover {
opacity: 0.8;
transition: all 0.3s ease 0s;
}
button#infl:hover {
opacity: 0.8;
transition: all 0.3s ease 0s;
}
/*-------------------About-------------------*/
.about {
background-color: white;
padding-bottom: 10%;
}
.about h1 {
text-align: left;
margin-left: 20%;
margin-top: 5%;
}
.about hr {
background-color: #3498db;
height: 5px;
border: none;
margin-top: 2%;
margin-left: 20%;
width: 5%;
text-align: left;
float: left
}
.about p {
margin-left: 20%;
margin-right: 20%;
line-height: 30px;
margin-top: 5%;
text-align: left;
}
<div class="nav">
<ul>
<li class="nav-logo">
<img src="http://baseframe.co/getanimus/img/logo_white.png">
</li>
<li>Home</li>
<li>Influencers</li>
<li>Brands</li>
<li>Contact</li>
<hr>
</div>
<div class="home-page">
<h1>Animus Digital</h1>
<p>Premium Talent Management Agency</p>
<button id="infl">Influencers</button>
<button id="brands">Brands</button>
</div>
this website navigation doesn't align properly with the logo on the left, for some reason. In addition, on a 1920 x 1080 screen, the buttons get pretty wide.
Really appreciate any help on this. Thanks.
The reason why the sizes of those elements changes on different screens is because you use % instead of px. % scales the size with the browser's size.
You should use CSS Media queries
For first case since you are using % in padding, which leads to unexpected behavior in different situations.
For "n%" margin (and padding) to be the same for
margin-top/margin-right/margin-bottom/margin-left, all four have to be
relative to the same base. If top/bottom used a different base than
left/right', then "n%" margin (and padding) wouldn't mean the same
thing on all four sides.
(Also note having the top/bottom margin relative to the width enables
a weird CSS hack that allows you to specify a box with an unchanging
aspect ratio ...even if the box is rescaled.)
% with margin/padding
I'm new to the whole HTML and CSS thing, but have been doing okay so far.
Now I need to stick my header to the top, so when scrolling down it stays to the top and the other content is scrolled through.
I've been googling and searching a lot, and cannot find the best solution and I'm hoping you can help me!
Just for info I'm using the 960 grid.
Here is the code:
<div class="container_12">
<header class="fixed">
<img src="img/logolangt.jpg" alt="MB it logo" class="grid_12"/>
<nav class="grid_12" id="mainnav">
<ul>
<li>Services</li>
<li>Career</li>
<li>Clients</li>
<li>About</li>
</ul>
</nav>
<nav class="grid_12" id="servicesnav">
<ul>
<li>HCM</li>
<li>SAP</li>
<li>SuccessFactors</li>
<li>Support</li>
</ul>
</nav>
</header>
And here is the CSS code:
.container_12 {
background: white;
}
/*
**************
* =header
**************
*/
header img {
padding: 20px 0 20px 20px;
}
/*
**************
* =mainnav
**************
*/
#mainnav {
top: -3px;
background-color: #26719b;
font-size: 1.8em;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
position:relative;
height:40px;
font-family: "Segoe UI";
padding: 0 0 0 20px;
text-align: center;
border-radius: 10px;
}
#mainnav ul li {
margin-right: 50px;
text-align: center;
display: inline;
}
#mainnav li a {
color: white;
text-decoration: none;
text-align: center;
padding: 1px 16px 8px 16px;
}
nav li {
display: inline;
}
#mainnav li a:hover, .selected {
background: #f7a634;
border-radius: 5px;
}
/*
**************
* =subnavs
**************
*/
#servicesnav, #careernav, #clientsnav, #aboutnav {
font-size: 1.3em;
font-weight: bold;
background-color: #f7a634;
width: 430px;
height: 31px;
display: inline-block;
padding-top: 4px;
margin-top: -3px;
border-radius: 10px;
}
#servicesnav li a {
color: white;
text-decoration: none;
}
#servicesnav ul li {
padding-top: 20px;
}
#careernav {
margin-left: 180px;
}
#careernav li a {
color: white;
text-decoration: none;
}
#careernav ul li {
padding-top: 20px;
margin-left: 80px;
}
#clientsnav {
margin-left: 360px;
}
#clientsnav li a {
color: white;
text-decoration: none;
}
#clientsnav ul li {
padding-top: 20px;
margin-left: 90px;
}
#aboutnav {
margin-left: 520px;
}
#aboutnav li a {
color: white;
text-decoration: none;
}
#aboutnav ul li {
padding-top: 20px;
margin-left: 54px;
}
/*
**************
* =general
**************
*/
p, h1, h2, h3 {
font-family: "Segoe UI", sans-serif;
}
.sections h2 {
text-align: center;
font-weight: bold;
font-size: 1.6em
}
/*
**************
* =main
**************
*/
.main .grid_8 {
margin-top: 20px;
}
/*
**************
* =services-->
**************
*/
#hcm, #sap, #successfactors, #support {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#sap {
background-color: #f7a634;
}
#successfactors {
background-color: #26719b;
}
#support {
background-color: #f7a634;
}
/*
**************
* =career-->
**************
*/
#workingat, #jobs {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#jobs {
background-color: #f7a634;
}
/*
**************
* =clients-->
**************
*/
#clients, #testimonials {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#testimonials {
background-color: #f7a634;
}
/*
**************
* =aboutus-->
**************
*/
#values, #partnerships, #contact {
background-color: #26719b;
font-size: 15px;
font-weight: bold;
margin-left: -20px;
margin-right: 0px;
width: 980px;
height: 600px;
padding: 0 0 0 20px;
margin-top: 60px;
position:relative;
color: white;
border-radius: 10px;
box-shadow: 3px 3px 3px #888888
}
#partnerships {
background-color: #f7a634;
}
#contact {
background-color: #26719b;
Thank you very much!
--Edited to include more CSS code --
You just need to put this in your css.
#mainnav {
position:fixed;
}
Take a look at http://jsfiddle.net/qxXXw/ and you also might want to have a look at http://www.w3schools.com/css/css_positioning.asp to get a better understanding about css positions, I know it took me awhile to figure it out at first.