4 Replies Latest reply: Sep 7, 2013 12:42 PM by brushwipe RSS

    what's wrong with this html and css code? ref: Create your first  website tut.

    brushwipe Community Member

      In reply to David Powers re: design view doesn't translate to browser.  I hope this is the approved way to send copies of code and images.

       

       

       

      CSS code.JPG

      <!doctype html>

      <html>

      <head>

      <meta charset="utf-8">

      <title>cable cars</title>

      <link href="main.css" rel="stylesheet" type="text/css">

      <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->

      <script>var __adobewebfontsappname__="dreamweaver"</script>

      <script src="http://use.edgefonts.net/source-sans-pro:n6:default.js" type="text/javascript"></script>

       

      </head>

       

      <body>

      <div id="#wrapper">

        <header id="top">

          <h1>Bayside Beat</h1>

          <nav id="mainnav">

            <ul>

              <li><a href="index.html" class="thispage">Home</a></li>

              <li><a href="sightseeing.html">Sightseeing</a></li>

              <li><a href="eating_out.html">Eating Out</a></li>

              <li><a href="whats_on.html">Whats On</a></li>

              <li><a href="where_to_stay.html">Where to Stay</a></li>

            </ul>

          </nav>

        </header>

        <div id="hero">

          <article>

            <h2>Be  Where It&rsquo;s At</h2>

            <p> </p>

            <p>San Francisco is one of the most exciting and vibrant cities on  the planet. Bayside Beat is here to keep you informed of the best  places to see, where to eat, what to do, and where to lay down your  weary head after an action-packed day—or night—on the town.</p>

          </article>

        <img src="golden_gate.jpg" width="1214" height="547" alt=""/>  </div>

        <article id="main">

         

          <h2>Riding  the Cable Cars</h2>

          <p> </p>

          <p>No visit to San Francisco is complete without a ride on the iconic  cable cars that climb up the vertiginous hills of the city. Of the  twenty-three lines established between 1873 and 1890, three remain:  two routes from downtown near Union Square to <a href="http://www.fishermanswharf.org/">Fisherman's Wharf</a>, and  a third route along California Street.</p>

          <p> </p>

          <p>The cable cars rely on cables running constantly beneath the  road&rsquo;s surface. The driver—or gripman—uses a lever to grip the  cable to pull the car and its passengers up the hill. The gripman  requires not only great strength, but also great skill. He needs to  know where to release the cable to coast over crossing cables and  points. The conductor works in close cooperation with the gripman,  operating the brake at the rear of the car to prevent it from running  out of control on the downward slopes.</p>

          <img src="cable_car1.jpg" width="400" height="266" alt=""/>

        

         

        

          <figure>

           

            <p>The cable car terminus near Union Square</p>

      </figure>

          <p> </p>

          <p>Although the cable cars are now mainly a tourist attraction,  they&rsquo;re still used by local commuters to get to and from work. The  California Street line is particularly popular among commuters on  weekdays.</p>

        </article>

       

        <article id="sidebar">

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

          <HTML>

          <!--          @page { margin: 2cm }          A:link { so-language: zxx }      -->

          <BODY DIR="LTR">

          <h2>Cable  Car Tips</h2>

          <p> </p>

          <p>A single ride on a cable car costs $6. If you plan to travel  around the city, it&rsquo;s often cheaper to buy a Muni Passport, which  gives you unlimited rides on San Francisco&rsquo;s extensive public  transport system, including the cable cars (but not the <a href="http://www.bart.gov/">BART</a> subway  system). Even a single-day passport ($14) will save you money if you  make a return trip, and stop off to visit Chinatown one way.</p>

          <p> </p>

          <p>There are often long lines at the cable car terminus, particularly  on the Powell-Mason and Powell-Hyde routes. If you don&rsquo;t want to  wait, try walking a few stops along the route. The conductor usually  leaves a small number of places to pick up passengers on the way. The  California Street route is generally less crowded (but not as  spectacular).</p>

        </article>

        <div id="footer">&copy; Copyright Bayside Beat 2013</div>

      </div>

      </body>

      </html>

        • 1. Re: what's wrong with this html and css code? ref: Create your first  website tut.
          David_Powers CommunityMVP

          Your code and screenshot show up just fine. However, just showing a screenshot of one selector highlighted in the CSS Designer doesn't really help see what you have done with the styles for the whole page. Nevertheless, it's obvious from what's shown in the screenshot that your styles are completely wrong.

           

          In the finished page, the #hero selector has just one property set (position: relative). You've set width, min-width, max-width, margin, and padding. It's not possible to see whether you've also set position. But the minus top margin on the hero element is completely wrong, and will make a huge difference to the layout.

           

          Turning to your HTML, most of it is OK, but you've got several empty paragraphs in there. You've also got this at the top of the sidebar:

           

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

              <HTML>

              <!--          @page { margin: 2cm }          A:link { so-language: zxx }      -->

              <BODY DIR="LTR">

           

          Goodness knows where that came from. A page should have only one Doctype (at the very top of the page). Also, there should never be more than one <html> element and <body> element in a page.

           

          I suggest that you go back and compare your code with the version in the zip files that accompany the tutorial.

           

          By the way, if you want to show your CSS in the forum, copy the code in main.css, and paste it into your message.

          • 2. Re: what's wrong with this html and css code? ref: Create your first  website tut.
            Nancy O. CommunityMVP

            Some very strange code that doesn't belong. 

             

            <article id="sidebar">

                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

                <HTML>

                <!--          @page { margin: 2cm }          A:link { so-language: zxx }      -->

                <BODY DIR="LTR">

             

            Not sure how that got in there but it is definitely not valid.  Looks like a bad copy & paste from some other document.

             

            Have you reviewed the fundamentals of HTML5 docs yet?  Knowing the basic structure  will help you more than anything else you can learn at this point. 

             

            Each page has:

             

              <!DOCTYPE html>
            <html>
            <head>
            <meta charset="UTF-8">
            <title>Title of the document</title>
            </head>

            <body>
            Content of the document......
            </body>

            </html> 

             

             

            Nancy O.

            • 3. Re: what's wrong with this html and css code? ref: Create your first  website tut.
              brushwipe Community Member

              Hi, That stuff comes in automatically when I paste special Adobe Edge fonts. In previous trials I have deleted it but I thought maybe it was necessary.

              • 4. Re: what's wrong with this html and css code? ref: Create your first  website tut.
                brushwipe Community Member

                Hi David, That !doctype stuff comes in automatically when I paste in the Adobe edge font. I will copy the code for css and send it now that I know how it’s done.