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)
Related
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 7 months ago.
I was styling my website and I choose Catamaran and Lato for headings and body respectively. However, the headers seem to inherit styles from the body which makes the font and the font size the same thing for my headings and paragraph. I was thinking that this is a problem of specificity but I cannot figure out what went wrong.
#import url("colors.css");
/*Global Styles
------------------------------------------------*/
html, body {
margin: 0;
padding: 0;
font-family: 'Catamaran', Sans-Serif;
font-size: 16px;
}
p{
color: var(--dark_text);
}
img{
margin: 0;
padding: 0;
}
h1 h2 h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
.content_wrap {
width: 800px;
margin: 0 auto;
padding: 60PX 0;
}
/*Navigation Bar
------------------------------------------------*/
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Projects
------------------------------------------------*/
/*Profile
------------------------------------------------*/
#profile{
background: var(--dark_red);
color: var(--white_text);
text-align: center;
}
#profile p{
color: var(--white_text);
}
#profile .button{
text-decoration:none;
color: var(--dark_text);
background: var(--light_green);
padding: 6px;
border: 2px var(--light_green);
border-radius: 6px;
display: inline-block;
}
#profile .button:hover{
text-decoration:none;
background: rgb(241, 227, 228,80);
}
/*Projects
------------------------------------------------*/
#projects{
background-color: var(--light_green);
}
#projects .button{
text-decoration:none;
color: var(--white_text);
background: var(--dark_red);
padding: 6px;
border: 2px var(--dark_red);
border-radius: 6px;
display: inline-block;
}
#projects .button:hover{
text-decoration:none;
background: rgb(96, 123, 125, 80);
}
/*Work Experience
------------------------------------------------*/
#work_experiences{
background-color: var(--light_red);
}
#work_experiences p{
margin: auto;
}
/*Drawings and Paintigs
------------------------------------------------*/
#drawings_paintings{
margin: 0;
padding: 0;
}
/*Footer
------------------------------------------------*/
footer{
margin: 0;
padding: 0;
background-color: var(--dark_green) ;
color: var(--white_text);
}
footer a{
color:seashell;
text-decoration: none;
}
<!DOCTYPE html>
<HTML lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="description"
content="Clycine Yuanqing Hao's personal website and some
funny stuffs : )">
<link href="https://fonts.googleapis.com/css?family=Catamaran|Lato:400i"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Clycine's personal website</title>
<script src="main.js"></script>
</head>
<BODY>
<H1 aria-label="Hello World"> <!--to add CSS code to make this displayed in random positions inside of a rectagle-->
<div class="grid" aria-hidden="true">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div> </H1>
<!--***************** TABLE OF CONTENTS *****************-->
<section id="nav">
<nav role="navigation">
<ul>
<li> About Me</li>
<li> Computer Science related</li>
<li> Drawings and Paintings</li>
<li> Funny Stuffs</li>
</ul>
</nav>
</section>
<!--***************** PROFILE ******************-->
<section id="profile">
<div class="content_wrap">
<h1>Clycine Yuanqing Hao </h1>
<picture>
<source media="(min-width:600px)"
srcset="pictures/cly/behindLilas815x929.JPG">
<source srcset="pictures/cly/behindLilas546x602.JPG">
<img src="pictures/cly/behindLilas815x929.JPG"
alt="Clycine next to a lilas tree"
width="163" height="186">
</picture>
<h2>CS student + Digital & Conventional Artist</h2>
<p>As a Computer Science student, I look forward to explore the world of innovation and
technology. I am interested in understanding how my knowledge and skills can apply
to real-life tech projects. </p>
<p>As an artist, I am passinoante to discover beauty and to express them in my own way,
with a cup of tea in my hand, of course.</p>
<a class="button" href="file/Yuanqing(Clycine)_Hao_Resume.pdf">Click here to see PDF of my resume</a>
</div>
</section>
<!--***************** PROJECT ******************-->
<section id="projects">
<div class="content_wrap">
<h3 class="title">Projects & Researches</h3>
<p>Biology research project (written report) - <i>L’hydroponie : une alternative à l’agriculture conventionnelle ?</i></p>
<p>Language: French</p>
<blockquote>"The main objectives of this research were to understand how different hydroponic systems
function and what equipment they require, to acknowledge this technique's limits and
advantages, to explore the role played by nutrients in plants' growth, and ultimately, to
determine if hydroponics can be an alternative to conventional agriculture."
(Boutiba & Hao, 2019)</blockquote>
<a class="button" href="file/rapport_final_biologie.pdf">PDF of the research</a>
</div>
</section>
<!--***************** WORK EXPERIENCES ******************-->
<section id="work_experiences">
<div class="content_wrap">
<h3 class="title">Work Experiences</h3>
<p>Private French Tutor</p>
<p>01/2022 to 12/2022</p>
<p>Individuals – Montréal, Québec</p>
<ul>
<li>Offered tutoring for intermediate French learners.</li>
<li>Helped students learn more about Québec culture through practical conversations.</li>
<li>Integrated French lessons into real-life scenarios and role-playing.</li>
</ul>
<p>Project Intern</p>
<p>06/05/2022</p>
<p>Soteria120 – Calgary, Alberta</p>
<ul>
<li>Obtained real-work experience by participating in
a user experience testing for website in Soteria120</li>
<li>Collaborated with a team of 3 students and program manager
that included data entry (input validations), design validations,
user-experience testing, and quality assurance report writing.</li>
</ul>
</div>
</section>
<footer>
<div class="content_wrap">
Back to the table of contents
McGill University
<p><pre>Phone number: (819)815-3589 Email: clycinehao#gmail.com </pre> </p>
</div>
</footer>
</BODY>
</HTML>
Thank you so much !
The following applies the contained CSS rules to the entire HTML Document (via the html tag):
html, body {
...
}
Where you attempted to apply styling rules to <h1>, <h2>, and <h3> elements, you instead applied the rules to all <h3> that are descendants of <h2> elements that are, in turn, descendants of <h1> elements.
h1 h2 h3 {
...
}
Instead, separate each tag with a comma (,) to apply the rules as desired, as shown below:
h1, h2, h3 {
...
}
Use
h1, h2, h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
instead of
h1 h2 h3{
...
}
(Separate the heading (<h1>, <h2>, <h3>) tags using commas (,).)
Whatever you apply to the parent is also applied to the child, unless you specifically change that attribute for the child
HTML Tree Generator of extension chrome is good tools for tree structure grasp
So I'm working on an assignment that builds on itself at the end of every chapter in my textbook, and my professor took points off for the header image and the footer not being aligned correctly with the main content of my page, but I can't seem to figure out how to fix this problem.
body {
background-color: #3F2860;
color: #3F2860;
font-family: Verdana, Arial, sans-serif;
}
header {
background-image: url(lilyheader.jpg);
height: 150px;
background-repeat: repeat-y;
position: relative;
}
h1 {
padding-top: 50px;
padding-left: 2em;
}
nav {
font-weight: bold;
padding: 1em;
float: left;
width: 160px;
}
nav a {
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border-style: outset;
border-color: #CCCCCC;
padding: 1em;
margin-bottom: 1em;
}
nav a:link {color: #3f2860;}
nav a:visited {color: #497777;}
nav a:hover {color: #a26100; border: 3px inset #333333;}
nav ul {
list-style-type: none;
padding-left: 0;
}
.studio {
font-style: italic;
}
footer {
background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;
}
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
min-width: 1200px;
max-width: 1480px;
}
main {
padding-left: 2em;
padding-right: 2em;
display: block;
margin-left: 170px;
padding-top: 1em;
}
* {
box-sizing: border-box;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
}
header,nav,main,footer {display: block;}
<head>
<meta charset="UTF-8">
<title>Path of Light Yoga Studio</title>
<link rel="stylesheet" type="text/css" href="yoga.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<! [endif]-->
</head>
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<main>
<div id='wrapper'>
<nav>
<ul>
<li>Home</li>
<li>Classes</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
</nav>
<img class='floatleft' src='yogadoor2.jpg' alt="Yoga Door">
<h2>Find Your Inner Light</h2>
<p><span class="studio">Path of Light Yoga Studio</span> provides all levels of yoga practce in a tranquil, peaceful envirionment. Whether you are new to yoga or an experienced practitioner, our dedicated instructors can develop a practice to meet your needs. Let your inner light shine at the <span class="studio">Path of Light Yoga Studio</span>.</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div class='clear'>
Path of Light Yoga Studio<br>
612 Serenity Way<br>
El Dorado, CA 96162<br><br>
888-555-5555<br><br><br>
</div>
</div>
<footer>
Copyright © 2016 Path of Light Yoga<br>
</footer>
</main>
I think I formatted that correctly (first time using this site).
Alright... So there's a lot of issues with your CSS and you also have invalid HTML. HTML requires a body tag... Which you don't have. Browsers were probably adding this because it's something they do. They take invalid html and guess what the developer was trying to build.
So first of, keep in mind, the base of all html pages is as following:
<html>
<head>
<title>title</title>
</head>
<body>
</body>
</html>
Next up, there was a lot stuff going on with CSS. The biggest thing I saw involved floats. Floats are a way to easily make a mess. They have their uses; but, usually there is a better way now a days.
Now looking at your alignment problem at its roots...
From what I understand, you want your header and footer to be the same width as the main content and be the same distance from the left of the screen.
You setup your main content to use #wrapper div and did aligment with that. This is fine. The problem is how you set stuff up is more directed to a webpage where the header and the footer are glued to top/bottom of the page, and full up the width completely.
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
<footer>
</footer>
</main>
</body>
</html>
Having the alignment of the page set on the wrapper means it can't really be applied to the footer and header that well. It will get really messy. Of course this isn't a problem if you the header and footer just take up all the width at the top and bottom of the page.
What did I do to fix this?
First off, let's clean up your HTML. It would make more sense to break your page into 3 pieces. Header, Main, Footer. Right now your footer is inside your main.
So what I did is this:
<html>
<head>
<title>title</title>
</head>
<body>
<header>
</header>
<main>
<div id="wrapper">
//This guy had the common margin auto with a width percentage.
</div>
</main>
<footer>
</footer>
</body>
</html>
Next up, I moved the alignment. So instead of having this rule:
#wrapper {
width: 80%;
margin-right: auto;
margin-left: auto;
background-color: #F5F5F5;
}
I have these rules:
header, main, footer {
width: 80%;
margin-right: auto;
margin-left: auto;
}
#wrapper{
background-color: #F5F5F5;
}
By doing this, we the alignment rules is being applied to the 3 elements inside the body tag. I do NOT apply to this the body tag itself; because, we should avoid changing the width of the body.
Finally, you also had some weird padding on the main element:
main {
padding-left: 2em;
padding-right: 2em;
}
I don't know why this is here; but, I moved that to the body.
body {
padding-left: 2em;
padding-right: 2em;
}
By placing it on the body it will affect the header, main and footer.
Those are the changes to fix alignment. In addition to those changes I removed various rules and statements that might have been causing issues or not... I do not believe these will have any impact on your page; but, just in case if they were required for some unknown reason you should take a look at your requirements and ensure everything is still correct.
Here is the JSFiddle
I'm trying to place an img in a section class (.col) of a column in my layout and the image doesn't show up. The background color doesn't show up in .col either. I am learning CSS and working on my 1st project to layout a webpage. I'm using Aptana and Firefox. Thank you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>fixed layout</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans: 300,600,700&subset=latin,greek' rel='stylesheet' type='text/css'>
<style>
aside, article, section, header, footer, nav {
display: block;
}
div, section, article, h1, h2, h3, p {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
html {
background: rgb(206, 193, 167);
}
body {
background: #fff;
font: 100% 'Open Sans', Arial, Helvetica, sans-serif;
width: 960px;
margin: 0 auto 2em;
}
/*layout*/
header {
background:rgb(0,114,143);
margin-bottom: 16px;
height: 48px;
padding: 36px 0 0 36px;
}
.col1 {
float: left;
padding-left: 48px;
width: 112px;
background:rgb(126,208,224);
}
.col2 {
float: left;
padding-right: 48px;
padding-left: 48px;
width: 464px;
}
.col3 {
float: left;
padding-right: 48px;
width: 112px;
font-size: 140%;
line-height: 1.6;
}
footer {
height: 80px;
clear: both;
background-color: rgb(100,98,102);
}
img {
float: left;
margin: 0 1em 0 0;
}
/*typography*/
p {
font-weight: 300;
font-size: 1em;
line-height: 1.5;
margin-bottom: 1em;
}
</style>
</head>
<body>
<header>
</header>
<section class="col1">
<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
</section>
<section class="col2">
<p>My father was a St. Bernard, my mother was a collie, but I am a Presbyterian.<p>
<p>My mother had a fondness for such; she liked to say them, and see other dogs look surprised and envious, as wondering how she got so much education.</p>
<p>If there was a stranger he was nearly sure to be suspicious, and when he got his breath again he would ask her what it meant. And she always told him.</p>
<p>The others were always waiting for this, and glad of it and proud of her, for they knew what was going to happen, because they had had experience. </p>
<p>With a view to action experience seems in no respect inferior to art, and men of experience succeed even better than those who have theory without experience.</p>
</section>
<aside class="col3">
<p>But no harm was done; the others rolled and barked too, privately ashamed of themselves for not seeing the point </p>
</aside>
<footer></footer>
</body>
</html>
Where is the image on the hard drive relative to the root of your web server? It's likely that the file isn't found because the _images folder is at the root, but the url you have to load it is a relative url. If that's the case, changing the url to be absolute would fix it.
<img src="/_images/ny_08.2.jpg" width="112" height="112" alt="NY City">
The beginning forward slash is the change.
Relative urls start from the current folder, so the existing url is actually looking for http://127.0.0.1:8020/grid_website.htm/_images/ny_08.2.jpg and what the change I show has done is make it look at http://127.0.0.1:8020/_images/ny_08.2.jpg.
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;
}
I'm very new to html and css so feel free to critique any bad practices you see in the code below...
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.
CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>History</li>
<li>Houses</li>
<li>Local Business</li>
<li>Events</li>
<li>Contacts</li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. Non-exhaustive list:
1) You need a doctype. Otherwise, browsers will render items in a non-standard way.
Example:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div> ending after the </body> tag. This is invalid.
Fix:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br> in <div id="banner">.
Fix:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.
Centering code that goes in your css (replaces existing):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.
Font size with em:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following:
in body selector:
text-align: center;
in banner:
margin-right: auto;
margin-left: auto;
In regard to font size try using em or % sizing.
Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.