I'm having trouble getting the background images to flow to the bottom of the site within my sidebars. What am I doing wrong? Also the content in the center of the page has decided to bunch up and I'm not sure how to fix that either...
How do I get it all to be an even three column layout?
https://jsfiddle.net/ofusmgbn/
Here is the css and html
h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 75px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;}
p{
border-bottom: 1px solid black;
padding-bottom: 4em;
height: 80px;}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
ul li {
display: inline-block;
}
ul li a:link{
text-decoration: none;
color: black;}
*{
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.sidebar1{
float: left;
width: 265px;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-color: #d4ff80;
}
.sidebar2{
float: right;
width: 265px;
padding-right: 30px;
padding: 0 10px 0 20px;
background: url(sidebar2background.jpg)right top;
background-repeat: repeat-y;
}
#footer{
clear: both;
height: 50px;
padding-top: 15px;
background-color: black;
color: white;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SylviaGunter WEB-210 Project 6</title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE">
</head>
<body>
<div class="wrapper">
<div id="masthead">
<h1>Best TV Ever</h1>
</div>
[insert menu toggle here]
[insert menu checkbox here]
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
<aside class="sidebar1">
Best Prime Time Shows
<ul>
<li>Alice</li>
<li>All In The Family</li>
<li>Barney Miller</li>
<li>Beverly Hillbillies</li>
<li>Bewitched</li>
<li>The Bob Newhart Show</li>
<li>The Brady Bunch</li>
<li>Gilligan's Island</li>
<li>Good Times</li>
<li>The Love Boat</li>
<li>Mary Tyler Moore</li>
<li>M*A*S*H</li>
<li>Maude</li>
<li>One Day At A Time</li>
<li>Petticoat Junction</li>
<li>Soap</li>
<li>Taxi</li>
<li>What's Happening</li>
<li>Welcome Back Kotter</li>
<li>WKRP In Cincinatti</li>
</ul>
</aside>
<article class="main">
<h2>The Genius of Krofft</h2>
<h3>H.R. Pufnstuff</h3>
<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>
<h3>Lidsville</h3>
<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>
<h3>The Bugaloos</h3>
<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>
<h3>Land of the Lost</h3>
<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>
<h3>Sigmund the Sea Monster</h3>
<p><img src="sigmund.jpg" alt="sigmund" height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>
</article>
<aside class="sidebar2">
Best Superhero Shows
<ul>
<li>Batman (1966)</li>
<li>The Bionic Woman (1976)</li>
<li>Electra Woman and Dyna Girl (1976)</li>
<li>The Greatest American Hero (1981)</li>
<li>The Incredible Hulk (1977)</li>
<li>Isis (1975)</li>
<li>Shazam! (1974)</li>
<li>The Six Million Dollar Man (1974)</li>
<li>Wonder Woman (1976)</li>
</ul>
</aside>
<div id="footer">
Stop watching TV and write some code!
</div>
</body>
</html>
The problem with your sidebars is that they have no height so they're just stretching to fir the content inside. If you want them to be a certain height, you'll need to define it.
Also, your content is bunched because the height set for the <p> tags is not enough. Just remove that altogether and make the tags display:block.
Related
I'm in the process of designing a website for my charity music festival. I made the site go live through github so that I could test what it looked like. (https://samiisweets.github.io/Petstock_Website/index.html)
Unforunately, the mobile version is NOT responsive. I've watched several youtube videos trying to figure out where I went wrong, and I can't figure out what I can do to improve my design.
Any suggestions?
* {
box-sizing: border-box;
}
body {
background-color: black;
color: white;
}
.head-font {
font-family: 'Luckiest Guy', cursive;
font-size: 72px;
width: 100%;
margin-left: 50px;
color: white;
}
.logo {
height: 175px;
width: 175px;
}
.top-bar {
display: inline-flex;
width: 100%;
align-items: center;
}
.buttons {
display: flex;
justify-content: flex-end;
width: 100%;
}
.btn {
list-style-type: none;
margin: 15px;
font-size: 2.5rem;
font-family: 'DM Serif Text', serif;
}
a:link, a:visited {
text-decoration: none;
color: white;
font-size: 1.5rem;
}
.coverpic {
margin-top: 20px;
display: flex;
justify-content: center;
align-content: center;
max-width: 100vw;
}
.coverpic img {
height: auto;
width: 60vw;
}
.tiltedcolumn {
display: flex;
flex-direction: row;
}
.rebelsunitedcolumn {
display: flex;
flex-direction: row;
width: 90%;
}
.fffridayscolumn {
display: flex;
flex-direction: row;
}
.midnightebbcolumn {
display: flex;
flex-direction: row;
}
.necrogardencolumn {
display: flex;
flex-direction: row;
}
.jerseysurecatscolumn {
display: flex;
flex-direction: row;
}
.band {
display: flex;
color: white;
justify-content: space-between;
align-items: center;
width: 90%;
margin-left: 30px;
margin-right: 30px;
margin-top: 50px;
}
.band img {
max-width: 300px;
height: auto;
}
.band-name {
font-size: 3rem;
font-weight: bold;
color: red;
justify-content: center;
}
.bio {
margin-left: 50px;
margin-right: 20px;
font-size: 1.25rem;
}
.title-bands-pg {
text-decoration: underline;
display: flex;
justify-content: center;
width: 100%;
font-size: 1.5rem;
}
#websitelink {
color:blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<nav class="top-bar">
<span><img class="logo" src="PS Logo.png" alt="Home_Page"></span>
<span class="head-font">Petstock '22</span>
<ul class="buttons">
<li class="btn about">About Us</li>
<li class="btn bands">Bands</li>
<li class="btn sponsors">Sponsors</li>
<li class="btn faq">FAQ's</li>
<li class="btn contact">Contact</li>
</ul>
</nav>
<div class="title-bands-pg">
<h1>Performing Bands</h1>
</div>
<div class="tiltedcolumn">
<div class="band tilted">
<img src="tilted.jpg">
<p class="bio">
<span class="band-name">Tilted</span><br><br>
Founded at the Jersey Shore in 2009, Tilted started as a hard rock cover band influences by the likes of KISS, AC/DC, Priest, Sabbath, Metallica, and many more. As their success grey, they found themselves landing more prominent gigs in the local Jersey Shore scene. In 2012, Tilted became more serious with their original songwriting talents and put together a new lineup introducing a new lead vocalist. With all original songs, Tilted hit these infamous spots at the Jersey Shore, finding themselves opening for national acts such as Skid Row, Dokken, Ace Frehley of KISS, Udo Dirkschneider from Accept, Hookers and Blow, Anvil, Corky Laing, and Tantric. They continue to make an impact at the Jersey Shore, and they show no signs of slowing down any time soon! Tilted is made up of Wil Deehan on Lead Vocals, Andrew Deehan on Bass, Steve Cavico on Lead Guitar, and Tommy Deehan on Drums.
<br><br><a id="websitelink" href="tiltedonline.com">Visit their website here!</a>
</p>
</div>
</div>
<div class="rebelsunitedcolumn">
<div class="band rebelsunited">
<img src="Rebelsunited.jpg">
<p class="bio">
<span class="band-name">Rebels United</span><br><br>
A band brought together by their will t get away from their wives and kids for a few hours on the weekends. The rock rebels knew what to do. They played in bands when they were young, and now they have united, together. Brother's in Rock! 4 "Old Men" with nothing to lose. Consisting of Brock Soucie on Drums, Jon Palyok on Guitar, Joe Chick on Guitar, and Mudbone Ferguson on Bass/Vocals, Rebels United have nothing to lose but their hearing, eye sight, and motor functions,but they will do it to bring you old school rough house rock and roll! (Hard Rock / Metal / Punk / Thrash)
<br><br><a id="websitelink" href="https://rebelsunitedband.com/?fbclid=IwAR2Cbg6FsF3MDZ3dpQfQspsnW0ZkyaKLofo2gGamQsGZ57Wjm5sH_HNPIg8">Visit their website here!</a>
</p>
</div>
</div>
<div class="fffridayscolumn">
<div class="band fffridays">
<img src="44fridays.jpg">
<p class="bio">
<span class="band-name">44 Fridays</span><br><br>
A Rock band from the Philly/Trenton area. They play everything from Classic to Modern Rock, Pop, and Country. They aim to please the crowd with a wide variety of covers and a good time. 44 Fridays are made up of Keith Bucco on Lead Vocals and Guitar, John Greenage on Lead Guitar, Sam Foster on Lead Vocals and Bass, and Richie Stinson on Drums!
<br><br>
<a id="websitelink" href="http://www.44fridays.com/?fbclid=IwAR2HuP8QezyA85Bd-ap_0NIJKubbMkiaXDdBfMG3wWhmbJT8g1VzS7Y9OD4">Visit their website here!</a>
</p>
</div>
</div>
<div class="midnightebbcolumn">
<div class="band midnightebb">
<img src="MidnightEBB.jpg">
<p class="bio">
<span class="band-name">Midnight Electric Blue Band</span><br><br>
A NJ-based band offering up a mix of classic and current rock, blues, and a few surprising choices. Midnight Electric Blue Band is made up of Deb on Female Lead Vocals, John Male Lead Vocals & Lead Guitar, Rich on Bass, and Ed on Drums.
<br><br>
<a id="websitelink" href="https://midnightelectricblueband.com/?fbclid=IwAR0YGW7zVImdEm77vC4sWLKAYef1SE84EoVJXAaehDxsEYUPUkl-EvWH9GE">Visit their website here!</a>
</p>
</div>
</div>
<div class="necrogardencolumn">
<div class="band">
<img src="necrogarden.jpg">
<p class="bio">
<span class="band-name">NecroGardeN</span><br><br>
A unique mix of scorching melodies, groovy riffs, and influences from all genres is what NecroGarden aims to bring to the New Jersey Metal scene and beyond! Our music's energy combined with our live show's intensity gives everyone something to enjoy!
<br><br>
<a id="websitelink" href="https://www.facebook.com/NecroGarden">Visit their Facebook here!</a>
</p>
</div>
</div>
<div class="jerseysurecatscolumn">
<div class="band jerseysurecats">
<img src="JerseySurecats.jpg">
<p class="bio">
<span class="band-name">Jersey Surecats</span><br><br>
Founded in 2007, the Jersey SureCats perform your favorite cover songs as a full electric band (5 or more members) or as an acoustic ensemble with both male and female vocalists. The Jersey SureCats have opened for Cheap Trick, Jefferson Starship, Mountain, Grand Funk Railroad, Marshal Tucker, Mitch Ryder, Steel Mill, Bill Haley’s comets. The Jersey SureCats perform a wide array of cover songs from all eras. They have something for everyone. Jersey Surecats is made up of Andy on Bass and Vocals, Chuck on Guitar/Guitar Synth and Vocals, Eileen on Vocals and Percussion, John on Drums and Percussion, Mike on Drums and Percussion, and Ruth on Vocals and Percussion.
<br><br>
<a id="websitelink" href="http://www.jerseysurecats.com/index.html">Visit their website here!</a>
</p>
</div>
</div>
</body>
<footer class="footer">
<nav class="foot">
<ul class="link-tree">
<li class="btn-lt">Facebook</li>
<li class="btn-lt">TikTok</li>
<li class="btn-lt">Popcorn Park Zoo</li>
</ul>
</nav>
</footer>
</html>
As #Dorvalla suggested the best solution is to use media queries. Since you designed desktop first you would need to add media queries for smaller screen sizes and add css that applies to each screen size.
w3schools has some good examples you can refer to when changing your css.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css3_flexbox_responsive.asp
This is a Lab I am doing with Udacity(Trading Cards). I am facing an error while submitting the project.
the problem showing is
The trading card page with styling has spacing between the border and card elements
There must be some padding around the outside border: expected 0 to be above 0
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>Building the Prototype</title>
</head>
<body>
<div id="container" class="pg">
<div id="card"class="animal-info">
<div class="animal-name">
<h1>FISH OF NEEDLES</h1>
</div>
<!-- photo credit: wikipedia.org, image taken by Ritik -->
<img id = "imgId"
src="https://kids.nationalgeographic.com/content/dam/kidsea/kids-core-objects/animals/pufferfish-closeup-cut.ngsversion.1556636497139.adapt.1900.1.jpg" width="300px" alt="Pufferfish">
<div id="interesting-fact">
<p id="interesting-fact">Pufferfish can inflate into a ball shape to evade predators. Also known as blowfish, these clumsy swimmers fill their elastic stomachs with huge amounts of water (and sometimes air) and blow themselves up to several times their normal size.</p>
<ul id="facts">
<li>
<span>Scientific Name</span>: Pufferfish
</li>
<li>
<span>Average Length</span>: Up to 3 feet
</li>
<li>
<span>Diet </span>: Carnivore
</li>
<li>
<span>Tactic </span>: Scientists believe that puffer fish developed this tactic as a method of the self-defense because they are poor swimmers that cannot escape from the danger quickly.
</li>
<li>
<span>Toxic </span>: One puffer fish contains enough toxin to kill 30 adult men.
</li>
<li>
<span>Average Lifespan</span>: 10 years
</li>
<li>
<span class="Habitat">Habitat</span>: puffer fish which live mostly in the warm waters of the Indian, Pacific and Atlantic Oceans
</li>
</ul>
<p id="summary">Bright orange with three distinctive white bars, clown anemonefish are among the most recognizable of all reef-dwellers.
They reach about 11 centimeters in length, and are named for the multicolored sea anemone in which they make their
homes.
</p>
</div>
</div>
</div>
</body>
</html>
css
.animal-info {border: thin solid gray;
padding:5px; font-style: italic; }
.Habitat {
font-weight: 700;
}
span {
font-weight: 700;
}
p {
padding: 20px 50px;
}
ul { list-style: none;
padding: 20px 50px;
}
img {
width: 300px;
padding: 5px;
}
#interesting-fact {
margin: 6px;
text-align:justify;
font-family: Calibri, Candara, "Segoe UI", Optima, Arial, sans-serif;
font-size: 13px;
padding: 0px 15px 0px 15px;
}
.pg {border: 1px solid gray;}
.animal-name{
padding: 5px;
}
h1 {pading: 5px;}
#imgId{
width: 300px;
}
#imgId{
padding: 5px;
}
someone can help me please
I created a file "index.html" and opened it on google chrome but a page doesn't show anything. I think that the problem is with my browser settings because that code worked before the system update. However, I can't find a solution. Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="The page presents TOP 5 TV serials. Check them out!"/>
<meta name="keywors" content="TOP 5, serials, the best, the most interesting, watch, share">
<title>The best serials - TOP 5!</title>
<style>
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
background-color: black;
color: white;
text-align: center;
}
#nav
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#content
{
float: left;
width: 640px;
padding: 20px;
}
#ad
{
float: left;
background-color: lightgray;
width: 140px;
min-height: 620px;
padding: 10px;
}
#footer
{
clear: both;
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="logo">
<h1>The best serials - TOP 5!</h1>
</div>
<div id="nav">
Dr House<br/>
True Detective<br/>
Breaking Bad<br/>
Big Bang Theory<br/>
The X Files<br/>
</div>
<div id="content">
House (also called House, M.D.) is an American television medical drama that originally ran on the Fox network for eight seasons, from November 16, 2004 to May 21, 2012. The show's main character is Dr. Gregory House (Hugh Laurie), a pain medication-dependent, unconventional, misanthropic medical genius who leads a team of diagnosticians at the fictional Princeton–Plainsboro Teaching Hospital (PPTH) in New Jersey.
<br/><br/>
The show's premise originated with Paul Attanasio, while David Shore, who is credited as creator, was primarily responsible for the conception of the title character. The show's executive producers included Shore, Attanasio, Attanasio's business partner Katie Jacobs, and film director Bryan Singer. It was filmed largely in Century City.
</div>
<div id="ad">
<img src="ad.jpg"/>
</div>
<div id="footer">
The best serials - TOP 5! © All rights reserved
</div>
</div>
</body>
</html>
Your title tag is broken.
Instead of <title>The best serials - TOP 5!</title=""> you should have <title>The best serials - TOP 5!</title>.
For more details: http://devdocs.io/html/element/title
And your doctype is also broken. Use <!DOCTYPE HTML> instead of <!DOCTYPE>.
For more details: https://developer.mozilla.org/en-US/docs/Glossary/Doctype
At the very top it has to be
<!DOCTYPE html>
<html>
not
<!DOCTYPE>
<html>
First off, I'm new and just started coding. For some reason, I cannot apply the CSS float class to the image. Anytime I try to load the float class, it simply will not load for me.
Here's what I have:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Lab3-2</title>
<style type="text/css">
body {
font-family: Arial,Verdana,Garamond;
font-size: 11pt;
}
h1,
h2,
h3 {
color: #19212d;
}
ul {
list-style-type: square;
}
a {
color: black;
}
a:hover {
background: #19212d;
color: white;
}
span {
color: #19212D;
font-weight: bold
}
.align-right {
float: right;
margin-left: 5px;
margin-right: 5px;
}
.align-left {
float: left;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<h1>Tierra Peak Hiking</h1>
<p>
<span>Tierra Peak Hiking</span> arranges a wide variety of day hikes for families, friends, and teams.
Imagine yourself hiking along a creek or viewing the beauty of the valley from the peak of a hiking trail. Stop by one of our offices.
</p>
<h3>Things to see:</h3>
<ul>
<li>Icicle Creek</li>
<li>View the Valley</li>
</ul>
<img class="align-left" src="/creek.jpg" width="259" height="387" alt="creek" />
<p>
Take a long hike along Icicle Creek and watch the majestic waters flow. Enjoy the soothing sounds of the rushing water while standing amidst the surrounding trees.
This hike is rated a double-boot because the climbing is moderately strenuous. However, the land immediately around the creek is flat and allows for frequent rest stops.
</p>
<br/>
</body>
</html>
Working on a project for my web design class and can't figure out where all this white space is coming from. Everything needs to touch each other yet I think I have extra padding somewhere but I just can't seem to pinpoint it. Here is all my code. Also, I'd like to know how to get rid of the bullets in my <ul> on the left. I've tried list-style-type:none but that doesn't seem to do anything.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SylviaGunter WEB-210 Project 6</title>
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>
<link rel="stylesheet"
href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE">
</head>
<body>
<div class="wrapper">
<body>
<div class="banner">
<h1>Best TV Ever</h1>
<div class="topnav">
<ul>
<li>50s</li>
<li>60s</li>
<li>70s</li>
<li>80s</li>
<li>90s</li>
</ul>
</div>
</div>
</body>
[insert menu toggle here]
[insert menu checkbox here]
<aside class="sidebar1">
Best Prime Time Shows
<ul>
<li>Alice</li>
<li>All In The Family</li>
<li>Barney Miller</li>
<li>Beverly Hillbillies</li>
<li>Bewitched</li>
<li>The Bob Newhart Show</li>
<li>The Brady Bunch</li>
<li>Gilligan's Island</li>
<li>Good Times</li>
<li>The Love Boat</li>
<li>Mary Tyler Moore</li>
<li>M*A*S*H</li>
<li>Maude</li>
<li>One Day At A Time</li>
<li>Petticoat Junction</li>
<li>Soap</li>
<li>Taxi</li>
<li>What's Happening</li>
<li>Welcome Back Kotter</li>
<li>WKRP In Cincinatti</li>
</ul>
</aside>
<article class="main">
<h2>The Genius of Krofft</h2>
<h3>H.R. Pufnstuff</h3>
<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>
<h3>Lidsville</h3>
<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>
<h3>The Bugaloos</h3>
<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>
<h3>Land of the Lost</h3>
<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>
<h3>Sigmund the Sea Monster</h3>
<p><img src="sigmund.jpg" alt="sigmund" height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>
</article>
<aside class="sidebar2">
Best Superhero Shows
<ul>
<li>Batman (1966)</li>
<li>The Bionic Woman (1976)</li>
<li>Electra Woman and Dyna Girl (1976)</li>
<li>The Greatest American Hero (1981)</li>
<li>The Incredible Hulk (1977)</li>
<li>Isis (1975)</li>
<li>Shazam! (1974)</li>
<li>The Six Million Dollar Man (1974)</li>
<li>Wonder Woman (1976)</li>
</ul>
</aside>
<div id="footer">
Stop watching TV and write some code!
</div>
</body>
</html>
body{
}
.banner h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
.topnav ul li {
display: inline-block;
float: right;
position: relative;
top: -120px;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 10px;
width: 100px;
font-size: 20px}
*{
-moz-box-sizing:border-box;
box-sizing: border-box;
}
.sidebar1{
float: left;
width: 265px;
padding: 0 20px 0 20px;
background: url(sidebar1background.jpg);
background-repeat: repeat-y;
height: 1000px;
}
.main{
float: left;
width: 60%;
padding: 0 20px 0 20px;
background-color: #d4ff80;
height: 1000px;
}
.sidebar2{
float: right;
width: 265px;
padding-right: 30px;
padding: 0 10px 0 20px;
background: url(sidebar2background.jpg)right top;
background-repeat: repeat-y;
height: 1000px;
list-style-type: none;
}
.sidebar1 a:link{
background-color: #c1c1a4;
border-radius: 20px;
border:1px solid white;
display: block;
background-size: 15px;
text-decoration: none;
width: 200px;
padding: 5px 5px 5px 35px;
margin-bottom: 10px;
color: darkgreen;
padding-right: 20px;
}
#footer{
clear: both;
height: 50px;
padding-top: 15px;
background-color: black;
color: white;
text-align: center;
}
Browsers have built-in styles adding some spaces (paddings & margins) by default, which are different across browsers.
You will need to do a reset css:
* {
padding: 0;
margin: 0;
}
About your bullets, you need to specify for both lists:
.sidebar1 ul, .sidebar2 ul {
list-style-type: none;
}
/* OR */
aside ul {
list-style-type: none;
}
To fix the sidebar bullet list use:
.sidebar1 ul{
list-style-type:none;
}