Skip navigation
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

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 27, 2012 11:30 AM   in reply to alexisonsmith3

    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
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 27, 2012 11:31 AM   in reply to Sudarshan Thiagarajan

    Also, your current HTML & CSS code.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 27, 2012 2:02 PM   in reply to alexisonsmith3
    • 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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 7:59 AM   in reply to alexisonsmith3

    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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 10:17 AM   in reply to alexisonsmith3

    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:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 10:23 AM   in reply to Sudarshan Thiagarajan

    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
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Apr 28, 2012 10:57 AM   in reply to Sudarshan Thiagarajan

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

     
    |
    Mark as:

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