I wanted to create a page with a top banner, a horizontal navigation bar, and two columns (one main column for article and one column for side links).However, I have a few problems:
I used display:inline for the horizonal nav bar but it is still displayed as a vertical bar
In the book I read, it says if I float the div #maincolumn left, the sidebar will automatically flow to the right but I see that it is overlapping with the video. Is there anyway I can use float right for this?
Here is the HTML code:
<html>
<head>
<title> Green Tea vault </title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg"/>
<ul id="nav">
<li> Home </li>
<li> Cheesecakes </li>
<li> Cakes </li>
<li> Drinks </li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" frameborder="0" allowfullscreen></iframe>
</p>
<div id="maincolumn">
Match Tiramisu recipes
From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html
INGREDIENTS
Matcha Syrup
3/4 cup water
1/2 cup sugar
1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.)
DIRECTIONS
1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat. <br>
2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.) <br>
Now, moving onto the matcha sponge cake. <br>
...
Assembling the Matchamisu. <br>
16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.) <br>
17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha. <br>
</id>
<div id="sidebar">![enter image description here][1]
<ul>
<li> Japan Recipes </li>
<li> Korean Recipes </li>
<li> Paris Recipes </li>
<li> German Recipes </li>
</ul>
</div>
</section>
</body>
</html>
CSS:
img {
width:500;
height:200;
border: solid green;
}
ul #nav {
list-style-type:none;
margin:0;
padding:0;
}
li {
display:inline;
}
a, a:visited {
display:block;
/*width:60;*/
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:peach;
position: absolute;
left:50%;
width: 300px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%; /add space between column/
margin-left: 3%;
}
#sidebar {
position: absolute;
top: 370px;
right: 0px;
width: 10%;
background: #EEE;
}
quick solution to your navigation bar problem, but please consider to validate your HTML and CSS!
CSS VALIDATOR
HTML VALIDATOR
this way your menu will be displayed horizontal:
a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
I made what you were trying to achieve in the following:
HTML
<!DOCTYPE html>
<head>
<title>Green Tea vault</title>
<link type="text/css" rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<section id="maincontent">
<div id="banner">
<img src="image/Greentea.jpg" alt="banner" />
<ul id="nav">
<li> Home
</li>
<li> Cheesecakes
</li>
<li> Cakes
</li>
<li> Drinks
</li>
</ul>
</div>
<h1> Home of all the matcha goodness! </h1>
<p>
<iframe width="500" height="315" src="http://www.youtube.com/embed/lcu2op4x00s" allowfullscreen></iframe>
</p>
<div id="maincolumn">
<div class="left-column">Match Tiramisu recipes From: http://www.ohhowcivilized.com/blog/2013/6/20/step-by-step-recipe-matchamisu-matcha-green-tea-tiramisu.html INGREDIENTS Matcha Syrup 3/4 cup water 1/2 cup sugar 1 tablespoon matcha (I also like Aiya's Cooking Grade matcha.) DIRECTIONS 1. Making the matcha syrup first, bring water (3/4 cup) and sugar (1/2 cup) to a boil. Simmer for 3 minutes and remove from heat.
<br>2. Let cool, then sift in the matcha (1 tablespoon). Whisk well. (This can be made up to a day before.)
<br>Now, moving onto the matcha sponge cake.
<br>... Assembling the Matchamisu.
<br>16. In a small glass (we used these mini cups), put in a piece of the sponge cake. (We cut a smaller piece of cake to fit the tapered bottom of the cup.)
<br>17. Spoon on the matcha syrup over the sponge cake, making sure the sponge cake gets soaked with the syrup. Dollop the matcha cream on top. Layer on another piece of sponge cake. Pour on matcha syrup to the top level sponge cake. Add the final layer of matcha cream and dust with matcha.
<br>
</div>
<div class="right-column">
<div id="sidebar">
<ul>
<li> Japan Recipes
</li>
<li> Korean Recipes
</li>
<li> Paris Recipes
</li>
<li> German Recipes
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
CSS
img {
width:500px;
height:200px;
border: solid green;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
width: 100%;
}
li {
display:inline;
}
a, a:visited {
display:inline;
width: 100%;
text-decoration: none;
text-transform: uppercase;
color: #000000;
}
a:hover, a:active {
background-color:#7A991A;
}
#maincontent {
background-color:beige;
position: absolute;
left:50%;
width: 500px;
margin-left: -150px;
}
#maincolumn {
float: left;
width: 90%;
margin-right: 3%;
/*add space between column*/
margin-left: 3%;
}
#sidebar {
background: #EEE;
}
.left-column {
width: 70%;
float: left;
}
.right-column {
width: 25%;
float: left;
}
Related
I'm designing an AMP page. I'm having trouble getting the text Perfect Imprints in the menu to be centered and on the same line as the hamburger icon.
I can only seem to EITHER get it centered, but on a seperate line
-- OR --
get it left-aligned on the same line.
How can I resolve this issue?
Ideally, the text could be a logo image if desired. But if not, that's okay too.
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="canonical" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<title>Custom Foam Fingers from Perfectimprints.com</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.text-centered {
text-align: center;
}
.sku {
color: gray;
}
.margin-minus-1 {
margin-top: -1em;
}
.wrapper-link {
text-decoration: none;
color: inherit;
}
.wrapper-link:visited {
text-decoration: none;
color: inherit;
}
.wrapper-link:hover {
text-decoration: none;
color: inherit;
}
.product {
border: 1px solid #DDDDDD;
border-radius: 1%;
margin-bottom: 1em;
}
.hamburger {
font-size: 1.5em;
padding: 0.1em 0 0.2em 0.3em;
display: inline;
}
.headerbar {
background-color: black;
color: white;
}
.site-name--container {
display: inline-block;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sidebar {
padding: 2em;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 1em;
padding-top: 1em;
}
body {
font-family: 'Open Sans', sans-serif;
}
.container {
margin: 1em;
}
</style>
</head>
<body>
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name--container"><div class="site-name">Perfect Imprints</div></div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
</amp-sidebar>
<div class="container">
<h1 class="h1">Foam Fingers</h1>
<p>
Custom foam fingers and hands are great spirit items to cheer on your sports team.
Choose from our large assortment of various shaped foam hands and foam finger cheering
accessories to show your school spirit. These foam fingers and foam hands are great for
booster club fundraising. Whether you choose a giant foam finger, or a foam claw or
talon, these custom foam cheering fingers will really help generate team spirit. These
imprinted foam hands can be personalized with your custom mascot and make great spirit
items to sell to the crowd.
</p>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<h2 class="h2">Foam Fingers Are #1</h2>
<p>
A cheap #1 foam finger can make a great for giveaway while the giant foam fingers are great
for selling to the fans. If you want to raise some funds for your booster club or your school,
selling custom printed foam fingers is a great fundraiser. Choose from dozens of different
foam hands or even foam claws to best match your school mascot. If you can't find the shape
you want, we can create a customized shape for you with a minimum order as low as 250 pieces.
If you plan on selling foam fingers for fundraising, be sure to check out our Guide for
<a target="_blank" href="https://www.perfectimprints.com/blog/custom-foam-fingers/amp">Buying Custom Foam Fingers</a>.
</p>
</div>
</body>
</html>
https://codepen.io/anon/pen/KBGzre
Your class site-name--container has width: 100%; causing your text to jump to the next line. If you set your width to auto for that section your text Perfect Imprints would be on the same line.
To keep your text centered and vertically aligned middle just add:
.headerbar {
display: flex;
align-items: center;
}
The display flex is to fill your headerbar with the content and the align-items: center is to keep your content vertically aligned in the flex box.
Add some CSS properties in your .headerbar class -
.headerbar {
display: flex;
align-items: center;
}
I'm in the process of building a small website for my Roleplay group, and was overjoyed to figure out how to create a vertical navigation bar, but I'm noticing that on every display, the text falls behind it.
Is there a way to set where text begins and navigation ends?
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align: center;
font-family: "Arial"
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,
its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls. Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the
wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
To start, I would suggest pinning through your code and making some adjustments tot he structure. There looks to be a lot of missing tags (which I tried to correct in the fiddle). One tip would be to add comments to your closing div tags so you can see where each section ends.
With that said, what you can do is apply a margin-left: 200px; to your .Welcome class in order to shift everything over from the left side of the page. Since 200px is the width of your fixed navigation, you want to compensate that width. And since your Welcome class is wrapping your body content, you would add the margin to this class
https://fiddle.jshell.net/kez8aLam/
.Welcome {
margin-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000 color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial";
}
#intro {
text-align: center;
font-family: "Arial"
}
<div class="home-wrap">
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact
<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b>
<br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its outlying islands. The realm has known many unique civilizations throughout its long history,
and harbors many starkly different ones to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the South, a vast expanse of unforgiving desert harbors few willing to brave
its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the very stones of the land rich with veins of the power-infused crystals. </p>
</div>
</div>
</div>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft. The city-state greatly emphasizes the harmony of man and nature,its
resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
<li>Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential to determine the fate of the city’s citizens. </li>
</ol>
</div>
</div>
The reason of why "text falls behind navigation" is: the ul element's position is fixed, which makes it detached from document (moved to another layer and does not occupy any space in the page). Thus the text occupies all page space and part of them falls behind ul.
As you may need fixed ul for good reason, the below code only adds one css rule -- define left padding for text, which leaves space for ul element display:
.Head, .Welcome {
padding-left: 200px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #d9d9d9;
height: 100%;
position: fixed;
display: inline-block;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-family: "Arial"
}
.active {
background-color: #990000;
color: white;
}
li a:hover {
background-color: #990000
color: white;
}
#titletext {
text-align: center;
font-family: "Arial";
font-size: 52;
}
#welcome {
text-align: center;
font-family: "Arial"
}
#intro {
text-align:center;
font-family: "Arial"
}
.Head, .Welcome {
padding-left: 200px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="HOME_PAGE.css">
<title>FFXIV RP Database</title>
<style>
div.head {
background-color: #000000;
color: white;
text-decoration: none;
margin: 5px 0 5px 0;
padding: 20px;
}
</style>
</head>
<body>
<!--NAVIGATION BAR-->
<div class="Navigation">
<ul>
<li id="first"><img src="xiv logo.png" width="200px"></li>
<li>Home</li>
<li>Characters</li>
<li>Story</li>
<li>Stats</li>
<li>Contact<li>
</ul>
</div>
<!--HEADER-->
<div class="Head">
<h1 id="titletext">FFXIV RP Database</h1>
</div>
<!--BELOW HEAD CONTENT-->
<div class="Welcome">
<p>
<h2 id="welcome">Welcome to Eorzea!</h2>
<div style="text-align:center;">
<img src="group.png" width="40%">
</div>
<div class="IntroParagraph" style="text-align:center;" id="Intro">
<p><i>"Such a marvel proof not only that the gods exist, but that they love, and that profoundly."</i>
<br/><b>Orrick Ballard (Explorer and Map-Maker)</b><br/>
<br/>
<b>Eorzea</b> is the setting of Final Fantasy XIV. It is a vast region of <b>Hydaelyn</b>, and consists of the continent <b>Aldenard</b>, as well as its
outlying islands. The realm has known many unique civilizations throughout its long history, and harbors many starkly different ones
to this day. In the North, mountains loom tall overhead, buried under feet of snow and constantly lashed at by icy winds. And to the
South, a vast expanse of unforgiving desert harbors few willing to brave its scalding heat.</p>
<p>Despite its unique geography and vastly different regions, Eorzea holds the hearts of many for its expansive currents of <b>aether</b>, the
very stones of the land rich with veins of the power-infused crystals. </p>
<!--WRITE-UP: "EORZEA"-->
<div class="Welcome">
<p>
<h2 id="welcome">City-States of Eorzea</h2>
<div style="text-align:left;">
<img src="eorzea.jpg" width="40%">
<p>Due to its size, the region of Eorzea has been divided into six major city-states, each with their own unique cultures and climates:</p>
<ol type="I">
<li><b>Limsa Lominsa</b> is seated across a multitude of islands across the Southern Coast of the island <b>Vylbrand</b>, each connected into a single city by bridge.</li>
<li><b>Gridania</b> stands to the east of Aldenard, its forests lush and vibrant. Its dense woodlands know many agriculturists and crafters, all whom seek to refine their craft.
The city-state greatly emphasizes the harmony of man and nature, its resident <b>White Mages</b> keeping the peace between the forest’s <b>Elementals.</b></li>
<li><b>Ul’dah</b> sits buried in the sands of southern Aldenard, popular for its more hedonistic pleasures; ranging from fierce Gladiator fights to its gambling halls.
Claimed sovereign by the <b>Sultana</b>, its rule truly belongs to the wealthiest among its residents; affluence holds the reigns of the city, allowing the rich and influential
to determine the fate of the city’s citizens. </li>
<li>
</div>
</p>
</body>
</html>
This question already has answers here:
What is the difference between id and class in CSS, and when should I use them? [duplicate]
(15 answers)
Closed 6 years ago.
Been trying to figure this out for over 2 hours. Ran it through validator etc.
Its a class assignment and I cant figure out how to get the section.main class to line up correctly.
The html and the css is listed. Im not finished with the assignment but when you look at the site its pretty obvious what I am having issues with floating the section.main class properly or something. Sorry new to this.
If its easier to see the site you can view it here. http://ddawes27.webstudentsites.com/tut04/review/rose.htm
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
.main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
h1.main {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
p.main {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>
In style add h1 and p tage after #main
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>
main is an id not a class: #main instead of .main
/*
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Style Sheet
Author: Derek Dawes
Date: 7/3/16
Filename: race.css
Supporting Files:
*/
header, article, aside, figure, figcaption, hgroup, section, nav {
display: block;
}
* {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
padding: 0px;
margin: 0px;
/*outline: 1px solid red; */
}
/* BODY SECTION */
body {
position: relative;
width: 98%;
min-width: 1000px;
max-width: 1400px;
}
/* HEADER SECTION */
header {
position: absolute;
top: 0px;
left: 0px;
width: 20%;
background-color: black;
padding-bottom: 500px;
}
header img {
width: 100%;
}
/* NAVIGATION SECTION */
nav a {
text-decoration: none;
}
/* HORIZONTAL NAVIGATION PANE */
nav.horizontal {
width: 80%;
margin-left: 20%;
}
nav.horizontal li {
display: block;
float: left;
width: 20%;
background-color: rgb(49, 38, 31);
padding: 5px 0px 5px 0px;
text-align: center;
text-transform: uppercase;
font-size: 85%;
}
nav.horizontal li a {
color: white;
}
nav.horizontal li a:hover {
color: rgb(215, 181, 151);
}
/* VERTICAL NAVIGATION PANE */
nav.vertical li {
font-size: 85%;
list-style-type: none;
}
nav.vertical a {
color: white;
display: block;
text-indent: 10px;
}
nav.vertical a:hover {
background-color: rgb(51, 51, 51);
outline: 2px solid rgb(215, 181, 151);
}
li.newgroup {
padding-top: 25px;
}
/* MAIN SECTION */
#main {
float: left;
margin-left: 21%;
margin-top: 20px;
width: 49%;
outline: 2px solid red;
}
#main h1 {
color: rgb(189, 131, 82);
font-size: 180%;
font-weight: normal;
letter-spacing: 5px;
}
#main p {
margin: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 4
Review Assignment
Cycle Pathology Rose Hill Rally Page
Author: Derek Dawes
Date: 7/3/16
Filename: rose.htm
Supporting files: alisha.png, cp_logo2.png,
modernizr-1.5.js, race.css,
slide01.png - slide08.png
-->
<meta charset="UTF-8" />
<title>Rose Hill Rally</title>
<script src="modernizr-1.5.js"></script>
<link href="race.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<img src="cp_logo2.png" alt="Cycle Pathology" />
<nav class="vertical">
<ul>
<li>Events Page</li>
<li class="newgroup">Rose Hill Rally</li>
<li>Tour the Palisades</li>
<li>Gunnison Challenge</li>
<li>Steamboat Springs Rally</li>
<li>Copper Triangle</li>
<li>Durango Tour</li>
<li>Montrose Meander</li>
<li class="newgroup">Route Sheets & Maps</li>
<li>Grand Junction Bike Fest</li>
<li>Off-Road Cycling</li>
<li>Newsletter</li>
<li>Photo Album</li>
<li>Editor</li>
<li>Sponsors</li>
<li class="newgroup">Cycling Links</li>
<li>Colorado Cycling Groups</li>
<li>U.S. Bike Federation</li>
<li>Tips & Tricks</li>
<li class="newgroup">About Cycle Pathology</li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul>
<li>Home</li>
<li>Members Only</li>
<li>Market Place</li>
<li>Message Board</li>
<li>Contact Info</li>
</ul>
</nav>
<section id="main">
<aside>
<p>The Grand Junction Neonatal Intensive Care Unit offers comprehensive neonatal
diagnostic and treatment facilities for critically ill newborns. We're dedicated
to providing the highest quality care for all newborns, ranging from healthy
neonates to sick or premature newborns requiring close observation or intensive care.
</p>
<p>All of the neonatologists are board certified. We believe it's critical that our
clinicians learn about the latest advances in neonatal intensive care to
better serve the community of Grand Junction.
</p>
</aside>
<h1>Rose Hill Rally</h1>
<p>
The Grand Junction Neonatal ICU is proud to sponsor this
year's Rose Hill Rally. Please join us and Cycle Pathology for the
Century Ride, Metric Century (62 miles), or 50K (31 miles). Rest stations
and aid stations will be spaced throughout the Century and Metric Century
routes.
</p>
<ul>
<li>Come to Grand Junction a day early. Visit historic downtown Grand Junction,
explore the Grand Valley, ride the Colorado National Monument, or tour
local wineries.
</li>
<li>Riders begin the course between 7:00 a.m. and 9:00 a.m. for both the Metric
Century and the 50K distance. Pick up your ride packet at Canyon View Park
between 6:00 a.m. and 9:00 a.m.
</li>
<li>Entry fee includes rider breakfast & hot lunch, Rose Hill Rally t-shirt,
and course map.
</li>
<li>Stay and enjoy your post-ride meal with music provided by the Dam Busters.
</li>
<li>Teams of six or more riders will receive special t-shirts. Team entry forms must
be received two weeks prior to the rally.
</li>
</ul>
</section>
<article>
<hgroup>
<h1>Ride the Century</h1>
<h2>— Alisha Smith</h2>
</hgroup>
<p>While riding 100 miles in a day may sound extreme, most casual cyclists can complete
a century if they follow a comprehensive training routine. Your bike should be comfortable
and fit you well. Consider having a tune-up before the ride, and carry a spare tire
and patch kit, tools, and a pump.
</p>
<p>If you're not a regular cyclist, start your training at least 12 weeks before your
century. Hills are a great way to train for your ride, and don't forget to allow
for recovery days after your longer rides.
</p>
<p>A few days prior to the ride, you should keep hydrated and cut back on caffeine and
alcohol. On the day of your century, eat a light breakfast of high-carbohydrate foods
and drink lots of water. On the ride, drink water or a sports drink <em>before</em>
you're thirsty.
</p>
<p>A century isn't a race, so adopt a relaxed pace that you can follow for several
hours. Alter your position throughout your ride, getting up off the saddle,
stretching your back, and moving your hand position. The ride goes easier if
you share it with a friend or two.
</p>
<p>Above all, <em>enjoy the ride</em>! Most centuries are designed to go through
scenic areas of the state. Peddle on and remember to watch the scenery.
</p>
</article>
<figure>
<div>
<img src="slide01.png" alt="" />
<img src="slide02.png" alt="" />
<img src="slide03.png" alt="" />
<img src="slide04.png" alt="" />
<img src="slide05.png" alt="" />
<img src="slide06.png" alt="" />
<img src="slide07.png" alt="" />
<img src="slide08.png" alt="" />
</div>
<figcaption>Pictures from Last Year's Rose Hill Rally!</figcaption>
</figure>
</body>
</html>
id vs class
It seems like you made a simple mistake. In your css file, instead of using .main, use #main. Since at the moment, those css lines are not being looked at (unless you have a class of .main somewhere).
To further understand the difference between ids and classes, read this page.
screenshot
I am trying out Flexbox. Building a menu. I have no margins defined but My menu s being pushed out from the side. Is this a bug? Any other ideas? I am really stuck
`
<html>
<head>
<title>Ribbit - A flexbox Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
background-color: #ff9;
font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.row,
.columns,
nav ul {
display: flex;
flex-direction: column;
}
.row {
background-color: rgba(255,255,255, .33);
border: 1px solid rgba(150,150,150, .66);
}
.columns {
background-color: rgba(200,200,200, .5);
border: 1px solid rgba(150,150,150, .66);
}
nav ul {
text-transform:uppercase;
font-size: .75rem;
font-weight: 900;
letter-spacing: .025rem;
list-style: none;
border: 1px solid orange;
}
nav ul li {
background-color: rgba(0,0,0, .9);
padding: .75em 1em;
border-bottom: 1px solid white;
color: #fff;
}
#media (min-width: 769px) {
body {
background-color: #f9f;
}
nav ul {
flex-direction: row;
}
nav ul li {
display: flex;
flex: 1;
}
}
#media (min-width: 1024px) {
body {
background-color: #9ff;
}
}
</style>
</head>
<body>
<div class="row">
<header class="row">
<h1>Flexbox <span>Inc.</span></h1>
</header>
</div>
<nav>
<ul class="row">
<li class="item">One</li>
<li class="item">Two</li>
<li class="item">Three</li>
<li class="item">Four</li>
<li class="item">Five</li>
</ul>
</nav>
<div class="content row">
<div class="main">
<img src="http://placehold.it/1024x512/B4081E/ffffff/" width="100%" height="auto" alt="screenshot">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="aside"></div>
<div class="promo"></div>
</div>
<footer class="row">
<div class="columns">
<p>Twitter: this</p>
<p>Facebook: this</p>
<p>LinkedIN: this</p>
<p>Pinterest: this</p>
</div>
<div class="columns">
<p>Cause longer included relaxing deal world's if. Calories world's one style refreshing worthwhile win newer world's introducing better class.</p>
<p>Wholesome sleek below advanced crispy save spring elegent. Sold worthwhile spacious oily hearty. On screamin' tangy dazzling.</p>
<p>What appearance big credit-card bonus asked polished. More light sensible picky devour each appetizing newest duty people. Extra gigantic thank-you.</p>
<p>Absorbent vinyl thick industry now. Unique to thirsty absolutely settle smooth.</p>
</div>
<div class="columns"><p>© 2005 Flexbox inc.</p></div>
</footer>
</body>
</html>
`
I am confused why there is space on the left hand side of the menu
Most browsers have default styles. In your screenshot, the list inherits Chrome's default left padding and top and bottom margins.
I'm trying to get the navigation background image to be the same height as my page and I can't figure out how. I have tried a bunch of different things found on this site to no avail. I'm very new to HTML5 and CSS so apologies if this is a stupid question. Here is my CSS:
body {
background-color: #FF9933;
}
header {
background-image: url(orangesquares.png);
}
h1 {
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
width: 275px
}
h2 {
color: #FF9933;
}
nav {
background-image: url(orangesquares.png);
float: left;
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
nav ul {
list-style-type: none;
background-color: #FFFFFF;
opacity: 0.6;
padding: 10px;
}
#rightcolumn {
margin-left: 205px;
background-color: #ffffff;
color: #000000;
width: 80%;
}
.content {
padding: 10px 20px 0 20px;
}
#footer {
text-align: center;
font-size: 11px;
}
a:link {
color: #0033FF;
}
a:visited {
color: #0033FF;
}
figure {
width: 500px;
border: 1px solid #FF9933;
padding: 5px;
}
figcaption {
text-align: center;
font-size: 2em;
}
Here is my HTML code for the index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sims 3 Open House</title>
<meta charset="utf-8">
<meta name="description" content="Sims 3 Open House provides information on houses included in the Sims 3 bin, such as what furniture is included and how many squares big the rooms are." />
<meta name="keywords" content="Sims 3, the sims 3, the sims, sims, open house, house, houses, home, homes, lots and houses bin, bin, premade, premade houses, lot size, house size, furniture" />
<link type="text/css" href="openhouse.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>Sims 3 Open House</h1>
</header>
<nav>
<ul>
<li>Home</li><br>
<li>One Bedroom Homes</li>
<ul>
<li>Cabin Fever</li>
<li>Super Shack</li>
</ul>
<li>Two Bedroom Homes</li>
<ul>
<li>Ginger</li>
<li>Oak Grove Bungalow</li>
</ul>
<li>Three Bedroom Homes</li>
<ul>
<li>Cornucopia</li>
<li>Doubleday Lodge</li>
</ul>
<li>Contact Us</li>
</nav>
<article>
<div id="rightcolumn">
<div class="content">
<h2>Welcome</h2>
<p>Ever want to use a house from the Sims 3 bin but you aren't sure which one? What do they look like inside? How big are they really? What kind of furniture do they have? Well, here you can find all that information! I have split the bin houses into categories by number of bedrooms to make your search easier. On each house's page there is detailed information about the layout of each house, how big the rooms are, and what furniture is included, plus general info like lot size and price. All screenshots were taken in Sunset Valley 2. </p>
<a id="onebedroom"><h2>One Bedroom Homes</h2></a>
<figure>
<img src="cabinfever.jpg" width="500px" alt="The front facade of the home Cabin Fever." />
<figcaption>
Cabin Fever
</figcaption>
</figure> <figure>
<img src="supershack.jpg" width="500px" alt="The front facade of the home Super Shack." />
<figcaption>
Super Shack
</figcaption>
</figure>
<a id="twobedrooms"><h2>Two Bedroom Homes</h2></a>
<figure>
<img src="ginger.jpg" width="500px" alt="The front facade of the home Ginger." />
<figcaption>
Ginger
</figcaption>
</figure>
<figure>
<img src="ogb.jpg" width="500px" alt="The front facade of the home Oak Grove Bungalow." />
<figcaption>
Oak Grove Bungalow
</figcaption>
</figure>
<a id="threebedrooms"><h2>Three Bedroom Homes</h2></a>
<figure>
<img src="cornucopia.jpg" width="500px" alt="The front facade of the home Cornucopia." />
<figcaption>
Cornucopia
</figcaption>
</figure>
<figure>
<img src="doubleday.jpg" width="500px" alt="The front facade of the home Doubleday Lodge." />
<figcaption>
Doubleday Lodge
</figcaption>
</figure>
</div>
<br>
<div id="footer">
<footer>
Home | One Bedroom Homes | Cabin Fever | Super Shack | Two Bedroom Homes | Ginger | Oak Grove Bungalow | Three Bedroom homes | Cornucopia | Doubleday Lodge | Contact Us
<br>
Copyright © 2015 Natasha Schmidt
</footer>
</div>
</body>
</html>
why putting your bg in nav?
either make it full height
nav
{
background-image: url(orangesquares.png);
background-size: cover;
float: left;
height:100%
width: 200px;
margin-top: 0;
Margin-bottom: 0;
font-weight: bold;
}
or I don't know, do it right like
html{
padding:0; margin:0;background-image: url(orangesquares.png);
background-size: cover;
}
and remove the background from the nav.