I currently have two inline-block div in my post page that contain my most recent book reviews. For most window sizes, these sections match up and take the same amount of space. For some windows dimensions, however, one inline-block takes up less space than the other, causing there to be white space at the bottom of the smaller div.
Is there anything I can do to get rid of this whitespace?
Here is my HTML and CSS:
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top;
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<a href="the-one-thing.html">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
</a>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
Thanks for your help in advance!
I think the problem lies with .post-description
If you look at your .post-description for both blocks, their text have different height.
You can set a fix height to .post-description and set vertical-align: top; to .book-review
html, body {
margin: 0;
padding: 0;
}
.newest-review-cover {
z-index: 0;
}
.newest-review-cover img {
display: block;
height: 50%;
width: 100%;
}
.newest-review-content h2 {
color: white;
font-size: 2rem;
padding-top: 1em;
}
.newest-review-content h5 {
padding: 1em 3em;
color: white;
font-size: 1rem;
}
.newest-review-content {
background-color: black;
padding: 2em 0;
text-align: center;
}
.book-review img{
width: 100%;
height: 200%;
}
.book-review {
background-color: black;
display: inline-block;
width: 33%;
padding-left: 0;
border-right: solid 3px #f28600;
border-left: solid 3px #f28600;
border-top: solid 5px #f28600;
margin-left: -4px;
margin-top: 0;
vertical-align: top; /*Added this to set alignment to top*/
}
.book-review p {
color: white;
margin: 1em 0;
}
.post-title {
text-align: center;
}
.post-description {
padding: 0 2em;
height: 150px; /*Added a fixed height*/
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="Homepage.css" rel = "stylesheet" type="text/css" />
<meta charset="utf-8">
<title> The Novel Column - Book Reviews </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<section class="newest-review-cover">
<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">
<div class="newest-review-content">
<h2> The 5AM Club Review </h2>
<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
</div>
</section>
<div class="all-posts">
<div class="book-review" id="the-one-thing">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">
<div class="book-description">
<p class="post-title"> The ONE Thing Review </p>
<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
</div>
</div>
<a href="the-10x-rule.html">
<div class="book-review" id="the-10x-rule">
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule">
<div class="book-description">
<p class="post-title"> The 10X Rule Review </p>
<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
</div>
</div>
</a>
</div>
</body>
</html>
Related
I'm making a discord server website for people to find discord servers to join and make friends but, I dont know why my web page has a horizontal scroll bar.
It also has a vertical scroll bar and it shouldn't have that yet
here is my HTML and CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">DISCORD</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
</div>
</div>
</div>
</center>
<footer>
<div class="container">
<div class="column">
<ul class="footer-links">
<li>
<a class="link-text" href="index.html" title="Home">
Home </a>
</li>
<li>
<a class="link-text" href="search.html" title="Search">
Search </a>
</li>
<li>
<a class="link-text" href="servers.html" title="Servers">
Servers </a>
</li>
<li>
<a class="link-text" href="https://discord.gg/" target="_blank">
Official Discord Server </a>
</li>
<li>
<a class="link-text" href="termsofservice.html" target="_blank">
Terms Of Service </a>
</li>
<li>
<a class="link-text" href="guidelines.html" target="_blank">
Guidelines </a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="copyright-text">© Copyright 2020 OnTop Servers</p>
</div>
</footer>
</body>
</html>
CSS:
.row::after {
clear: both;
display: table;
}
.copyright {
position: absolute;
bottom: 1%;
right: 1%;
font-size: 15px;
}
.copyright-text {
color: white;
}
.footer-links {
position: absolute;
bottom: 5%;
}
.link-text {
color: white;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
footer {
position: absolute;
bottom: 0%;
clear: both;
height: 200px;
width: 1920px;
color: #fff;
background: #2c2c2c;
}
.welcome {
margin-top: -2.5rem;
width: 100%;
height: 35.5rem;
line-height: 1.8em;
margin-bottom: .4em;
padding: 0;
font-family: Helvetica;
font-weight: 600;
font-size: 1.5em;
color: #ffff;
text-transform: uppercase;
}
.centered-text {
position: relative;
left: 24.5%;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.discord-logo {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
display: inline-block;
padding: .6em 0;
background: url(images/Discord-Wordmark-White.png) center no-repeat;
background-size: contain;
font-size: 1em;
}
.head {
margin-bottom: .4em;
padding: 0;
line-height: 1.4;
font-weight: 600;
font-size: 2em;
}
.body {
margin: 0 auto 1em;
text-transform: inherit;
opacity: 85%;
}
how do I fix this this problem it is really bugging me and I cant work out what the problem is?
It's this combination
position: relative;
left: 24.5%;
display: flex;
You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.
I suggest using margin-left instead of left.
I'm working on my portfolio which has three section tags. I've declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags -- just like body background colour.
While I did try to achieve that using the below code, the background colour for both the section tags isn't taking full page width. Any help on this would be appreciated.
HTML
<html>
<head>
<title>Srujan Sagar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato|Pacifico|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header>
Srujan Sagar
</header>
<section>
<p class="main-content">
Hello! I'm an India-based self-taught FrontEnd Developer.
<br />
<br /> I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
</p>
<img src="images/main_img.jpg" alt="my picture" width="140" class="logo" />
<ul class="social-links">
<li>
<a href="https://www.facebook.com/Srujan.SaGar" target="_blank">
<span class="fa fa-facebook-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-github" style="font-size:34px;color:#A63A50"></span>
</a>
</li>
<li>
<a href="#" target="_blank">
<span class="fa fa-linkedin-square" style="font-size:32px;color:#A63A50"></span>
</a>
</li>
</ul>
<br /> <br />
<p class="line"></p>
</section>
<nav class="main-content">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Skills</li>
<li>Contact</li>
</ul>
</nav>
<section class="second-content">
<h3>Hi there!</h3>
</section>
<section class="third-content">
<h3>Hi there!</h3>
</section>
</body>
</html>
CSS:
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
}
header {
font-family: 'Pacifico', sans-serif;
letter-spacing: 3px;
font-size: 90px;
padding-top: 10px;
color: #A63A50;
}
.main-content {
font-size: 1.3em;
font-family: 'Raleway', sans-serif;
color: #CA7989;
width: 500px;
margin: 0 auto;
padding-top: 25px;
}
.logo {
border-radius: 50%;
border: 1px solid #CA7989;
margin: 30px 0 0 0;
}
.social-links {
margin: 25px 30px 0 0;
}
a {
text-decoration: none;
color: #CA7989;
}
li {
list-style-type: none;
display: inline;
margin: 0 10px 0 0;
}
.line {
max-width: 550px;
margin: 0 auto;
border-top: 1px solid #CA7989;
}
nav a:hover {
color: #A63A50;
background: #F5E6E6;
}
.second-content {
background:#ebebeb;
width: 100%;
height: 465px;
}
.third-content {
margin-top:-18px;
background:#CA7989;
width: 100%;
height: 465px;
}
View the above code in CodePen
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
/* set margin and padding 0*/
margin:0;
padding:0;
}
margin: 0;
on the body, it's the default margin.
Maybe remove margin and padding from the body :
body {
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
margin:0;
padding:0;
}
Just add margin: 0; to bodyto remove the default margin.
https://codepen.io/anon/pen/aWdwaG
Try adding this
background-size : cover;
in "body" of your CSS :
body {
/*background: url('../images/background_img.jp');*/
background-color: #FFFAFB;
text-align: center;
font-family: 'Lato', sans-serif;
background-size: cover;
}
then try removing margin and padding of your body and that should do it!
You should also take a look at this article : https://css-tricks.com/perfect-full-page-background-image/
Here’s my HTML and CSS for an exercise, I do not understand why my border in the section is wrapping all the content. I would like to have two independent wrapped sections: "intro" and "main".
https://jsfiddle.net/fhd9eLnq/
#font-face {
font-family: myFont src: url(BebasNeue-webfont.woff);
}
body {
font-family: myFont;
width: 90%;
margin: auto;
}
h1,
h2 {
display: inline;
color: #016008;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 40px;
}
li {
display: inline;
}
li a {
text-align: center;
text-decoration: none;
}
img {
position: relative top: 0px;
right: 20px;
float: left;
margin: 5px;
border: 1px solid grey;
}
.intro {
float: right;
}
.primarynav {
list-style-type: none;
color: #016008;
text-align: right;
}
.secondnav {
display: block;
text-align: inherit;
}
.main {
padding: 10px;
border: 1px solid grey;
}
.intro {
border: 1px solid grey;
margin: 15px;
}
.news1 {
width: 60%;
background-color: #dddddd;
margin: 15px;
}
section {} footer {
background-color: #dddddd;
}
fieldset {
background-color: white;
}
mark {
color: black;
background: none;
font-weight: bold;
}
.latestnews {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 365px;
width: 33%;
padding: 5px;
}
.suscribe {
background-color: #dddddd;
position: relative;
left: 790px;
bottom: 350px;
width: 33%;
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Welcome to BootsWorld</title>
<link rel="stylesheet" type="text/css" href="boots.css" />
</head>
<body>
<header>
<nav>
<div class="logo">
<h1>BOOT</h1>
<h2>WORLD</h2>
</div>
<ul class="primarynav">
<li>Site map
</li>
<li>Privacy policy
</li>
<li>Accessibility
</li>
</ul>
<ul class="secondarynav">
<li>HOME
</li>
<li>SHOP
</li>
<li>NEWS
</li>
<li>ABOUT US
</li>
<li>CONTACT US
</li>
<li>SUBSCRIBE
</li>
</ul>
</nav>
</header>
<article class="intro">
<header>
<img src="boots.png" alt="boots image" />
<h2>Welcome to boot world</h2>
</header>
<p>BootWorld is the largest online footwear retailer in the UK.Our shop always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not send us a message.
</p>
</article>
<section class="main">
<article class="news">
<header>
<h2>NEW IN THE SHOP</h2>
</header>
<div class="news1">
<h3>CLASSIC COWBOY BOOTS</h3>
<p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only
<mark class="black">£49.99</mark>
</p>
<h3>MILITARY BOOTS</h3>
<p>Hard-wearing Men's military boots, guaranteed to withstand all weathers. From only
<mark class="black">£69.99</mark>
</p>
<h3>ROMAN SANDALS</h3>
<p>Get ready for summer with some stylish roman sandals. From only
<mark class="black">£39.99</mark>
</p>
<h3>OFFICE SHOES</h3>
<p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only
<mark class="black">£44.99</mark>
</p>
</div>
</article>
<aside class="latestnews">
<h3>Latest News</h3>
<p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
<footer>Posted by: Joe</footer>
</aside>
<aside class="suscribe">
<h3>Subscribe</h3>
<p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
<form>
<fieldset>
<legend>SIGN UP NOW!</legend>
<p>
<label for="yourname">Your name</label>
<br/>
<input type="text" name="yourname" id="yourname" size="20" />
</p>
<p>
<label for="emailaddress">email address</label>
<br/>
<input type="text" name="emailaddress" id="emailaddress" size="20" />
</p>
<button onclick="myFunction()">Sign Up</button>
</fieldset>
</form>
</aside>
</section>
<footer class="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,
<br/>London, WC1E 7HX</p>
</footer>
</body>
</html>
Because you float the image and intro and never clear them. Add a clear to your .main CSS rule:
.main {
padding: 10px;
border: 1px solid grey;
clear: both;
}
jsFiddle example
I notice you open your main class on line 40 <section class="main"> however you never close it. When I close it I am able to put a border around the separate classes. I also was able to use your CSS:
.main {
padding: 10px;
border: 2px solid grey;
}
to convert over to news1 and was able to wrap it without issue. If you could explain further I can try to help further.
this is my first time making a Tumblr theme and I've run into a problem with the post footer. I adjusted the width of the posts/content on the page, which in turn meant that I also had to adjust the width of the post footers. However, once I had done this, the positioning of the footer was off on most of the posts - but not all. Namely, the footer appears to only be positioned correctly on Answer and Video posts. On all other posts it's off to the right/above where it should be. Can anyone explain how to fix this? The theme is live here. Here's what I'm working with:
<html>
<head>
<meta name="color:Background" content="#000000" />
<meta name="color:Links" content="000000" />
<meta name="color:Sidebar background" content="#000000" />
<meta name="color:Sidebar text" content="#000000" />
<meta name="color:Text" content="#000000" />
<meta name="font:Body" content="Arial, Helvetica, sans-serif"/>
<meta name="if:Following in sidebar" content="1"/>
<meta name="if:Likes in sidebar" content="1"/>
<meta name="if:Search and description in sidebar" content="1"/>
<meta name="image:Background" content=""/>
<meta name="image:Sidebar" content=""/>
<title>{block:TagPage}{Tag} - {/block:TagPage} {block:SearchPage}{lang:Search results for SearchQuery} - {/block:SearchPage}{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<link rel="stylesheet" href="http://static.tumblr.com/hznqxps/ivOmgjf8v/normalize.css" />
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style>
body {
background: {color:Background} url('{image:Background}') repeat;
color: {color:Text};
font-family: {font:Body};
font-size: 0.7em;
}
a {
color: {color:Links};
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
padding: 0.5% 2%;
}
#sidebar nav li a {
margin-right: 0.5%;
padding: 0.2%;
}
#sidebar {
margin-top: 5%;
margin-bottom: 5%;
margin-left: 5%;
width: 500px;
}
.item {
position: fixed;
height: 80%;
background: #fff;
padding: 1% 5%;
}
.item .even {
background: #f2f2f2;
}
#content {
margin-left: 50%;
width: 543.5px;
}
#content article {
background: #fff;
margin-bottom: 5%;
}
article .inner {
display: inline-block;
padding: 4%;
width: 92%;
}
.title a {
color: {color:Text};
}
.photo img {
display: block;
}
.html_photoset {
text-align: center;
padding: 6% 0;
}
.link .title a {
border-bottom: 1px solid;
}
.chat ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.chat li {
padding: 0.5% 2%;
}
.chat .even {
background: #f2f2f2;
}
blockquote {
border-left: 1px solid #d1d1d1;
margin: 0;
padding: 2%;
}
.metadata {
background: rgba(233, 233, 233, 0.76);
border-top: 1px solid #ADADAD;
font-size: 0.9em;
padding: 2% 4%;
width: 500px;
}
.metadata ul {
width: 100%;
display: inline-block;
}
.metadata ul, #notes ol {
list-style: none;
margin: 0;
padding: 0;
}
.tags {
margin-top: 1% !important;
}
.tags li {
border: 1px solid #353535;
padding: 0.5%;
background: rgba(37, 37, 37, 0.84);
}
.index li, .tags li {
float: left;
margin-right: 2%;
}
.note {
border-bottom: 1px solid white;
padding: 1% 0;
}
#pagination li a {
background: #fff;
float: right;
margin: 0 0 2% 1%;
padding: 1%;
}
#content article, .item, #pagination a {
box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.33);
}
footer {
box-shadow: 0px 1px 6px 1px rgba(0, 0, 0, 0.11) inset;
}
.item form input {
border: none;
border-bottom: 1px solid #d1d1d1;
padding: 2% 1%;
width: 96%;
margin-bottom: 2%;
}
#likes {
list-style: none;
margin: 0;
padding: 0;
}
#followed ul {
display: inline-block;
list-style: none;
margin: 0 0 4% 0;
padding: 0;
width: 100%;
}
#followed img {
display: block;
float: left;
}
{CustomCSS}
</style>
</head>
<body>
<aside id="sidebar">
<div class="item">
<h1>{Title}</h1>
{block:IfSearchAndDescriptionInSidebar}
{block:Description}
<p>{Description}</p>
{block:Description}
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder"{lang:Search}"/>
</form>
{/block:IfSearchAndDescriptionInSidebar}
{block:IfLikesInSidebar}
{block:Likes}
<h2>{lang:Likes}</h2>
{Likes limit="1" summarize="100" width="150"}
<a href="http://www.tumblr.com/liked/by/{Name}">
{lang:More liked posts}
</a>
{/block:Likes}
{/block:IfLikesInSidebar}
{block:IfFollowingInSidebar}
{block:Following}
<h2>{lang:People I follow}</h2>
<div id="followed">
<ul>
{block:Followed}
<li>
<img src="{FollowedPortraitURL-48}"/>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
{/block:IfFollowingInSidebar}
<nav>
<ul>
{block:HasPages}
{block:Pages}
<li> {Label}</li>
{/block:Pages}
{/block:HasPages}
{block:SubmissionsEnabled}
<li> {SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:AskEnabled}
<li> {AskLabel}</li>
{/block:AskEnabled}
<li> Archive</li>
</ul>
</nav>
</div>
</aside>
<div id="content">
{block:Posts}
<article>
{block:Text}
<div class="text inner">
{block:Title}<h1 class="title"><a href="{Permalink}" >{Title}</a></h1>{/block:Title}
{Body}
{/block:Text}{block:Photo}
<div class="photo inner">
{LinkOpenTag}<img src="{PhotoURL-500}" alt ="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}{block:Panorama}
<div class="panorama inner">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}{Caption}
{/block:Caption}
{/block:Panorama}{block:Photoset}
<div class="photoset inner">
{Photoset}
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}{block:Quote}
<div class="quote inner">
<blockquote>{Quote}</blockquote>
{block:Source}<p><cite> {Source} </cite></p>{/block:Source}
{/block:Quote}{block:Link}
<div class="link inner">
<h1 class="title">{Name}</h1>
{block:Description}{Description}{/block:Description}
{/block:Link}{block:Chat}
<div class="chat inner">
<ul>
{block:Lines}<li class="{Alt}"><p>{block:Label}<strong >{Label}</strong>{/block:Label} {Line} </p></li>{/block:Lines}
</ul>
{/block:Chat}{block:Video}
<li class="post video">
{Video-500}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}{block:Audio}
<div class="audio inner">
{block:TrackName}<h1 class="title">{TrackName}</h1>{/block:TrackName}
{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}{block:Answer}
<div class="answer inner">
<p>{Question} <strong>- {Asker}</strong></p>
{Answer}
</div>{/block:Answer}
{block:Date}
<footer class="metadata">
<ul class="index">
<li> <time datetime="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}">{DayOfMonth} {Month} {Year}</time> </li>
{block:NoteCount}<li><a class="notecount" href="{Permalink}#notes">{NoteCountWithLabel}</a></li>{/block:NoteCount}
{block:ContentSource}
<li><a href="{SourceURL}">{lang:Source}:{block:NoSourceLogo}{SourceTitle}{/block:NoSourceLogo}
{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}</a></li>
{/block:ContentSource}
</ul>
{block:PermalinkPage}
{block:HasTags}
<ul class="tags">
{block:Tags}<li>{Tag} </li>{/block:Tags}
</ul>
{/block:HasTags}
{block:PostNotes}
<div id="notes">
{PostNotes}
</div>
{/block:PostNotes}
{/block:PermalinkPage}
</footer>
{/block:Date}
</article>
{/block:Posts}
{block:Pagination}
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li>Next page</li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}
<p id="footer">
{block:PreviousPage}
« Previous
{/block:PreviousPage}{block:NextPage}
Next »
{/block:NextPage}
</p>
</body>
</html>
Any help would be appreciated! I know there are some other issues with the theme at the moment but this is really frustrating me. Thanks so much!
NEVER MIND, I fixed it! It turns out that I forgot to close off some < div >'s, which lead to the footer being considered part of the post content and aligning with the edge of the content rather than where I wanted it to be. But I fixed it :)
I have been at this for a while, here is my HTML and CSS together kind of simplified. I'm sure it's something simple but I cant figure it out for the life of me. I just need to remove the white space in between the border and my content.
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--CSS Internal Style Sheet-->
<style>
HTML
{
border: 20px solid gray;
margin: auto;
}
#center
{
background-color: #EEE8AA;
padding: 0;
}
p
{
text-align: left;
margin-left: auto;
margin-right: auto;
padding: inherit;
width: 800px;
}
dl
{
text-align: left;
margin-left: auto;
margin-right: auto;
top-padding: 10px;
height: 500px;
width: 800px;
}
.box
{
background-color: #DCDCDC;
border: 1px solid #666;
padding: 5px;
}
#banner
{
position: relative;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 200px;
background-image: url(file:///C:/Users/Tollis/Documents/Website/Banner.png)
}
header
{
text-align: center;
font-size: 50px;
padding: 0;
background-color: #98FB98;
}
.menu
{
text-align: center;
padding-bottom: 30px;
padding-top: 30px;
background-color: #98FB98;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
li
{
display: inline;
}
</style>
<title> Module One Activity </title>
</head>
<body>
<header> Module One Activity </header>
<!--Navigation Bar-->
<div class="menu">
<ul>
<li> Page 1 </li>
   
<li> Page 2 </li>
   
<li> Page 3 </li>
   
<li> Page 4 </li>
</ul>
<div id="center">
<hr>
<p class="box" text-align="center"> <i> <b> Statement: </b> If students are allowed to use technology such as computers, calculators and tablets, then they will be able to develop a deeper understanding of the math concepts presented within their course. </i> </p>
<hr>
<h2 class="back" align="center"> Part 1 </h2>
<p> <b> Inverse: </b> If students are not allowed to use technology such as computers, calculators and tablets, then they will not be able to develop a deeper understanding of the math concepts presented within their course.</p>
<br>
<hr>
</div>
</body>
<footer>
<p> Created by: Tollis Hunt </p>
<p> Contact information: Email me! </p>
<br>
</footer>
Try this in your CSS:
body
{
margin:0;
padding:0;
}
This will remove your white space between content and border.
Hope it helps.
Demo