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.
Related
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>
So to start off let me just note that I am not tech savy at all. I find most computers difficult and I wouldn't be taking this class unless I needed it to graduate from my university.
I'm trying to make a webpage for class thats due tomorrow and I am struggling to get all my stuff positioned properly. I made a mock up design in photoshop for what I'm trying to achieve but actually implementing it has been beyond fustrating.
Most floats aren't working(Probably my fault since I'm struggling to understand the concept).
I also made a secondary background image but its registering as a normal one I think.
Also is there a string of code I can use to center everyting like it is in my mock up?
How its suppose to look
How mine looks
My code:
/*The Main Background*/
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
<div class="container"></div>
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<main>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="articleone">
<img src="img/ArticleImageOne.png" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="articletwo">
<img src="img/ArticleImageTwo.png" alt="Bikes by River">
<h1>Krudder Gets a Break</h1>
<P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
<!--readon !-->
</div>
<div>
<img src="img/ArticleImageThree.png" alt="Bike Dudes Biking">
<h1>Kinnick's New Contract</h1>
<P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
<!--readon !-->
</div>
<div class="articlefour">
<img src="img/ArticleImageFour.png" alt="Single Guy On Bike">
<h1>Froom In Third</h1>
<P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
<!--readon !-->
</div>
</main>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
THANK YOU FOR YOUR HELP
This might help you, but there are lot of issues in the above given code,hope you can get it correct , try this code for now
body {
background-image: url(../img/background.png);
background-repeat: repeat-x;
}
#HeaderImage{
background-image: url(../img/HeaderImage.png);
background-repeat: no-repeat;
z-index: 1;
background-position: left;
}
.container {
width: 960px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
line-height: 1.5;
text-align: center;
}
/* Nav Element */
/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}
.site-navigation {
height: 155px;
}
.site-navigation img {
margin-top: 16px;
float:left;
}
.site-navigation ul {
width: 490px;
margin: 0 auto;
}
.site-navigation li {
margin: 35px 33px;
float: left;
}
.site-navigation a {
color: white;
text-decoration: none;
font-weight: bold;
}
.site-navigation a:hover {
padding-bottom: 2px;
border-bottom: 1px solid white;
}
/* Header Element */
h2 {
line-height: 0.8;
font-size: 72px;
font-weight: bold;
color: #fff;
width: 450px;
border-bottom: 1px solid #d9d9d9;
margin: auto;
margin-top: 115px;
padding-bottom: 42px;
}
.search{
}
.SearchGlass{
float: left;
position: top;
}
.article{
float: left;width: 100%;margin-bottom: 15px
}
.article img {float: left;width: 28%;margin-right: 1%}
.article h1{float:left;width: 70%;margin: 5px 0;text-align: left;}
.article p{float:left;width: 70%;margin: 5px 0;text-align: left;}
h1{text-align: left;}
footer{display: block;width: 100%;float: left;}
<div class="container">
<header class="Team Sky">
<nav class="site-navigation">
<img src="img/TeamSkyLogo.png" alt="Team Sky Logo">
<ul class="clearfix">
<li>shop</li>
<li>checkout</li>
<li>video</li>
</ul>
<!-- SEARCH BAR AND MAGNIFYING GLASS!-->
<div class="SearchGlass" id="SearchGlass">
<img src="img/magnifyingglass.png" alt="Magnifying Glass">
</div>
<form>
<div class="search">
<!-- don't need a label here - use placeholder="" (see forms we did in class - it's on moodle -->
<label for="search">search</label>
<input id="search" type="text" name="search"/>
</div>
</form>
</nav>
<div id="HeaderImage">
<img src="img/HeaderImage.png" alt="Dude on a bike">
</div>
<!-- need to close your form element -->
<div class="TeamSkylogo">
<h2>Team Sky</h2>
</div>
<div class="RoadToYellow">
<P>the road to yellow</P>
</div>
<!--Shop Team Sky-->
<div>
<h1> TEAM NEWS </h1>
<!-- each article/blog should be in it's own container -->
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
<div class="article">
<img src="http://via.placeholder.com/600x500" alt="Water">
<h1>Giro d'Italia</h1>
<P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>
<!--readon !-->
</div>
</div>
<footer>
<img src="img/sponsor1.png" alt="Team Sky Sponsor">
<img src="img/sponsor2.png" alt="Pinarello">
<img src="img/sponsor3.png" alt="Shimano">
<img src="img/sponsor4.png" alt="Rayha">
<img src="img/sponsor5.png" alt="21ST Century Fox">
</footer>
</div>
So, I am learning how to code HTML5, CSS3, and all that good stuff. But I have an issue the book doesn't solve. As you may be able to see, The Nav area doesn't go from the header to the footer. I was hoping someone could help me understand how to get it to go from the header to the footer. Maybe it's just a simple padding. But I don't wanna mess up the layout. Hope I am not asking a stupid question.
/*HEADER*/
header {
border: 3px solid black;
}
/*BODY*/
nav {
float: left;
clear: both;
width: 20%;
border: 3px solid black;
}
section {
float: left;
width: 75%;
padding-left: 1em;
border: 3px solid black;
}
article {
float: left;
width: 75%;
padding-left: 1em;
border: 3px solid black;
}
/*FOOTER*/
footer {
text-align: center;
clear: both;
border: 3px solid black;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/css"
href="semanticTags.css"/>
<title>
Semantic Tags
</title>
<body>
<header>
<h1>This is my header</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li>Google</li>
<li>Bing</li>
<li>Yahoo</li>
<li>AOL</li>
<li>Facebook</li>
</ul>
</nav>
<section id="1">
<h2>
Section 1
</h2>
<p>
Section Body
</p>
</section>
<section id="2">
<h2>
Section 2
</h2>
<p>
Section Body
</p>
</section>
<article>
<h2>
Article
</h2>
<p>
Article Body
</p>
</article>
<footer>
<h2>footer</h2>
<address>
DreamRiskers<br>
<a href="mailto:email#gmail.com">
email#gmail.com
</a>
</address>
</footer>
</body>
</head>
</html>
There may be two ways that i can advise :
in your html file, add :
< body class="nav" >
and in your css file, make :
.nav {
float: left;
clear: both;
width: 100%;
height: 100%;
border: 3px solid black;
background-color:yellow; }
background-color is just for distinguishing.
in your html file, put <nav> tag just after <body> tag, and
</nav> tag just before </body> tag
and make your css file as follows :
nav {
float: left;
clear: both;
width: 100%;
height: 100%;
border: 3px solid black;
background-color:yellow; }
Ok, I figured it out. So I wasn't paying attention to where the <header> tag was. For some reason on my file, the header was below the <nav> tags. So after putting the <header> tag before the <nav>
Thank you for trying to help me tho. :)
header {
text-align: center;
border-bottom: 3px double black;
}
/*BODY*/
nav {
float: left;
clear: left;
width: 15%;
min-height: 400px;
border-right: 1px solid black;
}
section {
float: left;
width: 75%;
padding-left: 1em;
}
article {
float: left;
width: 75%;
padding-left: 1em;
}
/*FOOTER*/
footer {
text-align: center;
clear: both;
border-top: 3px double black;
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet"
type="text/css"
href="semanticTags.css"/>
<title>
Semantic Tags
</title>
<body class="nav">
<header>
<h1>This is my header</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li>Google</li>
<li>Bing</li>
<li>Yahoo</li>
<li>AOL</li>
<li>Facebook</li>
</ul>
</nav>
<section id="1">
<h2>
Section 1
</h2>
<p>
Section Body
</p>
</section>
<section id="2">
<h2>
Section 2
</h2>
<p>
Section Body
</p>
</section>
<article>
<h2>
Article
</h2>
<p>
Article Body
</p>
</article>
<footer>
<h2>footer</h2>
<address>
DreamRiskers<br>
<a href="mailto:Email#gmail.com">
Email#gmail.com
</a>
</address>
</footer>
</body>
</head>
</html>
use position:fixed; css property set nav top to bottom. Below code will help you to get expected output.
/*HEADER*/
header {
border: 3px solid black;
margin-left:21%;
}
/*BODY*/
nav {
float: left;
clear: both;
width: 20%;
border: 3px solid black;
position:fixed;
top:0;
bottom:0;
height:100%;
}
section {
float: left;
width: 75%;
margin-left: 21%;
border: 3px solid black;
}
article {
float: left;
width: 75%;
margin-left: 21%;
border: 3px solid black;
}
/*FOOTER*/
footer {
text-align: center;
clear: both;
border: 3px solid black;
margin-left:21%;
}
<header>
<h1>This is my header</h1>
</header>
<nav>
<h2>Navigation</h2>
<ul>
<li>Google</li>
<li>Bing</li>
<li>Yahoo</li>
<li>AOL</li>
<li>Facebook</li>
</ul>
</nav>
<section id="1">
<h2>
Section 1
</h2>
<p>
Section Body
</p>
</section>
<section id="2">
<h2>
Section 2
</h2>
<p>
Section Body
</p>
</section>
<article>
<h2>
Article
</h2>
<p>
Article Body
</p>
</article>
<footer>
<h2>footer</h2>
<address>
DreamRiskers<br>
<a href="mailto:email#gmail.com">
email#gmail.com
</a>
</address>
</footer>
Here my Html and Css (messy I am still working on it) on my final result I have an extra border and I cannot move my < aside> on the right of my < mainpart>.
I am struggling to have the results I wish, /I think I have a layout problem but I could not find anything very obvious at my level...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome Bootsworld</title>
<link rel="stylesheet" type="text/css" href="bootsworld.css">
</head>
<body>
<div id="page" class="divborder">
<header id="pageheader">
<nav id="primarynav">
<ul>
<li>Site map</li>
<li>Privacy policy</li>
<li>Accessibility</li>
</ul>
</nav>
<nav id="title">
<h1>BOOT</h1><h2>WORLD</h2>
</nav>
<nav id="secondnav">
<ul>
<li>HOME</li>
<li>SHOP</li>
<li>NEWS</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li>SUBSCRIBE</li>
</ul>
</nav>
</header>
<div id="introduction" class="divborder">
<img src="boots.png" width="500" height="400" alt="boots"/>
<h2>Welcome to boot world</h2>
<p class="intro">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>
</div>
<div id="mainpart" class="divborder">
<h2>NEW IN THE SHOP</h2>
<article class= "news">
<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, gsuaranteed 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>
</article>
<aside id="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 id="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>
</div>
<footer id="pagefooter">
<h3>OUR ADDRESS:</h3>
<p>Malet Street,<br/> London, WC1E 7HX</p>
</footer>
</div>
</body>
</html>
And my css:
body{
width: 90%;
margin: auto;
}
h1,h2{
display: inline;
color: #016008;
}
h1{
font-size: 60px;
}
h2{
font-size: 40px;
}
li{
display: inline;
}
aside{
color:#016008;
text-decoration: none;
background-color: #dddddd;
}
form{
background-color: white;
margin: 0px;
}
legend{
color: #3e3e3e;
font-weight: bold;
}
#primarynav ul{
color: #016008;
text-align: right;
}
#secondnav{
display: block;
text-align: justify;
}
#mainpart h2{
color: #3e3e3e;
}
#latestnews h3{
color: #3e3e3e;
}
#latestnews footer{
float: right;
color: #3e3e3e;
}
#latestnews p{
text-decoration: underline;
}
#suscribe h3{
color: #3e3e3e;
}
mainpart{
float: left;
}
#pagefooter{
background-color: #dddddd;
color:#3e3e3e;
}
img{
border:1px solid grey;
float: left;
}
#introduction{
float: right;
}
introduction.h2{
color: red;
}
.news{
background-color: #dddddd;
width: 65%;
padding:2px 7px 4px 7px;
margin: 2px 2px 2px 2px;
text-align: justify;
color:#016008;
}
.divborder{
border: 1px solid grey;
}
div{
text-align: justify;
padding:2px 7px 4px 7px;
margin: 10px;
}
#pagefooter{
padding:2px 7px 4px 7px;
}
#latestnews{
display: inline;
float: right;
width:30%;
}
#suscribe{
display: inline-block;
width:30%;
float: right;
}
introduction p{
float: right;
overflow: auto;
}
aside{
float: right;
}
mark.black{
color: black;
background: none;
font-weight: bold;
}
Any thoughts?
J.
Try to use box-sizing: border-box;
#introduction's top margin is making a space between its top border and the top of mainpart. A quick fix would be to set margin-top: 0 on #introduction. JSFiddle
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