The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problems with CSS
Neoed
post 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;
        }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 16 2013, 02:51 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
Joined: 9-August 06
Member No.: 6



Off to the CSS checker you go. wink.gif
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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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;
        }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2013, 03:14 PM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2013, 03:44 PM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 18 2013, 04:54 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 18 2013, 08:51 PM
Post #11


WDG Member
********

Group: Root Admin
Posts: 8,249
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 {...}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2013, 02:33 AM
Post #13


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Neoed
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 23 2013, 01:42 PM
Post #15


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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/ .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post Sep 19 2014, 02:09 PM
Post #17


Newbie
*

Group: Members
Posts: 16
Joined: 19-September 14
Member No.: 21,569



QUOTE(Darin McGrew @ Sep 18 2013, 09: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 {...}


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 19 2014, 02:25 PM
Post #18


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,580
Joined: 9-August 06
Member No.: 6



QUOTE(TBERGER @ Sep 19 2014, 09: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.

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 .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post Sep 20 2014, 01:09 PM
Post #19


Newbie
*

Group: Members
Posts: 16
Joined: 19-September 14
Member No.: 21,569



QUOTE(pandy @ Sep 19 2014, 03:25 PM) *

QUOTE(TBERGER @ Sep 19 2014, 09: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.

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.......}?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
TBERGER
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 26th May 2017 - 07:58 AM