11 Replies Latest reply on Apr 27, 2010 7:24 AM by William-01

    Nesting?

    William-01 Level 1

      I believe nesting is what I am trying to do but could use some feedback. I'm following the W3 School to recreate my own website that I had someone else build for me. We designed the site but are not familiar with any CSS etc that makes a site functional.

       

      So, I'm taking the initiative to learn how to do this myself.

       

      Here is the link to my troubles. http://www.billyraygun.com/brd

       

      Sumary of layout:

      1. Design based on rows. Obviously, a header and navBar

      2. Top row is to split vertically creating two columns. Left side to have copy, right side, the image as shown.

      3. Bottom row with content TBD but again, split verticaly to create two columns

      4. Footer row.

       

      My goals at this time:

      Goal #1: Move the images to align with the portion overlapping the navBar and push up, eliminate the gap seen between the navBar and Body.

       

      Goal #2: Headline copy to fall into the left column so that I can edit, pad and align independently of the image.

       

      Would this be considered nesting because I have a group of independent columns within one row?  Here is my HTML and CSS as I have it currently.

       

      Thanks!

      william-01

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Billy Raygun Design</title>
      <link href="css/billy_raygun.css" rel="stylesheet" type="text/css" />
      </head>

       

      <body>
      <div id="container">
        <div id="header_wrap">
          <div id="header"><img src="images/brd_logo.jpg" width="400" height="155" alt="Billy Raygun Design" /></div>
        </div>
        <div id="nav_wrap">
          <div id="nav_bar">
            <ul id="mainNav">
            <li><a href="index.html"><img src="images/navHome.png" alt="home"/></a></li>
            <li><a href="about_us.html"><img src="images/navAbout.png" alt="about_us"/></a></li>
            <li><a href="whatwedo.html"><img src="images/navWhatWeDo.png" alt="what we do"/></a></li>
            <li><a href="portfolio.html"><img src="images/navPortfolio.png" alt="portfolio"/></a></li>
            <li><a href="testimonials.html"><img src="images/navTestimonials.png" alt="testimonials" /></a></li>
            <li><a href="contact_us.html"><img src="images/navContact.png" alt="contact_us"/></a></li>
            <li><img src="images/navPhoto.png" alt="portfolio"/></li>
            </ul>
          </div>
        </div>
        <div id="body_wrap">
           <div id="body">
             <div id="top_row">
                <div id="left_column">Headline copy in white, bold font goes here.</div>
                <div id="right_column"><a href="portfolio.html"><img src="images/rowPhotos.png" alt="portfolio" /></a></div>
             </div>
             <div id="bottom_row">Content for  id "bottom_row" Goes Here</div>
             <div id="footer">Content for  id "footer" Goes Here</div>
           <div></div>
      </div>
      </body>
      </html>

       

      @charset "utf-8";
      /* CSS Document */

       

      #container {
          width: 1100px;
          background: #fff;
          margin: 0px auto;
          padding-left: 0px;
          padding-right: 0px;
          overflow: hidden;
      }

       

      /* HEADER */

       

      #header_wrap {
          margin: 0px;
          padding: 20px 0px 0px 0px;
          background-color: #000;
      }

       

      #header {
          background-color: #000;
      }

       

      /* NAVIGATION BAR */

       

      #nav_wrap {
          height: 40px;
          background-image: url(../images/nav_bar.jpg);
          background-position: bottom;
          background-repeat: repeat-x;
          overflow: hidden;
      }

       

      #mainNav {
          margin: 0px;
          padding: 0px;
      }
         
      #mainNav li{
          margin: 0px;
          padding: 0px 0px 0px 0px;
          float: left;
          list-style: none;
      }

       

      #mainNav a {
          float: left;
          display: block;
          border: none;
      }

       

      #body_wrap {
          margin: 0px;
          padding: 0px 0px 0px 0px;
          background-image: url(../images/bg-gradient.jpg);
          background-position: left bottom;
          background-repeat: repeat-x;
          overflow: hidden;
      }

       

      body {
          margin: 0;
          padding: 0;
          background-color: #333;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          color: #ccc;
      }
         
      #left_column {
          margin: 0px;
          padding: 0px 0px 0px 0px;
      }

       

      #right_column {
          margin: 0px;
          padding: 0px 0xp 0px 0px;
          float: right;
      }

        • 1. Re: Nesting?
          Nancy OShea Adobe Community Professional & MVP

          Start by fixing your HTML code errors.  Too many opening or closing tags can throw things off quite a bit.

          http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.billyraygun.com%2Fbrd%2F

           

          And you've got one slight CSS error shown below:

          http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. billyraygun.com%2Fbrd%2F

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Nesting?
            William-01 Level 1

            Hi Nancy

             

            Thanks for your help and link to the Validation Service.  However, I apologize because I don't understand what you mean by having  too many open and closing tags.

             

            I'm also confused by some of the results that were  generated.

             

            Other than needing a space after my alt tag  i.e.  <img src="image.jpg" alt="image" /> it seems the other  errors suggested by the W3C compared to my HTML were if fact correct.  For example, when it suggested a closing tag for the body, I already had  one.

             

            Anyway, I used HTML Tidy to and cut and pasted it  into DW. In terms of the page layout, nothing really changed. But the  W3C validated my code successfully.

             

            Why is this? Could  validation be a success simply from fixing the img src html like the example above? Other than that, I didn't make very many changes.

             

            One minor CSS fix other than the padding issue is that I but by body bg gradient position to top left. This push it up towards the navBar, and pulled down my image overlapping it, giving me the change to align the rest of the image. It did however, put a solid white line down at the bottom which I will figure out later.

             

            In the interim, any thoughts about the HTML validation?

            • 3. Re: Nesting?
              LonelyDead Level 1

              Your leftcolumn is stopping your image

              sitting with the image on your nav

              because you haven't givin it a width in your css

              so it takes up right across the page

               

              Daniel

              • 4. Re: Nesting?
                LonelyDead Level 1

                The reason you have a solid white line at the bottom of your site

                is quite simple, its because your container background is white

                and the gradient image you use isn't tall enough to cover it,

                change your container background to the same grey you use at

                the end of your gradient

                 

                Daniel

                • 5. Re: Nesting?
                  LonelyDead Level 1

                  About your left column,

                  if your container is 1100px wide,

                  your right column is say 400px wide,

                  then you should make your left column

                  700px wide or less and float it left

                   

                  Daniel

                  • 6. Re: Nesting?
                    William-01 Level 1

                    Daniel

                     

                    Thanks for all your help. I'm starting to figure things out. Slowly. It seems I get one challenge resolved, and then faced with another. Part of my confusion is with Dreamweaver showing a correct solution in Live View mode, incorrect in Design mode and of course, a different result when tested in a browswer.


                    For a new guy, it's hard to know where to start problem solving when three different preview modes show a different result.  Anyway, you can see my images are starting to align properly, but not 100% there yet.

                     

                    http://www.billyraygun.com/brd/

                     

                    I have each column set to 500px with my container set to 1000px. To be safe, I added width and height values to my img src within my navBar thinking browsers would need this additional information to display properly. Not working.

                     

                    This is close, but I'm not sure what the problem is because total width of all images and columns is no more than 1000px.

                     

                    william-01

                    • 7. Re: Nesting?
                      William-01 Level 1

                      Here is a screen shot of Dreamweavers live view.  http://www.billyraygun.com/brd/ScreenShot.jpg

                       

                      Other than the navBar pushing away from the Brand Managers, and the few pixels to the right of the photos, things line up pretty well.

                       

                      William-01

                      • 8. Re: Nesting?
                        LonelyDead Level 1

                        First thing i'll point out is that you need to put border 0px on the portfolio pics with the blue border around it

                        and the same for the buttons on your navigation

                        Daniel

                        • 9. Re: Nesting?
                          LonelyDead Level 1

                          Getting rid of the borders might align everything the way you expect

                           

                          Daniel

                          • 10. Re: Nesting?
                            LonelyDead Level 1

                            You should start your navigation bar over agian, in dreamweaver go to insert>common>images:navigation bar,
                            then you add your images, rollover images if you want them and links in the popup that appears.

                            • 11. Re: Nesting?
                              William-01 Level 1

                              It took me a little while to familiarize myself with how to control layouts with CSS. And also the in's and out's of Dreamweaver more, but the results are coming along nicely.

                               

                              http://www.billyraygun.com/brd/

                               

                              I appreciate everyones help.