The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help with my code, please assist
acidsnake
post Jun 20 2014, 06:09 PM
Post #1





Group: Members
Posts: 2
Joined: 20-June 14
Member No.: 21,119
Hello everyone ,

I am new to this website and was wondering if anyone here may give me a hand on this one troublesome assignment,


This is the page I have to create

http://books.google.com/books?id=Xe8JAAAAQ...els&f=false


This is the code I have completed so far, I've spent almost a full week to get this last assignment done.
What am I doing wrong? ohmy.gif(

CSS File
CODE
CSS File
/*
   New Perspectives on HTML and CSS
   Tutorial 3
   Case Problem 3

   Civil War History Text and Color Style
   Author:  
   Date:    

   Filename:         cw_styles.css
   Supporting Files: cw_layout.css

*/


@import url(cw_layout.css);

/* Body style */

body {
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}


/*Heading Styles*/

h1, h2, h3, h4, h5, h6 {
color: hsla(212, 0%, 0%, 0.4);
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 5px;
text-indent: 5px;

}

body > header > h1 {
background-color: hsl(212, 100%, 29%);
  
}

/*Navigation List*/


nav.horizontal ul {
font-family: 'Century Gothic MS', sans-serif;
font-size: 14 px;
font-weight: bold;
letter-spacing: 3px;
line-height: 20px;
list-style-type: none;
}

nav.horizontal a {
color: hsl(212, 100%, 70%);
   text-decoration: none;
}

nav.vertical a:hover {
color: hsl (212, 100%, 29%);
}


nav.vertical {
background-color: hsl(32, 100%, 95%);

}

nav.vertical h4 {
color: hsla (32, 0%, 0%, 0.5);
font-size: 18px;
text-indent: 15px;

}

/* Styles to Create a nested outline */

nav.vertical ol {
line-height: 2em;
list-style-type: upper-roman;

}

nav.vertical ol ol{
list-style-type: upper-alpha;
}

/*Hypertext links styles */

nav.vertical a{
color: hsla (212, 100%, 29%, 0.6);
text-decoration: none;

}

nav.vertical a:hover {
color:hsla (212, 100%, 29%, 1);
text-decoration: underline;

}


/*Section styles */


section {
  background-color: hsl(212, 95%, 90%);
}


/*Atricle styles */
article h2+p:first-letter{
font-size: 32px;
}

/*Footer styles */

footer p {
font-size: 10px;
line-height: 30px;
text-align: center;
}



And here is my HTML CODE

CODE


<!DOCTYPE HTML">
   <html>
   <head>
   <!--
      New Perspectives on HTML and CSS
      Tutorial 3
      Case Problem 3

      Civil War History
      

      Filename:         civilwar.htm
      Supporting files: cw_layout.css, cw_styles.css, cwphoto.png,
                        modernizr-1.5.js, mwulogo.png, pcphoto.png
   -->

      <meta charset="UTF-8" />
      <title>Civil War History</title>
      <script src="modernizr-1.5.js"></script>
          <link href="cw_styles.css" rel="stylesheet" type="text/css"/>


   </head>

   <body>

      <header>
         <h1><img src="mwulogo.png" alt="Midwest University" /></h1>
      </header>

      <nav class="horizontal">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Terms of Use</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Help</a></li>
         </ul>
      </nav>

      <nav class="vertical">
         <h4>Course Outline</h4>
         <ol>
            <li><a href="#">The Road to War</a>
               <ol>
                  <li><a href="#">Planting the Seeds</a></li>
                  <li><a href="#">The First Crisis</a></li>
                  <li><a href="#">Compromise & Failure</a></li>
                  <li><a href="#">Fault Lines</a></li>
               </ol>
            </li>            
            <li><a href="#">Politicians & Generals</a>
               <ol>
                 <li><a href="#">Politicians</a></li>
                 <li><a href="#">Generals</a></li>
               </ol>
            </li>
            <li><a href="#">The Course of War</a>
               <ol>
                  <li><a href="#">1861-1862</a></li>
                  <li><a href="#">1863</a></li>
                  <li><a href="#">1864-1865</a></li>
               </ol>
            </li>
            <li><a href="#">Aftermath</a>
               <ol>
                  <li><a href="#">Lincoln Assassination</a></li>
                  <li><a href="#">Reconstruction</a></li>
                  <li><a href="#">A New Constitution</a></li>
                  <li><a href="#">The United States Is ...</a></li>
               </ol>
            </li>
         </ol>
      </nav>

      <section>
         <header>
            <h1>The Civil War and Reconstruction</h1>
            <img src="cwphoto.png" alt="photo" />
         </header>

         <article>
            <h2>About the Course</h2>
            <p>
               The Civil War and Reconstruction
               explores the causes and consequences of the American
               Civil War, covering American history from 1840 through 1876 in
               great detail. My primary goal is to interpret the multiple
               threads that run through this epic event and consider how these
               threads still engage the politics and culture of the
               present day. In this course we will rely heavily on primary
               texts, interpreting the events of the day through the words of
               those men and women who experienced it. We'll examine four main
               points of interest:
            </p>
            <ul>
               <li>The crisis of disunion in a young nation</li>
               <li>The personality and motivations of the men and
                   women who responded to that crisis</li>
               <li>The events of the war which shaped the outcome</li>
               <li>The aftermath and the unresolved issues which
                   came out of the conflict</li>
            </ul>
  
            <h3>Course Structure</h3>
            <p>
               Lectures are provided through podcast or via direct
               download twice weekly with lecture notes available
               through e-mail or RSS feed. A detailed summary of the
               lectures is provided in the links at the left.
            </p>
         </article>

         <aside>
            <h3>About Peter Craft</h3>
            <img src="pcphoto.png" alt="photo" />
            <p>
               Peter Craft is a professor of American and Military History and
               the Director of the Taylor Institute for the Study of Military
               History at Midwest University. He is the author of numerous books,
               including: <cite>Fault Lines: The Causes of the Civil War</cite>,
               <cite>Day at Cooper Union</cite> (for which he received the
               Lincoln Prize), and <cite>Helen: A Memoir</cite>. He is also
               a frequent contributor to <cite>The News Hour</cite>
               and the <cite>History Channel</cite>.
            </p>
         </aside>

      </section>

      <footer>
         <p>
            Midwest University 2014. Some rights reserved. Unless otherwise
            indicated, all content on this web site is licensed under a
            <a href="#">Creative Commons License.</a>
         </p>
      </footer>

   </body>
</html>




Please help ! I'm so frustrated right now I can't take it anymore ! ohmy.gif(
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klingon24
post Jun 23 2014, 09:47 PM
Post #2





Group: Members
Posts: 3
Joined: 23-June 14
Member No.: 21,129
k my friend, im gonna do my best to help you here so I notice a couple things

to start in a bunch of your lines you have nav.vertical ul{} and stuff like that, it needs to be ordered properly so .vertical nav ul instead

in line 47 theres a random space between 14 and px, im gonna do some more digging and i'll get back to u, i'll help you get threw this
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
klingon24
post Jun 23 2014, 11:39 PM
Post #3





Group: Members
Posts: 3
Joined: 23-June 14
Member No.: 21,129
k so the browser is having issues determining which version of html you're using, after your doctype declaration you need to include <html lang="en"> its necessary writing in HTML5, I assume you are because you're using tags native to HTML5 like the <nav> tag. So now that I've figured this out you need to take the closing tags out of your link tags in the head, also you no longer need to close your <img> tags, it was left behind with HTML4

I noticed you randomly have the img in your <header> on line 27 wrapped in an <h1> for no reason

i notice there's no floats so at some point you're gonna need to use something like this

article{float:left;} - to get the main stuff to line up with the horizontal nav bar you got going

for your .vertical <nav> you're gonna have to add a couple rules like

nav{display:inline;} - to have the items butt up to each other from left to right

maybe consider adding some padding to your list items like this too

nav ul li{padding:30px;} - i only say 30 because there's quite a bit of space between the links in the illustration you were given to copy. I'm gonna let you start with all that cuz you have a lil work to do so far.

Let me know if this helps, I hope this wasn't due already and you have at least a day to work on this. If you need anything else just reply back with what you need help with.

This post has been edited by klingon24: Jun 23 2014, 11:49 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
acidsnake
post Jun 24 2014, 04:07 PM
Post #4





Group: Members
Posts: 2
Joined: 20-June 14
Member No.: 21,119
QUOTE(klingon24 @ Jun 23 2014, 05:47 PM) *

k my friend, im gonna do my best to help you here so I notice a couple things

to start in a bunch of your lines you have nav.vertical ul{} and stuff like that, it needs to be ordered properly so .vertical nav ul instead

in line 47 theres a random space between 14 and px, im gonna do some more digging and i'll get back to u, i'll help you get threw this


Thank you kind , sir.

Apparently I was so frustrated to double check and sometimes i will over look those things, But I don't want to quit.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 24 2014, 06:17 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I'm sorry to butt in, but that selector was correct to start with.

nav.vertical ul refers to an UL contained in a NAV with the class vertical - and such an UL exists in the HTML.

.vertical nav ul would match an UL that's contained in a NAV that is contained in any element with the class vertical. Such an UL does not exist in the HTML.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 24 2014, 06:59 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,732
Joined: 9-August 06
Member No.: 6
I think we also need cw_layout.css .
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 26th April 2024 - 10:34 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC