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;
}
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
I have watched tutorials and checked on this site but no matter what I do I
can't get my page to be responsive for mobile. I want the image on top and
the text in a nice paragraph below. I am new to html and css, I don't know
any others. The code I'm adding is the original before I tried to make it
responsive.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="merchandise.css"
</head>
<div class="header">
<img class="banner-image" src="ccc.png" width="100%" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
</style>
<body>
<img src="british-shorthair-3055340_1920.jpg" width:"400" height="400"
class="float-img">
<style>
p {margin-left: 250px; margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
</style>
<font size="5" color="#00b8e6" font-align: center >
<p>
Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time
playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.
</p>
</text>
</body>
</head>
</html>
body {
margin: 0;
padding: 0;
font-family: 'arial', serif;
}
.nav {
background-color:#ffb6c1;
color:#ffffff
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav > li {
display: inline-block;
padding-right: 50px;
font-size: 16px;
}
.nav> li > a {
text-decoration: none;
color: #ffffff
}
.nav > li > a:hover {
color: #C0C0C0
}
.banner {
width: 100;
display: block;
}
.banner > .bannerimage {
width: 100;
height: 100;
display: block;
}
ul.nav{
margin: 0;
}
div.left {
width: 50%;
padding: 0 0 0 5%;
margin-right: 5px;
margin-top: 10px;
float: left}
div.right {
width: 50%;
padding: 0 5% 0 0;
float: right}
p {
padding-top: 25px;
text-align: left;
}
Fixing your HTML first!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="merchandise.css">
<style>
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
}
p {
margin-left: 250px;
margin-top: 40px;
margin-right: 20px;
line-height: 38px;
}
#media (max-width: 1024px) {
body img {
max-width: 100px;
height: 100px;
}
body div img {
max-width: 50px;
height: 50px;
}
}
</style>
</head>
<body>
<div class="header">
<img class="banner-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width="1365px" height="150px">
</div>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Enter to Win</li>
<li>Merchandise</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg/1160px-Mauritius_Road_Signs_-_Warning_Sign_-_Road_works.svg.png" width:"400" height="400">
<div class="float-img">
<p>Step into a magical world of cats at Cat Corner Cafe. Enjoy eating cute
cat themed foods and drinks in a relaxing environment. Spend some quality
time playing with some feline friends. Enjoy watching the cats have fun in an
environment made just for them. All cats will be adoptable and provided by
the local shelter. Cat Corner Cafe will also have fun events like cat yoga,
art with cats and game days. Come by yourself, with your meetup group or
have your next birthday party here! We look forward to seeing you. To be
alerted when we open please sign up with your email on our homepage.</p>
</div>
</body>
</html>
Now for the right solution without framework use #media Queries. Do your homework here .
Now for you the easy Solution to get this responsive is looking into using an HTML framework ,such as the famous Bootstrap, which you wil have to learn allot to fully understand the power behind it but Bootstrap has good documentation to get you going.
You're gonna have to fix your code (html stuff) first and then learn to use media queries.
With media queries, you can target different devices and write specific css that applies to only those devices.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
DO NOT LEARN A FRAMEWORK JUST YET
You should build your knowledge of HTML and CSS first and have a firm understanding of both of them before learning any framework. This will insure that when you learn any framework, you'll be able to make the framework work the way you want.. If you start relying on a framework just yet, you will work according to the framework
Like a previous answer
You're gonna have to fix your code (html stuff) first
But, if for now you don't want to invest a lot of time learning about media queries or code a few rules in CSS, I'd suggest you use a framework and skip the design part, while still making your page look minimally presentable with a tidy look.
I recommend you give a look at Tacit CSS framework. It's ideal for people with zero CSS and design skills and it doesn't involve creating CSS rules from the ground up, you just worry about your HTML code and you need to include Tacit's CSS file.
In order for an image to be considered as a solid object in css it must have the "display: block;" attribute. You might need to also set the same style property to the text paragraph.
Try the following:
.float-img {
float: left;
margin-right: 10px;
margin-left: 5px;
margin-bottom: 0px;
margin-top: 10px;
padding: 2px;
border: none;
border-color: #ffb6c1ff;
display: block;
}
Explanation:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_display
Take a look at bootstrap http://getbootstrap.com/ it is html/css framework for making responsive websites. Check out how to make a grid layout.
You can dig into media queries yourself but that is not exactly needed if you use a framework https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Use a CSS framework. I will recommend bootstrap CSS framework. It will handle all of that for you. UIkit and Foundation are good alternatives too.
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)
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.
Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%