10 Replies Latest reply: Apr 28, 2012 10:57 AM by sudarshan.t RSS

    Question regarding CSS styles in Tutorial on creating your first website part 2

    alexisonsmith3 Community Member

      Hi,

       

      I am currently on the tutorial about creating your first website part 2. http://www.adobe.com/devnet/dreamweaver/articles/dw_html5_pt2.html . I am trying to create a new CSS style for #logo h1,#logo h2. My text does not move off the screen and the Citrus Cafe still has the heading text infront of it. The instructions are not very clear. Can somebody please explain what I am doing wrong?

       

      Thank you

       

      Alexisonsmith3

        • 1. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
          sudarshan.t CommunityMVP

          Can you post a link to your page on the web or at the least, a screenshot so we can take a look at it?

          • 3. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
            Rik Ramsay Community Member
            • When you click OK, the Citrus Café logo is inserted as a background image at the top of the page, but the <h1>and <h2> headings sit on top of it.
            • Open the New CSS Rule dialog box. Set Selector Type to Compound, type #logo h1, #logo h2 in the Selector Name field, and click OK.
            • Select the Positioning category in the CSS Rule Definition dialog box, and set Position to absolute, and Top to –500px minus 500 .
            • When you click OK, the two headings should disappear. If Design view fails to refresh, press F5 or toggle Live view on and off.

             

            This would be translated into

            #logo h1, #logo h2{

            position:absolute;

            top:-500px;

            }

            • 4. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
              alexisonsmith3 Community Member

              Hi,

               

              I have tried again but it is still not working. This is my script for the Header Content:

               

              <!DOCTYPE HTML>

              <html>

              <head>

              <meta charset="utf-8">

              <title>New City Explorer</title>

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

              <!--[if lte IE 8]>

              <script type="text/javascript" src="javascript/html5.js"></script>

              <![endif]-->

              <style type="text/css">

              #logo h1, #logo h2 {

                        position: absolute;

                        top: -500px;

              }

              </style></head>

               

               

              <body>

              <div id="container">

                <header id="Logo">

                  <h1>Citrus Cafe</h1>

                  <h2>Sustainable,oranic and natural</h2>

                  <nav>

                    <ul>

                      <li><a href="#">Home</a></li>

                      <li><a href="#">About Us</a></li>

                      <li><a href="#">Destinations</a></li>

                      <li><a href="#">Links</a></li>

                      <li><a href="#">Contact</a></li>

                    </ul>

                  </nav>

                </header>

               

              Thanks

              • 5. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                sudarshan.t CommunityMVP

                Your script looks just fine.

                 

                One more thing - Are you previewing in Dreamweaver Design View? If you are, the headings WILL appear over the logo. It's more like a fallback if the image doesn't load. Try this - In DreamWeaver, click on Live View - if the h1 text disappears, your code is just fine.

                 

                Also, you could preview in browser to see it.

                • 6. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                  alexisonsmith3 Community Member

                  I just tried to preview it in the browser and the text is still there. I will show you what I have now in terms of code:

                  <!DOCTYPE HTML>

                  <html>

                  <head>

                  <meta charset="utf-8">

                  <title>New City Explorer</title>

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

                  <!--[if lte IE 8]>

                  <script type="text/javascript" src="javascript/html5.js"></script>

                  <![endif]-->

                  </head>

                   

                   

                  <body>

                  <div id="container">

                    <header id="Logo">

                    <hgroup>

                      <h1>Citrus Cafe</h1>

                      <h2>Sustainable,oranic and natural</h2>

                      </hgroup>

                   

                  and this is my css code:

                  @charset "utf-8";

                  /* CSS Document */

                   

                   

                  article, aside, figure, footer, header, nav, section {

                      display: block;

                  }

                  body {

                            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

                            color: #000;

                            background-color: #CFF;

                            margin: 0px;

                            padding: 0px;

                  }

                  #container {

                            width: 840px;

                            margin-top: 0px;

                            margin-right: auto;

                            margin-bottom: 0px;

                            margin-left: auto;

                  }

                  #Logo {

                            background-image: url(images/lrg_logo.png);

                            background-repeat: no-repeat;

                            height: 138px;

                            width: 100%;

                  }

                  #logo hgroup {

                            position: absolute;

                            top: -500px;

                  }

                  nav {

                            padding-top: 150px;

                  }

                  ul {

                      padding:0;

                      margin:0;

                  }

                  nav ul {

                      list-style: none;

                      margin-bottom: 15px;

                      font-weight: bold;

                      font-size:20px;

                  }

                  nav ul li {

                            float: left;

                            -webkit-transition-duration:.5s;

                            -webkit-transition-property:margin-top;

                            -webkit-transition-timing-function:ease-in-out;

                            -o-transition-duration:.5s;

                            -o-transition-property:margin-top;

                            -o-transition-timing-function:ease-in-out;

                            -moz-transition-duration:.5s;

                            -moz-transition-property:margin-top;

                            -moz-transition-timing-function:ease-in-out;

                            transition-duration:.5s;

                            transition-property:margin-top;

                            transition-timing-function:ease-in-out;

                  }

                   

                   

                  nav ul a {

                      display: block;

                      width:140px;

                      padding: 10px;

                      text-align:center;

                      text-decoration: none;

                      color: #fff;

                      border: 1px solid #618A37;

                      margin: 5px 0px;

                            -moz-border-radius:6px;

                            -webkit-border-radius:6px;

                            border-radius:6px;

                            -moz-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                            -webkit-box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                            box-shadow: rgba(0,0,0,0.3) 1px 1px 3px;

                      text-shadow: rgba(0,0,0,0.8) 1px 1px 1px;

                  }

                  nav ul a:link, nav ul a:visited {

                            background: rgba(255,255,255,0.2);

                  }

                  nav ul a:hover, nav ul a:active, nav ul a:focus {

                            background: rgba(255,255,255,0.4);

                  }

                  nav ul li:hover {

                            margin-top:-10px;

                  }

                  #maincontent {

                            margin-top: 80px;

                            padding-top: 10px;

                            padding-right: 0px;

                            padding-bottom: 10px;

                            padding-left: 0px;

                  }

                  #vision {

                            font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;

                            font-size:32px;

                            font-weight:bold;

                            line-height:1.2;

                            background-image:url(../images/lrg_hero.jpg);

                            background-repeat:no-repeat;

                            width: 409px;

                            height:237px;

                            padding:60px 370px 0 40px;

                            margin-bottom:20px;

                  }

                  .pod {

                            background: #fff;

                            padding: 10px;

                            width: 244px;

                            float:left;

                            margin-right: 13px;

                  }

                  .podContent {

                            margin-top:10px;

                            width: 244px;

                            height:181px;

                            overflow:hidden;

                  }

                  #news .podContent {

                            margin-top:12px;

                            overflow:auto;

                  }

                  #news .podContent p {

                            margin-top: 5px;

                            margin-bottom: 5px;

                            margin-left:6px;

                            font-size:15px;

                  }

                  .pod h1 {

                            background: #CCC;

                            color: #000;

                            padding:5px;

                            background-image:url(../images/icon_chevron.png);

                            background-repeat:no-repeat;

                            background-position:95%;

                            font-size:16px;

                            font-weight:normal;

                            margin: 0 0 10px 0;

                  }

                  a.block {

                            text-decoration:none;

                            display:block;

                  }

                  time {

                            font-weight:bold;

                  }

                  footer {

                            padding: 10px 0;

                            clear:both;

                            color: #fff;

                  }

                  footer p {

                            margin:0 0 5px 0;

                  }

                  #phone {

                            font-weight:bold;

                            color: #000;

                  }

                  #facebookTwitter {

                            float:right;

                            margin-right:25px;

                  }

                  • 7. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                    sudarshan.t CommunityMVP

                    alexisonsmith3 wrote:

                     

                    I just tried to preview it in the browser and the text is still there. I will show you what I have now in terms of code:

                    <!DOCTYPE HTML>

                    <html>

                    <head>

                    <meta charset="utf-8">

                    <title>New City Explorer</title>

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

                    <!--[if lte IE 8]>

                    <script type="text/javascript" src="javascript/html5.js"></script>

                    <![endif]-->

                    </head>

                     

                     

                    <body>

                    <div id="container">

                      <header id="Logo">

                      <hgroup>

                        <h1>Citrus Cafe</h1>

                        <h2>Sustainable,oranic and natural</h2>

                        </hgroup>

                    1. Are you seeing the logo and then the text over it? Or just the text?
                    2. Have you closed your <header></div><body><html> tags because I don't see them in your HTML code in the previous post.
                    • 8. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                      alexisonsmith3 Community Member

                      Yes I am seeing the logo and then the text over it

                       

                      Yes I have closed all my tags:

                       

                      <!DOCTYPE HTML>

                      <html>

                      <head>

                      <meta charset="utf-8">

                      <title>New City Explorer</title>

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

                      <!--[if lte IE 8]>

                      <script type="text/javascript" src="javascript/html5.js"></script>

                      <![endif]-->

                      </head>

                       

                       

                      <body>

                      <div id="container">

                        <header id="Logo">

                        <hgroup>

                          <h1>Citrus Cafe</h1>

                          <h2>Sustainable,oranic and natural</h2>

                          </hgroup>

                          <nav>

                            <ul>

                              <li><a href="#">Home</a></li>

                              <li><a href="#">About Us</a></li>

                              <li><a href="#">Destinations</a></li>

                              <li><a href="#">Links</a></li>

                              <li><a href="#">Contact</a></li>

                            </ul>

                          </nav>

                        </header>

                        <div id="maincontent">

                          <article id="vision">Where will you fly to next</article>

                          <section class="pod">

                        <a href="#" class="block"><h1>London</h1></a>

                        <figure class="podContent"><img src="Pictures/London_main.JPG" width="300" height="225" alt="London Main"></figure>

                      </section>

                          <section class="pod">

                        <a href="#" class="block"><h1>Brussels</h1></a>

                        <figure class="podContent"><img src="Pictures/Brussels_main.jpg" width="300" height="225" alt="Brussels main"></figure>

                      </section>

                          <section class="pod">

                        <a href="#" class="pod"><h1>Chicago</h1></a>

                        <figure class="podContent"><img src="Pictures/Chicago_main.jpg" width="300" height="225" alt="Chicago Main"></figure>

                      </section>

                          <section class="pod">

                        <a href="#" class="pod"><h1>Edinburgh</h1></a>

                        <figure class="podContent"><img src="Pictures/Edinburgh_main.jpg" width="300" height="225" alt="Edinburgh"></figure>

                      </section>

                         <section class="pod">

                        <a href="#" class="pod"><h1>San Fransico</h1></a>

                        <figure class="podContent"><img src="Pictures/SF_main.jpg" width="300" height="225" alt="SF Main"></figure>

                      </article>

                      </section>

                        </div>

                        <footer>

                          <div id="facebooktwitter">Content for  id "facebooktwitter" Goes Here<img src="images/icon_facebook.png" width="24" height="25" alt="Facebook"><img src="images/icon_twitter.png" width="24" height="25" alt="Twitter"></div>

                        </footer>

                      </div>

                      </body>

                      </html>

                      • 9. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                        sudarshan.t CommunityMVP

                        One other thing you could try to do is to change the case of your CSS tags:

                         

                        #logo hgroup {

                                  position: absolute;

                                  top: -500px;

                        }

                        This above definition can be:

                        #Logo hgroup {

                                  position: absolute;

                                  top: -500px;

                        }

                        It's also recommended that you always use lowercase letters to define all your CSS rules.

                         

                        I'm not sure if this is really going to work - but just a thought

                        • 10. Re: Question regarding CSS styles in Tutorial on creating your first website part 2
                          sudarshan.t CommunityMVP

                          Glad it worked! It's crazy how a small issue such as 'case-sEnsiTIvity' could have stalled your work!