I am trying to float my aside element to the right of my main element and for some reason it is too large. I specified the width of the main as 60% and the aside as 39% (because the body element is 99%) but somehow this ratio is just not displayed correctly.
Here is the html and css:
* {
margin: 0;
padding: 0;
}
html {
background: url("/images/sheetmusic.gif") repeat 0 0;
background-size: 30%;
background-attachment: fixed;
background-position: center;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
/*====================HEADER========================*/
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0 auto;
font-size: 200%;
text-shadow: 2px 1px 1px black;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
border-right: 1px solid silver;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu>ul>li {
float: left;
width: 20.748125%;
/* 165.985/800*100 */
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
#lastmenuitem {
border: none;
}
/*====================MAIN========================*/
main {
display: block;
position: relative;
width: 60%;
}
main h2 {
font-size: 150%;
padding-top: 0.5em;
padding-bottom: 0.2em;
padding-left: 1em;
}
strong {
color: #ab6b06;
}
main p {
font-size: 100%;
padding-left: 1.5em;
padding-right: .5em;
padding-bottom: 1em;
}
main ul,
ol {
padding-left: 3em;
padding-right: .5em;
padding-bottom: 1em;
line-height: 1.2em;
}
/*=============ASIDE====================*/
aside {
display: block;
float: right;
width: 39%;
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
aside h3 {
font-size: 120%;
margin-left: 1em;
margin-bottom: 0.2em;
}
aside>p {
padding: 0;
margin-left: 1em;
margin-right: .5em;
word-wrap: break-word;
}
#sittingpic {
padding-left: 2em;
}
blockquote {
margin-left: 1em;
margin-right: .5em;
margin-bottom: 1em;
text-indent: 0;
}
.image {
position: relative;
border: 1px solid #333;
margin: 2%;
margin-left: 1em;
}
.image img {
width: 70%;
max-width: 150px;
}
iframe {
padding-left: 2em;
width: 90%;
max-width: 720px;
}
/*====================FOOTER========================*/
footer {
background-color: #ab6b06;
font-family: georgia, serif;
font-size: 90%;
text-align: center;
}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Annemie's Guitar School | Learn Classical Guitar</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</main>
<footer>
<p>©2017, Annemie's Guitar School</p>
</footer>
</body>
</html>
I think you misunderstood the concept of widths. You set the width of main to 60%. This will cover only the 60% of the body tag. You also set the width of aside to 39%, but this element is parent to main. That means that it will cover the 39% of the main container. I don't know if I understood your question (I don't have the reputation right now to ask for more details with comments) so I consider you want something like the following (excuse my bad drawing skills):
click to see the image
I propose to make the following changes:
First create a new div element (I named it main-content) and add the left floating content inside it.
<main>
<aside>
<h3>History of the guitar</h3>
<p>In this documentary, Julian Bream walks you through the history of the classical guitar in Spain. He plays pieces that are relevant to the different eras of the guitar. Although the documentary is fairly slow paced - it is worth the watch! <br>
Watch video
</p>
<h3>Anatomy of the guitar</h3>
<img src="images/clas-diagram.jpg" alt="Guitar Diagram" class="image" height="300">
<h3>Quote of the day</h3>
<blockquote>“Sometimes you want to give up the guitar, you’ll hate the guitar. But if you stick with it, you’re gonna be rewarded” ~<cite> Jimi Hendrix</cite></blockquote>
</aside>
<!-- the newly created div -->
<div id="main-content">
<h2 class="orange_header">Classical Guitar</h2>
<p>The guitar is arguably the most popular and versatile instrument in the world. It is used in a variety of different musical styles like rock, blues, folk and pop. <strong>This school focusses on the classical style of playing. </strong> With classical
guitar you use nylon strings and play all the voices (bass, alto, soprano) using a special right hand technique. The guitar becomes a “mini orchestra”.</p>
<h2 class="orange_header">Before you start...</h2>
<p>This school requires you to know a few basics before you can start the lessons. <br>We assume that you can:</p>
<ul>
<li>Tune your guitar</li>
<li>Play chords comfortably</li>
<li>Read tablature</li>
</ul>
<p>If you can‘t do these things - do not worry!<br> We suggest you make use of the “Useful links” page to teach yourself the basics of guitar.</p>
<h2 class="orange_header">The Lessons</h2>
<ol>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ol>
<h2 class="orange_header">About Annemie</h2>
<p>Find out more about the author of this site by going to the Bio page.</p>
</div>
<!-- new div ends here -->
</main>
Then change your css style to this:
/* we removed the width property to cover the whole page. */
main {
display: block;
position: relative;
}
aside {
display: block;
float: right;
width: 40%; /* this was changed */
margin-top: 1em;
border-left: 2px solid #ab6b06;
}
#main-content {
width: 60%;
}
Related
https://jsfiddle.net/mp3ajvrL/
I'm trying to add a margin between the list element "contact us" and the h3 element with the text "Functional and Non-Functional Requirements". However, I am not able to do this. It looks like the h3 element covers the whole list somehow, so that the margin-top: 10px css will only add a margin above the list. Any tips?
body {
background-color: #333333;
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
}
#navbar {
width: 100%;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.header {
font-size: 1em;
margin-bottom: 5%;
}
h2 {
font-size: 1em;
text-align: left;
padding-left: 2%;
margin-bottom: -1em;
}
h5 {
text-align: center;
}
h3 {
text-align: left;
padding-left: 2%;
font-size: 1.4em;
color: white;
margin-bottom: 0;
margin-top: 0;
}
p,
ul,
ol {
font-size: 1.2em;
line-height: 130%;
width: auto;
text-align: left;
padding-left: 2%;
}
p ol {
padding-left: 10%;
padding-bottom: 2%;
}
p ol li {
margin-bottom: 10px;
}
p {
float: left;
margin-bottom: 40px;
margin-top: 0.1em;
}
#cover {
width: 100%;
}
.intro .facts .bibliography {
min-width: 65ch;
max-width: 75ch;
}
#container {
position: relative;
text-align: center;
color: white;
}
#cover {
position: relative;
width: 100%;
}
#headingOnPicture {
position: relative;
}
#textOverImage {
position: absolute;
bottom: 0;
left: 2%;
}
#media only screen and (max-width: 1122px) {
#textOverImage {}
}
#media only screen and (max-width: 800px) {
#textOverImage {}
}
#navbar ul {
display: inline-block;
overflow: hidden;
list-style-type: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
list-style-type: none;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
padding: 15px;
margin: auto;
}
ol {
padding-left: 5%;
}
ol li {
margin: 0.5%;
}
#center {
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding-left: 5%;
padding-right: 5%;
}
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.four {
width: 60;
}
.four a {
width: 60px;
}
.container {
width: 20%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
font-size: 20px;
}
.one:hover~hr {
opacity: 1;
margin-left: 5%;
}
.two:hover~hr {
opacity: 1;
margin-left: 28%;
}
.three:hover~hr {
opacity: 1;
margin-left: 52%;
}
.four:hover~hr {
opacity: 1;
margin-left: 75%;
}
hr {
margin-left: 0%;
opacity: 0.1;
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
li b {
color: powderblue;
}
p {
float: left;
}
.mainPart {
width: 80%;
padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div class="container">
<ul>
<li class="one">P1</li>
<!--
-->
<li class="two">P2</li>
<!--
-->
<li class="three">P3</li>
<!--
-->
<li class="four">P4</li>
<hr />
</ul>
</div>
<div id="container">
<header id="headingOnPicture">
<img id="cover" src="mountains.jpg" alt="Cover image" />
<h1 id="textOverImage">P1: Requirements</h1>
</header>
<div class="header">
<div>
<div> // 18. September 2019
</div>
</div>
</div>
<div class="mainPart">
<h3>
Administrative Details
</h3>
<p>
Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
</p>
<h3>Purpose and goals</h3>
<p>
The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
</p>
<br>
<div>
<h3>Audience</h3>
<p>
The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
</p>
<br>
<br>
</div>
<div class="content">
<h3>
The content of the site and how it is organized
</h3>
<h2> The major sections of the website:</h2>
</div>
<br>
<ol>
<li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
<li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
<li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>
<li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>
<li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
</ol>
<div>
<h3>
Functional and Non-Functional Requirements
</h3>
<h2>
Non-functional:
</h2>
<br>
<p>
Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
webside should be effective, and all functionalities should react within a second.
</p>
<h2>
Functional:
</h2>
<br>
<p>
The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
The customer should also be able to press a button and get the website in English instead of Norwegian.
</p>
</div>
<h3>Final location:</h3>
<p>
We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
</p>
</div>
</div>
</body>
</html>
Get rid of the rule:
li {
float: left;
}
body {
background-color: #333333;
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
}
#navbar {
width: 100%;
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.header {
font-size: 1em;
margin-bottom: 5%;
}
h2 {
font-size: 1em;
text-align: left;
padding-left: 2%;
margin-bottom: -1em;
}
h5 {
text-align: center;
}
h3 {
text-align: left;
padding-left: 2%;
font-size: 1.4em;
color: white;
margin-bottom: 0;
margin-top: 0;
}
p,
ul,
ol {
font-size: 1.2em;
line-height: 130%;
width: auto;
text-align: left;
padding-left: 2%;
}
p ol {
padding-left: 10%;
padding-bottom: 2%;
}
p ol li {
margin-bottom: 10px;
}
p {
float: left;
margin-bottom: 40px;
margin-top: 0.1em;
}
#cover {
width: 100%;
}
.intro .facts .bibliography {
min-width: 65ch;
max-width: 75ch;
}
#container {
position: relative;
text-align: center;
color: white;
}
#cover {
position: relative;
width: 100%;
}
#headingOnPicture {
position: relative;
}
#textOverImage {
position: absolute;
bottom: 0;
left: 2%;
}
#media only screen and (max-width: 1122px) {
#textOverImage {}
}
#media only screen and (max-width: 800px) {
#textOverImage {}
}
#navbar ul {
display: inline-block;
overflow: hidden;
list-style-type: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: inline-block;
list-style-type: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
padding: 15px;
margin: auto;
}
ol {
padding-left: 5%;
}
ol li {
margin: 0.5%;
}
#center {
margin: auto;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
padding-left: 5%;
padding-right: 5%;
}
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.four {
width: 60;
}
.four a {
width: 60px;
}
.container {
width: 20%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
font-size: 20px;
}
.one:hover~hr {
opacity: 1;
margin-left: 5%;
}
.two:hover~hr {
opacity: 1;
margin-left: 28%;
}
.three:hover~hr {
opacity: 1;
margin-left: 52%;
}
.four:hover~hr {
opacity: 1;
margin-left: 75%;
}
hr {
margin-left: 0%;
opacity: 0.1;
height: .25rem;
width: 25%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
li b {
color: powderblue;
}
p {
float: left;
}
.mainPart {
width: 80%;
padding-left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styling.css">
</head>
<body>
<div class="container">
<ul>
<li class="one">P1</li>
<!--
-->
<li class="two">P2</li>
<!--
-->
<li class="three">P3</li>
<!--
-->
<li class="four">P4</li>
<hr />
</ul>
</div>
<div id="container">
<header id="headingOnPicture">
<img id="cover" src="mountains.jpg" alt="Cover image" />
<h1 id="textOverImage">P1: Requirements</h1>
</header>
<div class="header">
<div>
<div> // 18. September 2019
</div>
</div>
</div>
<div class="mainPart">
<h3>
Administrative Details
</h3>
<p>
Antikvariatet is a cozy bar/pub/café/venue located at Bakklandet in Trondheim. It offers a great assortment of beers as well as outside serving. The inside of Antikvariatet consists of two separated areas. One offers a calm, laid-back atmosphere while
the other hosts various kinds of events. The events ranges from small concerts and standup comedy to cultural performances and social debates.
</p>
<h3>Purpose and goals</h3>
<p>
The main purpose of this website is to inform customers about events happening at Antikvariatet. The business goal is to increase the amount of visitors to the venue. This means that the "event" section of the website needs to stand out. In addition,
special offers also need to be clearly communicated. The website has to capture the cozy atmosphere Antikvariatet offers.
</p>
<br>
<div>
<h3>Audience</h3>
<p>
The intended user is in the age group 18 to 60. These customers tend to use the internet more for looking up information about the venue.
</p>
<br>
<br>
</div>
<div class="content">
<h3>
The content of the site and how it is organized
</h3>
<h2> The major sections of the website:</h2>
</div>
<br>
<ol>
<li><b>About us: </b> Consists of the general information about Antikvariatet. What the concept is and what they offer.</li>
<li><b>Menu: </b>Should provide the menu for the restaurant and the selection of beers in the bar.</li>
<li><b>Events: </b>Events consists of three subcategories the customer can choose between if desired. The subcategories are «Cultural events», «Sosial events» and «Concerts». The customer can also just scroll down and see the unfiltered list of events.
A «Search for event or concert» - should also appear with a search bar. Next to the event there should be a button to sign up for the event.</li>
<li><b>Picures: </b>This should consists of pictures showing the cozy atmosphere and the different things they offer. It could also have an Instagram part consisting of pictures taken by customers and tagged with «Antikvariatet».</li>
<li><b>Contact us: </b>Should contain the information about where they are located with a map, the opening hours, the mail to contact them and the telephone number.</li>
</ol>
<div>
<h3>
Functional and Non-Functional Requirements
</h3>
<h2>
Non-functional:
</h2>
<br>
<p>
Due to the large age difference of the clientele, the website should and be easy and intuitive also for users with low technology experience. The appearance of the website should reflect the warm and welcoming environment that Antikvariatet provide. The
webside should be effective, and all functionalities should react within a second.
</p>
<h2>
Functional:
</h2>
<br>
<p>
The customers should easily be provided a menu for the café. They should also able to make and send in orders for the different events. The website should provide a calendar for all the events. One should be able to click on a date and see happenings
on that day, and also all happenings over a longer periode. For better usability, the customer should be able to divide the different events in smaller groups; concerts, social events or cultural activities and be able to search for events.
The customer should also be able to press a button and get the website in English instead of Norwegian.
</p>
</div>
<h3>Final location:</h3>
<p>
We have not yet been in touch with Antikvariatet about making an actual website for them. Howerver, the website will be hosted at one of our folk.ntnu servers.
</p>
</div>
</div>
</body>
</html>
If you need to float some other set of list items then change the selector to be more specific and target only those list items, not all of them.
I am working on a code pen and am having an issue where initially my main element would be exactly to the right of my nav bar (on the left side with height = 100%), but not it is overlapped by the nav bar, even though I added a margin-left earlier wide enough to allow the main to be seen. Here is the CSS code:
html,
body {
min-width: 290px;
color: hsla(214, 100%, 39%, 1);
font-family: "Germania One", Helvetica, sans-serif;
font-size: 17px;
line-height: 1.25;
background-color: hsla(239, 60%, 40%, 0.49);
}
h1 {
color: black;
}
code {
background-color: hsla(179, 8%, 40%, 0.49);
border-radius: 3px;
color: white;
display: block;
text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
padding: 10px;
margin: 15px;
}
#navbar {
z-index: 1;
position: fixed;
background-color: hsla(246, 81%, 24%, 1);
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: hsla(264, 80%, 39%, 1);
}
header {
color: white;
font-size: 30px;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#navbar a {
color: white;
text-decoration: none;
cursor: pointer;
}
#navbar ul {
list-style: none;
height: 88%;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
border: 1px solid;
border-bottom-width: 0px;
padding: 8px;
padding-left: 45px;
position: relative;
left: -50px;
width: 100%;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
#main-doc header {
text-align: left;
margin: 0px;
}
section article {
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 10px 0px 0px 10px;
}
#Boulder-img {
width: 80%;
}
#Sherpas-img {
width: 90%;
}
#media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
code {
overflow-x: scroll;
}
#navbar {
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
#main-doc section {
color: black;
/* padding-top: 240px; */
}
}
#media only screen and (max-width: 400px) {
#navbar {
font-size: .75em;
}
#navbar ul {
height: 222px;
}
}
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
<nav id="navbar">
<header>
FCC Technical Documentation</header>
<ul>
<li>Explanation</li>
<li>Early Life</li>
<li>First Move</li>
<li>Some Technical Documentation</li>
<li>Present Day</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Explanation">
<header>
Explanation
</header>
<article>
<p>
Introduction paragraph
<br>
<code>
<code>
<u>insert example code here</u>
</code>
</code>
<br>
<p>It looks like I will have to do 5 of these code elements in the project. In order to display the symbol "<", I have to type
<br>
<code>
&+l+t
</code>
<br> using those characters above without the plus signs. ">" is made by using the following in the same way:
<br>
<code>
&+g+t
</code>
<br> I don't know how to display those characters together without it automatically displaying as those carrot symbols. I will ask on StackOverFlow (coding website/forum).
</p>
<p>
I could do a documentation page describing what I already know and will use to make this page but I can't be bothered :p.
</p>
<p>
So I posted my question on StackOverFlow, perhaps I will update in this section (sorry if it is long) if I get an answer. I've gotten the idea to use the code elements to do small features within the page to explain how I made certain parts of it. I also
read through the prompt completely (glanced over it), and it seems that that was the only road bump. Thanks and enjoy.
<br>:)
</p>
</article>
</section>
<section class="main-section" id="Early_Life">
<header>
Early Life
</header>
<article>
<p>
Early life paragraph
</p>
<h1>first photo header</h1>
<img src="" alt="" id="">
<p>
<h1>header for story</h1>
story paragraph
</p>
<img src="" alt="" id="">
<p>To code in the photos above, I used the img element. The coding goes as follows:
<br>
<code>
<img src="linkofimagegoeshere" alt="descriptionincasephotofails" id="goodtohaveidtoalterappearancewithCSS">
</code>
</p>
</article>
</section>
<section class="main-section" id="First_Move">
<header>
First Move</header>
<article>
<p>
first move paragraph
</p>
<p>
I later moved to a small town in blank for high school
</p>
</article>
</section>
<section class="main-section" id="Some_Technical_Documentation">
<header>
Some Technical Documentation
</header>
<article>
<p>
So it turns out that you can display the code of how to code in a carrot symbol inside of a coding element without having what you type turn into a carrot itself. Sorry if that made no sense, this is hard to describe unless it is seen visually. Here is
the code that you can enter in order to show &+l+t and &+g+t without them turning into carrots (basically ampersand has it's own sort of reference code).
<br>
<code>
<code> turns into <code>
</code>
<br> In order to prevent &+l+t (etc.) to turn into a carrot, the ampersand code is &+amp;+lt or gt. Please don't send me further down this rabbithole. I don't want to learn how to display that one without the plus signs.
</p>
<p>If it appears that some of my CSS code matches that of the example, it is that I am following along with the code as to learn what all of it means and how it works. I'll set most of the copied values the same but I like to adjust them to learn more
about the associated properties. I definitely did all of the HTML by myself and half of the CSS alone. Once I got stumped, however, I looked at the example's code. I was trying to use flex boxes to make the nav bar, but it turns out that just
using absolute/relative position with margin, padding, top, left, etc. works better.</p>
</article>
</section>
<section class="main-section" id="Present_Day">
<header>
Present Day
</header>
<article>
<p>
final paragraph
</p>
<p>On top of that, I am also: <br>
<ul>
<li>lifting weights</li>
<li>walking and jogging two miles daily</li>
<li>playing guitar</li>
<li>learning to code</li>
<li>making weekly videos documenting my journey</li>
<li>blank</li>
<br> and
<br>
<li>blank</li>
<br> I'm hoping to get back to my social life as well.
</ul>
I've gone a long way already but I have much longer to go.
<br> Thanks for reading! :)
</p>
</article>
</section>
</main>
I am still new to all of this and honestly don't know where the issue would be so I pasted the whole css code, except for my font import.
You had an additional } on the (max-width: 400px) breakpoint that was overriding a previous margin-left rule with margin-left: -10px
html,
body {
min-width: 290px;
color: hsla(214, 100%, 39%, 1);
font-family: "Germania One", Helvetica, sans-serif;
font-size: 17px;
line-height: 1.25;
background-color: hsla(239, 60%, 40%, 0.49);
}
h1 {
color: black;
}
code {
background-color: hsla(179, 8%, 40%, 0.49);
border-radius: 3px;
color: white;
display: block;
text-align: left;
white-space: pre;
position: relative;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
padding: 10px;
margin: 15px;
}
#navbar {
z-index: 1;
position: fixed;
background-color: hsla(246, 81%, 24%, 1);
min-width: 290px;
top: 0px;
left: 0px;
width: 300px;
height: 100%;
border-right: solid;
border-color: hsla(264, 80%, 39%, 1);
}
header {
color: white;
font-size: 30px;
margin: 10px;
text-align: center;
font-size: 1.8em;
font-weight: thin;
}
#navbar a {
color: white;
text-decoration: none;
cursor: pointer;
}
#navbar ul {
list-style: none;
height: 88%;
overflow-y: auto;
overflow-x: hidden;
}
#navbar li {
border: 1px solid;
border-bottom-width: 0px;
padding: 8px;
padding-left: 45px;
position: relative;
left: -50px;
width: 100%;
}
#main-doc {
position: absolute;
margin-left: 310px;
padding: 20px;
margin-bottom: 110px;
}
#main-doc header {
text-align: left;
margin: 0px;
}
section article {
margin: 15px;
font-size: 0.96em;
}
section li {
margin: 10px 0px 0px 10px;
}
#Boulder-img {
width: 80%;
}
#Sherpas-img {
width: 90%;
}
#media only screen and (max-width: 815px) {
/* For mobile phones: */
#navbar ul {
border: 1px solid;
height: 207px;
}
code {
overflow-x: scroll;
}
#navbar {
position: absolute;
top: 0;
padding: 0;
margin: 0;
width: 100%;
max-height: 275px;
border: none;
z-index: 1;
border-bottom: 2px solid;
}
#main-doc {
position: relative;
margin-left: 0px;
margin-top: 270px;
}
#main-doc section {
color: black;
/* padding-top: 240px; */
}
}
#media only screen and (max-width: 400px) {
#navbar {
font-size: .75em;
}
#navbar ul {
height: 222px;
}
/* } You had this closing bracket here*/
#main-doc {
margin-left: -10px;
}
code {
margin-left: -20px;
width: 100%;
padding: 15px;
padding-left: 10px;
padding-right: 45px;
min-width: 233px;
}
}
<nav id="navbar">
<header>
FCC Technical Documentation</header>
<ul>
<li>Explanation</li>
<li>Early Life</li>
<li>First Move</li>
<li>Some Technical Documentation</li>
<li>Present Day</li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="Explanation">
<header>
Explanation
</header>
<article>
<p>
Introduction paragraph
<br>
<code>
<code>
<u>insert example code here</u>
</code>
</code>
<br>
<p>It looks like I will have to do 5 of these code elements in the project. In order to display the symbol "<", I have to type
<br>
<code>
&+l+t
</code>
<br> using those characters above without the plus signs. ">" is made by using the following in the same way:
<br>
<code>
&+g+t
</code>
<br> I don't know how to display those characters together without it automatically displaying as those carrot symbols. I will ask on StackOverFlow (coding website/forum).
</p>
<p>
I could do a documentation page describing what I already know and will use to make this page but I can't be bothered :p.
</p>
<p>
So I posted my question on StackOverFlow, perhaps I will update in this section (sorry if it is long) if I get an answer. I've gotten the idea to use the code elements to do small features within the page to explain how I made certain parts of it. I also
read through the prompt completely (glanced over it), and it seems that that was the only road bump. Thanks and enjoy.
<br>:)
</p>
</article>
</section>
<section class="main-section" id="Early_Life">
<header>
Early Life
</header>
<article>
<p>
Early life paragraph
</p>
<h1>first photo header</h1>
<img src="" alt="" id="">
<p>
<h1>header for story</h1>
story paragraph
</p>
<img src="" alt="" id="">
<p>To code in the photos above, I used the img element. The coding goes as follows:
<br>
<code>
<img src="linkofimagegoeshere" alt="descriptionincasephotofails" id="goodtohaveidtoalterappearancewithCSS">
</code>
</p>
</article>
</section>
<section class="main-section" id="First_Move">
<header>
First Move</header>
<article>
<p>
first move paragraph
</p>
<p>
I later moved to a small town in blank for high school
</p>
</article>
</section>
<section class="main-section" id="Some_Technical_Documentation">
<header>
Some Technical Documentation
</header>
<article>
<p>
So it turns out that you can display the code of how to code in a carrot symbol inside of a coding element without having what you type turn into a carrot itself. Sorry if that made no sense, this is hard to describe unless it is seen visually. Here is
the code that you can enter in order to show &+l+t and &+g+t without them turning into carrots (basically ampersand has it's own sort of reference code).
<br>
<code>
<code> turns into <code>
</code>
<br> In order to prevent &+l+t (etc.) to turn into a carrot, the ampersand code is &+amp;+lt or gt. Please don't send me further down this rabbithole. I don't want to learn how to display that one without the plus signs.
</p>
<p>If it appears that some of my CSS code matches that of the example, it is that I am following along with the code as to learn what all of it means and how it works. I'll set most of the copied values the same but I like to adjust them to learn more
about the associated properties. I definitely did all of the HTML by myself and half of the CSS alone. Once I got stumped, however, I looked at the example's code. I was trying to use flex boxes to make the nav bar, but it turns out that just
using absolute/relative position with margin, padding, top, left, etc. works better.</p>
</article>
</section>
<section class="main-section" id="Present_Day">
<header>
Present Day
</header>
<article>
<p>
final paragraph
</p>
<p>On top of that, I am also: <br>
<ul>
<li>lifting weights</li>
<li>walking and jogging two miles daily</li>
<li>playing guitar</li>
<li>learning to code</li>
<li>making weekly videos documenting my journey</li>
<li>blank</li>
<br> and
<br>
<li>blank</li>
<br> I'm hoping to get back to my social life as well.
</ul>
I've gone a long way already but I have much longer to go.
<br> Thanks for reading! :)
</p>
</article>
</section>
</main>
How can I make the content that will change appear on the right side of my navigation bar align with with it but also make sure the navigation bar on the left remains static? Here is my code for my home page and my CSS files:
html {
color: #333;
}
body {
font-family: Arial, Verdana, Garamond;
background: #ccc;
margin: 0;
}
#header {
width: 100%;
height: 230px;
border-bottom: 1px solid #000000;
background: #CCCCCC;
}
#logo {
float: left;
width: 600px;
height: 60px;
margin: 10px;
background#ccc;
}
#top_info {
float: right;
width: 40px;
height: 40px;
background: #CCCCCC;
border: 1px soild #c7c7c7;
margin: 30px;
color: #E00000;
font-size: xx-large;
text-align: center;
}
a {
text-decoration: none;
font-size: x-large;
color: #000000;
}
/*This makes the color Black appear for the available menu options */
a:hover {
background: black;
color: #E00000;
}
/*This makes the color red appear when the user hovers over the available menu options */
#navbar {
height: 20px;
clear: both;
}
/*This makes the navigation bar*/
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
/*This makes the navigation bar list*/
#navbar ul li {
float: left;
padding: 0 0 0 20px;
clear: both;
}
/*This makes the navigation bar options*/
#right_content {
float: right;
width: 390px;
height: 200px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Manga</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="Mangastyles.css" />
<div id="header">
<div id="logo">
<img src="Manga-logo.png" width="250" height="200" alt="J-Manga" </div>
<div id="top_info">Manga: Japanese Comic Books</div>
<div id="navbar"></div>
<ul>
<li>[ Home ]</li>
<li>[ Form ]</li>
<li>[ Pictures ]</li>
<li>[ Audio ]</li>
<li>[ Video ]</li>
</ul>
<div id="right_content">
<p> Manga are comics created in Japan or by creators in the Japanese language, conforming to a style developed in Japan in the late 19th century. They have a long and complex pre-history in earlier Japanese art.</p>
<p> In Japan, as in other parts of the world, people of all ages read manga. The medium includes works in a broad range of genres some of which include: comedy, business, historical drama, adventure, science fiction and fantasy, and many others.</p>
</div>
</div>
</body>
</html>
http://i.imgur.com/sTt59s4.png
Problem #1: Text in footer disappeared. Just randomly noticed while I was busy aligning other elements that the text in my footer was gone.
http://i.imgur.com/WyHf37d.png
Problem #2: Paragraph won't wrap. If I hadn't put display: inline the text would disappear completely.
Problem #3: Images float on top of my nav bar. When I scroll down, the images pass on top of the bar and it looks weird.
Feel free to correct my coding in general. I am a noob. Thanks.
HTML:
<head>
<meta charset="utf-8">
<title>BIKES & BITES | ABOUT</title>
<link href="styles/Hortaleza-Kyla-styles.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700italic,900italic,900' rel='stylesheet' type='text/css'>
</head>
<header>
<section id="title-slogan">
<h1>BIKES & BITES</h1>
<p>EAT • BIKE • LOVE</p>
</section>
<nav id="main-nav">
<ul>
<li><img src="index-images/B&B-logo.png" id="logo"></li>
<li>HOME</li>
<li>ABOUT</li>
<li>ADVENTURES</li>
<li>HUNGRY?</li>
<li>CALENDAR</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section id="main-content">
<h1>ABOUT</h1>
<section id="about-bb">
<img src="02-about-images/B&B-logo2.png">
<p id="desc"><b>BIKES & BITES</b> brings you cycling and food all wrapped into one delicious burrito. It’s for anyone, everyone; it’s for people like you! People who love health and at the same time, love good food. Whether you’re just thinking of buying a bike, a total newbie, or even a pro, we welcome everyone to the community. We're just here to have a good time!
<b>BIKES & BITES</b> aims to share with its readers the beauty and enjoyment of cycling, with the help of the natural beauty of the Philippines. It aims to encourage others to try taking up the sport—or any sport for that matter—and at the same time a healthy lifestyle (but still be able to eat what you want!). <b>BIKES & BITES</b> will provide you with routes, recipes, and many more, to help you with every aspect of your cycling life.</p>
</section>
<section id="about-creator">
<img src="02-about-images/02-about-profile.png">
<p><h3>Kyla Hortaleza</h3>
<i>Founder and Editor</i><br><br>
Despite being an avid cyclist and part-time duathlete, Kyla Hortaleza is currently an Interdisciplinary Studies major in Ateneo de Manila University. She is 22-years-old and has no experience of writing a serious blog whatsoever, but finds delight in sharing her experiences to others through her pictures. She believes in the power of juicing and the power of carbohydrates (no to fad diets but yes to moderation!). She loves promoting cycling and believes that it is the sport that anyone can try and enjoy regularly.</p>
</section>
</section>
<footer>
<p>Created by Kyla Hortaleza | 2015</p>
</footer>
</body>
CSS:
body {
margin: auto;
background: #fdedf1;
padding-top: 80px;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
#aboutpage #main-content #about-bb p {
display: inline;
}
#aboutpage #main-content {
overflow: scroll;
}
#aboutpage #main-content p {
font-family: 'Montserrat', sans-serif;
padding-top: 200px;
}
#aboutpage #main-content img {
width: 300px;
height: 300px;
}
#aboutpage #main-nav a.about {
color: #f8bfcd;
}
#aboutpage #main-nav a.about:hover {
color: #ccf0e2;
}
#aboutpage #main-content #about-bb {
width: 400px;
float: left;
position: relative;
padding: 75px 0px 75px 200px;
}
#aboutpage #main-content #about-creator {
width: 400px;
float: left;
position: relative;
padding: 75px 0px 75px 75px;
}
#aboutpage #main-content #about-creator img {
padding-left: 45px;
}
#main-content h1 {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
body #title-slogan h1, p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-top: -21px;
}
body #title-slogan-hungry h1, p {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
margin-top: -194px;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
}
#logo {
width: 60px;
height: 60px;
position: relative;
left: -10px;
top: -1px;
padding: 0;
margin: 0;
vertical-align: middle;
}
#main-nav {
background: white;
overflow: auto;
text-align: left;
padding-left: 70px;
}
#main-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
font-variant-caps: all-small-caps;
font-weight: 600;
}
#main-nav ul li {
display: inline-block;
padding-top: 15px;
}
#main-nav a {
display: block;
text-align: center;
height: 50px;
color: black;
text-decoration: none;
padding: 0px 5px;
}
#main-nav a:hover {
color: #ccf0e2;
}
footer p {
background: black;
overflow: auto;
text-align: center;
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 15px;
margin-top: 50px;
width: 100%;
height: 50px;
}
I've removed
white-space:nowrap;
from
body #title-slogan h1, p
body #title-slogan-hungry h1, p
It should look like this now:
body #title-slogan h1, p {
overflow: hidden;
margin-top: -21px;
}
body #title-slogan-hungry h1 {
text-indent: 100%;
overflow: hidden;
margin-top: -194px;
padding: 0;
Oh, and you've forgotten opening a <body> tag before header starts.
In my CSS, the redbar.png image is going higher than it needs to be (located in #container). It's going over my horizontal nav and shouldn't be and I'm bot entirely sure how to get it to go away.. Any tips would be greatly appreciated!
Here is the website with the issue : http://cit.macc.edu/~nduncan/tut4/case2/redball.htm
Here is my HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Red Ball Pizza</title>
<script src="modernizr-1.5.js"></script>
<link href="pizza.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<header><img src="rblogo.png" alt="Red Ball Pizza" /></header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Locations</li>
<li>Catering</li>
<li>About Us</li>
</ul>
</nav>
<nav class="vertical">
<ul>
<li>Pizza</li>
<li>Salad</li>
<li>Pasta</li>
<li>Sandwiches</li>
<li>Appetizers</li>
<li>Pocket Pizzas</li>
<li>Fish & Shrimp</li>
<li>Chicken & Wings</li>
<li>Beverages</li>
<li>Dessert</li>
<li>Catering</li>
<li>Download Menu</li>
<li>Catering Menu</li>
</ul>
</nav>
<section id="main">
<img src="toppings.png" alt="" />
<p>At Red Ball Pizza, we want to satisfy every appetite. That's
why our menu contains a variety of different items. With
so many choices, everyone's favorites are available!
</p>
<p>
Red Ball Pizza is NOT a franchise, a chain, or a corporation.
It is 100% locally owned and operated. Red Ball Pizza is
devoted to providing the highest quality and the best service
possible. Our only goal is to provide you with a great
pizza … EVERY TIME!
</p>
<div class="coupon">
<h1>Classic Combo</h1>
<p>16" 1-Topping Pizza
& a 2-Liter of Your Choice
For Only $14.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Stix</h1>
<p>16" Specialty Pizza
Reg. Cheese Stix & a 2-Liter
For Only $21.99
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>1/2 Price</h1>
<p>Buy any 16" Specialty Pizza
at Reg. Price & Get a 2nd
Pizza For Half Price
</p>
<p>Expires 3/14</p>
</div>
<div class="coupon">
<h1>Pizza & Wings</h1>
<p>14" 2-Topping Pizza
& 12 Wings
For Only $15.99
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>$3.00 Off</h1>
<p>Get $3.00 Off
any 16" Pizza at
Menu Price
</p>
<p>Expires 3/31</p>
</div>
<div class="coupon">
<h1>Sub Dinner</h1>
<p>1 Toasted Sub & Chips
& 1 20oz Soda
For Only $6.99
</p>
<p>Expires 3/31</p>
</div>
</section>
<aside>
<h1>Pizza Pizzazz</h1>
<ul>
<li>93% of Americans eat pizza at least once a month.</li>
<li>Mozzarella was originally made from the milk of Indian
water buffalo in the 7th century.</li>
<li>75 acres of cheese is eaten every day.</li>
<li>23 pounds of cheese is eaten every year by the average
person.</li>
<li>The tomato was brought back to Italy by Spaniards returning
from Mexico in the 16th century.</li>
<li>The busiest night for take-out pizza orders is Halloween.</li>
<li>The first pizzeria opened in 1830 in Naples, Italy. </li>
</ul>
</aside>
<footer>
<address>
Red Ball Pizza •
811 Beach Drive •
Ormond Beach, FL 32175 •
(386) 555 - 7499
</address>
</footer>
</div>
</body>
</html>
And here is my CSS. Problem lies in #container.
header, section, aside, footer, nav {
display: block;
}
/* body styles */
body {
background-color: red;
font-family: Verdana, Geneva, sans-serif;
padding: 0px;
margin: 0px;
}
#container {
width: 1000px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
border-left: 1px solid black;
border-right: 1px solid black;
background: white url(redbar.png) top left repeat-y;
}
#container header {
background-color: white;
height: 100px;
}
#container nav.horizontal {
height: 70px;
width: 100%;
background-color: white;
}
#container nav.horizontal ul li{
background-color: white;
font-size: 16px;
height: 50px;
line-height: 50px;
width: 180px;
display: block;
float: left;
margin-left: 5px;
margin-right: 5px;
text-align: center;
}
#container nav.horizontal ul li a{
display: block;
background-color: red;
color: white;
text-decoration: none;
border-radius: 30px / 25px;
}
#container nav.horizontal ul li a:hover {
background-color: rgb(255,101,101);
color: black;
}
#container nav.vertical {
float: left;
clear: left;
width: 200px;
}
#container nav.vertical ul li {
list-style-type: none;
text-indent: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
#container nav.vertical ul li a {
color: white;
text-decoration: none;
}
#container nav.vertical ul li a:hover {
color: black;
}
#main {
background-color: rgb(255,211,211);
float: left;
width: 600px;
}
#main p {
font-size: 20px;
margin: 15px;
}
#main img{
float: right;
margin: 15px;
width: 350px;
border-bottom-left-radius: 350px;
}
#main div.coupon {
border: 5px dashed black;
float: left;
width: 170px;
height: 150px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
background-image: url(slice.png), url(notice.png);
background-position: center, bottom right;
background-repeat: no-repeat;
background-color: white;
}
#main div.coupon h1 {
color: white;
background-color: rgb(192,0,0);
font-size: 16px;
letter-spacing: 2px;
text-align: center;
height: 25px;
font-variant: small-caps;
}
#main div.coupon p{
font-size: 14px;
text-align: center;
margin: 5px;
}
aside {
float: left;
width: 200px;
}
aside h1 {
color: rgb(192,0,0);
font-size: 20px;
letter-spacing: 2px;
font-weight: normal;
text-align: center;
}
aside ul li {
background-color: rgb(255,135,135);
border-radius: 5px;
color: black;
list-style-type: none;
margin: 10px;
padding: 5px;
}
footer {
margin-left: 200px;
clear: left;
}
footer address {
border-top: 1px solid red;
color: red;
font-size: 10px;
font-style: normal;
text-align: center;
margin-top: 25px;
padding-bottom: 20px;
}
#container nav.horizontal {
margin-top: -16px;
}
Add this to CSS.
Ok, here we go, just because I love you. I think the problem you describe is being caused by the ul element inside of your horizontal class div. By default browsers will give uls padding/margin. All I had to do to fix this was set .horizontal ul {margin:0; padding: 0;}.
you could clear the nav by adding the following
container nav.horizontal {
...
overflow: auto;
then you probably want to add the appropriate margin / padding such as margin-bottom: 16px to get inline with the margin on the ul.
Also, you should look into css resets. I didn't see any here and they'll make you life easier.