Navigation hover buttons not fully colored when mouse hovers over them. I've tried changing the width to 100% which I thought would fix it, however it did not. I've attempted to look for a few similar problems and solutions, however all of the solutions I found did not fix the problem, so I've decided to ask it personally. Thoughts?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Sunny Acres</title>
<script src="modernizr-1.5.js"></script>
<link href="sa_layout.css" rel="stylesheet" type="text/css" />
<link href="sa_styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
section > p:first-of-type:first-line {
text-transform: uppercase;
}
section > p:first-of-type:first-letter {
font-size:250% font-family:'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<header>
<h1>
<img src="salogo.png" alt="Sunny Acres" />
</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>Autumn Fun
</li>
<li>Scary Good
</li>
<li>Meet the Animals
</li>
<li>For your Tastebuds
</li>
</ul>
</nav>
<section>
<header>
<h1>Welcome</h1>
</header>
<img src="photo1.jpg" alt="home page photo" id="promoimage" />
<p id="firstp">There's always something happening at Sunny Acres. With the coming of fall, we're gearing up for our big AutumnFest and Farm Show. If you haven't visited our famous Corn Maze, be sure to do so before it gets torn down on November 5. This year's maze is bigger and better than ever.</p>
<p>Farms can be educational and Sunny Acres is no exception. Schools and home-schooling parents, spend an afternoon with us at our Petting Barn. We have over 100 friendly farm animals in a clean environment. Kids can bottle feed the baby goats, lambs, and calves while they learn about nature and the farming life. Please call ahead for large school groups.</p>
<p>When the sun goes down this time of year, we're all looking for a good fright. Sunny Acres provides that too with another year of the Haunted Maze. Please plan on joining us during weekends in October or on Halloween for our big Halloween Festival.</p>
<p>Of course, Sunny Acres is, above all, a <em>farm</em>. Our Farm Shop is always open with reasonable prices on great produce. Save even more money by picking your own fruits and vegetables from our orchards and gardens.</p>
<p class="closing">We all hope to see you soon, down on the farm.
<br />— Tammy & Brent Nielsen</p>
<h2>Hours</h2>
<ul>
<li>Farm Shop: 9 am - 5 pm Mon - Fri; 9 am - 3 pm Sat</li>
<li>The Corn Maze: 11 am - 9 pm Sat; 11 am - 5 pm Sun</li>
<li>The Haunted Maze: 5 pm - 9 pm Fri & Sat</li>
<li>Petting Barn: 9 am - 4 pm Mon - Fri; 11 am - 3 pm Sat & Sun</li>
</ul>
<h2>Directions</h2>
<ul>
<li>From Council Bluffs, proceed east on I-80</li>
<li>Take Exit 38 North to the Drake Frontage Road</li>
<li>Turn right on Highway G</li>
<li>Proceed east for 2.5 miles</li>
<li>Sunny Acres is on your left; watch for the green sign</li>
</ul>
</section>
<footer> <address>
Sunny Acres ☀
Tammy & Brent Nielsen ☀
1977 Highway G ☀
Council Bluffs, IA 51503
</address>
</footer>
</body>
</html>
CSS:
#font-face {
font-family: 'NobileRegular';
src: url('nobile-webfont.eot');
src: local('☺'),
url('nobile-webfont.woff') format('woff'),
url('nobile-webfont.ttf') format('truetype'),
url('nobile-webfont.svg#webfontsKo9tqe9') format('svg');
}
/* body styles */
body {
background-color: white;
font-family: NobileRegular, Verdana, Geneva, sans-serif;
line-height: 1.4em;
}
/*heading styles */
section h1 {
background-color: rgb(125, 186, 240);
color: white;
font-size: 1.7em;
letter-spacing: 0.4em;
text-indent: 1em;
line-height: 1.8em;
}
h2{
background-color: rgb(0,154,0);
color: white;
color : rgba(255, 255, 255, 0.8);
letter-spacing: 0.4em;
text-indent: 1em;
line-height: 1.8em;
}
/* navigation styles */
nav ul {
list-style-type: none;
padding-left: 0.5em;
background-color: rgb(125,186,240);
line-height: 3.5em;
width:none;
float:none;
}
nav ul li a {
color: white;
text-decoration: none;
width:100%;
float:none;
}
nav ul li:hover {
background-color: rgb(83,142,213);
width:none;
float:none;
}
/*nav ul li:first-of-type {
text-transform: uppercase;
}
*/
/* section styles */
section p.closing {
color: rgb(0,165,0);
text-align: right;
}
section h2+ul {
list-style-image: url(arrow.png);
}
/* footer styles */
footer address {
background-color: rgb(55,102,55);
color: white;
color: rgba(255,255,255,0.8);
font: normal small-caps 0.8em/4em 'Times New Roman', Times, serif;
text-align: center;
}
remove padding from <ul> and add it to <li>
here is the fiddle
Change this two styles you will get the desired output.
/* navigation styles */
nav ul {
list-style-type: none;
padding-left: 0.5em;
background-color: rgb(125,186,240);
line-height: 3.5em;
PADDING-LEFT:0;
width:none;
float:NONE;
}
nav ul li a {
color: white;
text-decoration: none;
PADDING-LEFT:10PX;
width:100%;
float:none;
}
Related
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 am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
I am trying to do some projects in my HTML book, and for one exercise I need to move embedded css to an external stylesheet before continuing on in the exercises. For some reason the external CSS is not being picked up even though in previous exercises I have never had this problem.
This is the html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lighthouse Island Bistro</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lighthouse.css" media="screen">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header role="banner">
<h1>Lighthouse Island Bistro</h1>
</header>
<nav role="navigation">
<ul>
<li>Home</li>
<li>Menu</li>
<li>Map</li>
<li>Contact</li>
</ul>
</nav>
<main role="main">
<h2>Locally Roasted Free-Trade Coffee</h2>
<p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
<h2>Specialty Pastries</h2>
<p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
<img src="lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
<h2>Lunchtime is Anytime</h2>
<p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
<h2>Panoramic View</h2>
<p>Take in some scenery!</p>
<p>The top of our lighthouse offers a panoramic view of the countryside.
Challenge your friends to climb our 100-stair tower.</p>
</main> <!-- end of main content -->
<footer role="contentinfo">Copyright © 2016
</footer>
</div> <!-- end of wrapper -->
</body>
</html>
And the CSS
header, nav, main, footer, figure, figcaption { display: block; }
* {box-sizing: border-box; }
body { font-family: Verdana, Arial, sans-serif;
background-color: #00005D;
}
#wrapper { background-color: #b3c7e6;
color: #000066;
width: 80%;
margin: auto;
min-width:850px;
}
header { background-color: #869dc7;
color: #00005D;
font-size: 150%;
padding: 10px 10px 10px 155px;
background-image: url(lighthouselogo.jpg);
background-repeat: no-repeat;
}
nav { float: right;
width: 150px;
letter-spacing:0.1em;
font-weight: bold;
}
nav ul { list-style-type: none;
margin: 0;
padding: 0;
}
nav a { text-decoration: none;
display: block;
padding: 20px;
background-color: #b3c7e6;
border-bottom: 1px solid #ffffff;
background-image: url(sprites.gif);
background-repeat: no-repeat;
background-position: right 0;
}
nav a:link { color: #ffffff; }
nav a:visited { color: #eaeaea; }
nav a:hover { background-color: #eaeaea;
color: #869dc7;
background-position: right -100px; }
main { background-color: #ffffff;
color: #000000;
padding: 10px 20px;
overflow: auto;
}
h1 { margin-bottom: 20px; }
h2 { color: #869dc7;
font-family: arial, sans-serif;
}
#floatright { margin: 10px;
float: right;
}
footer {font-size:70%;
text-align: center;
padding: 10px;
background-color: #869dc7;
clear: both;
}
All I am trying to do at this point is get my HTML to recognize the external stylesheet so I can move on to a farther point. Any aid or guidance to finding the answer to this exercise would be greatly appreciated.
Try opening your web browser's Developer Tools console and reloading your webpage while watching the Console panel. You might see an error that will give you a hint as to why the CSS didn't load - perhaps the file path wasn't found.
Is your stylesheet in the same folder? If its in a different folder do ./foldername/lighthouse.css
Maybe you have your css inside of another Folder so you must be write on your link something like this /yourfolder/lighthouse.css
Forgive my ignorance if this sounds stupid, but it works in chrome but not IE(or edge). I assume there is a line of code that was in the HTML that would explain why (im pretty new to this)
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;
}