Определение правил стиля для списка навигации (css)

0

Застрял на домашней задаче. Вот как должна выглядеть веб-страница: http://www.acsu.buffalo.edu/~amnero/lincoln.htm

Я только в главе 4 моей книги HTML и CSS. Я изучаю основы CSS, поэтому это назначение в значительной степени основано на CSS. Файл HTML уже пришел с этим руководством. Я потратил немало времени на то, что я пропустил или не пропустил. Может ли кто-нибудь взглянуть на мой код и сообщить мне, что я делаю неправильно? Можете ли вы ПОМОНИИ помочь, так как мой профессор никогда не отвечает.

Лист стилей:

    /*
   New Perspectives on HTML and CSS
   Tutorial 4
   Case Problem 1

   History Style Sheet
   Author: Mohammad Raza Hussain
   Date:   September 16th, 2013

   Filename:         history.css
   Supporting Files: 

*/

/* Display HTML5 structural elements as blocks */

   header, section, nav {
      display: blocks;
   }

/* Styles for the Page Body */

   body {
      margin: 0px;
      padding: 0px;
      background-color: rgb(51, 51, 51);
   }

/* Styles for the Page Header */

   header {
      background-color: rgb(51, 51, 51);
      text-align: center;
      width: 55em;
      height: 4em;
   }

/* Navigation lists */

   nav {
      float: left;
      width: 15em;
      background-color: rgb(51, 51, 51);
   }

   nav a {
      text-decoration: none;
   }

   nav.vertical li {
      font-family: CenturyGothic, sans-serif;
      font-size: 0.7em;
      list-style-type: none;
      line-height: 1.4em;
      margin-left: 1em;
      margin-bottom: 1.2em;
   }

   nav.vertical li a {
      color: rgb(212, 212, 212);
   }

   nav.vertical li a:hover {
      color: white;
   }

/* Speech */

   #speech {
      background-color: rgb(212, 212, 212);
      width: 40em;
      float: left;
      font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
   }

   #speech h1 {
      background-color: rgb(51, 51, 51);
      color: rgb(212, 212, 212);
      font-size: 2em;
      text-align: center;
   }

   #speech p {
      font-size: 0.9em;
      margin: 1em;
   }

   #speech p:first-of-type:first-letter {
      float: left;
      font-size: 4em;
      line-height: 0.8em;
      margin-right: 0.3em;
      padding-right: 0.2em;
      padding-bottom: 0.2em;
      border-right: 0.02em solid;
      border-bottom: 0.02em solid;
   }

   #speech p:first-of-type:first-line {
      text-transform: uppercase;
   }

   #speech img {
      clear: right;
      float: right;
      height: 4em;
   }

HTML файл в случае необходимости:

<!DOCTYPE html>
<html>

   <head>
   <!--
      New Perspectives on HTML and CSS
      Tutorial 4
      Case Problem 1

      Lincoln Speech
      Author: Mohammad Raza Hussain
      Date:   September 16th, 2013

      Filename:         lincoln.htm
      Supporting files: arlogo.png, history.css,
                        lincoln01.png - lincoln10.png,
                        modernizr-1.5.js
   -->

      <meta charset="UTF-8" />
      <title>Lincoln Second Inaugural Address</title>
      <script src="modernizr-1.5.js"></script>
      <link href="history.css" rel="stylesheet" type="text/css" />

   </head>

   <body>

      <header><img src="arlogo.png" alt="American Rhetoric" /></header>

      <nav class="vertical">
         <ul>
            <li><a href="#">Give Me Liberty or Give Me Death <br /> Patrick Henry</a></li>
            <li><a href="#">Ain't I a Woman? <br /> Sojourner Truth</a></li>
            <li><a href="#">A House Divided <br /> Abraham Lincoln</a></li>
            <li><a href="#">The Gettysburg Address <br /> Abraham Lincoln</a></li>
            <li><a href="#">The Second Inaugural <br /> Abraham Lincoln</a></li>
            <li><a href="#">Cross of Gold <br /> William Jennings Bryan</a></li>
            <li><a href="#">The Man in the Arena <br /> Theodore Roosevelt</a></li>
            <li><a href="#">The Only Thing We Have to Fear <br /> Franklin Roosevelt</a></li>
            <li><a href="#">A Date Which Will Live in Infamy <br /> Franklin Roosevelt</a></li>
            <li><a href="#">Old Soldiers Never Die <br /> Douglas MacArthur</a></li>
            <li><a href="#">Inaugural Address <br /> John Kennedy</a></li>
            <li><a href="#">Ich Bin Ein Berliner <br /> John Kennedy</a></li>
            <li><a href="#">The Ballot or the Bullet <br /> Malcolm X</a></li>
            <li><a href="#">I Have a Dream <br /> Martin Luther King, Jr.</a></li>
            <li><a href="#">A Time for Choosing <br /> Ronald Reagan</a></li>
            <li><a href="#">Tear Down this Wall <br /> Ronald Reagan</a></li>
         </ul>
      </nav>


      <section id="speech">
         <h1>Lincoln Second Inaugural</h1>
         <p>The Almighty has his own purposes. "Woe unto the world because of offenses! For 
            <img src="lincoln01.png" alt="" />
            <img src="lincoln02.png" alt="" />
            <img src="lincoln03.png" alt="" />
            <img src="lincoln04.png" alt="" />
            <img src="lincoln05.png" alt="" />
            <img src="lincoln06.png" alt="" />
            <img src="lincoln07.png" alt="" />
            <img src="lincoln08.png" alt="" />
            <img src="lincoln09.png" alt="" />
            <img src="lincoln10.png" alt="" />
            it must needs be that offenses come; but woe to that man by whom the offense 
            cometh." If we shall suppose that American slavery is one of those offenses which, 
            in the providence of God, must needs come, but which, having continued through his 
            appointed time, he now wills to remove, and that he gives to both North and South 
            this terrible war, as the woe due to those by whom the offense came, shall we discern 
            therein any departure from those divine attributes which the believers in a living 
            God always ascribe to him?
         </p>
         <p>Fondly do we hope &mdash; fervently do we pray &mdash; that this 
            mighty scourge of war may speedily pass away. Yet, if God wills that it continue 
            until all the wealth piled by the bondsman two hundred and fifty years of unrequited 
            toil shall be sunk, and until every drop of blood drawn by the lash shall be paid by 
            another drawn with the sword, as was said three thousand years ago, so still it must 
            be said, "The judgments of the Lord are true and righteous altogether."
         </p>
         <p>With malice toward none; with charity for all; with firmness in the right, as God 
            gives us to see the right, let us strive on to finish the work we are in; to bind up 
            the nation wounds; to care for him who shall have borne the battle, and for his 
            widow, and his orphan &mdash; to do all which may achieve and cherish a just and lasting peace 
            among ourselves, and with all nations.
         </p>
      </section>

   </body>

</html>
Теги:

3 ответа

1

Попробуй это

 nav.vertical li {
          font-family: CenturyGothic, sans-serif;
          font-size: 0.7em;
          list-style-type: none;
          line-height: 1.4em;
          margin-left: 1em;
          margin-bottom: 1.2em;
          display: inline-block;
       }
  • 0
    похоже, ничего не делал.
  • 0
    Можете ли вы предоставить скрипку для этого?
Показать ещё 3 комментария
0

Вот вопросы! Я последовал за ним к тройнику и не мог узнать, где ошибка.

http://books.google.com/books?id=Xe8JAAAAQBAJ&pg=PA307&lpg=PA307&dq=tutorial+4+lincoln+css&source#v

0

Я не совсем понимаю, в чем проблема. Единственное, что я могу придумать, - это когда страница сужается, #sections падает под #vertical. В этом случае добавьте min-width к элементу body:

   body {
   /* other styles here */
    min-width: 55em;
   }
  • 0
    Страница не похожа на acsu.buffalo.edu/~amnero/lincoln.htm
  • 0
    это немного, и я не уверен, почему @bfavaretto
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню