Problems with CSS |
Problems with CSS |
Neoed |
Sep 16 2013, 01:46 PM
Post
#1
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
Hello, I'm trying to make this page right here:
http://books.google.com/books?id=Xe8JAAAAQ...els&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: CODE <!DOCTYPE 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: CODE /* 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; } /* 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; } |
pandy |
Sep 16 2013, 02:51 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Off to the CSS checker you go.
http://jigsaw.w3.org/css-validator/ CODE 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... |
Neoed |
Sep 16 2013, 07:04 PM
Post
#3
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
Thanks for the help, hopefully I can make this work now.
|
Neoed |
Sep 18 2013, 02:23 PM
Post
#4
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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:
CODE /* 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; } |
pandy |
Sep 18 2013, 03:14 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. CODE #leftsection id Did you mean something else maybe? |
Neoed |
Sep 18 2013, 03:23 PM
Post
#6
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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. |
pandy |
Sep 18 2013, 03:44 PM
Post
#7
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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?
|
Neoed |
Sep 18 2013, 03:59 PM
Post
#8
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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. |
pandy |
Sep 18 2013, 04:54 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
I didn't understand that.
This CODE #leftsection id matches an element called 'id' that's contained in another element with the id 'leftscection'. That is, something like this. HTML <div id="leftsection"> <id>...</id> </div> There is no such thing, neither in HTML nor in your markup. |
Neoed |
Sep 18 2013, 06:12 PM
Post
#10
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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. |
Darin McGrew |
Sep 18 2013, 08:51 PM
Post
#11
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
#leftsection id {...}
selects <section id="leftsection"> <id>...</id> </section> If you want to select <section id="leftsection">...</section> then you should use just #leftsection {...} |
Neoed |
Sep 18 2013, 09:32 PM
Post
#12
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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=Xe8JAAAAQ...els&f=false but this is what I am getting: http://i132.photobucket.com/albums/q39/neo...zpsfb551361.png |
pandy |
Sep 19 2013, 02:33 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
Neoed |
Sep 23 2013, 01:22 PM
Post
#14
|
Newbie Group: Members Posts: 17 Joined: 16-September 13 Member No.: 19,741 |
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. |
pandy |
Sep 23 2013, 01:42 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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: CODE #foo bar 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? |
Frederiek |
Sep 24 2013, 02:16 AM
Post
#16
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
Selectors are quite well explained in a series of articles starting at http://www.456bereastreet.com/archive/2005...lectors_part_1/ .
|
TBERGER |
Sep 19 2014, 02:09 PM
Post
#17
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
#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 {.....} This post has been edited by TBERGER: Sep 19 2014, 02:12 PM |
pandy |
Sep 19 2014, 02:25 PM
Post
#18
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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. CODE <header id="pageheader">...</header> QUOTE 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 . |
TBERGER |
Sep 20 2014, 01:09 PM
Post
#19
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
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. CODE <header id="pageheader">...</header> QUOTE 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.......}? |
TBERGER |
Sep 21 2014, 08:02 AM
Post
#20
|
Newbie Group: Members Posts: 16 Joined: 19-September 14 Member No.: 21,569 |
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 |
Lo-Fi Version | Time is now: 25th April 2024 - 08:33 AM |