Skip navigation
alexisonsmith3
alexisonsmith3
Currently Being Moderated

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

Apr 27, 2012 11:25 AM

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

668 Views   10 Replies   Latest reply: Sudarshan Thiagarajan, Apr 28, 2012 10:57 AM
 
Replies
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    1. Sudarshan Thiagarajan,
    Apr 27, 2012 11:30 AM   in reply to alexisonsmith3
    Report

    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?

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    2. Sudarshan Thiagarajan,
    Apr 27, 2012 11:31 AM   in reply to Sudarshan Thiagarajan
    Report

    Also, your current HTML & CSS code.

     
    |
    Mark as:
  • Rik Ramsay
    Currently Being Moderated
    3. Rik Ramsay,
    Apr 27, 2012 2:02 PM   in reply to alexisonsmith3
    Report
    • 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;

    }

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    4. alexisonsmith3,
    Apr 28, 2012 6:55 AM   in reply to Rik Ramsay
    Report

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    5. Sudarshan Thiagarajan,
    Apr 28, 2012 7:59 AM   in reply to alexisonsmith3
    Report

    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.

     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    6. alexisonsmith3,
    Apr 28, 2012 10:08 AM   in reply to Sudarshan Thiagarajan
    Report

    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;

    }

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    7. Sudarshan Thiagarajan,
    Apr 28, 2012 10:17 AM   in reply to alexisonsmith3
    Report

    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.
     
    |
    Mark as:
  • alexisonsmith3
    Currently Being Moderated
    8. alexisonsmith3,
    Apr 28, 2012 10:22 AM   in reply to Sudarshan Thiagarajan
    Report

    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>

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    9. Sudarshan Thiagarajan,
    Apr 28, 2012 10:23 AM   in reply to Sudarshan Thiagarajan
    Report

    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

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    3,732 posts
    Oct 15, 2010
    Currently Being Moderated
    10. Sudarshan Thiagarajan,
    Apr 28, 2012 10:57 AM   in reply to Sudarshan Thiagarajan
    Report

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

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points