Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Cascading Style Sheets _ Problems with CSS
Posted by: Neoed Sep 16 2013, 01:46 PM
Hello, I'm trying to make this page right here:
http://books.google.com/books?id=Xe8JAAAAQBAJ&pg=PA216&lpg=PA216&dq=HTML+and+CSS+mountain+wheels&source=bl&ots=aKk2wJTKER&sig=qUvOEt_YfLlXQw448oRfp3WbR4k&hl=en&sa=X&ei=7lA3UviuIo2uqAHvlIGYBg&ved=0CGAQ6AEwCA#v=onepage&q=HTML%20and%20CSS%20mountain%20wheels&f=false
But the CSS I entered is not forming right to display that page with my HTML. I'm sure that I am missing something from the CSS, but I'm still new to this and not sure what. Any pointers would be appreciated.
HTML:
<html>
<head>
<!--
New Perspectives on HTML and CSS
Tutorial 3
Case Problem 2
Bike the Mountains Tour
-->
<meta charset="UTF-8" />
<title>Bike the Mountains Tour</title>
<script src="modernizr-1.5.js"></script>
<link href="mw_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="pageheader">
<h1> <img src="mwlogo.png" alt="Mountain Wheels" /></h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Route Maps</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Lodging</a></li>
<li><a href="#">Meals</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Equipment</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<header id="articleheader">
<h1>Bike the Mountains Tour</h1>
</header>
<section id="leftsection">
<p>
The Bike the Mountains Tour rises from the town of Littleton,
Colorado and explores the Colorado Front Range. Our tour
crosses the Continental Divide twice, giving you the
opportunity to bike the highest paved roads in the
United States. This tour is a classic showcase of Colorado's
Rocky Mountain scenery.
</p>
<blockquote>
<p>The Bike the Mountains Tour is <i>amazing</i>. I highly
recommend it and would gladly return.
</p>
<cite>— Steve H.</cite>
</blockquote>
<p>Not designed for the weekend cyclist, this tour is offered
only for those fit enough to ride high mountain passes. We
provide sag wagons and support. Your lodging and meals are
also part of the registration fee.
We guarantee tough climbs, amazing sights, sweaty jerseys,
and lots of fun.
</p>
<p>This is the seventh year we've offered the Bike the Mountains
Tour. It is our most popular tour and riders are returning
again and again. Our experienced tour leaders will be there
to guide, help, encourage, draft, and lead you
every stroke of the way. Come join us!
</p>
</section>
<section id="rightsection">
<h1>Itinerary</h1>
<h2>Day 1</h2>
<p>We start from the foothills above Littleton, Colorado,
promptly at 9am. The first day is a chance to get
your legs in shape, test your gearing, and prepare for
what's to come.
</p>
<h2>Day 2</h2>
<p>Day 2 starts with a climb up Bear Creek Canyon to Lookout
Mountain, followed by a swift and winding descent into the
town of Golden. Refresh yourself at the famous Coors Brewery.
</p>
<h2>Day 3</h2>
<p>Day 3 takes you along the Peak to Peak Highway. This
55-mile route showcases the mountains of the Front Range,
providing amazing vistas from Golden Gate Canyon State Park
to Rocky Mountain National Park.
</p>
<h2>Day 4</h2>
<p>Now for the supreme challenge: Day 4 brings some real
high-altitude cycling through Rocky Mountain National Park
and up Trail Ridge Road. It's an amazing ride, high above
timberline, topping out at over 11,000 feet.
</p>
<h2>Day 5</h2>
<p>We start Day 5 on the west side of the Continental Divide.
From Grand Lake, you'll bike to Winter Park and then over
Berthoud Pass, and back to the eastern side of
the Continental Divide.
</p>
<h2>Day 6</h2>
<p>On Day 6 we ride
back to Littleton over Squaw Pass and Bear Creek and then
enjoy a celebratory dinner as we share memories of a great
tour.
</p>
</section>
<footer id="footer address">
<address>
Mountain Wheels •
Littleton, CO 80123 •
(303) 555 - 5499
</address>
</footer>
</body>
</html>
CSS:
body {
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* header style */
#articleheader id {
background-color: rgb(125, 120, 89);
font-size: 18px;
letter-spacing: 7px;
text-align: center;
font-weight: normal;
line-height: 3em;
}
/* nav styles */
nav ul {
background-color: rgb( 125, 120, 89);
line-height: 3em
list-style-type: none;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li:hover {
background-color: rgb(131, 121, 36);
}
section h1+ul
{ list-style-image: url(wheelmarker.png);
}
/* left section styles */
#leftsection id {
font-size: 22px; }
p:first-child{
text-transform: uppercase;
}
blockquote {
background-color: rgb(131, 121, 36);
font-color: white;
font-size: 16px;
font-family: Comic Sans MS, Times New Roman, Cursive
}
p:before, p:after {
content: '"';
}
/* right section styles */
#rightsection id {
font-color: grey;
font-size: 14px;
text-align: justify;
}
section h1 {
font-size: 22px;
letter-spacing: 3px;
text-align: center;
font-weight: normal;
]
section h2 {
font-size: 18px;
text-align: right;
font-weight: normal;
}
/* Footer styles */
#footer address id {
font-size: 16px
font: normal;
text-align: center;
}
Posted by: pandy Sep 16 2013, 02:51 PM
Off to the CSS checker you go. 
http://jigsaw.w3.org/css-validator/
24 nav ul Value Error : line-height attempt to find a semi-colon before the property name. add it
51 blockquote Property font-color doesn't exist : white
63 #rightsection id Property font-color doesn't exist : grey
81 section h1 Parse Error ] section h2 { font-size: 18px; text-align: right; font-weight: normal; }
87 #footer address id Value Error : font-size attempt to find a semi-colon before the property name. add it
It's 'color', not 'font-color'. You lack a semicolon and you use a square bracket instead of a curly brace at one spot.
You only have one HTML error, but visit http://validator.w3.org/ and correct it.
That won't make columns appear, but...
Posted by: Neoed Sep 16 2013, 07:04 PM
Thanks for the help, hopefully I can make this work now.
Posted by: Neoed Sep 18 2013, 02:23 PM
I'm still having problems getting it into columns. This is some of the changes I've made to the CSS so far, any hints are welcomed:
/*
New Perspectives on HTML and CSS
Tutorial 3
Case Problem 2
Mountain Wheels Text and Color Style
*/
/* Body styles */
body {
background-color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* header style */
# articleheader id {
background-color: rgb(125, 120, 89);
font-size: 18px;
letter-spacing: 7px;
text-align: center;
font-weight: normal;
line-height: 3em;
float:left;
width:240px;
}
/* nav styles */
nav ul {
background-color: rgb( 125, 120, 89);
line-height: 3em;
list-style-type: none;
width: 8%;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li:hover {
background-color: rgb(131, 121, 36);
list-style-image: url(wheelmarker.png);
}
/* left section styles */
#leftsection id {
font-size: 22px;
float: center;
width:720px}
p:first-child {
text-transform: uppercase;
}
blockquote {
background-color: rgb(131, 121, 36);
color: white;
font-size: 16px;
padding: 15px;
border-radius: 15px;
width: 190px;
font-family: Comic Sans MS, Times New Roman, Cursive
}
p:before, p:after {
content: '"';
}
/* right section styles */
#rightsection id {
color: grey;
font-size: 14px;
text-align: justify;
}
section h1 {
font-size: 22px;
letter-spacing: 3px;
text-align: right;
font-weight: normal;
}
section h2 {
font-size: 18px;
text-align: right;
font-weight: normal;
}
/* Footer styles */
# footer address id {
font-size: 16px;
font: normal;
text-align: center;
}
Posted by: pandy Sep 18 2013, 03:14 PM
I can't see what you've done to create columns. Help?
Also, you use 'id' as if it were the name of an element in several selectors, for example here.
Did you mean something else maybe?
Posted by: Neoed Sep 18 2013, 03:23 PM
I guess the better term is column line up, it should be the navigation list to the left, text in the center with the quoteblock in the middle and the day line up to the right.
But what I am getting is navigation list to the left at the top, under that is the text which is running through out the page instead of the center of the page.
Posted by: pandy Sep 18 2013, 03:44 PM
Call it what you want, but what have you done to make that happen? And then there is the matter of that element you call 'id'. There is no such element. What did you mean those selectors to be?
Posted by: Neoed Sep 18 2013, 03:59 PM
the id is referring to the sections of code I need to edit individually. I have linked them into sections of the HTML.
As for what to make that happen so the spacing or lining is right that is the problem. I want to say I need to add some extra code to the body in the CSS but I am unsure what.
Posted by: pandy Sep 18 2013, 04:54 PM
I didn't understand that.
This
matches an element called 'id' that's contained in another element with the id 'leftscection'. That is, something like this.
<id>...</id>
</div>
There is no such thing, neither in HTML nor in your markup.
Posted by: Neoed Sep 18 2013, 06:12 PM
That's because the id is nested in the tags themselves. This is how I have it in the HTML:
<section id="leftsection">
and it works. No need for all that div code.
Posted by: Darin McGrew Sep 18 2013, 08:51 PM
#leftsection id {...}
selects
<section id="leftsection">
<id>...</id>
</section>
If you want to select
<section id="leftsection">...</section>
then you should use just
#leftsection {...}
Posted by: Neoed Sep 18 2013, 09:32 PM
Not sure where I mention that I was having issues connecting to the sections but that isn't the issue here.
I need to move the text up and center it as shown here:
http://books.google.com/books?id=Xe8JAAAAQBAJ&pg=PA216&lpg=PA216&dq=HTML+and+CSS+mountain+wheels&source=bl&ots=aKk2wJTKER&sig=qUvOEt_YfLlXQw448oRfp3WbR4k&hl=en&sa=X&ei=7lA3UviuIo2uqAHvlIGYBg&ved=0CGAQ6AEwCA#v=onepage&q=HTML%20and%20CSS%20mountain%20wheels&f=false
but this is what I am getting:
http://i132.photobucket.com/albums/q39/neoed/htmlexample_zpsfb551361.png
Posted by: pandy Sep 19 2013, 02:33 AM
You need to understand how CSS works. You don't seem very interested in that.
You say your selectors with 'id' in them work. They do not. Listen to Darin and read this.
http://htmlhelp.com/reference/css/structure.html
Posted by: Neoed Sep 23 2013, 01:22 PM
They do work, they are set up exactly how Darin gave his example and they are set up like shown in the link.
If they didn't work none of my HTML page would have been formatted.
Posted by: pandy Sep 23 2013, 01:42 PM
Yes it would and it is. Those selectors only affects small sections of the site. Or rather they would if they worked. In most cases you have other styles in effect for elements inside those directly targeted by the selectors with 'id' and that's the styling you see.
Again, a selector constructed like this:
matches a HTML element called BAR that's inside another element with the id 'foo'. It does not match the element with the id foo itself.
Do you want to learn how this works or do you want to keep guessing?
Posted by: Frederiek Sep 24 2013, 02:16 AM
Selectors are quite well explained in a series of articles starting at http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ .
Posted by: TBERGER Sep 19 2014, 02:09 PM
#leftsection id {...}
selects
<section id="leftsection">
<id>...</id>
</section>
If you want to select
<section id="leftsection">...</section>
then you should use just
#leftsection {...}
I am having a whole host of issues as well with this project. It asks to name different elements within the document using the id attribute. I think you put them right in the tag and for this project in the bmtour.htm. so for example it states to go to the first header element and name it pageheader. so would this be correct:
<header>
<h1 id="pageheader"><img src="mwlogo.png" alt="Mountain Wheels" /></h1>
</header>
so you then have to do this for the second header element and then for the first section element and second section element you name them leftsection rightsection respectively. later on it asks you to for the articleheader id to set the font size remove bold face set kerning to 7px and center the text.
Question 2 parts, how do you write the line to link to the id and then would you write this in the css sheet or would you write it in the html document as an in bedded style if you only wanted to do it for that page. This project is only making one page so I would imagine you could write the line on the style sheet?
For my first question would it be #pageheader {.....}
Posted by: pandy Sep 19 2014, 02:25 PM
I am having a whole host of issues as well with this project. It asks to name different elements within the document using the id attribute. I think you put them right in the tag and for this project in the bmtour.htm. so for example it states to go to the first header element and name it pageheader. so would this be correct:
<header>
<h1 id="pageheader"><img src="mwlogo.png" alt="Mountain Wheels" /></h1>
</header>
No. If I understand the problem right this would be what is asked for.
Question 2 parts, how do you write the line to link to the id and then would you write this in the css sheet or would you write it in the html document as an in bedded style if you only wanted to do it for that page. This project is only making one page so I would imagine you could write the line on the style sheet?
See http://htmlhelp.com/faq/html/links.html#named-anchor .
Posted by: TBERGER Sep 20 2014, 01:09 PM
I am having a whole host of issues as well with this project. It asks to name different elements within the document using the id attribute. I think you put them right in the tag and for this project in the bmtour.htm. so for example it states to go to the first header element and name it pageheader. so would this be correct:
<header>
<h1 id="pageheader"><img src="mwlogo.png" alt="Mountain Wheels" /></h1>
</header>
No. If I understand the problem right this would be what is asked for.
Question 2 parts, how do you write the line to link to the id and then would you write this in the css sheet or would you write it in the html document as an in bedded style if you only wanted to do it for that page. This project is only making one page so I would imagine you could write the line on the style sheet?
See http://htmlhelp.com/faq/html/links.html#named-anchor .
Ok yes this is correct I went back and checked against what I found in the link you posted. I guess the question actually wants you to write a style rule that sets the font size removes the boldface sets the kerning and centers the text so the question is to do that it would be #pageheader { style rules.......}?
Posted by: TBERGER Sep 21 2014, 08:02 AM
OK you can disregard all this I figured out why I was having trouble. Neoed has it close, there are a few minor things he needs to change and it will be like the book.
I should have been more clear on my question on part 2 there of my post as what i was seeking did have to go on the html page. It asked to make the first line caps. this is what I did and it worked <style type="text/css">
section >p:first-of-type:first-line {
text-transform: uppercase;
}
</style>
Also Neoed you have and I am not sure if we have the same version but not all the paragraphs need to be quoted just the block quote I did this and it worked
}
blockquote p:before, blockquote p:after {
content: '"';
} This just quoted the blockquote section and removed it from the text in the main body. Anyway thanks foe the help and I am sure I will be back with more questions on the next project. Thanks
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)