So I have to create a website using notepad++ and coding in HTML and CSS.
I have 4 different files and want to move the headings to the left so they are in line with the other text.
I was wondering if you guys could help me out with that.
I also want to make it look professional and visually appealing. Where should I go to learn how to do that?
I also want to add a comment box where a customer can comment and it will show up in the webpage. Please help.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="gaminglogo"></div>
<h2>Playthrough Gaming Cafe</h2>
<p>We're located on the corner of Roosevelt Rd and Westchester Rd. Come level up your gaming experience at Playthrough!</p>
<h3>Playthrough Gaming Cafe features:</h3>
<ul>
<li>Adult Zone with fully stocked bar for customers 21+!</li>
<li>Teen Zone with Snack Bar!</li>
<li>Old Generation Gaming Room!</li>
<li>Multitude of systems and tvs.!</li>
<li>Open Late on weekends and holidays.</li>
</ul>
<div>
3453 Westchester RD<br>
WestChester IL 60189<br>
<a id="mobile" href="tel:888-599-5959">888-599-5959</a> <span id="desktop">888-599-5959</span><br><br>
</div>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Game Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="videogamesshelf"></div>
<h2>Gaming at Playthrough</h2>
<p>Come and play your favorite games at Playthrough. We have all the old classic systems and also the new current. Rent out some games, play before buy, and also indulge in some beverages at our very own Playthrough Cafe. </p>
<table>
<tr>
<th>Playthrough Gaming</th>
<td>We have all the game systems and more than enough tvs to play them. From Nintendo NES to Xbox One Slim, we have it all.<br>Entry Fee: $15.00 </td>
</tr>
<tr>
<th>Playthrough Cafe</th>
<td> Come enjoy our robust and smooth coffee, energy drinks, and soda. <br>Can: $0.75 Bottle: $1.25</td>
</tr>
<tr>
<th>Playthrough Adult</th>
<td>We have a seperate area for customer's 21+ with a fully stocked bar.<br>Entry Fee: $25. </td>
</tr>
</table>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
jobs.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe Jobs</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<h2>Jobs at Playthrough Gaming Cafe</h2>
<p>Want to work at JavaJam? Fill out the form below to start your application. Required fields are
marked with an asterisk (*).</p>
<form method="post" action="http://webdevbasics.net/scripts/javajam8.php">
<label for="myName">*Name: </label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myExperience">*Experience: </label>
<textarea name="myExperience" id="myExperience" rows="2" cols="20" required="required"></textarea>
<input type="submit" value="Apply Now">
</form>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
feedback.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Playthrough Gaming Cafe</title>
<meta charset="utf-8">
<link rel="stylesheet" href="playthrough.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>Playthrough Gaming Cafe</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>Jobs</li>
<li>Feedback</li>
</ul>
</nav>
<main>
<div id="gaminglogo"></div>
<h2>Leave us some feedback at Playthrough Gaming Cafe</h2>
<p>Every week we hold a brainstorming session where we look at the feedback from customers. WE are here to CATER YOUR NEEDS!.</p>
<p>We are a new company, and we want gamers to have a place where they feel safe. Please leave some feedback what YOU, the customer thinks would help us deliver the best gaming experience.</p>
<form method="post" action="http://webdevbasics.net/scripts/javajam8.php">
<label for="myName">*Name: </label>
<input type="text" id="myName" name="myName" required="required">
<label for="myEmail">*E-mail: </label>
<input type="email" id="myEmail" name="myEmail" required="required">
<label for="myComment">*Feedback: </label>
<textarea name="myComment" id="myComment" rows="2" cols="20" required="required"></textarea>
<input type="submit" value="Post Feedback!">
</form>
</main>
<footer>
Copyright © 2016 Playthrough Gaming Cafe<br>
kennypatel#gmail.com
</footer>
</div>
</body>
</html>
playthrough.css
* {box-sizing: border-box; }
header, nav, main, footer {display: block; }
body { background-color: FFFFFF;
background-image: url(Blue-Background.gif);
color: #67D9E3;
font-family: Verdana, Arial, sans-serif;
background-image: url(Blue-Background.gif);
}
#wrapper { background-color: #0E828C;
margin-right: auto;
margin-left:auto;
max-width: 1280px;
min-width: 900px;
box-shadow: 3px 3px 3px #666666;
width: 80%
}
header {background-color: #FFFFFF;
background-image: url(gaminglogo.jpg);
background-repeat: no-repeat;
height: 150px;
}
h1 { padding-top: 45px;
padding-left: 220px;
font-size: 3em;
text-align: left;
}
nav { text-align: center;
font-weight: bold;
font-size: 1.5em;
padding-top: 10px;
float: left;
width: 200px;
}
nav a {text-decoration: none;}
nav a:visited{ color: #1EEDED; }
nav a:link { color: #08BB17; }
nav a:hover { color: #7F30BC; }
nav ul {list-style-type: none;
padding-left: 0;}
footer{ background-color: #FFFFFF;
font-size: small;
font-style: italic;
text-align: center;
border-top: 2px #221811 solid;
padding-bottom: 10px;
}
main {padding: 0 0 2 em 0;
margin-left: 200px;
background-color:1EEDED;
}
main h2, main h3 main h4, main p, main div, main ul, main dl {padding-left: 3em;
padding-right: 2em; }
h4 {background-color: #2678B3;
font-size: 1.2em;
padding-left: 10px;
padding-bottom: 0;
text-transform: uppercase;
border-bottom: 1px solid #000033;
clear: left;
}
img {padding-right: 10px;
padding-left: 10px;}
.details {padding-right: 20%;
padding-left: 20%;
overflow: auto;}
.floatleft {float:left;
padding-bottom: 20px;
padding-right: 20px; }
#videogamesshelf {background-size: 80% 80%;
background-image: url(videogamesshelf.jpg);
height: 250px;
background-repeat: no-repeat;
margin: auto;
width: 50%;
}
#gamehead {background-size: 80% 80%;
background-image: url(gaminglogo.jpg);
height: 250px;
width: 50%
}
#videogameheart{background-size: 100% 100%;
background-image: url(videogameheart.png);
height: 250px;}
#mobile { display: none; }
#desktop { display: inline; }
table { width: 90%;
margin: auto;
border-spacing: 0;
background-color: #FFFFCC; }
td, th { padding: 10px; }
tr:nth-of-type(odd) { background-color: #0E828C; }
form { padding: 2em; }
label { float: left;
display: block;
text-align: right;
width: 8em;
padding-right: 1em; }
input, textarea { display: block; margin-bottom: 1em; }
#mySubmit { margin-left: 9.5em; }
audio { display: block; margin-top: 1em; }
#media only screen and (max-width: 1024px) {
body { background-image: none; }
#wrapper { width: auto;
min-width: 0;
margin: 0;
padding: 0;
box-shadow: none; }
header { border-bottom: 5px solid #DAF6F2; }
h1 { margin-top: 0;
margin-bottom: 1em;
padding-top: 1em;
padding-bottom: 1em;
font-size: 2.5em; }
nav { float: none;
width: auto;
padding-top: 0;
margin: 10px;
font-size: 1.3em; }
nav li { display: inline-block; }
nav a { padding: 1em;
width: 8em;
font-weight: bold;
border-style: none; }
nav ul { padding: 0;
margin: 0; }
#videogamesshelf,#gamehead ,#videogameheart{ margin: 0; padding: 0; }
main { padding: 0;
margin: 0;
font-size: 90%; }
}
#media only screen and (max-width: 768px) {
header { background-image: url(gamingmonkey.jpg);
height: 128px; }
h1 { font-size: 2em;
text-align: center;
padding-left: 0; }
nav { margin: 0; }
nav a { display: block;
padding: 0.2em;
width: auto;
border-bottom: 1px solid #FEF6C2; }
nav li { display: block; }
main { padding-top: 1px; }
h2 { padding: 0.5em 0 0 0.5em;
margin-right: 0.5em; }
.details { padding-left: 0; padding-right: 0; }
#videogamesshelf,#gamehead,#videogameheart { background-image: none; height: auto; }
.floatleft { padding-left: 0.5em; padding-right: 0.5em; }
#mobile { display: inline; }
#desktop { display: none; }
}
Related
I apologize if this is not the most descriptive, as I only have 7 weeks experience of coding with HTML. So I have encountered an issue with optomizing my webpage for a mobile device using a media query. My Nav bar goes off the screen, my form gets all smashed at the bottom, and my table on a seperate page disappears at 700ish pixels. I will copy and paste the code below for each page that is giving me issues!
Home page with Nav bar and Form issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness</title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<div class="row">
<div class="column">
<img id="homeimage" src="pose.jpg" alt="Big Muscles" title="Yours Truly striking a pose!" style="width:100%">
</div>
</div>
<h2> LEAVE HERE KNOWING MORE THAN YOU USED TO!!</h2>
<p> <span class= "resort"> ZabelFitness </span> is a one-stop shop for athletes of all skill levels. This site exsits to condense<br>
key information that many have to look for over many different sites! I want to make your life easier!!<br> That's why I created this site (named after my Instagram page) to give all athletes legit information<br>they will want or need in their fitness journey!!</p>
</main>
<h2 id="h2home" > Reach Out For Fitness Advice!!</h2>
<h3> Contact Me</h3>
<p>Required fields are marked with an asterisk *</p>
<form method="post" action="mailto:zabel2#ivytech.edu">
<label for="myFName">*First Name:</label>
<input type="text" name="myFName" id="myFName" required="required">
<label for="myLName">*Last Name:</label>
<input type="text" name="myLName" id="myLName" required="required">
<label for="myEmail">*E-mail:</label>
<input type="email" name="myEmail" id="myEmail" required="required" size="35">
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12">
<label for="myComments">Additional Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
<input type="submit" id="mySubmit" value="Submit">
</form>
<footer>
<small> <i> Copyright © 2021 ZabelFitness<br>
zabel2#ivytech</i></small>
</footer>
</div>
</body>
</html>
exercise page with wonky table:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ZabelFitness::About </title>
<meta charset ="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel= "stylesheet" href= "fitness.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>ZabelFitness</h1>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li><b>About ZabelFitness</b></li>
<li><b>When To Workout</b></li>
<li><b>Exercises</b></li>
<li><b>Diets</b></li>
<li><b>Supplements</b></li>
<li><b>References</b></li>
</ul>
</nav>
<main>
<table>
<tr>
<th colspan="8">Guide To Exercises</th>
</tr>
<tr>
<td>Muscle Group</td>
<td>Chest</td>
<td>Triceps</td>
<td>Biceps</td>
<td>Back</td>
<td>Quads</td>
<td>Calves</td>
<td>Hamstrings</td>
</tr>
<tr>
<td>Exercise</td>
<td>Dumbbell/Barbell Bench PressPush-UpsDecline Dumbbell/Barbell Bench PressIncline Dumbbell/Barbell Bench Press</td>
<td>sds</td>
<td>ssds</td>
<td>sds</td>
<td>sds</td>
<td>sd</td>
<td>sd</td>
</tr>
</table>
</main>
<footer>
Copyright © 2021 ZabelFitness <br>
zabel2#ivytech
</footer>
</div>
</body>
</html>
CSS for all my jank:
header { background-color: #36454F;
padding-top:10px;
height: 120px;
text-align: center;
color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
text-shadow: 2px 2px 8px #000000;
background-position: right;
background-repeat: no-repeat;
margin-bottom: 0%;
padding: 1em;
background-image: url(weights2.jpg);
background-size: 100%;
}
body { background-color: #404040;
color: #666666 ;
font-family: Verdana, Arial, sans-serif;
}
#container { margin-left: auto ;
margin-right: auto;
width: 80% ;
}
nav a{
text-decoration: none; color:#000000;
}
h1 a{text-decoration: none; color:#FFFFFF;}
h1 a:link{color:#FFFFFF;}
h1 a:hover{color:#A52A2A;}
h1 { color: #FFFFFF ;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
text-align: center;
font-size: 1.5em;
}
nav a:link{color:#000000;}
nav a:visited{color:#344873;}
nav a:hover{color:#A52A2A;}
nav ul {list-style-type: none;
display: flex;
flex-direction: column;
margin: 0;
padding-left: 0;
max-width:1800px;
text-align: center;
}
nav {text-align: center;}
nav li {padding-top: 1em;
display: inline-block;
padding-left: 3em;
padding-right: 3em;
width: 100%;
border-bottom: 1px solid;
font-size: 1.2em;
text-align: center;
max-width:1800px;
}
h2{ color: #A52A2A ;
font-family: Verdana, Arial, sans-serif ;
line-height: 200% ;
padding-top: 2.5em;
padding-bottom: 2em;
}
h3 {font-family: Georgia, 'Times New Roman', Times, serif;
}
dt { font-weight: bold;
color: #002171
}
main {
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
padding-bottom: 0;
}
#homeimage {
float:center;
width: 240px;
height: 300px;
}
#homehero {
background-size: 200% 100%;
background-repeat: no-repeat;
}
#abouthero{
height: 300px;
background-size: 200% 100%;
background-repeat: no-repeat;
}
#aboutimage{width:480px;
height: 480px;
}
}
#trailhero{
height: 300px;
background-image: url(trail.jpg);
background-size: 200% 100%;
background-repeat: no-repeat;
}
.resort { font-size: 1.2em;
color: #000033;
}
#wrapper {
background-color: #BEBEBE;
background-image: linear-gradient(#FFFFFF, #BEBEBE);
padding: 1em;
}
footer { font-size: .70em;
padding: 1em;
font-style: italic;
text-align : center;
}
* {box-sizing: border-box;}
section {
padding-left:.5em;
padding-right: .5em;
}
#mobile {display: inline;}
#desktop {display: none;}
#media (min-width: 600px) {
h1{font-size: 2em; letter-spacing: .25em;}
nav ul{flex-direction: row; justify-content: space-around; padding-right: .5em;}
nav li{width: 12em; border-bottom: none;}
section{padding-left: 2em; padding-right: 2em;}
#flow{display:flex; flex-direction:column;}
#mobile{display:none;}
#desktop{display:inline;}
#homehero{background-size: 100% 100%;}
#yurthero{background-size: 100% 100%;}
#trailhero{background-size: 100% 100%;}
#reshero{background-size:100% 100%}
input[type="submit"]{width:9em; grid-column:2/3;}
form{width:60%;
display:grid;
grid-gap:0.5em;
grid-template-columns: 10em 1fr;}
}
#media (min-width: 1801px) {
body{background-color: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%);}
nav ul{padding-right: 10%; padding-left: 10%; padding-bottom:3em;}
#wrapper{margin:auto; width: 80%;}
#aboutimage{width:360px; height: 360px;}
header{background-image:100% 100%}
#homeimage{width:360px; height: 360px; float: center; }
#media (min-width: 1080px) {
table thead {
display: none;
}
table td {
display: flex;
}
table td::before {
content: attr(label);
font-weight: bold;
width: 120px;
min-width: 120px;
}
}
textarea, input{margin-bottom:.5em; width: 400px;}
.column {
float: left;
width: 33.33%;
padding: 5px;
padding-top: 10px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
table{
margin: auto;
text-align: center;
border: 1px solid #3399CC;
width: 90%;
border-collapse: collapse;
}
td, th{
color: #000;
padding: 5px;
border: 1px solid #3399CC;
}
td{text-align: center;}
.text{
text-align: left;
}
tr:nth-of-type(odd){ background-color: #B0B0B0;}
tr:nth-of-type(even){ background-color: #696969;}
THANK YOU IN ADVANCE!!! :)
You should only place the max-width in the body tag along with a min-width in your css. You are setting your ul to a max-width of 1800px which is for a desktop. When you set a min-width to the body it will adjust for phones.
body{
max-width: 1800px;
min-width: 200px;
}
If your code is specific to phones only where they would not be viewed in a browser on a laptop or desktop, you could set the max-width:400px. Thus on a phone the browser will span only 400px and if the user minimized the window, the smallest it would get is 200px;
My example means a laptop/browsers will only expand to 1800px on a 1900 resolution screen and then when I minimized the browser on my laptop or in a phone 200px is minimum.
You can play around with the values testing in your browser to see how your data flows. You may have to adjust other tags to flow.
On W3Schools in regards to flex boxes it mentions this
/* Responsive layout - makes a one column layout instead of a two-column layout */
#media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
W3 Schools Flexbox Responsive webpages
I want to remove the blue color above main and below main. I debug for several days, but just do not know how to fix this bug. Please help.
I attached my Page and my desire page.
body {
background-color:#FFFFFF;
background-image: url(background.jpg);
color: #666666;
font-family: Verdana, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
header {
background-color: #000033;
color: #FFFFFF;
font-family: Georgia, serif;
}
h1 {
line-height: 200%;
background-image: url(sunset.jpg);
background-position: right;
background-repeat: no-repeat;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav {
font-weight:bold;
float: left;
width: 160px;
padding-top: 20px;
padding-right: 5px;
padding-left: 20px;
}
nav a {
text-decoration: none;
}
nav a:link {
color: #000033;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #FFFFFF;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
margin-top: 1px;
margin-bottom: 1px;
}
h2 {
color: #3399CC;
font-family: Georgia, serif;
}
h3 {
color: #000033;
}
dt {
color: #000033;
font-weight: bold;
}
.resort {
color: #000033;
font-size: 1.2em;
}
footer {
font-size: 0.70em;
font-style: italic;
text-align: center;
padding: 10px;
background-color: #FFFFFF;
margin-left: 170px;
}
#wrapper {
background-color: #90C7E3;
margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 700px;
max-width: 1024px;
box-shadow: 5px 5px 5px black;
}
#homehero {
height: 300px;
background-image: url(coast.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
#yurthero {
height: 300px;
background-image: url(yurt.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left:170px;
}
#trailhero {
height: 300px;
background-image: url(trail.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 170px;
}
header, nav, main, footer {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort :: Yurts</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="yurthero"></div>
<main>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt>What is a yurt?</dt>
<dd>Our luxuy yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor
and a roof dome that can be opened.</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fire stove. The luxury camping experience
also includes elecricity and a sink with hot and cold running water. Shower and restroom facilities are located
in the lodge.</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to
dress for changing weather with layers of clothing.</dd>
</dl>
</main>
<footer>
<small><i>Copyright © 2016 Pacific Trails Resort</i></small><br>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<link href="pacific.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset = "utf-8">
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast. Relax in serenity with
panoramic views of the Pacific Ocean.</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div>
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br><br>
888-555-5555<br>
</div>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
</footer>
</div>
</body>
</html>
Your code is for two separate pages. Without having a working fiddle I would just recommend setting the margin bottom to 0px for the image and margin top 0 for the div with the white background.
You could also the the margin top for the div with the white background to minus (example: margin-top:-20px;). A quick and simple solution is to set margin-top to -30px in ur css for main and that will get you the desired effect.
https://jsfiddle.net/26f8ntwm/
main {
padding-left: 20px;
padding-right: 20px;
display: block;
background-color: #FFFFFF;
margin-left: 170px;
**margin-top: -30px;**
margin-bottom: 1px;
padding-top:0px;
}
Your wrapper element has a blue background (#90C7E3), and since nav and footer don't have a background (i.e. their background is transparent), and they are inside #wrapper, that wrapper background color is visible in nav and footer:
#wrapper {
background-color: #90C7E3;
etc.
Solution: Just erase the first line from this rule, or give backgrounds to nav and footer.
I'm making a portfolio for some projects I've worked on whilst learning to code. I've added a banner to the top of each project's webpage, but I'm having issues with a site which is unresponsive (Jubilee Austen page).
Using the Chrome Inspector tool, it says the banner is 55px tall, but it appears smaller than it does on another project page (Rogue Pickings page), where the height of the banner is also 55px. How could this be?
Jubilee Austen page
Rogue Pickings page
Does anyone know how I can fix this so that both banners appear the same height?
Thanks so much in advance!
/* ===== JUBILLEE AUSTEN ===== */
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
clear: both;
padding-top: 50px;
}
/* ======== ORIGINAL CSS ======== */
/* -------- START OF ORIGINAL CSS -------- */
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
}
/***** GRID *****/
.full-width {
width: 1200px;
margin: 0 auto;
}
.half-width {
width: 600px;
float: left;
}
.third-width {
width: 400px;
float: left;
}
/***** HEADER *****/
header {
height: 800px;
background: url('../img/hero.png');
background-size: cover;
}
header h1 {
padding: 50px 0;
font-family: 'Lora', serif;
font-size: 30px;
color: #BBC085;
padding-left: 80px;
}
#nav {
float: right;
padding: 75px 0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-size: 18px;
color: #828282;
padding-left: 80px;
}
header h2 {
width: 1000px;
clear: both;
font-family: 'Lora', serif;
font-size: 72px;
line-height: 80px;
color: #9a9a9a;
padding: 20px 0 0 80px;
}
header h2 span {
color: #262a2b
}
/***** ABOUT *****/
#about .full-width {
padding: 80px 0;
}
#about h2 {
font-family:'Lora', serif;
font-size: 36px;
}
#about p {
font-size: 21px;
color: #7F7F7F;
line-height: 42px;
padding-right: 50px;
}
/***** WORK *****/
#work {
background: #F9CEB7;
text-align: center;
}
#work .full-width {
padding: 115px 0;
}
#work img {
padding-bottom: 30px;
}
#work h3 {
font-size: 24px;
width: 180px;
margin: 0 auto;
}
#work p {
font-family: 'Lora', serif;
font-size: 18px;
line-height: 30px;
color: #262a2b;
padding: 0 35px;
}
/**** CONTACT *****/
#contact {
background: #EBEBEB;
}
#contact .full-width {
padding: 110px 0;
}
#contact img#contact-img {
border: 16px solid #ffffff;
}
#contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
padding-left: 115px;
}
#contact #envelope {
padding: 0 10px 0 115px;
}
#contact h2 {
font-family: 'Lora', serif;
font-size: 36px;
}
#contact #email-header{
font-size: 32px;
font-weight: 400;
margin: -30px 0 5px 0;
}
#contact #socialmedia-header {
font-weight: bold;
font-size: 29px;
margin: 40px 0 0px 0;
}
#contact a {
text-decoration: none;
color: #C49075;
font-weight: bold;
font-size: 28px;
}
#contact ul {
list-style: none;
}
#contact ul li {
display: inline-block;
}
#contact ul img {
font-size: 32px;
padding-right: 48px;
}
/* ======== END ORIGINAL CSS ======== */
/* TABLET */
#media all and (min-width: 768px) {
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
}
<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Jubilee Austen | Developer</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- FONTS -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- NAV/TITLE PANEL -->
<header>
<div class="full width">
<div class="half-width">
<h1>Jubilee Austen</h1>
</div>
<!-- NAV BAR -->
<div class="half-width" id="nav">
<nav>
<ul>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</div>
<!-- <span>Hi,</span> used to change colour of just "Hi," text -->
<h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
</div>
</header>
<main>
<!-- ABOUT PANEL -->
<section id="about">
<div class="full-width">
<h2>A little bit about me.</h2>
<div class="half-width">
<p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
<!-- PROCESS PANEL -->
<section id="work">
<div class="full-width">
<div class="third-width">
<img src="img/icon-html.png" alt="HTML icon"/>
<h3>Hand-Coded HTML</h3>
<p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
</div>
<div class="third-width">
<img src="img/icon-css.png" alt="CSS icon"/>
<h3>Well-Organized CSS</h3>
<p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
</div>
<div class="third-width">
<img src="img/icon-pencil.png" alt="Pencil icon"/>
<h3>Easy Converting PSD to HTML</h3>
<p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
</div>
</div>
</section>
<!-- CONTACT PANEL -->
<footer id="contact">
<div class="full-width">
<div class="half-width">
<img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
</div>
<div class="half-width" id="contact-info">
<h2>Like what you see?</h2>
<h3 id="email-header">Let's meet for a cup of coffee.</h3>
<img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi#jubileeausten.com
<h4 id="socialmedia-header">Or, find me on the interwebs</h4>
<!-- ICON LINKS -->
<ul>
<li><img src="img/icon-twitter.png" alt="Twitter icon"/></li>
<li><img src="img/icon-tumblr.png" alt="Tumblr icon"/></li>
<li><img src="img/icon-instagram.png" alt="Instagram icon"/></li>
<li><img src="img/icon-linkedin.png" alt="Linkedin icon"/></li>
<li><img src="img/icon-github.png" alt="GitHub icon"/></li>
</ul>
</div>
</div>
</footer>
</main>
<!-- END OF ORIGINAL HTML -->
</div>
</body>
</html>
/* ===== ROGUE PICKINGS ===== */
/* =========================================================================
Author's custom styles
========================================================================== */
#font-face {
font-family: atelas;
src :url('../fonts/atelas/atelas.ttf') format('opentype');
}
/* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
.back {
width: 100%;
background-color: #1D2120;
padding: 10px 0;
position: fixed;
top: 0px;
}
.div-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
background-image: url('empty.gif');
}
.back-wrap {
width: 90%;
margin: auto;
}
.chevron {
margin: 0;
}
.chevron img {
width: 35px;
float: left;
margin-right: 1.5%;
}
.back-text {
margin: 0 0 0 3%;
font-family: atelas;
font-size: 6em;
color: #e2e2e2;
text-decoration: none;
line-height: 0.8;
display: none;
}
#example {
max-width: 1200px;
margin: auto;
clear: both;
padding-top: 55px;
}
/* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
html {
font-size:16px;
}
body {
/*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
margin: 0 auto;
font-size: 1em;
font-family: Montserrat, Helvetica, Arial, sans-serif;
}
header {
font-size: 1em;
}
.top-section {
font-size: 1em;
}
.bottom-section {
font-size: 1em;
}
footer {
font-size: 1em;
}
header, .top-section, .bottom-section, footer {
max-width: 90%;
}
h1, h3, h4 {
text-transform: uppercase;
}
h1 {
color: black;
font-size: 1.875em;
text-align: center;
width: auto;
padding: 2.45% 0;
}
h3 {
color: black;
font-size: 1.125em;
text-align: center;
padding: 15px;
}
h4 {
color: black;
font-size: 0.75em;
}
.main-title h3 {
text-align: left;
padding: 5px 0px;
text-transform: uppercase;
color:#77a466;
}
/*The widths are in a percentage!*/
header {
width: 100%;
height: 10%;
margin: 0 auto;
}
header .heading {
border-bottom:3px solid #77a466;
height: auto;
}
header span {
color: #77a466;
}
header nav {
padding: 8% 0px;
margin:auto;
}
header nav a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 0.875em;
padding: 0 10px 20px 10px;
color:#77a466;
display: block;
text-align: center;
}
#last-nav {
padding: 0 10px;
}
/*The widths are in a percentage!*/
.top-section, .bottom-section {
width: 100%;
margin: 0 auto;
clear: both;
}
.main-image {
width: 100%;
height: auto;
float: left;
clear: both;
}
.main-image img {
width: 100%;
border-bottom:3px solid #77a466;
border-top: 3px solid #77a466;
}
.main-title {
width: 100%;
height: auto;
float: left;
}
.main-title p {
padding: 0px;
line-height: 156.25%;
font-size: 1em;
}
.section-one, .section-two, .section-three {
width: 100%;
height: auto;
clear: both;
border-top: 1px solid #eee;
}
.section-one h4, .section-two h4, .section-three h4 {
padding: 10px 30px 10px 0px;
}
.menu {
list-style: none;
padding: 0px 30px 0px 0px;
}
.menu li {
padding: 10px 0;
color:#77a466;
}
.reviews {
color: #333;
line-height: 135%;
font-size: 1em;
}
.address {
font-size: 1em;
line-height: 150%;
}
.reviews, .address {
padding: 0px 30px 0px 0px;
}
/*The widths are in a percentage!*/
footer {
width: 100%;
height: 50px;
border-top:3px solid #eee;
margin: 0 auto;
clear: both;
text-align: center;
}
footer span {
font-family: "Wisdom Script", script;
text-transform: lowercase;
color: #77a466;
font-size: 0.875;
}
#media all and (min-width: 600px) and (max-width: 939px) {
header nav {
padding: 3.75% 0px;
}
}
#media screen and (min-width: 940px) {
/* -------- PORTFOLIO BANNER CSS -------- */
.chevron img {
width: 30px;
}
.back-text {
font-size: 3em;
}
#example {
width: 96%;
padding: 40px 2% 0 2%;
}
/* -------- ORIGINAL CSS -------- */
body {
/*width: 96%; --- REMOVED FOR PORTFOLIO BANNER --- */
/*padding: 0 2%; --- REMOVED FOR PORTFOLIO BANNER --- */
}
header, .top-section, .bottom-section, footer {
max-width: 100%;
}
header h1 {
text-align: left;
float: left;
}
header {
height: 100px;
}
header .heading {
border-bottom: none;
}
header nav {
float: right;
width: auto;
padding: 45px 0px;
}
header nav a {
display: inline;
}
.section-one, .section-two {
border-right: 1px solid #eee
}
.section-one h4 {
padding: 10px 0px;
}
.section-two h4, .section-three h4 {
padding: 10px 30px;
}
.menu {
padding: 0px;
}
.reviews, .address {
padding: 0px 30px;
}
.section-one, .section-two, .section-three {
width: 33%;
height: auto;
clear: none;
float: left;
border-top: 1px solid #eee;
}
}
/* -------- END ORIGINAL CSS -------- */
<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Rogue Pickings</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- PORTFOLIO BANNER -->
<section class="back">
<a class="div-link" href="../index.html"><span></span></a>
<div class="back-wrap">
<figure class="chevron">
<img src="../img/chevron-b.png" />
<img src="../img/chevron-g.png" />
<img src="../img/chevron-o.png" />
<img src="../img/chevron-r.png" />
</figure>
<p class="back-text">back</p>
</div>
</section>
<!-- START OF ORIGINAL BODY -->
<div id="example">
<!-- MODULE: Logo & Nav -->
<header>
<div class="heading">
<h1><span>rogue</span> pickings</h1>
</div>
<nav>
About
Menu
Locations
Gallery
Reviews
<a id="last-nav" href="#contact">Contact</a>
</nav>
</header>
<!-- MODULE: Top Section -->
<div class="top-section">
<div class="main-image"><img src="img/download.jpg" />
</div>
<div class="main-title" id="about">
<h3>Welcome to our little corner of the internet!</h3>
<p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
</div>
</div>
<!-- MODULE: Bottom Section -->
<div class="bottom-section">
<div class="section-one" id="menu"><h4>Today's Specials</h4>
<ul class="menu">
<li>Flaming Hummus & Falafel Salad</li>
<li>Sizzling Bean Burrito</li>
<li>Green Gloves Tamales</li>
</ul>
</div>
<div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
<p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
</div>
<div class="section-three" id=contact><h4>Contact</h4>
<p class="address">1001 Potrero Avenue<br>
San Francisco, CA 94110<br>
(415) 206-8000 </p>
</div>
</div>
<!-- MODULE: Footer -->
<footer>
<h4>Powered by lots of <span>fresh</span> ingredients.</h4>
</footer>
<!-- END OF ORIGINAL ROGUE PICKINGS HTML -->
</div>
</body>
</html>
i cant remember if zoom level is persistant on an iphone but it is on desktop browsers, could you have zoomed in/out of one of them? is there a way of making sure you are at 100% zoom?
Edit
is the smaller one contained in a set of tags that is smaller than 55px? as that would cause it to be restricted to the smaller size
Your banner is not responsive, its height is fixed (55px). If the site is being displayed differently - different viewport zoom, your banner will seems to be smaller/larger.
Check the viewport meta tag in those sites:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the initial-scale is different or if one of the pages is missing the viewport tag it can explain the differences.
As mentioned before, the zoom affects the presented width and this affects the visual size of your banner. If you want it to be responsive, you should change the height units into percentage instead of pixels.
EDIT
The first page is much wider than the second, when you zoom out to see all the page it changes the visual height of your banner.
I'm new to web dev and need some help figuring out this simple issue. The menu items move below the name when resized, can some tell me where I messed up?
I've been reading some other solutions and get the idea but just can't find my error.
>
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
height: 60px;
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg"/>
<div id="bio">
<p>
<h3> Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I have commented the "height" of top container, and removed an unwanted closing div tag. It works in Chrome.
<!doctype html>
<html>
<head>
<title>About</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
* {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
body {
background-color: #FAFAFA;
color: #2E2E2E;
}
#topmenu {
float: right;
padding-top: 10px;
position: relative;
}
#topmenu ul {
list-style:none;
width: auto;
}
#topmenu li {
float:left;
padding: 5px 10px 0px 20px;
margin-right: 20px;
border-right: 1px solid #47008F;
text-decoration: underline;
}
a:hover {
font-size: 20px;
}
a:link {
color: #47008F;
}
#name {
margin-bottom: 10px;
padding-left: 20px;
color: #47008F;
display:inline-block;
}
#topcontainer {
width: 100%;
background-color: #A4A4A4;
/*height: 60px;*/
margin-bottom: 5px;
font-family: Lucida Grande;
margin-right: 50px;
border-radius: 25px;
float: left;
}
#break {
background-color:#47008F;
height: 1px;
margin-bottom:5px;
clear: both;
}
#midcontainer {
clear:both
padding-left: 50px
}
#midcontainer img {
position: relative;
height:300px;
padding: 20px 200px 50px 200px;
float: left;
padding-right:50px;
}
#bio {
padding-top: 75px;
position: relative;
}
</style>
</head>
<body>
<div id="topcontainer">
<h1 id="name">Robert</h1>
<div id="topmenu">
<ul>
<li>About</li>
<li>Resume</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div id="break"></div>
</div>
<div id="midcontainer">
<img src="images/me.jpg" />
<div id="bio">
<p>
<h3>Text goes here.............</h3>
<p>
something
</p>
</p>
</div>
</div>
</body>
</html>
I needed to add another div wrapping all my html and set the margins to auto and a width of 960px. Solved!
Previously I asked How do I position buttons so they align horizontally with another element?. I need just a little more help with my CSS and HTML until I've completed it to where I like it.
I have everything but the buttons correctly positioned, so, any help is great! Thanks in advance.
Current Output:
Current HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aspen Development | Home</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="navMenu">
<div id="header">
<div id="brand">Aspen Development</div>
<ul>
<li class="navButton">Home</li>
<li class="navButton">Pricing</li>
<li class="navButton">Contact Us</li>
</ul>
</div>
</div>
<div id="content">
<div id="contentContainer">
<p><b>4.21.14</b> Welcome to Aspen Development.</p>
<p><b>4.19.14</b> The website has been created!</p>
</div>
</div>
<div id="footer">
<center><p style="margin-top: 17px; margin-bottom: 20px; font-size: 0.75em; ">Copyright © 2014 Aspen Development | All Rights Reserved</p></center>
</div>
</div>
</body>
</html>
Current CSS:
#charset "utf-8";
body, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
#header ul {
list-style-type: None;
padding: 0;
margin: 0;
}
#header ul li {
display: inline;
cursor: pointer;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFF;
}
#navMenu, #footer {
width: 100%;
height: 50px;
background-color: #F8F8F8;
border: 2px solid #E6E6E6;
margin: 0 auto;
}
#header {
width: 1104px;
height: 50px;
margin: 0 auto;
text-align: right;
}
#menu {
float: right;
padding: 12px 14px 16px;
padding-top: 12px;
}
#brand {
float: left;
}
#brand a {
display: block;
padding-top: 12px;
padding-bottom: 16px;
padding-right: 14px;
color: black;
font-size: 1.25em;
text-align: justify;
text-decoration: none;
}
.navButton {
padding: 0 14px;
margin-top: 50px;
color: black;
font-size: 0.75em;
}
#content {
width: 100%;
}
#contentContainer {
width: 1140px;
margin: 0 auto;
}
#contentContainer p {
margin: 20px;
}
Once again, thanks for all the help! :)